From 4838b26f3b005cf0cedf010a5d5558a442eed372 Mon Sep 17 00:00:00 2001
From: Ethan Dalool <git@voussoir.net>
Date: Tue, 7 Mar 2017 21:01:50 -0800
Subject: [PATCH] Make photo info panel work better when it gets too big

Redo CSS so the left panel continues down the page instead of the background color just getting cut off; Keep the message_area from getting pinched into nothingness; improve narrow-screen CSS
---
 templates/photo.html | 86 +++++++++++++++++++++++++-------------------
 1 file changed, 50 insertions(+), 36 deletions(-)

diff --git a/templates/photo.html b/templates/photo.html
index 3c7c89b..7eb4749 100644
--- a/templates/photo.html
+++ b/templates/photo.html
@@ -19,45 +19,19 @@
 #left
 {
     display: flex;
-    padding: 8px;
     flex-direction: column;
-    justify-content: flex-start;
-    background-color: rgba(0, 0, 0, 0.1);
-    max-width: 300px;
 }
 #right
 {
     flex: 1;
     display: flex;
 }
-@media screen and (max-width: 800px)
+#editor_holder
 {
-    #content_body
-    {
-        /*
-        When flexing, it tries to contain itself entirely in the screen,
-        forcing #left and #right to squish together.
-        */
-        flex: none;
-        flex-direction: column-reverse;
-    }
-    #left
-    {
-        /*
-        Display: None will be overridden as soon as the page detects that the
-        screen is in narrow mode and turns off the tag box's autofocus
-        */
-        display: none;
-        flex-direction: row;
-        width: initial;
-        max-width: none;
-        margin-top: 8px;
-    }
-    #right
-    {
-        flex: none;
-        height: calc(100% - 20px);
-    }
+    max-width: 300px;
+    padding: 8px;
+    flex-direction: column;
+    background-color: rgba(0, 0, 0, 0.1);
 }
 #editor_area
 {
@@ -66,9 +40,7 @@
 }
 #message_area
 {
-    overflow-y: auto;
     flex: 1;
-    background-color: rgba(0, 0, 0, 0.1);
 }
 .photo_viewer
 {
@@ -112,6 +84,46 @@
 {
     font-size: 11px;
 }
+@media screen and (max-width: 800px)
+{
+    #content_body
+    {
+        /*
+        When flexing, it tries to contain itself entirely in the screen,
+        forcing #left and #right to squish together.
+        */
+        flex: none;
+        flex-direction: column-reverse;
+    }
+    #left
+    {
+        /*
+        Display: None will be overridden as soon as the page detects that the
+        screen is in narrow mode and turns off the tag box's autofocus
+        */
+        display: none;
+        width: initial;
+        max-width: none;
+        margin-top: 8px;
+    }
+    #right
+    {
+        flex: none;
+        height: calc(100% - 20px);
+    }
+    #editor_holder
+    {
+        display: flex;
+        flex-direction: row;
+        max-width: none;
+    }
+    #message_area
+    {
+        flex: 2;
+        height: initial;
+        max-height: none;
+    }
+}
 </style>
 </head>
 
@@ -120,6 +132,7 @@
 {{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>
@@ -148,7 +161,7 @@
         <ul id="metadata">
         {% if photo.author_id %}
             {% set author = photo.author() %}
-            <li>Author: <a href="/user/{{author.username}}">{{author.username}}</a>
+            <li>Author: <a href="/user/{{author.username}}">{{author.username}}</a></li>
         {% endif %}
         {% if photo.width %}
             <li>Dimensions: {{photo.width}}x{{photo.height}} px</li>
@@ -175,6 +188,7 @@
     </div>
     <div id="message_area">
     </div>
+    </div>
 </div>
 
 <div id="right">
@@ -236,10 +250,10 @@ function receive_callback(response)
     var message_text;
     var message_positivity;
     var tagname = response["tagname"];
-    if ("error" in response)
+    if ("error_type" in response)
     {
         message_positivity = "message_negative";
-        message_text = response["error"];
+        message_text = response["error_message"];
     }
     else
     {