From a64c2a665af1abe0b91f1c5eb1f97df91ed8a4de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Sun, 3 Oct 2021 17:48:13 +0200 Subject: Further work, rework popup. --- static/style.scss | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) (limited to 'static/style.scss') diff --git a/static/style.scss b/static/style.scss index a29bb24b..4b4f573b 100644 --- a/static/style.scss +++ b/static/style.scss @@ -744,6 +744,21 @@ along with their colors. ---------------------------------------- */ +popup-element { + display: none; + position: absolute; + z-index: 1000; + + /* ??? */ + left: 10px; + top: -50px; + + box-shadow: gray 10px 10px 10px; + + &.visible { + display: block; + } +} .popup { display: flex; @@ -757,21 +772,6 @@ along with their colors. min-width: 60ch; min-height: 30ch; - &-container { - display: none; - position: absolute; - z-index: 1000; - - /* ??? */ - left: 10px; - top: -50px; - - box-shadow: gray 10px 10px 10px; - - &.visible { - display: block; - } - } input { white-space: initial; -- cgit v1.2.3 From 4cf9587a5188e5853bbcf97b71109e7cb9331d9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Sun, 3 Oct 2021 21:54:30 +0200 Subject: work --- static/style.scss | 3 +++ 1 file changed, 3 insertions(+) (limited to 'static/style.scss') diff --git a/static/style.scss b/static/style.scss index 4b4f573b..cc1ae15b 100644 --- a/static/style.scss +++ b/static/style.scss @@ -772,6 +772,9 @@ popup-element { min-width: 60ch; min-height: 30ch; + select { + max-width: 100%; + } input { white-space: initial; -- cgit v1.2.3 From 4f499ccbf71d0ae662159515bb568826e72678a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Wed, 6 Oct 2021 04:32:11 +0200 Subject: Drive popup tabs through javascript. --- static/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'static/style.scss') diff --git a/static/style.scss b/static/style.scss index cc1ae15b..56acd18c 100644 --- a/static/style.scss +++ b/static/style.scss @@ -856,9 +856,10 @@ popup-element { .tab { > label { position: absolute; + top: calc(var(--tab-size) * var(--tab-index)); left: 100%; - top: 0; + /*top: 0; */ display: block; max-height: 5ex; -- cgit v1.2.3 From ae3142da0cf31696f4ab4ad258c5483b7c5490b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Mon, 8 Nov 2021 19:38:42 +0100 Subject: Major work on event creation. --- static/style.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'static/style.scss') diff --git a/static/style.scss b/static/style.scss index 56acd18c..4c645ff7 100644 --- a/static/style.scss +++ b/static/style.scss @@ -535,13 +535,19 @@ along with their colors. } /* graphical block in the calendar */ -.event { +vevent-block, .event { transition: 0.3s; font-size: var(--event-font-size); overflow: visible; background-color: var(--color); color: var(--complement); + position: absolute; + width: 100%; + min-height: 1em; + border: 1px solid black; + /* backgroudn: blue; */ + /* Event is not confirmed to happen */ &.tentative { border: 3px dashed black; -- cgit v1.2.3 From b0170d8cbb14a05d791ae5560c6e15da3fabfd7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Mon, 15 Nov 2021 00:47:37 +0100 Subject: cleanup --- static/style.scss | 2 ++ 1 file changed, 2 insertions(+) (limited to 'static/style.scss') diff --git a/static/style.scss b/static/style.scss index 4c645ff7..9833a77a 100644 --- a/static/style.scss +++ b/static/style.scss @@ -568,6 +568,8 @@ vevent-block, .event { &.generated { opacity: 40%; + /* TODO only disable transitions for top/botom, and only + * when dragging (not when updating through other means) */ transition: none; } -- cgit v1.2.3 From e7d80fcfa91f92c712110d58151df0f8f1e6ed86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Sun, 21 Nov 2021 16:08:08 +0100 Subject: Rework popup components. Previously popups were driven through some CSS hacks, which used labels with specific positioning, and z-index changes. This never really worked, and led the rest of the tree to be unmanagable. This commit replaces that system with a simpler one, which is being driven by javascript. This also allowed a much simpler tree, which allowed us to - make the popups rezisable (with a resize anchor) - move the window handle to above (configurable) - Add and remove tabs without having manually reflow where all labels are --- static/style.scss | 218 +++++++++++++++++++++++++----------------------------- 1 file changed, 101 insertions(+), 117 deletions(-) (limited to 'static/style.scss') diff --git a/static/style.scss b/static/style.scss index 9833a77a..64098283 100644 --- a/static/style.scss +++ b/static/style.scss @@ -24,7 +24,10 @@ html, body { /* main the graphical portion of both the wide and the table view */ - main { + > main { + /* these allow the main area to shrink, so that all areas will fit the + screen. It will however not shrink the elements, leading to our + (desired) scrollbar */ min-width: 0; /* for wide */ min-height: 0; /* for tall */ @@ -742,7 +745,7 @@ vevent-block, .event { .error { border: 3px solid red; background-color: pink; - + pre { padding: 1em; } @@ -766,157 +769,126 @@ popup-element { &.visible { display: block; } -} -.popup { - display: flex; - background-color: #dedede; - color: black; - font-size: 80%; + main { + resize: both; + overflow: auto; - /* overflow-y: auto; */ - max-width: 60ch; - max-height: 60ch; - min-width: 60ch; - min-height: 30ch; + min-height: calc(var(--tabcount) * #{$tablabel-margin + $tablabel-height}); - select { - max-width: 100%; - } + /* some form of sensible minimi and default size for the popup (s main area). */ + min-width: 150px; + width: 350px; + height: 250px; - input { - white-space: initial; - border: 1px solid gray; - max-width: 100%; - } - - .eventtext { - /* makes the text in the popup scroll, but not the sidebar */ - overflow-y: auto; - padding: 1em; - word-break: break-word; - - table { - word-break: initial; - font-size: 65%; + article { + padding: 1em; } } +} - .location { - font-style: initial; - } +.popup-control { + cursor: grab; + background-color: var(--color); - .category { - display: inline-block; - margin-right: 1ex; - } + display: flex; - .popup-control { - display: flex; + @if $popup-style == "left" { flex-direction: column; + padding: 1.2ex; + } @else { + flex-direction: row-reverse; + padding: 1ex; + } - /* not needed, but the icons aren't text - and should therefor not be copied */ - user-select: none; - - cursor: grab; - background-color: var(--color); - /* Transition for background color - * Matches that of '.event'. - * TODO break out to common place */ - transition: 0.3s; - - .btn { - max-width: 2em; - max-height: 2em; - margin: 1em; - display: flex; - align-items: center; - justify-content: center; + button { + display: block; + background: $blue; + color: white; + border: none; + box-shadow: $btn-height $btn-height gray; - font-size: 150%; + &:active { + transform: translate($btn-height, $btn-height); + box-shadow: none; } + @if $popup-style == "left" { + width: 9mm; + height: 9mm; + margin-bottom: 2mm; + } @else { + width: 7mm; + height: 7mm; + margin-left: 1mm; + } } } +.popup-root { + background-color: #dedede; + color: black; -#bar { - width: calc(100% + 2em); - height: 4px; - background: blue; - border-color: blue; - left: -1em; -} + display: flex; -/* Tabs ----------------------------------------- -*/ + @if $popup-style == "left" { + flex-direction: row; + } @else { + flex-direction: column; + } -.tabgroup { - position: relative; - width: 100%; - resize: both; - --tab-size: 6ex; -} -.tab { - > label { + [role="tablist"] { + display: flex; + flex-direction: column; position: absolute; - top: calc(var(--tab-size) * var(--tab-index)); - left: 100%; - /*top: 0; */ - display: block; + margin: 0; + padding: 0; - max-height: 5ex; - min-height: 5ex; + [role="tab"] { + height: $tablabel-height; + margin-bottom: $tablabel-margin; - min-width: 5ex; - width: 5ex; + width: 5ex; + &:hover { + width: 10ex; + } - transition: width 0.1s ease-in-out; - &:hover { - width: 10ex; + transition: width 0.1s ease-in-out; + border: 1px solid #ccc; + border-radius: 0 5px 5px 0; + background-color: #aeaeae; } - border: 1px solid #ccc; - border-radius: 0 5px 5px 0; - background-color: #aeaeae; - - display: flex; - justify-content: center; - align-items: center; - } - - [type=radio] { - display: none; - &:checked ~ label { - z-index: 100; - /* to align all tab */ - border-left: 3px solid transparent; + [aria-selected="true"] { + border-left: none; background-color: #dedede; - - ~ .content { - z-index: 100; - } } } +} - .content { - position: absolute; - top: 0; - left: 0; - background-color: #dedede; - right: 0; - bottom: 0; - overflow: auto; +vevent-edit { - min-width: 100%; - min-height: 100%; + select { + max-width: 100%; + } + + input { + white-space: initial; + border: 1px solid gray; + max-width: 100%; } + .eventtext { + word-break: break-word; + + table { + word-break: initial; + font-size: 65%; + } + } .edit-form { label { @@ -936,10 +908,22 @@ popup-element { .timeinput { } } +} + +vevent-dl { + font-size: 80%; +} +#bar { + width: calc(100% + 2em); + height: 4px; + background: blue; + border-color: blue; + left: -1em; } + .plusminuschecked label { color: black; } -- cgit v1.2.3 From 9523eef79eac8fc28a4e759f3a401726ad8a1edc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Fri, 26 Nov 2021 17:14:48 +0100 Subject: Made vevent-dl prettier. --- static/style.scss | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'static/style.scss') diff --git a/static/style.scss b/static/style.scss index 64098283..b887999b 100644 --- a/static/style.scss +++ b/static/style.scss @@ -912,6 +912,11 @@ vevent-edit { vevent-dl { font-size: 80%; + + dl { + display: grid; + grid-template-columns: 1fr 1fr; + } } -- cgit v1.2.3 From 4b9fa491fa44c6a4df803b49e4987a03bdc71a0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Fri, 26 Nov 2021 17:53:32 +0100 Subject: Display categories in event description. --- static/style.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'static/style.scss') diff --git a/static/style.scss b/static/style.scss index b887999b..bd29f4cc 100644 --- a/static/style.scss +++ b/static/style.scss @@ -662,6 +662,18 @@ vevent-block, .event { color: $gray; padding-right: 1em; } + + .categories > a::after { + content: "," + } + + .categories > a:last-child::after { + content: "" + } + + .categories > a { + margin-right: 1ch; + } } .attach { -- cgit v1.2.3 From e71f0c20adc4dc2f49bca99a859241fdadf376d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Tue, 30 Nov 2021 01:09:53 +0100 Subject: Rework tab system. This sepparates popup-elements from their tabbed contents, allowing clearer sepparations of concerns, along with easier adding and removing of tabs to the tabset! --- static/style.scss | 34 ++++++++++++++++++++++++++-------- 1 file changed, 26 insertions(+), 8 deletions(-) (limited to 'static/style.scss') diff --git a/static/style.scss b/static/style.scss index bd29f4cc..e0a7e21e 100644 --- a/static/style.scss +++ b/static/style.scss @@ -782,20 +782,19 @@ popup-element { display: block; } - main { + > * { resize: both; + /* This overflow: auto gives us the correct resize handle */ overflow: auto; + /* TODO this doesn't work, since tabcount is sepparate fronm + * popup... */ min-height: calc(var(--tabcount) * #{$tablabel-margin + $tablabel-height}); /* some form of sensible minimi and default size for the popup (s main area). */ min-width: 150px; width: 350px; height: 250px; - - article { - padding: 1em; - } } } @@ -839,9 +838,6 @@ popup-element { } .popup-root { - background-color: #dedede; - color: black; - display: flex; @if $popup-style == "left" { @@ -849,7 +845,20 @@ popup-element { } @else { flex-direction: column; } +} + +tab-group { + background-color: #dedede; + color: black; + width: 100%; + height: 100%; + /* This overflow: auto gives us the correct rendering of the content */ + overflow: auto; + + [role="tabpanel"] { + padding: 1em; + } [role="tablist"] { display: flex; @@ -922,6 +931,15 @@ vevent-edit { } } +.checkboxes { + display: grid; + grid-template-rows: 1fr 1fr; + justify-items: baseline; + + label {grid-row: 1;} + input {grid-row: 2;} +} + vevent-dl { font-size: 80%; -- cgit v1.2.3 From 62f08bec4e5fe208ee9481029ab83f15ed8b8a01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Thu, 9 Dec 2021 19:17:30 +0100 Subject: CSS to prevent event blocks from overflowing. --- static/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'static/style.scss') diff --git a/static/style.scss b/static/style.scss index e0a7e21e..a76a76c2 100644 --- a/static/style.scss +++ b/static/style.scss @@ -541,7 +541,7 @@ along with their colors. vevent-block, .event { transition: 0.3s; font-size: var(--event-font-size); - overflow: visible; + overflow: hidden; background-color: var(--color); color: var(--complement); -- cgit v1.2.3 From 03331033ea7105f4f7adbae639c22efa98fa8017 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Fri, 10 Dec 2021 00:12:52 +0100 Subject: Better handling of popup visibility. --- static/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'static/style.scss') diff --git a/static/style.scss b/static/style.scss index a76a76c2..847ffb16 100644 --- a/static/style.scss +++ b/static/style.scss @@ -778,7 +778,7 @@ popup-element { box-shadow: gray 10px 10px 10px; - &.visible { + &[visible] { display: block; } -- cgit v1.2.3 From de593cf0d4a6a082f0c42e00be395e0f6cf49e96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Fri, 10 Dec 2021 00:16:25 +0100 Subject: Remove popup.ts, migrating all functionality elsewhere. The simple procedures - close_popup - open_popup - toggle_popup - find_popup Were mostly here for legacy. The procedures - popup_from_event - event_from_popup where holdovers from the old way of finding popups, and should be done through the VEvent objects now. close_all_popups was used only once, so the code was moved inline. Finally, moving the last hovered over popup to the top, along with tab switch keybings were restored, and moved to propper places. --- static/style.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'static/style.scss') diff --git a/static/style.scss b/static/style.scss index 847ffb16..92ab9441 100644 --- a/static/style.scss +++ b/static/style.scss @@ -772,6 +772,10 @@ popup-element { position: absolute; z-index: 1000; + &[active] { + z-index: 1001; + } + /* ??? */ left: 10px; top: -50px; -- cgit v1.2.3 From 1ef01481fa9e70ef688b24ffd7957b97f020bb2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Fri, 10 Dec 2021 01:49:11 +0100 Subject: Major move from week to calendar meta-view. Also repairs month view. --- static/style.scss | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'static/style.scss') diff --git a/static/style.scss b/static/style.scss index 92ab9441..2ae55a31 100644 --- a/static/style.scss +++ b/static/style.scss @@ -332,12 +332,15 @@ along with their colors. .cal-cell { overflow-y: auto; - .event { + .event, vevent-block { font-size: 8pt; border-radius: 5px; padding: 2px; - margin: 2px; + margin-top: 2px; + margin-bottom: 2px; font-family: arial; + + box-sizing: border-box; } } @@ -545,7 +548,9 @@ vevent-block, .event { background-color: var(--color); color: var(--complement); - position: absolute; + // position: absolute; + display: block; + width: 100%; min-height: 1em; border: 1px solid black; -- cgit v1.2.3 From 5a34ac846be467e80e24d04a8683d16924c43b36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Fri, 10 Dec 2021 12:08:43 +0100 Subject: Repair event position in week. --- static/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'static/style.scss') diff --git a/static/style.scss b/static/style.scss index 2ae55a31..e4aa527f 100644 --- a/static/style.scss +++ b/static/style.scss @@ -507,7 +507,8 @@ along with their colors. * This makes the borders of the object be part of the size. * Making placing it on the correct line much simpler. */ -.clock, .days .event, .eventlike { +.clock, .eventlike, +.days vevent-block { position: absolute; box-sizing: border-box; margin: 0; -- cgit v1.2.3 From 9e063a71c7c50cb9aa2833d8defd4a9b33e2da82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Fri, 10 Dec 2021 16:06:51 +0100 Subject: '.btn' no longer contains div. Previously I generated buttons on the form
& , which was invalid for button tags. This removes the inner div, with the only cost being that the hitbox for the button is slightly wonky if pressed at the top left where the button isn't when it's depressed, since I move it. --- static/style.scss | 32 +++++++++++--------------------- 1 file changed, 11 insertions(+), 21 deletions(-) (limited to 'static/style.scss') diff --git a/static/style.scss b/static/style.scss index e4aa527f..4e9936a2 100644 --- a/static/style.scss +++ b/static/style.scss @@ -131,8 +131,6 @@ html, body { */ .btn { - padding: 0; - /* if a */ text-decoration: none; @@ -140,29 +138,21 @@ html, body { border: none; background-color: inherit; - > div { - padding: 0.5em; - background-color: $blue; - color: white; - - box-sizing: border-box; - width: 100%; - height: 100%; + /* --- */ - display: flex; - justify-content: center; - align-items: center; + box-sizing: border-box; + padding: 0.5em; - /* shouldn't be needed, but otherwise wont align with a text input - inside a shared flex-container. - It however seems to make and