From eb952e27b3dd353da1255416d054271b06dfb51c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= <hugo@lysator.liu.se>
Date: Tue, 28 Apr 2020 22:20:30 +0200
Subject: .btn click area now fixed.

---
 TODO                   |  5 ----
 module/output/html.scm | 65 ++++++++++++++++++++++++++++++++++----------------
 static/style.css       | 29 +++++++++++++++++-----
 3 files changed, 67 insertions(+), 32 deletions(-)

diff --git a/TODO b/TODO
index b98964e1..c0fe8ed2 100644
--- a/TODO
+++ b/TODO
@@ -53,11 +53,6 @@ Exportera ICS i helhet knapp
 Exprotera ICS rullande?
 -----------------------
 
-Knappar vid tryck på övre och vänstra sidan
-------------------------------------------
-Eftersom knappen flyttar sig är inte musen över när man släpper, med följd av
-att inget event sker.
-
 Mycket små events
 -----------------
 
diff --git a/module/output/html.scm b/module/output/html.scm
index 15d81c12..768b948c 100644
--- a/module/output/html.scm
+++ b/module/output/html.scm
@@ -102,16 +102,46 @@
 
 
 
+(define* (btn key: onclick href
+              allow-other-keys:
+              rest: args)
+  (when (and onclick href)
+    (error "Only give onclick or href."))
+
+  (when (not (or onclick href))
+    (error "One of onclick or href has to be given"))
+
+  (let ((body #f))
+    `(,(cond [onclick 'button]
+             [href 'a])
+      (@ (class "btn")
+         ,(cond [onclick `(onclick ,onclick)]
+                [href `(href ,href)])
+         ,@(let loop ((rem args))
+             (cond
+              [(null? rem) '()]
+              [(keyword? (car rem))
+               (cons* `(,(keyword->symbol (car rem))
+                        ,(cadr rem))
+                      (loop (cddr rem)))]
+              [else
+               (set! body (car rem))
+               (loop (cdr rem))])))
+      (div ,body))))
+
 
 (define (popup ev)
   `(div (@ (class "popup"))
         (nav (@ (class "popup-control CAL_" ,(html-attr (or (attr (parent ev) 'NAME)
                                                             "unknown"))))
-             (button (@ (class "btn") (title "Stäng")
-                        (onclick "close_popup(this)")) "×")
-             (a (@ (class "btn") (title "Ladda ner")
-                   (href "/calendar/" ,(attr ev 'UID) ".ics"))
-                "📅"))
+             ,(btn "×"
+                   title: "Stäng"
+                   onclick: "close_popup(this)"
+                   )
+             ,(btn "📅"
+                   title: "Ladda ner"
+                   href: (string-append "/calendar/" (attr ev 'UID) ".ics")))
+
         ,(fmt-single-event ev)))
 
 (define (data-attributes event)
@@ -635,22 +665,15 @@
                 ;; Small calendar and navigation
                 (nav (@ (class "calnav") (style "grid-area: nav"))
                      (div (@ (class "change-view"))
-                          (a (@ (class "btn")
-                                (href "/week/"
-                                      ,(date->string
-                                        (if (= 1 (day start-date))
-                                            (start-of-week start-date (get-config 'week-start))
-                                            start-date)
-                                        "~1")
-                                      ".html"))
-                             "weekly")
-
-
-                          (a (@ (class "btn")
-                                (href "/month/"
-                                      ,(date->string (set (day start-date) 1) "~1")
-                                      ".html"))
-                             "monthly")))
+                          ,(btn href: (date->string
+                                       (if (= 1 (day start-date))
+                                           (start-of-week start-date (get-config 'week-start))
+                                           start-date)
+                                       "/week/~1.html")
+                                "weekly")
+
+                          ,(btn href: (date->string (set (day start-date) 1) "/month/~1.html")
+                                "monthly")))
 
                 (details (@ (open) (style "grid-area: cal"))
                          (summary "Month overview")
diff --git a/static/style.css b/static/style.css
index 0116a924..a057ff36 100644
--- a/static/style.css
+++ b/static/style.css
@@ -104,20 +104,33 @@ html, body {
 }
 
 .btn {
-    padding: 0.5em;
-    background-color: #3399ff;
-    color: white;
-
-    box-shadow: var(--btn-height) var(--btn-height) gray;
+    padding: 0;
 
     /* if a */
     text-decoration: none;
 
     /* if button */
     border: none;
+    background-color: inherit;
+}
+
+.btn > div {
+    padding: 0.5em;
+    background-color: #3399ff;
+    color: white;
+
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    box-shadow: var(--btn-height) var(--btn-height) gray;
 }
 
-.btn:active {
+.btn:active > div {
     transform: translate(var(--btn-height), var(--btn-height));
     box-shadow: none;
 }
@@ -639,6 +652,10 @@ along with their colors.
 .popup .popup-control {
     display: flex;
     flex-direction: column;
+
+    /* not needed, but the icons aren't text
+       and should therefor not be copied */
+    user-select: none;
 }
 
 .popup-control .btn {
-- 
cgit v1.2.3