From fb9df938cae4fc7308cbe63328b69db3fa68a3a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= <hugo@lysator.liu.se>
Date: Sun, 26 Apr 2020 21:38:40 +0200
Subject: Popup sidebar now button holder.

---
 module/output/html.scm | 18 +++++++++++-------
 static/style.css       | 25 +++++++++++++++++--------
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/module/output/html.scm b/module/output/html.scm
index bc3f131b..1a60549a 100644
--- a/module/output/html.scm
+++ b/module/output/html.scm
@@ -127,6 +127,16 @@
 
 
 
+ 
+(define (popup ev)
+  `(div (@ (class "popup"))
+        (nav (@ (class "popup-control CAL_" ,(html-attr (or (attr (parent ev) 'NAME)
+                                                              "unknown"))))
+             (button (@ (class "btn") (onclick "close_popup(this)")) "×")
+             (a (@ (class "btn") (href "/calendar/" ,(attr ev 'UID) ".ics"))
+                "📅"))
+        ,(fmt-single-event ev)))
+
 (define (event-debug-html event)
   (fmt-single-event event)
   #;
@@ -190,10 +200,7 @@
         (div (@ (class "event-inner"))
              ;; NOTE These popup's are far from good. Main problem being that
              ;; the often render off-screen for events high up on the screen.
-             (div (@ (class "popup"))
-                  ,(event-debug-html ev)
-                  (button (@ (onclick "close_popup(this)")) "×")
-                  )
+             ,(popup ev)
              (a (@ (href "#" ,(UID ev))
                    (class "hidelink"))
               (div (@ (class "body"))
@@ -397,9 +404,6 @@
                 `(span (@ (class "last-modified")) "Senast ändrad "
                        ,(datetime->string (attr ev 'LAST-MODIFIED) "~1 ~H:~M")))
 
-             (a (@ (href "/calendar/" ,(attr ev 'UID) ".ics"))
-                "📅")
-
              )))
 
 ;; Single event in side bar (text objects)
diff --git a/static/style.css b/static/style.css
index 36040a64..f51c75ce 100644
--- a/static/style.css
+++ b/static/style.css
@@ -575,7 +575,7 @@ along with their colors.
 .event-inner .popup {
     /* visibility: hidden; */
     position: absolute;
-    display: block;
+    display: flex;
     /* A scale(0%) is chosen for hiding the element for the following reasons:
        - visibility: hidden still reserves space, which causes unwanted scroll-
          bars since the final position of the popup is calculated at runtime
@@ -603,15 +603,24 @@ along with their colors.
 }
 
 .event-inner .popup article {
-    border-left-style: solid;
-    border-left-width: 1em;
+    border: none;
 }
 
-.popup button {
-    position: absolute;
-    right: 0;
-    top: 0;
-    background: none;
+.popup .popup-control {
+    display: flex;
+    flex-direction: column;
+}
+
+.popup-control .btn {
+    max-width: 2em;
+    max-height: 2em;
+    margin: 1em;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-size: 150%;
 }
 
 /* .event-inner .popup td { */
-- 
cgit v1.2.3