From 3fb198f994418cd1c0d49e8785efeeadfdfdb70b Mon Sep 17 00:00:00 2001
From: Ethan Dalool <git@voussoir.net>
Date: Fri, 18 Sep 2020 21:12:28 -0700
Subject: [PATCH] Add explicit @media queries for wide mode, not just default
 to override.

Any properties that are different in wide/narrow mode should be defined
in the correct media query. I got tired of having wide mode be the
default and then narrow mode having to unset/initial all the attributes
that aren't relevant to narrow.
---
 .../etiquette_flask/static/css/common.css     |  3 ++
 .../etiquette_flask/templates/clipboard.html  | 19 +++++----
 .../etiquette_flask/templates/login.html      | 15 +++++--
 .../etiquette_flask/templates/photo.html      | 25 +++++-------
 .../etiquette_flask/templates/search.html     | 39 ++++++++++---------
 frontends/etiquette_flask/templates/tags.html | 14 +++++--
 6 files changed, 67 insertions(+), 48 deletions(-)

diff --git a/frontends/etiquette_flask/static/css/common.css b/frontends/etiquette_flask/static/css/common.css
index 90cb2fd..9cbbb07 100644
--- a/frontends/etiquette_flask/static/css/common.css
+++ b/frontends/etiquette_flask/static/css/common.css
@@ -120,6 +120,9 @@ pre
     grid-auto-rows: min-content;
     grid-gap: 8px;
 
+    /*
+    8px all around except the top, where the header already has a margin.
+    */
     margin: 8px;
     margin-top: 0;
 }
diff --git a/frontends/etiquette_flask/templates/clipboard.html b/frontends/etiquette_flask/templates/clipboard.html
index 9b3cdcd..8dc806a 100644
--- a/frontends/etiquette_flask/templates/clipboard.html
+++ b/frontends/etiquette_flask/templates/clipboard.html
@@ -19,18 +19,10 @@
     <script src="/static/js/tag_autocomplete.js"></script>
 
 <style>
-#left
-{
-    word-break: break-word;
-}
 #right
 {
     display: grid;
     grid-row-gap: 8px;
-    grid-template:
-        "toolbox" auto
-        "message_area" 1fr
-        / 1fr;
     padding: 8px;
     background-color: var(--color_transparency);
 }
@@ -70,6 +62,17 @@
     flex: initial;
 }
 
+@media screen and (min-width: 800px)
+{
+    #right
+    {
+        grid-template:
+            "toolbox" auto
+            "message_area" 1fr
+            / 1fr;
+    }
+}
+
 @media screen and (max-width: 800px)
 {
     #right
diff --git a/frontends/etiquette_flask/templates/login.html b/frontends/etiquette_flask/templates/login.html
index 0824e39..bc572eb 100644
--- a/frontends/etiquette_flask/templates/login.html
+++ b/frontends/etiquette_flask/templates/login.html
@@ -24,10 +24,6 @@ button
 #content_body
 {
     margin: auto;
-    grid-template:
-        "login_form register_form" auto
-        "message_area message_area" 150px
-        / 1fr 1fr;
 }
 
 form
@@ -48,6 +44,17 @@ form h2
     grid-area: message_area;
 }
 
+@media screen and (min-width: 800px)
+{
+    #content_body
+    {
+        grid-template:
+            "login_form register_form" auto
+            "message_area message_area" 150px
+            / 1fr 1fr;
+    }
+}
+
 @media screen and (max-width: 800px)
 {
     #content_body
diff --git a/frontends/etiquette_flask/templates/photo.html b/frontends/etiquette_flask/templates/photo.html
index bfd1fab..5610a25 100644
--- a/frontends/etiquette_flask/templates/photo.html
+++ b/frontends/etiquette_flask/templates/photo.html
@@ -20,9 +20,6 @@
 #content_body
 {
     flex: 1;
-    grid-template:
-        "left right" 1fr
-        / 310px 1fr;
 }
 #left
 {
@@ -57,7 +54,6 @@
 {
     grid-area: message_area;
     min-height: 30px;
-    max-height: none;
     margin: 8px;
 }
 #photo_viewer
@@ -110,6 +106,16 @@
     align-items: flex-end;
 }
 
+@media screen and (min-width: 800px)
+{
+    #content_body
+    {
+        grid-template:
+            "left right" 1fr
+            / 310px 1fr;
+    }
+}
+
 @media screen and (max-width: 800px)
 {
     #content_body
@@ -119,17 +125,6 @@
             "left" max-content
             / 1fr;
     }
-    #left
-    {
-        width: initial;
-        max-width: none;
-    }
-    #message_area
-    {
-        flex: 2;
-        height: initial;
-        max-height: none;
-    }
 }
 </style>
 </head>
diff --git a/frontends/etiquette_flask/templates/search.html b/frontends/etiquette_flask/templates/search.html
index 92014df..76e29da 100644
--- a/frontends/etiquette_flask/templates/search.html
+++ b/frontends/etiquette_flask/templates/search.html
@@ -28,14 +28,6 @@
     justify-content: center;
 }
 
-#content_body
-{
-    grid-template:
-        "left error_message_area" auto
-        "left happy_message_area" auto
-        "left right" 1fr
-        / 310px 1fr;
-}
 #error_message_area
 {
     grid-area: error_message_area;
@@ -85,21 +77,32 @@
     /* Keep the prev-next buttons from scraping the floor */
     padding-bottom: 30px;
 }
-@media screen and (max-width: 800px) {
+
+@media screen and (min-width: 800px)
+{
     #content_body
     {
         grid-template:
-            "error_message_area"
-            "happy_message_area"
-            "right"
-            "left";
-    }
-    #left
-    {
-        max-width: none;
-        width: initial;
+            "left error_message_area" auto
+            "left happy_message_area" auto
+            "left right" 1fr
+            / 310px 1fr;
     }
 }
+
+@media screen and (max-width: 800px)
+{
+    #content_body
+    {
+        grid-template:
+            "error_message_area" auto
+            "happy_message_area" auto
+            "right" auto
+            "left" auto
+            / auto;
+    }
+}
+
 .prev_next_holder
 {
     display: flex;
diff --git a/frontends/etiquette_flask/templates/tags.html b/frontends/etiquette_flask/templates/tags.html
index 9130870..c1678bd 100644
--- a/frontends/etiquette_flask/templates/tags.html
+++ b/frontends/etiquette_flask/templates/tags.html
@@ -53,9 +53,6 @@ h2, h3
 #right
 {
     display: grid;
-    grid-template:
-        "editor_area" 1fr
-        "message_area" 1fr;
     padding: 8px;
     background-color: var(--color_transparency);
 }
@@ -68,6 +65,17 @@ h2, h3
 {
     grid-area: message_area;
 }
+
+@media screen and (min-width: 800px)
+{
+    #right
+    {
+        grid-template:
+            "editor_area" 1fr
+            "message_area" 1fr;
+    }
+}
+
 @media screen and (max-width: 800px)
 {
     #right