From ac79183603c1fb978e4462b0ec65e544b7ffa753 Mon Sep 17 00:00:00 2001
From: Ethan Dalool <git@voussoir.net>
Date: Sun, 23 Sep 2018 15:08:39 -0700
Subject: [PATCH] Use more CSS grid on body and content_body.

I learned that grid-template lets you specify row and col
sizes all at once.
---
 .../etiquette_flask/static/css/common.css     |  39 ++--
 .../etiquette_flask/templates/photo.html      |   6 +
 .../etiquette_flask/templates/search.html     |  32 ++-
 frontends/etiquette_flask/templates/tags.html | 207 +++++++++---------
 4 files changed, 151 insertions(+), 133 deletions(-)

diff --git a/frontends/etiquette_flask/static/css/common.css b/frontends/etiquette_flask/static/css/common.css
index a626891..b677c2c 100644
--- a/frontends/etiquette_flask/static/css/common.css
+++ b/frontends/etiquette_flask/static/css/common.css
@@ -1,7 +1,8 @@
 /*
 Organization:
 {
-    display and flexing
+    own grid area name
+    display, flexing, gridding
     positioning and alignment
     bounding box (width, margin, overflow, ...)
     borders and shadows
@@ -19,26 +20,32 @@ Organization:
     --color_3d_shadow: rgba(0, 0, 0, 0.5);
     --color_3d_highlight: rgba(255, 255, 255, 0.5);
 }
+
 body
 {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template:
+        "header" auto
+        "content_body" 1fr
+        /1fr;
 
     background-color: var(--color_site_theme);
 }
-
-pre
-{
-    white-space: pre-line;
-}
-
 #header
 {
+    grid-area: header;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr auto;
     grid-template-rows: auto;
 
     margin-bottom: 4px;
+
+    background-color: var(--color_site_transparency);
+}
+#content_body
+{
+    grid-area: content_body;
+    display: grid;
 }
 #header button
 {
@@ -50,29 +57,27 @@ pre
     display: flex;
     flex: 1;
     justify-content: center;
-
-    background-color: var(--color_site_transparency);
 }
 .header_element:hover
 {
     background-color: var(--color_site_secondary);
 }
 
+pre
+{
+    white-space: pre-line;
+}
+
 .editor_input
 {
     width: 100%;
     max-width: 800px;
 }
+
 .hidden
 {
     display: none !important;
 }
-#content_body
-{
-    display: flex;
-    flex: 0 0 auto;
-    flex-direction: row;
-}
 
 .gray_button
 {
diff --git a/frontends/etiquette_flask/templates/photo.html b/frontends/etiquette_flask/templates/photo.html
index 86d73af..58969cc 100644
--- a/frontends/etiquette_flask/templates/photo.html
+++ b/frontends/etiquette_flask/templates/photo.html
@@ -13,9 +13,15 @@
     <script src="/static/js/tag_autocomplete.js"></script>
 
 <style>
+body
+{
+    display: flex;
+    flex-direction: column;
+}
 #content_body
 {
     /* Override common.css */
+    display: flex;
     flex: 1;
     flex-direction: row;
 }
diff --git a/frontends/etiquette_flask/templates/search.html b/frontends/etiquette_flask/templates/search.html
index 86e767d..0063367 100644
--- a/frontends/etiquette_flask/templates/search.html
+++ b/frontends/etiquette_flask/templates/search.html
@@ -25,14 +25,22 @@ form
 
     width: 100%;
 }
