voussoir/etiquette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Variety of html, css, jinja tweaks.

Browse source 
- common.css, removed html and body margins so that using
  full height #content_body will not create a scrollbar.
  Simplifies the "fill remaining space" construct I use a lot.
  Added more css variables, I'm thinking about future theming.
- photo_card.css, slightly heightened to improve name clipping.
- clipboard.html, added a small screen mode.
- login.html, centered the boxes and fixed message area being
  too small due to a previous change.
- search.html, simplified some conditional texts.
This commit is contained in:
voussoir 2018-10-21 18:46:27 -07:00
parent b6890bfd2c
commit 588bf59b88
8 changed files with 184 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
frontends/etiquette_flask/static/css/common.css
View file

@ -17,10 +17,34 @@ Organization:
--color_site_secondary: #ffffd4;
--color_site_transparency: rgba(0, 0, 0, 0.1);
--color_site_dropshadow: rgba(0, 0, 0, 0.25);
--color_text_normal: black;
--color_text_link: blue;
--color_text_placeholder: gray;
--color_3d_shadow: rgba(0, 0, 0, 0.5);
--color_3d_highlight: rgba(255, 255, 255, 0.5);
}
html
{
height: 100vh;
}
body
{
height: 100%;
margin: 0;
}
* { color: var(--color_text_normal); }
a { color: var(--color_text_link); }
input::placeholder
{
color: var(--color_text_placeholder);
opacity: 1;
}
body
{
display: grid;
@ -31,6 +55,7 @@ body
background-color: var(--color_site_theme);
}
#header
{
grid-area: header;
@ -38,7 +63,7 @@ body
grid-template-columns: 1fr 1fr 1fr 1fr auto;
grid-template-rows: auto;
margin-bottom: 4px;
margin: 8px;
background-color: var(--color_site_transparency);
}
@ -46,11 +71,16 @@ body
{
grid-area: content_body;
display: grid;
grid-auto-rows: min-content;
margin: 8px;
margin-top: 0;
}
#header button
{
border: 0;
cursor: pointer;
background-color: transparent;
}
.header_element
{
@ -79,6 +109,11 @@ pre
display: none !important;
}
button,
button *
{
color: black;
}
.gray_button
{
background-color: #cccccc;
@ -143,9 +178,12 @@ is hovered over.
.tag_object
{
border-radius: 2px;
padding-left: 1px;
padding-right: 1px;
background-color: #fff;
color: blue;
font-size: 0.9em;
text-decoration: none;
font-family: monospace;

15
frontends/etiquette_flask/static/css/photo_card.css
View file

@ -27,15 +27,14 @@
position: relative;
display: inline-grid;
vertical-align: top;
grid-template-columns: auto auto;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"thumbnail thumbnail"
"filename filename"
"tags metadata";
grid-template:
"thumbnail thumbnail" auto
"filename filename" 1fr
"tags metadata" auto
/auto auto;
min-width: 150px;
max-width: 300px;
height: 200px;
height: 210px;
padding: 8px;
margin: 8px;
@ -75,7 +74,6 @@
justify-self: start;
grid-area: filename;
z-index: 1;
overflow: hidden;
min-width: 100%;
@ -98,6 +96,7 @@
{
overflow: visible;
max-height: none;
z-index: 1;
}
.photo_card_tags
{

11
frontends/etiquette_flask/templates/album.html
View file

@ -94,6 +94,13 @@ li:hover .remove_child_button
{
display: initial;
}
#photo_list
{
padding-left: 40px;
padding-top: 10px;
padding-bottom: 10px;
}
</style>
</head>
@ -188,11 +195,11 @@ li:hover .remove_child_button
{% else %}
<a href="?view=grid">Grid view</a>
{% endif %}
<ul>
<div id="photo_list">
{% for photo in photos %}
{{photo_card.create_photo_card(photo, view=view)}}
{% endfor %}
</ul>
</div>
{% endif %}
<!-- Download links -->

73
frontends/etiquette_flask/templates/clipboard.html
View file

@ -16,14 +16,12 @@
<script src="/static/js/tag_autocomplete.js"></script>
<style>
body
#content_body
{
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 1fr 300px;
grid-template-areas:
"header header"
"left right";
grid-template:
"left right" 1fr
/1fr 300px;
}
#header
{
@ -39,58 +37,100 @@ body
position: fixed;
right: 8px;
bottom: 8px;
top: 30px;
top: 34px;
width: 300px;
grid-area: right;
display: grid;
grid-template-rows: 75px 75px 75px 75px 75px auto;
grid-template-areas:
grid-template:
"add_tag_area"
"remove_tag_area"
"refresh_metadata_area"
"searchhidden_area"
"download_zip_area"
"message_area";
"message_area" 1fr;
background-color: var(--color_site_transparency);
}
#right > *
{
display: flex;
padding: 8px;
}
#right button
{
flex: 1;
}
#add_tag_area
{
grid-area: add_tag_area;
margin: auto;
}
#remove_tag_area
{
grid-area: remove_tag_area;
margin: auto;
}
#add_tag_area input,
#remove_tag_area input
{
flex: 1;
}
#add_tag_area button,
#remove_tag_area button
{
flex: initial;
}
#refresh_metadata_area
{
grid-area: refresh_metadata_area;
margin: auto;
}
#searchhidden_area
{
grid-area: searchhidden_area;
margin: auto;
}
#download_zip_area
{
grid-area: download_zip_area;
margin: auto;
}
#message_area
{
grid-area: message_area;
margin: 8px;
}
@media screen and (max-width: 800px)
{
#content_body
{
grid-template:
"left" 1fr
"right" 200px;
}
#right
{
top: unset;
width: unset;
left: 8px;
right: 8px;
bottom: 8px;
height: 200px;
grid-template:
"add_tag_area message_area"
"remove_tag_area message_area"
"refresh_metadata_area message_area"
"searchhidden_area message_area"
"download_zip_area message_area"
"extra message_area" 1fr
/1fr minmax(50px, 200px);
}
}
</style>
</head>
<body>
{{header.make_header(session=session)}}
<div id="content_body">
<div id="left">
<span>The clipboard contains <span class="clipboard_count">0</span> items.</span>
<button id="clear_clipboard_button" class="red_button" onclick="photo_clipboard.clear_clipboard()">Clear it.</button>
@ -113,10 +153,8 @@ body
</div>
<div id="searchhidden_area">
<span>
<button class="yellow_button" id="set_searchhidden_button" onclick="set_searchhidden_form()">Searchhide</button>
<button class="yellow_button" id="unset_searchhidden_button" onclick="unset_searchhidden_form()">Unhide</button>
</span>
</div>
<div id="download_zip_area">
@ -126,6 +164,7 @@ body
<div id="message_area">
</div>
</div>
</div>
</body>

11
frontends/etiquette_flask/templates/login.html
View file

@ -21,15 +21,8 @@ button
#content_body
{
display: flex;
flex: 1 1 auto;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 900px;
margin-left: auto;
margin-right: auto;
margin: auto;
}
#login_register_box
@ -60,7 +53,7 @@ button
#message_area
{
width: 100%;
max-height: 300px;
height: 150px;
}
@media screen and (max-width: 800px)
{

59
frontends/etiquette_flask/templates/photo.html
View file

@ -27,49 +27,43 @@ body
flex-direction: row;
}
#left
{
display: flex;
flex-direction: column;
}
#right
{
display: flex;
flex: 1;
}
#editor_holder
{
display: flex;
flex-direction: column;
min-height: min-content;
max-width: 300px;
/*padding: 8px;*/
background-color: var(--color_site_transparency);
}
#right
{
flex: 1;
display: flex;
}
#editor_area
{
flex: 3;
padding: 8px;
background-color: var(--color_site_transparency);
word-wrap: break-word;
}
#message_area_bg
#refresh_metadata_button
{
display: flex;
flex: 0 1 100%;
height: 100%;
min-height: 30px;
padding: 8px;
background-color: var(--color_site_transparency);
font-size: 11px;
}
#before_after_links
{
width: max-content;
margin: auto;
}
#message_area
{
flex: auto;
display: flex;
min-height: 30px;
max-height: none;
margin: 8px;
}
.photo_viewer
{
@ -112,10 +106,6 @@ body
width: 100%;
overflow: hidden;
}
#refresh_metadata_button
{
font-size: 11px;
}
@media screen and (max-width: 800px)
{
#content_body
@ -141,13 +131,9 @@ body
#right
{
flex: none;
height: calc(100% - 20px);
}
#editor_holder
{
display: flex;
flex-direction: row;
max-width: none;
height: calc(100% - 20px);
}
#message_area
{
@ -164,7 +150,6 @@ body
{{header.make_header(session=session)}}
<div id="content_body">
<div id="left">
<div id="editor_holder">
<div id="editor_area">
<!-- TAG INFO -->
<h4>Tags</h4>
@ -224,17 +209,13 @@ body
</ul>
{% endif %}
<div>
<div id="before_after_links">
<a href="/search?created=-{{photo.created}}">&larr;Before</a>
<span> | </span>
<a href="/search?created={{photo.created}}-&orderby=created-asc">After&rarr;</a>
</div>
</div>
<div id="message_area_bg">
<div id="message_area">
</div>
</div>
</div>
<div id="message_area"></div>
</div>
<div id="right">

79
frontends/etiquette_flask/templates/search.html
View file

@ -29,8 +29,8 @@ form
#content_body
{
grid-template:
"error_message_area error_message_area"
"left right"
"error_message_area error_message_area" auto
"left right" 1fr
/ 300px 1fr;
}
#error_message_area
@ -138,19 +138,19 @@ form
{% macro create_orderby_li(selected_column, selected_sorter) %}
<li class="search_builder_orderby_li">
<select>
<option value="created" {%if selected_column=="created"%}selected{%endif%} >Creation date</option>
<option value="area" {%if selected_column=="area"%}selected{%endif%} >Area</option>
<option value="width" {%if selected_column=="width"%}selected{%endif%} >Width</option>
<option value="height" {%if selected_column=="height"%}selected{%endif%} >Height</option>
<option value="ratio" {%if selected_column=="ratio"%}selected{%endif%} >Aspect Ratio</option>
<option value="bytes" {%if selected_column=="bytes"%}selected{%endif%} >File size</option>
<option value="duration" {%if selected_column=="duration"%}selected{%endif%} >Duration</option>
<option value="tagged_at" {%if selected_column=="tagged_at"%}selected{%endif%}>Recently tagged</option>
<option value="random" {%if selected_column=="random"%}selected{%endif%} >Random</option>
<option value="created" {{"selected" if selected_column=="created" else ""}} >Creation date</option>
<option value="area" {{"selected" if selected_column=="area" else ""}} >Area</option>
<option value="width" {{"selected" if selected_column=="width" else ""}} >Width</option>
<option value="height" {{"selected" if selected_column=="height" else ""}} >Height</option>
<option value="ratio" {{"selected" if selected_column=="ratio" else ""}} >Aspect Ratio</option>
<option value="bytes" {{"selected" if selected_column=="bytes" else ""}} >File size</option>
<option value="duration" {{"selected" if selected_column=="duration" else ""}} >Duration</option>
<option value="tagged_at" {{"selected" if selected_column=="tagged_at" else ""}} >Recently tagged</option>
<option value="random" {{"selected" if selected_column=="random" else ""}} >Random</option>
</select>
<select>
<option value="desc" {%if selected_sorter=="desc"%}selected{%endif%} >Descending</option>
<option value="asc" {%if selected_sorter=="asc"%}selected{%endif%} >Ascending</option>
<option value="desc" {{"selected" if selected_sorter=="desc" else ""}} >Descending</option>
<option value="asc" {{"selected" if selected_sorter=="asc" else ""}} >Ascending</option>
</select>
<button class="remove_tag_button_perm red_button" onclick="orderby_remove_hook(this);"></button>
</li>
@ -212,84 +212,81 @@ form
<span>Min-max values</span>
<input type="text" class="basic_param"
value="{%if search_kwargs['area']%}{{search_kwargs['area']}}{%endif%}"
{%if search_kwargs['area']%} value="{{search_kwargs['area']}}" {%endif%}
name="area" placeholder="Area: 1m-2m">
<input type="text" class="basic_param"
value="{%if search_kwargs['width']%}{{search_kwargs['width']}}{%endif%}"
{%if search_kwargs['width']%} value="{{search_kwargs['width']}}" {%endif%}
name="width" placeholder="Width: 1k-2k">
<input type="text" class="basic_param"
value="{%if search_kwargs['height']%}{{search_kwargs['height']}}{%endif%}"
{%if search_kwargs['height']%} value="{{search_kwargs['height']}}" {%endif%}
name="height" placeholder="Height: 1k-2k">
<input type="text" class="basic_param"
value="{%if search_kwargs['ratio']%}{{search_kwargs['ratio']}}{%endif%}"
{%if search_kwargs['ratio']%} value="{{search_kwargs['ratio']}}" {%endif%}
name="ratio" placeholder="Aspect Ratio: 1.7-2">
<input type="text" class="basic_param"
value="{%if search_kwargs['bytes']%}{{search_kwargs['bytes']}}{%endif%}"
{%if search_kwargs['bytes']%} value="{{search_kwargs['bytes']}}" {%endif%}
name="bytes" placeholder="File Size: 1mb-2mb">
<input type="text" class="basic_param"
value="{%if search_kwargs['duration']%}{{search_kwargs['duration']}}{%endif%}"
{%if search_kwargs['duration']%} value="{{search_kwargs['duration']}}" {%endif%}
name="duration" placeholder="Duration: 10:00-20:00">
<input type="text" class="basic_param"
value="{%if search_kwargs['created']%}{{search_kwargs['created']}}{%endif%}"
{%if search_kwargs['created']%} value="{{search_kwargs['created']}}" {%endif%}
name="created" placeholder="Created: 1483228800-1514764800">
<br>
<span>Other filters</span>
<input type="text" class="basic_param"
value="{%if search_kwargs['filename']%}{{search_kwargs['filename']}}{%endif%}"
{%if search_kwargs['filename']%} value="{{search_kwargs['filename']}}" {%endif%}
name="filename" placeholder="Filename">
<input type="text" class="basic_param"
value="{%if search_kwargs['mimetype']%}{{search_kwargs['mimetype']}}{%endif%}"
{%if search_kwargs['mimetype']%} value="{{search_kwargs['mimetype']}}" {%endif%}
name="mimetype" placeholder="Mimetype(s)">
<input type="text" class="basic_param"
value="{%if search_kwargs['extension']%}{{search_kwargs['extension']}}{%endif%}"
{%if search_kwargs['extension']%} value="{{search_kwargs['extension']}}" {%endif%}
name="extension" placeholder="Extension(s)">
<input type="text" class="basic_param"
value="{%if search_kwargs['extension_not']%}{{search_kwargs['extension_not']}}{%endif%}"
{%if search_kwargs['extension_not']%} value="{{search_kwargs['extension_not']}}" {%endif%}
name="extension_not" placeholder="Forbid extension(s)">
<input type="text" class="basic_param"
value="{%if search_kwargs['author']%}{{search_kwargs['author']}}{%endif%}"
{%if search_kwargs['author']%} value="{{search_kwargs['author']}}" {%endif%}
name="author" placeholder="Author">
<select name="limit" class="basic_param">
{% set limit_options = [20, 50, 100] %}
{% set limit_options = [20, 50, 100, 250] %}
{% if search_kwargs['limit'] not in limit_options %}
{% do limit_options.append(search_kwargs['limit']) %}
{% do limit_options.sort() %}
{% endif %}
{% for limit_option in limit_options %}
<option{{-' '-}}
value="{{limit_option}}"{{-''-}}
{{-" selected" if search_kwargs['limit'] == limit_option else ""-}}
>
{{- limit_option }} items{{-''-}}
<option value="{{limit_option}}" {{"selected" if search_kwargs['limit'] == limit_option else ""}}>
{{- limit_option }} items{{''-}}
</option>
{% endfor %}
</select>
<select name="has_tags" class="basic_param">
<option value="" {%if search_kwargs['has_tags'] == None %}selected{%endif%}>Tagged and untagged</option>
<option value="yes"{%if search_kwargs['has_tags'] == True %}selected{%endif%}>Tagged only</option>
<option value="no" {%if search_kwargs['has_tags'] == False %}selected{%endif%}>Untagged only</option>
<option value="" {{"selected" if search_kwargs['has_tags']==None else ""}}>Tagged and untagged</option>
<option value="yes" {{"selected" if search_kwargs['has_tags']==True else ""}}>Tagged only</option>
<option value="no" {{"selected" if search_kwargs['has_tags']==False else ""}}>Untagged only</option>
</select>
<select name="has_thumbnail" class="basic_param">
<option value="" {%if search_kwargs['has_thumbnail'] == None %}selected{%endif%}>Thumbnail doesn't matter</option>
<option value="yes"{%if search_kwargs['has_thumbnail'] == True %}selected{%endif%}>Has thumbnail</option>
<option value="no" {%if search_kwargs['has_thumbnail'] == False %}selected{%endif%}>No thumbnail</option>
<option value="" {{"selected" if search_kwargs['has_thumbnail']==None else ""}}>Thumbnail doesn't matter</option>
<option value="yes" {{"selected" if search_kwargs['has_thumbnail']==True else ""}}>Has thumbnail</option>
<option value="no" {{"selected" if search_kwargs['has_thumbnail']==False else ""}}>No thumbnail</option>
</select>
<select name="view" class="basic_param">
<option value="grid" {%if search_kwargs['view'] == "grid" %}selected{%endif%}>Grid</option>
<option value="list" {%if search_kwargs['view'] == "list" %}selected{%endif%}>List</option>
<option value="grid" {{"selected" if search_kwargs['view']=="grid" else ""}}>Grid</option>
<option value="list" {{"selected" if search_kwargs['view']=="list" else ""}}>List</option>
</select>
<button type="submit" id="search_go_button" class="green_button" value="">Search</button>
</form>
@ -297,12 +294,12 @@ form
<span>Tags on this page (click to join query):</span>
<ul>
{% for tag in total_tags %}
<li>{{-tag_object.tag_object(
<li>{{tag_object.tag_object(
tag,
extra_classes="tags_on_this_page",
link='void',
with_alt_description=True,
)-}}</li>
)}}</li>
{% endfor %}
</ul>
{% endif %}

19
frontends/etiquette_flask/templates/tags.html
View file

@ -22,7 +22,6 @@
}
#content_body
{
display: grid;
grid-template:
"left right"
/1fr 300px;
@ -41,15 +40,14 @@
position: fixed;
right: 8px;
bottom: 8px;
top: 30px;
top: 34px;
width: 300px;
grid-area: right;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"editor_area"
"message_area";
grid-template:
"editor_area" 1fr
"message_area" 1fr;
background-color: var(--color_site_transparency);
}
@ -87,10 +85,9 @@
bottom: 8px;
height: 150px;
grid-template-areas:
"editor_area message_area";
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr;
grid-template:
"editor_area message_area" 1fr
/1fr minmax(50px, 200px);
}
}
</style>
@ -194,7 +191,7 @@
<div id="right">
<div id="editor_area">
<input type="text" id="add_tag_textbox" autofocus>
<button class="add_tag_button green_button" id="add_tag_button" onclick="easybake_form();">add</button>
<button class="add_tag_button green_button" id="add_tag_button" onclick="easybake_form();">bake</button>
</div>
<div id="message_area">
</div>