From 89a657ed98e70efaeef566b0876b406bbcdb2255 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= <hugo@lysator.liu.se>
Date: Tue, 4 Aug 2020 13:35:52 +0200
Subject: Start work on long event layout for months.

---
 static/style.css | 50 ++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 48 insertions(+), 2 deletions(-)

(limited to 'static')

diff --git a/static/style.css b/static/style.css
index 793ed366..f1bdc6fb 100644
--- a/static/style.css
+++ b/static/style.css
@@ -323,8 +323,9 @@ along with their colors.
     /* This is for the first name, the week days.
        NOTE that I'm not sure this is actually the
        correct way to do it. */
-    grid-template-rows: 2em;
-    grid-auto-rows: 1fr;
+    /* grid-template-rows: 2em; */
+    /* grid-auto-rows: 1fr; */
+    grid-template-rows: 2em repeat(6, [time] 15pt [long] 1fr [short] 1fr);
 
     max-height: 100%;
     /* Apparently needed to ensure that parent can contain all its children */
@@ -343,8 +344,48 @@ along with their colors.
     border: 1px solid var(--gray);
 }
 
+.caltable .cal-cell-time {
+    border-bottom: none;
+}
+
+.caltable .cal-cell-short {
+    border-top: none
+}
+
+.caltable .cal-cell-long .event {
+    margin: 0;
+    /* TODO use other border rules */
+    border: 1px solid black;
+}
+
+.caltable .cal-cell-long .continuing {
+    border-radius: 1cm 0 0 1cm;
+}
+
+.caltable .cal-cell-long .continued {
+    border-radius: 0 1cm 1cm 0;
+}
+
+.caltable .cal-cell-long .continuing.continued {
+    border-radius: 0;
+}
+
+.caltable .cal-cell-long {
+    border-bottom: none;
+    border-top: none;
+    position: relative;
+}
+
+.caltable .cal-cell-long .event {
+    position: absolute;
+    box-sizing: border-box;
+    padding: 0;
+}
+
 .caltable .cal-cell {
     overflow-y: auto;
+    /* for long events */
+    overflow-x: hidden;
 }
 
 .cal-cell .event {
@@ -355,11 +396,16 @@ along with their colors.
     font-family: arial;
 }
 
+
 .date-info .day-number {
     font-size: 150%;
     padding: 2pt;
 }
 
+.caltable .day-number {
+    font-size: initial;
+}
+
 .date-info.current .day-number {
     color: black;
 }
-- 
cgit v1.2.3