From 7ba0510382686d7e48928c26429dd4069c436e18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Canek=20Pel=C3=A1ez=20Vald=C3=A9s?= <canek@ciencias.unam.mx>
Date: Sat, 13 Nov 2021 18:00:48 -0600
Subject: [PATCH] Fix bug for login fadeout message.

---
 fotos/templates/base.html | 13 ++++++-------
 fotos/templates/info.html |  2 +-
 static/galeria.js         |  8 ++++----
 static/style.css          | 37 +++++++++++++++++++++++++------------
 4 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/fotos/templates/base.html b/fotos/templates/base.html
index 67690ff..5f55eb8 100644
--- a/fotos/templates/base.html
+++ b/fotos/templates/base.html
@@ -27,8 +27,8 @@
         </div>
         <div class="dialog-footer">
           <div class="dialog-controls">
-            <button id="dialog-button-ok" onclick="dialogOk()"></button>
-            <button id="dialog-button-cancel" onclick="dialogCancel()"></button>
+            <button class="dialog-button" id="dialog-ok" onclick="dialogOk()"></button>
+            <button class="dialog-button" id="dialog-cancel" onclick="dialogCancel()"></button>
           </div>
         </div>
       </div>
@@ -164,13 +164,13 @@
         &lt;<a href="mailto:{{gallery.email}}">{{gallery.email}}</a>&gt;
         <div class="valid-xhtml">
           <p>
-            <a href="http://validator.w3.org/check?uri=referer">
-              <img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
+            <a href="https://validator.w3.org/check?uri=referer">
+              <img class="w3c-icon" src="https://www.w3.org/Icons/valid-xhtml10-blue"
+                   alt="Valid XHTML 1.0 Strict" />
             </a>
             &nbsp;
             <a href="https://jigsaw.w3.org/css-validator/check/referer">
-              <img style="border:0;width:88px;height:31px"
-                   src="https://jigsaw.w3.org/css-validator/images/vcss-blue"
+              <img class="w3c-icon" src="https://jigsaw.w3.org/css-validator/images/vcss-blue"
                    alt="Valid CSS!" />
             </a>
           </p>
@@ -179,4 +179,3 @@
     </div>
   </body>
 </html>
-
diff --git a/fotos/templates/info.html b/fotos/templates/info.html
index 7b89fee..773dde1 100644
--- a/fotos/templates/info.html
+++ b/fotos/templates/info.html
@@ -47,7 +47,7 @@
   </div>
 </div>
 {% if message %}
-<div id="message" class="message {{type}}">{{message}}</div>
+<div id="message" class="message {{response}}">{{message}}</div>
 <script type="text/javascript">fadeMessage(null);</script>
 {% endif %}
 {% endblock %}
diff --git a/static/galeria.js b/static/galeria.js
index 165c181..ac7f01f 100644
--- a/static/galeria.js
+++ b/static/galeria.js
@@ -153,8 +153,8 @@ function _hideDialog() {
     var dialogUrl = document.getElementById("dialog-url");
     var title = document.getElementById("dialog-title");
     var message = document.getElementById("dialog-message");
-    var buttonOk = document.getElementById("dialog-button-ok");
-    var buttonCancel = document.getElementById("dialog-button-cancel");
+    var buttonOk = document.getElementById("dialog-ok");
+    var buttonCancel = document.getElementById("dialog-cancel");
     overlay.style.display = 'none';
     title.textContent = '';
     message.textContent = '';
@@ -189,8 +189,8 @@ function askUser(title, message, doAction, cancelAction, link) {
     var dialogUrl = document.getElementById("dialog-url");
     var dTitle = document.getElementById("dialog-title");
     var dMessage = document.getElementById("dialog-message");
-    var buttonOk = document.getElementById("dialog-button-ok");
-    var buttonCancel = document.getElementById("dialog-button-cancel");
+    var buttonOk = document.getElementById("dialog-ok");
+    var buttonCancel = document.getElementById("dialog-cancel");
     dTitle.textContent = title
     dMessage.textContent = message;
     buttonOk.textContent = doAction;
diff --git a/static/style.css b/static/style.css
index 592ad77..4a00b3f 100644
--- a/static/style.css
+++ b/static/style.css
@@ -150,6 +150,7 @@ div.preview-frame {
     border-radius: 10px;
     width: 440px;
     height: 480px;
+    box-shadow: 3px 3px 3px #444;
 }
 
 div.preview {
@@ -200,6 +201,7 @@ div.photo-frame {
     border-radius: 15px;
     width: 900px;
     height: 900px;
+    box-shadow: 5px 5px 5px #222;
 }
 
 div.photo {
@@ -212,7 +214,7 @@ div.photo {
 
 img.photo {
     margin: 30px;
-    box-shadow: 15px 15px 15px #444444;
+    box-shadow: 15px 15px 15px #444;
 }
 
 div.photo-info {
@@ -223,6 +225,7 @@ div.photo-info {
     margin-top: 20px;
     width: 900px;
     height: 900px;
+    box-shadow: 5px 5px 5px #222;
 }
 
 table.photo {
@@ -281,6 +284,7 @@ div.footer > a:active {
     position: absolute;
     right: 20px;
     top: 20px;
+    box-shadow: 4px 4px 4px #222;
 }
 
 .dropdown-content {
@@ -290,7 +294,7 @@ div.footer > a:active {
     background-color: #f1f1f1;
     min-width: 320px;
     overflow: auto;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    box-shadow: 8px 8px 8px #222;
     z-index: 1;
     font-size: small;
 }
@@ -387,6 +391,7 @@ div.gmap-canvas > object {
     font-size: small;
     margin: 0;
     margin-left: 10px;
+    font-size: 1em;
     color: #555;
     display: inline-block;
 }
@@ -425,23 +430,24 @@ p#dialog-message{
     border-radius: 3px;
 }
 
-button#dialog-button-cancel {
-    background-color: #adcdad;
-    border: 1px solid #003300;
+button.dialog-button {
     color: black;
-    padding: 10px;
+    padding: 2px;
     width: 200px;
+    height: 2em;
     border-radius: 3px;
+    font-weight: bold;
+    font-size: 1em;
 }
 
-button#dialog-button-ok {
+button#dialog-cancel {
+    background-color: #adcdad;
+    border: 1px solid #003300;
+}
+
+button#dialog-ok {
     background-color: #cdadad;
     border: 1px solid #330000;
-    color: black;
-    padding: 10px;
-    width: 200px;
-    margin-left: 10px;
-    border-radius: 3px;
 }
 
 div.valid-xhtml {
@@ -456,3 +462,10 @@ div.valid-xhtml > p {
     margin-inline-start: 0px;
     margin-inline-end: 0px;
 }
+
+img.w3c-icon {
+    width: 88px;
+    height: 31px;
+    border: 0px;
+    box-shadow: 2px 2px 2px #222;
+}
-- 
GitLab