okay this now works with bootstrap 5, I dont love the sz buttons / mixed black and white hover text needs love - probably own class with own styles, but I dont want to hard-code info color, need to work out how to do style / css using the right bs variable for info color
This commit is contained in:
@@ -18,10 +18,10 @@
|
||||
{% if search_term is defined %}
|
||||
<input type="hidden" name="term" id="view_term" value="{{search_term}}">
|
||||
{% endif %}
|
||||
<div class="row mb-2">
|
||||
<div class="d-flex row mb-2">
|
||||
{% if folders %}
|
||||
<div class="mx-3 my-auto">
|
||||
<span class="alert alert-primary">
|
||||
<div class="my-auto col">
|
||||
<span class="alert alert-primary py-2">
|
||||
{% if "files_ip" in request.url %}
|
||||
<i class="fas fa-file-upload"></i>
|
||||
{% set tmp_path=cwd | replace( "static/Import", "" ) + "/" %}
|
||||
@@ -35,79 +35,73 @@
|
||||
{{tmp_path}}</span>
|
||||
</div class="col my-auto">
|
||||
{% endif %}
|
||||
<div class="px-0 input-group col-lg-4">
|
||||
{{CreateSelect( "noo", noo, ["Oldest", "Newest","A to Z", "Z to A"], "$('#offset').val(0)")|safe }}
|
||||
<div class="col">
|
||||
<div class="input-group">
|
||||
{{CreateSelect( "noo", noo, ["Oldest", "Newest","A to Z", "Z to A"], "$('#offset').val(0)", "rounded-start")|safe }}
|
||||
{{CreateSelect( "how_many", how_many, ["10", "25", "50", "75", "100", "150", "200", "500"])|safe }}
|
||||
{% if folders %}
|
||||
<input type="hidden" name="grouping" id="grouping" value="{{grouping}}">
|
||||
{{CreateFoldersSelect( folders )|safe }}
|
||||
{% else %}
|
||||
{{CreateFoldersSelect( folders )|safe }}
|
||||
<span style="border:0" class="sm-txt my-auto btn btn-outline-info disabled">grouped by:</span>
|
||||
{{CreateSelect( "grouping", grouping, ["None", "Day", "Week", "Month"])|safe }}
|
||||
<span class="sm-txt my-auto btn btn-outline-info disabled border-top border-bottom">grouped by:</span>
|
||||
{{CreateSelect( "grouping", grouping, ["None", "Day", "Week", "Month"], "", "rounded-end")|safe }}
|
||||
{% endif %}
|
||||
</div class="input-group">
|
||||
</div class="input-group">
|
||||
</div class="col">
|
||||
{% if search_term is defined %}
|
||||
<div class="col my-auto">
|
||||
<span class="alert alert-primary">Searched for: '{{search_term}}'</span>
|
||||
<span class="alert alert-primary p-2">Searched for: '{{search_term}}'</span>
|
||||
</div class="col my-auto">
|
||||
{% endif %}
|
||||
<div class="col my-auto d-flex justify-content-end">
|
||||
<button id="prev" name="prev" class="prev sm-txt btn btn-info"><i class="fas fa-arrow-alt-circle-left"></i></button>
|
||||
<div class="col flex-grow-1 my-auto d-flex justify-content-center w-100">
|
||||
<button id="prev" name="prev" class="prev sm-txt btn btn-outline-secondary"><i class="fas fa-arrow-alt-circle-left"></i></button>
|
||||
<span class="sm-txt my-auto"> {{how_many}} files </span>
|
||||
<button id="next" name="next" class="next sm-txt btn btn-info"><i class="fas fa-arrow-alt-circle-right"></i></button>
|
||||
<button id="move" disabled name="move" class="sm-txt btn btn-primary ml-4" onClick="MoveDBox(); return false;"><i class="fas fa-folder-plus"></i></button>
|
||||
<button id="next" name="next" class="next sm-txt btn btn-outline-secondary"><i class="fas fa-arrow-alt-circle-right"></i></button>
|
||||
<button id="move" disabled name="move" class="sm-txt btn btn-outline-primary ms-4" onClick="MoveDBox(); return false;"><i class="fas fa-folder-plus"></i></button>
|
||||
{% if "files_rbp" in request.url %}
|
||||
<button id="del" disabled name="del" class="sm-txt btn btn-success mx-1" onClick="DelDBox('Restore'); return false;">
|
||||
<button id="del" disabled name="del" class="sm-txt btn btn-outline-success mx-1" onClick="DelDBox('Restore'); return false;">
|
||||
<i class="fas fa-trash-restore-alt"></i>
|
||||
{% else %}
|
||||
<button id="del" disabled name="del" class="sm-txt btn btn-danger mx-1" onClick="DelDBox('Delete'); return false;">
|
||||
<button id="del" disabled name="del" class="sm-txt btn btn-outline-danger mx-1" onClick="DelDBox('Delete'); return false;">
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
{% endif %}
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-0 input-group col justify-content-end">
|
||||
<div class="d-flex col justify-content-end">
|
||||
<div class="btn-group">
|
||||
{% if size == "64" %}
|
||||
{% set bt="btn-info" %}
|
||||
{% set bt="btn-info text-white" %}
|
||||
{% else %}
|
||||
{% set bt="btn-outline-info" %}
|
||||
{% endif %}
|
||||
<div class="input-group-prepend">
|
||||
<button id="64" style="width:98%" class="sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,64); return false;">XS</button>
|
||||
</div>
|
||||
<button id="64" class="px-2 sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,64); return false;">XS</button>
|
||||
{% if size == "96" %}
|
||||
{% set bt="btn-info" %}
|
||||
{% set bt="btn-info text-white" %}
|
||||
{% else %}
|
||||
{% set bt="btn-outline-info" %}
|
||||
{% endif %}
|
||||
<div class="input-group-append">
|
||||
<button id="96" class="sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,96); return false;">S</button>
|
||||
</div>
|
||||
<button id="96" class="px-2 sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,96); return false;">S</button>
|
||||
{% if size == "128" %}
|
||||
{% set bt="btn-info" %}
|
||||
{% set bt="btn-info text-white" %}
|
||||
{% else %}
|
||||
{% set bt="btn-outline-info" %}
|
||||
{% endif %}
|
||||
<div class="input-group-append">
|
||||
<button id="128" class="sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,128); return false;">M</button>
|
||||
</div>
|
||||
<button id="128" class="px-2 sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,128); return false;">M</button>
|
||||
{% if size == "192" %}
|
||||
{% set bt="btn-info" %}
|
||||
{% set bt="btn-info text-white" %}
|
||||
{% else %}
|
||||
{% set bt="btn-outline-info" %}
|
||||
{% endif %}
|
||||
<div class="input-group-append">
|
||||
<button id="192" class="sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,192); return false;">L</button>
|
||||
</div>
|
||||
<button id="192" class="px-2 sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,192); return false;">L</button>
|
||||
{% if size == "256" %}
|
||||
{% set bt="btn-info" %}
|
||||
{% set bt="btn-info text-white" %}
|
||||
{% else %}
|
||||
{% set bt="btn-outline-info" %}
|
||||
{% endif %}
|
||||
<div class="input-group-append">
|
||||
<button id="256" class="sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,256); return false;">XL</button>
|
||||
</div>
|
||||
</div class="input-group">
|
||||
<button id="256" class="px-2 sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,256); return false;">XL</button>
|
||||
</div class="btn-group">
|
||||
</div class="col">
|
||||
<input id="offset" type="hidden" name="offset" value="{{offset}}">
|
||||
<input id="size" type="hidden" name="size" value="{{size}}">
|
||||
</div class="form-row">
|
||||
@@ -121,15 +115,13 @@
|
||||
<input name="eids" id="eids" type="hidden" value="{{eids.str}}">
|
||||
</form>
|
||||
|
||||
{% set last = namespace(printed=0) %}
|
||||
{% if folders or grouping == "None" %}
|
||||
<div class="row pl-3">
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% set last = namespace(printed=0) %}
|
||||
{# rare event of empty folder, still need to show back button #}
|
||||
{% if folders and entry_data|length == 0 %}
|
||||
{% if cwd != root %}
|
||||
<figure class="px-1 dir entry" ecnt="1" dir="{{cwd|ParentPath}}" type="Directory">
|
||||
<figure class="dir entry ms-1" ecnt="1" dir="{{cwd|ParentPath}}" type="Directory">
|
||||
<span style="font-size:{{(size|int-22)/2}}px" class="fa-stack">
|
||||
<i style="color:grey" class="fas fa-folder fa-stack-2x"></i>
|
||||
<i class="fas fa-level-up-alt fa-flip-horizontal fa-stack-1x fa-inverse"></i>
|
||||
@@ -138,7 +130,7 @@
|
||||
</figure class="figure">
|
||||
{% else %}
|
||||
{# create an even lighter-grey, unclickable back button - so folders dont jump around when you go into them #}
|
||||
<span style="font-size:{{(size|int-22)/2}}px" class="mx-1 fa-stack">
|
||||
<span style="font-size:{{(size|int-22)/2}}px" class="fa-stack">
|
||||
<i style="color:lightgrey" class="fas fa-folder fa-stack-2x"></i>
|
||||
<i class="fas fa-level-up-alt fa-flip-horizontal fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
@@ -147,7 +139,7 @@
|
||||
{% for obj in entry_data %}
|
||||
{% if loop.index==1 and folders %}
|
||||
{% if cwd != root %}
|
||||
<figure class="px-1 dir entry" ecnt="{{loop.index}}" dir="{{cwd|ParentPath}}" type="Directory">
|
||||
<figure class="dir entry ms-1" ecnt="{{loop.index}}" dir="{{cwd|ParentPath}}" type="Directory">
|
||||
<span style="font-size:{{(size|int-22)/2}}px" class="fa-stack">
|
||||
<i style="color:grey" class="fas fa-folder fa-stack-2x"></i>
|
||||
<i class="fas fa-level-up-alt fa-flip-horizontal fa-stack-1x fa-inverse"></i>
|
||||
@@ -156,7 +148,7 @@
|
||||
</figure class="figure">
|
||||
{% else %}
|
||||
{# create an even lighter-grey, unclickable back button - so folders dont jump around when you go into them #}
|
||||
<span style="font-size:{{(size|int-22)/2}}px" class="mx-1 fa-stack">
|
||||
<span style="font-size:{{(size|int-22)/2}}px" class="fa-stack">
|
||||
<i style="color:lightgrey" class="fas fa-folder fa-stack-2x"></i>
|
||||
<i class="fas fa-level-up-alt fa-flip-horizontal fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
@@ -167,35 +159,23 @@
|
||||
{% endif %}
|
||||
{% if grouping == "Day" %}
|
||||
{% if last.printed != obj.file_details.day %}
|
||||
{% if last.printed > 0 %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="row pl-3"><h6>Day: {{obj.file_details.day}} of {{obj.file_details.month}}/{{obj.file_details.year}}</h6></div>
|
||||
<div class="row pl-3">
|
||||
<div class="row ps-3"><h6>Day: {{obj.file_details.day}} of {{obj.file_details.month}}/{{obj.file_details.year}}</h6></div>
|
||||
{% set last.printed = obj.file_details.day %}
|
||||
{% endif %}
|
||||
{% elif grouping == "Week" %}
|
||||
{% if last.printed != obj.file_details.woy %}
|
||||
{% if last.printed > 0 %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="row pl-3"><h6>Week #: {{obj.file_details.woy}} of {{obj.file_details.year}}</h6></div>
|
||||
<div class="row pl-3">
|
||||
<div class="row ps-3"><h6>Week #: {{obj.file_details.woy}} of {{obj.file_details.year}}</h6></div>
|
||||
{% set last.printed = obj.file_details.woy %}
|
||||
{% endif %}
|
||||
{% elif grouping == "Month" %}
|
||||
{% if last.printed != obj.file_details.month %}
|
||||
{% if last.printed > 0 %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="row pl-3"><h6>Month: {{obj.file_details.month}} of {{obj.file_details.year}}</h6></div>
|
||||
<div class="row pl-3">
|
||||
<div class="row ps-3"><h6>Month: {{obj.file_details.month}} of {{obj.file_details.year}}</h6></div>
|
||||
{% set last.printed = obj.file_details.month %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if obj.type.name != "Directory" %}
|
||||
{% if (not folders) or ((obj.in_dir.in_path.path_prefix+'/'+obj.in_dir.rel_path+'/'+obj.name) | TopLevelFolderOf(cwd)) %}
|
||||
<figure id="{{obj.id}}" ecnt="{{loop.index}}" class="figure entry mx-1" path_type="{{obj.in_dir.in_path.type.name}}" size="{{obj.file_details.size_mb}}" hash="{{obj.file_details.hash}}" in_dir="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}" fname="{{obj.name}}" yr="{{obj.file_details.year}}" date="{{obj.file_details.year}}{{"%02d" % obj.file_details.month}}{{"%02d" % obj.file_details.day}}" pretty_date="{{obj.file_details.day}}/{{obj.file_details.month}}/{{obj.file_details.year}}" type="{{obj.type.name}}">
|
||||
<figure id="{{obj.id}}" ecnt="{{loop.index}}" class="figure entry ms-1" path_type="{{obj.in_dir.in_path.type.name}}" size="{{obj.file_details.size_mb}}" hash="{{obj.file_details.hash}}" in_dir="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}" fname="{{obj.name}}" yr="{{obj.file_details.year}}" date="{{obj.file_details.year}}{{"%02d" % obj.file_details.month}}{{"%02d" % obj.file_details.day}}" pretty_date="{{obj.file_details.day}}/{{obj.file_details.month}}/{{obj.file_details.year}}" type="{{obj.type.name}}">
|
||||
{% if obj.type.name=="Image" %}
|
||||
<div style="position:relative; width:100%">
|
||||
<a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}"><img class="thumb" height="{{size}}" src="data:image/jpeg;base64,{{obj.file_details.thumbnail}}"></img></a>
|
||||
@@ -233,7 +213,7 @@
|
||||
{% endif %}
|
||||
{# if this dir is the toplevel of the cwd, show the folder icon #}
|
||||
{% if dirname| TopLevelFolderOf(cwd) %}
|
||||
<figure class="px-1 dir entry" id={{obj.id}} ecnt={{loop.index}} dir="{{dirname}}" type="Directory">
|
||||
<figure class="dir entry ms-1" id={{obj.id}} ecnt={{loop.index}} dir="{{dirname}}" type="Directory">
|
||||
<i style="font-size:{{size|int-22}}px" class="fas fa-folder"></i>
|
||||
<figcaption class="figure-caption text-center text-wrap text-break">{{obj.name}}</figcaption>
|
||||
</figure class="figure">
|
||||
@@ -241,9 +221,6 @@
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if grouping == "None" %}
|
||||
</div class="row pl-3">
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
@@ -251,9 +228,9 @@
|
||||
<input type="hidden" name="cwd" id="cwd" value="{{cwd}}">
|
||||
<div class="row">
|
||||
<div class="col my-auto d-flex justify-content-center">
|
||||
<button onClick="$.each( $('#main_form').serializeArray() , function( index, value ) { $('#nav_form').append( '<input type=hidden name=' + value['name'] +' value='+value['value'] + '>' ); })" id="prev" name="prev" class="prev sm-txt btn btn-info"><i class="fas fa-arrow-alt-circle-left"></i></button>
|
||||
<button onClick="$.each( $('#main_form').serializeArray() , function( index, value ) { $('#nav_form').append( '<input type=hidden name=' + value['name'] +' value='+value['value'] + '>' ); })" id="prev" name="prev" class="prev sm-txt btn btn-outline-secondary"><i class="fas fa-arrow-alt-circle-left"></i></button>
|
||||
<span class="sm-txt my-auto"> {{how_many}} files </span>
|
||||
<button onClick="$.each( $('#main_form').serializeArray() , function( index, value ) { $('#nav_form').append( '<input type=hidden name=' + value['name'] +' value='+value['value'] + '>' ); });" id="next" name="next" class="next sm-txt btn btn-info"><i class="fas fa-arrow-alt-circle-right"></i></button>
|
||||
<button onClick="$.each( $('#main_form').serializeArray() , function( index, value ) { $('#nav_form').append( '<input type=hidden name=' + value['name'] +' value='+value['value'] + '>' ); });" id="next" name="next" class="next sm-txt btn btn-outline-secondary"><i class="fas fa-arrow-alt-circle-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -424,8 +401,8 @@ function MoveDBox()
|
||||
|
||||
function ChangeSize(clicked_button,sz)
|
||||
{
|
||||
$('.sz-but.btn-info').removeClass('btn-info').addClass('btn-outline-info')
|
||||
$(clicked_button).addClass('btn-info').removeClass('btn-outline-info')
|
||||
$('.sz-but.btn-info').removeClass('btn-info text-white').addClass('btn-outline-info')
|
||||
$(clicked_button).addClass('btn-info text-white').removeClass('btn-outline-info')
|
||||
$('.thumb').attr( {height: sz, style: 'font-size:'+sz+'px' } )
|
||||
$('#size').val(sz)
|
||||
sz=sz-22
|
||||
|
||||
Reference in New Issue
Block a user