+#content_body
+{
+    grid-template:
+        "error_message_area error_message_area"
+        "left right"
+        / 300px 1fr;
+}
 #error_message_area
 {
+    grid-area: error_message_area;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }
-.search_warning
+.error_message
 {
     align-self: center;
 
@@ -44,12 +52,10 @@ form
 }
 #left
 {
+    grid-area: left;
     flex: 1;
 
     padding: 8px;
-    max-width: 300px;
-    min-width: 300px;
-    width: 300px;
 
     background-color: var(--color_site_transparency);
 
@@ -57,18 +63,20 @@ form
 }
 #right
 {
+    grid-area: right;
     flex: 1;
 
     padding: 8px;
     /* Keep the prev-next buttons from scraping the floor */
     padding-bottom: 30px;
-
-    width: auto;
 }
 @media screen and (max-width: 800px) {
     #content_body
     {
-        flex-direction: column-reverse;
+        grid-template:
+            "error_message_area"
+            "right"
+            "left";
     }
     #left
     {
@@ -151,12 +159,12 @@ form
 
 <body>
 {{header.make_header(session=session)}}
-<div id="error_message_area">
-    {% for warning in warnings %}
-        <span class="search_warning">{{warning}}</span>
-    {% endfor %}
-</div>
 <div id="content_body">
+    <div id="error_message_area">
+        {% for warning in warnings %}
+            <span class="error_message">{{warning}}</span>
+        {% endfor %}
+    </div>
     <div id="left">
         {% for tagtype in ["musts", "mays", "forbids"] %}
         <div id="search_builder_{{tagtype}}" {% if search_kwargs["tag_expression"]%}style="display:none"{%endif%}>
diff --git a/frontends/etiquette_flask/templates/tags.html b/frontends/etiquette_flask/templates/tags.html
index e9c6966..147d107 100644
--- a/frontends/etiquette_flask/templates/tags.html
+++ b/frontends/etiquette_flask/templates/tags.html
@@ -15,19 +15,17 @@
     <script src="/static/js/editor.js"></script>
 
 <style>
-body
-{
-    display: grid;
-    grid-template-rows: auto 1fr;
-    grid-template-columns: 1fr 300px;
-    grid-template-areas:
-        "header header"
-        "left right";
-}
 #header
 {
     grid-area: header;
 }
+#content_body
+{
+    display: grid;
+    grid-template:
+        "left right"
+        /1fr 300px;
+}
 #left
 {
     word-break: break-word;
@@ -73,14 +71,11 @@ body
 }
 @media screen and (max-width: 800px)
 {
-    body
+    #content_body
     {
-        grid-template-columns: 1fr;
-        grid-template-rows: auto 1fr 150px;
-        grid-template-areas:
-            "header"
-            "left"
-            "right";
+        grid-template:
+            "left" 1fr
+            "right" 150px;
     }
     #right
     {
@@ -103,101 +98,105 @@ body
 
 <body>
 {{header.make_header(session=session)}}
-<div id="left">
-    {% if specific_tag %}
-        <div id="tag_metadata">
-        <h2>
-            <span
-            id="name_text"
-            data-editor-id="name"
-            data-editor-placeholder="name"
+<div id="content_body">
+    <div id="left">
+        {% if specific_tag %}
+            <div id="tag_metadata">
+            <h2>
+                <span
+                id="name_text"
+                data-editor-id="name"
+                data-editor-placeholder="name"
+                >
+                    {{-specific_tag.name-}}
+                </span>
+            </h2>
+            <pre
+            id="description_text"
+            data-editor-id="description"
+            data-editor-placeholder="description"
+            {% if specific_tag.description == "" %}class="hidden"{% endif -%}
             >
-                {{-specific_tag.name-}}
-            </span>
-        </h2>
-        <pre
-        id="description_text"
-        data-editor-id="description"
-        data-editor-placeholder="description"
-        {% if specific_tag.description == "" %}class="hidden"{% endif -%}
-        >
-            {{-specific_tag.description-}}
-        </pre>
-        </div>
+                {{-specific_tag.description-}}
+            </pre>
+            </div>
 
-        {% set parents = specific_tag.get_parents() %}
-        {% if parents %}
-        <ul>
-        {% for ancestor in specific_tag.get_parents() %}
-        <li>
-            {{tag_object.tag_object(ancestor, innertext='(?)', link='info')}}
-            {{tag_object.tag_object(ancestor, innertext=ancestor.name, link=none, with_alt_description=True)}}
-        </li>
-        {% endfor %}
-        {% endif %}
-        </ul>
-    {% endif %}
-    <ul>
-        {% for (qualified_name, tag) in tags %}
-            {% if "." in qualified_name %}
+            {% set parents = specific_tag.get_parents() %}
+            {% if parents %}
+            <ul>
+            {% for ancestor in specific_tag.get_parents() %}
             <li>
-                {{tag_object.tag_object(tag, innertext='(?)', link='info')}}
-                {{tag_object.tag_object(tag, link='search', innertext=qualified_name, with_alt_description=True)-}}
-                <button
-                class="remove_tag_button red_button button_with_confirm"
-                data-onclick="delete_tag('{{qualified_name}}', receive_callback);"
-                data-prompt="Unlink Tags?"
-                data-confirm="Unlink"
-                data-confirm-class="remove_tag_button_perm red_button"
-                data-cancel-class="remove_tag_button_perm gray_button"
-                >
-                unlink
-                </button>
-            </li>
-            {% else %}
-            <li>
-                {{tag_object.tag_object(tag, innertext='(?)', link='info')}}
-                {{tag_object.tag_object(tag, link='search', innertext=qualified_name, with_alt_description=True)-}}
-                <button
-                class="remove_tag_button red_button button_with_confirm"
-                data-onclick="delete_tag('{{qualified_name}}', receive_callback);"
-                data-prompt="Delete Tag?"
-                data-confirm="Delete"
-                data-confirm-class="remove_tag_button_perm red_button"
-                data-cancel-class="remove_tag_button_perm gray_button"
-                >
-                delete
-                </button>
-            </li>
-            {% endif %}
-
-            {% if include_synonyms %}
-            {% for synonym in tag.get_synonyms() %}
-            <li>
-                {{tag_object.tag_object(tag, innertext='(+)', link=none)}}
-                {{tag_object.tag_object(tag, link='search', innertext=qualified_name + '+' + synonym)-}}
-                <button
-                class="remove_tag_button red_button button_with_confirm"
-                data-onclick="delete_tag_synonym('{{synonym}}', receive_callback);"
-                data-prompt="Remove Synonym?"
-                data-confirm="Remove"
-                data-confirm-class="remove_tag_button_perm red_button"
-                data-cancel-class="remove_tag_button_perm gray_button"
-                >
-                remove
-                </button>
+                {{tag_object.tag_object(ancestor, innertext='(?)', link='info')}}
+                {{tag_object.tag_object(ancestor, innertext=ancestor.name, link=none, with_alt_description=True)}}
             </li>
             {% endfor %}
             {% endif %}
-        {% endfor %}
-    </ul>
-</div>
-<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="submit_tag(receive_callback);">add</button>
+            </ul>
+        {% else %}
+            <h2>Tags</h2>
+        {% endif %}
+        <ul>
+            {% for (qualified_name, tag) in tags %}
+                {% if "." in qualified_name %}
+                <li>
+                    {{tag_object.tag_object(tag, innertext='(?)', link='info')}}
+                    {{tag_object.tag_object(tag, link='search', innertext=qualified_name, with_alt_description=True)-}}
+                    <button
+                    class="remove_tag_button red_button button_with_confirm"
+                    data-onclick="delete_tag('{{qualified_name}}', receive_callback);"
+                    data-prompt="Unlink Tags?"
+                    data-confirm="Unlink"
+                    data-confirm-class="remove_tag_button_perm red_button"
+                    data-cancel-class="remove_tag_button_perm gray_button"
+                    >
+                    unlink
+                    </button>
+                </li>
+                {% else %}
+                <li>
+                    {{tag_object.tag_object(tag, innertext='(?)', link='info')}}
+                    {{tag_object.tag_object(tag, link='search', innertext=qualified_name, with_alt_description=True)-}}
+                    <button
+                    class="remove_tag_button red_button button_with_confirm"
+                    data-onclick="delete_tag('{{qualified_name}}', receive_callback);"
+                    data-prompt="Delete Tag?"
+                    data-confirm="Delete"
+                    data-confirm-class="remove_tag_button_perm red_button"
+                    data-cancel-class="remove_tag_button_perm gray_button"
+                    >
+                    delete
+                    </button>
+                </li>
+                {% endif %}
+
+                {% if include_synonyms %}
+                {% for synonym in tag.get_synonyms() %}
+                <li>
+                    {{tag_object.tag_object(tag, innertext='(+)', link=none)}}
+                    {{tag_object.tag_object(tag, link='search', innertext=qualified_name + '+' + synonym)-}}
+                    <button
+                    class="remove_tag_button red_button button_with_confirm"
+                    data-onclick="delete_tag_synonym('{{synonym}}', receive_callback);"
+                    data-prompt="Remove Synonym?"
+                    data-confirm="Remove"
+                    data-confirm-class="remove_tag_button_perm red_button"
+                    data-cancel-class="remove_tag_button_perm gray_button"
+                    >
+                    remove
+                    </button>
+                </li>
+                {% endfor %}
+                {% endif %}
+            {% endfor %}
+        </ul>
     </div>
-    <div id="message_area">
+    <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="submit_tag(receive_callback);">add</button>
+        </div>
+        <div id="message_area">
+        </div>
     </div>
 </div>
 </body>