From e0950b6c7463653c7049de196dc6448bf5e03fdb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= <hugo@lysator.liu.se>
Date: Sun, 3 May 2020 00:27:36 +0200
Subject: Add [today] and [jump to] button in frontend.

Currently the JavaScript updates these buttons to work, but they by
default reference backend endpoints which are not yet written.
---
 static/style.css | 37 +++++++++++++++++++++++++++++++++----
 1 file changed, 33 insertions(+), 4 deletions(-)

(limited to 'static/style.css')

diff --git a/static/style.css b/static/style.css
index aad9a80c..875adc18 100644
--- a/static/style.css
+++ b/static/style.css
@@ -92,17 +92,40 @@ html, body {
 "Buttons" for changing between weekly and monthly layout
 */
 
+.calnav {
+    display: flex;
+    flex-direction: column;
+    padding-left: 2em;
+    padding-right: 2em;
+}
+
 .change-view {
     display: flex;
     flex-direction: row;
-    justify-content: space-evenly;
+    justify-content: space-between;
+
+    padding-top: 1ex;
+    padding-bottom: 1ex;
+}
+
+.jump-to > form {
+    display: flex;
+}
+
+.jump-to input {
+    flex-grow: 2;
+    margin-right: 1em;
 }
 
-.change-view .btn {
-    margin-top: 1ex;
-    margin-bottom: 1ex;
+.jump-to button, .jump-to a {
+    /* Same as height, figure out way to force this */
+    width: 2.5em;
 }
 
+/* button
+--------------------------------------------------
+*/
+
 .btn {
     padding: 0;
 
@@ -127,6 +150,12 @@ html, body {
     justify-content: center;
     align-items: center;
 
+    /* shouldn't be needed, but otherwise wont align with a text input
+       inside a shared flex-container.
+       It however seems to make <a> and <button> tag refuse to be the same height?
+    */
+    height: 2.5em;
+
     box-shadow: var(--btn-height) var(--btn-height) gray;
 }
 
-- 
cgit v1.2.3