From 8da18ba50265b696cf98144174f5059b8279641a Mon Sep 17 00:00:00 2001
From: Ethan Dalool <git@voussoir.net>
Date: Fri, 18 Sep 2020 20:53:10 -0700
Subject: [PATCH] Add --narrow, --wide to common.css, is_wide_mode to
 common.js.

---
 frontends/etiquette_flask/static/css/common.css | 16 ++++++++++++++++
 frontends/etiquette_flask/static/js/common.js   | 12 ++++++++++++
 frontends/etiquette_flask/templates/photo.html  |  8 ++------
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/frontends/etiquette_flask/static/css/common.css b/frontends/etiquette_flask/static/css/common.css
index f4d7bf0..90cb2fd 100644
--- a/frontends/etiquette_flask/static/css/common.css
+++ b/frontends/etiquette_flask/static/css/common.css
@@ -12,6 +12,22 @@
     --color_highlight: rgba(255, 255, 255, 0.5);
 }
 
+@media screen and (min-width: 800px)
+{
+    :root
+    {
+        --wide: 1;
+    }
+}
+
+@media screen and (max-width: 800px)
+{
+    :root
+    {
+        --narrow: 1;
+    }
+}
+
 .hidden
 {
     display: none !important;
diff --git a/frontends/etiquette_flask/static/js/common.js b/frontends/etiquette_flask/static/js/common.js
index 62b6074..0714281 100644
--- a/frontends/etiquette_flask/static/js/common.js
+++ b/frontends/etiquette_flask/static/js/common.js
@@ -453,6 +453,18 @@ function init_all_tabbed_container()
     }
 }
 
+common.is_narrow_mode =
+function is_narrow_mode()
+{
+    return getComputedStyle(document.documentElement).getPropertyValue("--narrow").trim() === "1";
+}
+
+common.is_wide_mode =
+function is_wide_mode()
+{
+    return getComputedStyle(document.documentElement).getPropertyValue("--wide").trim() === "1";
+}
+
 common.tabbed_container_switcher =
 function tabbed_container_switcher(event)
 {
diff --git a/frontends/etiquette_flask/templates/photo.html b/frontends/etiquette_flask/templates/photo.html
index 7289d54..cfc3c55 100644
--- a/frontends/etiquette_flask/templates/photo.html
+++ b/frontends/etiquette_flask/templates/photo.html
@@ -19,7 +19,6 @@
 <style>
 #content_body
 {
-    --narrow: 0;
     flex: 1;
     grid-template:
         "left right" 1fr
@@ -119,7 +118,6 @@
 {
     #content_body
     {
-        --narrow: 1;
         grid-template:
             "right" 100%
             "left" max-content
@@ -486,8 +484,7 @@ function toggle_hoverzoom(event)
     {
         enable_hoverzoom(event);
     }
-    const content_body = document.getElementById('content_body');
-    if (getComputedStyle(content_body).getPropertyValue("--narrow") == 0)
+    if (common.is_wide_mode())
     {
         add_tag_box.focus();
     }
@@ -566,8 +563,7 @@ function autofocus_add_tag_box()
     which is annoying. So, this function focuses the box manually as long as
     we're not narrow.
     */
-    const content_body = document.getElementById("content_body");
-    if (getComputedStyle(content_body).getPropertyValue("--narrow") == 0)
+    if (common.is_wide_mode())
     {
         add_tag_box.focus();
     }