From 588bf59b88e36ff9cd2ebb9c8489f413e8801885 Mon Sep 17 00:00:00 2001
From: Ethan Dalool <git@voussoir.net>
Date: Sun, 21 Oct 2018 18:46:27 -0700
Subject: [PATCH] Variety of html, css, jinja tweaks.

- 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.
---
 .../etiquette_flask/static/css/common.css     | 40 ++++++++-
 .../etiquette_flask/static/css/photo_card.css | 15 ++--
 .../etiquette_flask/templates/album.html      | 11 ++-
 .../etiquette_flask/templates/clipboard.html  | 73 +++++++++++----
 .../etiquette_flask/templates/login.html      | 11 +--
 .../etiquette_flask/templates/photo.html      | 59 +++++-------
 .../etiquette_flask/templates/search.html     | 89 +++++++++----------
 frontends/etiquette_flask/templates/tags.html | 19 ++--
 8 files changed, 184 insertions(+), 133 deletions(-)

diff --git a/frontends/etiquette_flask/static/css/common.css b/frontends/etiquette_flask/static/css/common.css
index b677c2c..7e90be7 100644
--- a/frontends/etiquette_flask/static/css/common.css
+++ b/frontends/etiquette_flask/static/css/common.css
@@ -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;
diff --git a/frontends/etiquette_flask/static/css/photo_card.css b/frontends/etiquette_flask/static/css/photo_card.css
index 95b52d6..4c8289c 100644
--- a/frontends/etiquette_flask/static/css/photo_card.css
+++ b/frontends/etiquette_flask/static/css/photo_card.css
@@ -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
 {
diff --git a/frontends/etiquette_flask/templates/album.html b/frontends/etiquette_flask/templates/album.html
index 1765c78..2888b0e 100644
--- a/frontends/etiquette_flask/templates/album.html
+++ b/frontends/etiquette_flask/templates/album.html
@@ -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 -->
diff --git a/frontends/etiquette_flask/templates/clipboard.html b/frontends/etiquette_flask/templates/clipboard.html
index 4281193..a17e841 100644
--- a/frontends/etiquette_flask/templates/clipboard.html
+++ b/frontends/etiquette_flask/templates/clipboard.html
@@ -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>
 
 
diff --git a/frontends/etiquette_flask/templates/login.html b/frontends/etiquette_flask/templates/login.html
index a84681a..293f394 100644
--- a/frontends/etiquette_flask/templates/login.html
+++ b/frontends/etiquette_flask/templates/login.html
@@ -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)
 {
diff --git a/frontends/etiquette_flask/templates/photo.html b/frontends/etiquette_flask/templates/photo.html
index 1808002..a6e3266 100644
--- a/frontends/etiquette_flask/templates/photo.html
+++ b/frontends/etiquette_flask/templates/photo.html
@@ -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">
diff --git a/frontends/etiquette_flask/templates/search.html b/frontends/etiquette_flask/templates/search.html
index 6c6a789..5fb4839 100644
--- a/frontends/etiquette_flask/templates/search.html
+++ b/frontends/etiquette_flask/templates/search.html
@@ -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>
+                <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(
-                    tag,
-                    extra_classes="tags_on_this_page",
-                    link='void',
-                    with_alt_description=True,
-                )-}}</li>
+            <li>{{tag_object.tag_object(
+                tag,
+                extra_classes="tags_on_this_page",
+                link='void',
+                with_alt_description=True,
+            )}}</li>
             {% endfor %}
         </ul>
         {% endif %}
diff --git a/frontends/etiquette_flask/templates/tags.html b/frontends/etiquette_flask/templates/tags.html
index df78ff0..c11ff64 100644
--- a/frontends/etiquette_flask/templates/tags.html
+++ b/frontends/etiquette_flask/templates/tags.html
@@ -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>