From fda85b38f9c69da527a7e8433841dc8fcd1f8531 Mon Sep 17 00:00:00 2001 From: Fenris Wolf Date: Sun, 20 Oct 2024 18:26:05 +0200 Subject: [PATCH] [mod] widget:weekview [mod] page:overview:responsive --- source/data/localization/deu.loc.json | 1 + source/data/localization/eng.loc.json | 1 + source/pages/overview/logic.ts | 33 +++---- .../pages/overview/templates/default.html.tpl | 4 + source/style/common.css | 69 -------------- source/style/page-calendar_add.css | 13 +++ source/style/page-event_add.css | 8 ++ source/style/page-event_edit.css | 8 ++ source/style/page-overview.css | 63 +++++++++++++ source/style/pages.css | 60 ------------ source/style/plankton.css | 6 ++ .../{widgets.css => widget-listview.css} | 32 ++----- source/style/widget-sources.css | 14 +++ source/style/widget-weekview.css | 91 +++++++++++++++++++ source/widgets/listview/logic.ts | 24 ++++- .../widgets/listview/templates/entry.html.tpl | 6 +- .../widgets/listview/templates/main.html.tpl | 1 + .../templates/tableview-cell-entry.html.tpl | 2 +- .../templates/tableview-cell.html.tpl | 6 +- .../weekview/templates/tableview-row.html.tpl | 2 +- 20 files changed, 259 insertions(+), 185 deletions(-) create mode 100644 source/style/page-calendar_add.css create mode 100644 source/style/page-event_add.css create mode 100644 source/style/page-event_edit.css create mode 100644 source/style/page-overview.css delete mode 100644 source/style/pages.css rename source/style/{widgets.css => widget-listview.css} (62%) create mode 100644 source/style/widget-sources.css create mode 100644 source/style/widget-weekview.css diff --git a/source/data/localization/deu.loc.json b/source/data/localization/deu.loc.json index 5698e2b..f8bf079 100644 --- a/source/data/localization/deu.loc.json +++ b/source/data/localization/deu.loc.json @@ -38,6 +38,7 @@ "calendar.access.public": "öffentlich", "calendar.access.default_level": "Standard", "calendar.access.attributed": "Zuweisungen", + "widget.listview.add": "Termin anlegen", "widget.weekview.controls.year": "Jahr", "widget.weekview.controls.week": "Woche", "widget.weekview.controls.count": "Anzahl", diff --git a/source/data/localization/eng.loc.json b/source/data/localization/eng.loc.json index a7ea3e7..a365bbd 100644 --- a/source/data/localization/eng.loc.json +++ b/source/data/localization/eng.loc.json @@ -38,6 +38,7 @@ "calendar.access.public": "public", "calendar.access.default_level": "default", "calendar.access.attributed": "attributed", + "widget.listview.add": "add event", "widget.weekview.controls.year": "Year", "widget.weekview.controls.week": "Week", "widget.weekview.controls.count": "Count", diff --git a/source/pages/overview/logic.ts b/source/pages/overview/logic.ts index 8486100..202a884 100644 --- a/source/pages/overview/logic.ts +++ b/source/pages/overview/logic.ts @@ -30,7 +30,7 @@ namespace _zeitbild.frontend_web.pages.overview { } ); - target_element.querySelector("#overview").classList.toggle("compact", compact); + target_element.querySelector("#overview").classList.toggle("overview-compact", compact); // hint { if (! await _zeitbild.frontend_web.backend.is_logged_in()) { @@ -88,14 +88,9 @@ namespace _zeitbild.frontend_web.pages.overview }, } ); - if (compact) { - // do nothing - } - else { - await widget_sources.load(target_element.querySelector("#overview-pane-left")); - } + await widget_sources.load(target_element.querySelector("#overview-pane-left")); } - // view + // events { const get_entries = (from_pit, to_pit, calendar_ids) => _zeitbild.frontend_web.backend.events( from_pit, @@ -139,10 +134,9 @@ namespace _zeitbild.frontend_web.pages.overview } } }; - const widget = ( - compact - ? - ( + // listview + { + const widget = ( new _zeitbild.frontend_web.widgets.listview.class_widget_listview( get_entries, { @@ -162,9 +156,12 @@ namespace _zeitbild.frontend_web.pages.overview }, } ) - ) - : - ( + ); + await widget.load(target_element.querySelector("#overview-pane-right-listview")); + } + // weekview + { + const widget = ( new _zeitbild.frontend_web.widgets.weekview.class_widget_weekview( get_entries, { @@ -184,9 +181,9 @@ namespace _zeitbild.frontend_web.pages.overview }, } ) - ) - ); - await widget.load(target_element.querySelector("#overview-pane-right")); + ); + await widget.load(target_element.querySelector("#overview-pane-right-weekview")); + } } return Promise.resolve(undefined); }, diff --git a/source/pages/overview/templates/default.html.tpl b/source/pages/overview/templates/default.html.tpl index 2076f57..237c7c9 100644 --- a/source/pages/overview/templates/default.html.tpl +++ b/source/pages/overview/templates/default.html.tpl @@ -5,6 +5,10 @@
+
+
+
+
diff --git a/source/style/common.css b/source/style/common.css index 5b051a7..cde5f65 100644 --- a/source/style/common.css +++ b/source/style/common.css @@ -2,72 +2,3 @@ { filter: saturate(0); } - -.calendar-cell -{ - border: 1px solid hsl(0,0%,37.5%); - padding: 8px; - vertical-align: top; -} - -.calendar-cell-day -{ - width: 13.5%; -} - -.calendar-cell-week -{ - width: 5.5%; -} - -.calendar-cell-regular -{ - width: 13.5%; - height: 120px; - - cursor: copy; -} - -.calendar-cell-today -{ - outline: 2px solid hsl(0, 0%, 100%); -} - -.calendar-day -{ - font-size: 0.75em; - cursor: help; -} - -.calendar-events -{ - margin: 0; padding: 0; - list-style-type: none; -} - -.calendar-event_entry -{ - margin: 4px; - padding: 4px; - border-radius: 2px; - font-size: 0.75em; - color: #FFF; - font-weight: bold; -} - -.calendar-event_entry.access_level-none -, -.calendar-event_entry.access_level-view -{ - /* - cursor: default; - */ - cursor: pointer; -} - -.calendar-event_entry.access_level-edit -, -.calendar-event_entry.access_level-admin -{ - cursor: pointer; -} diff --git a/source/style/page-calendar_add.css b/source/style/page-calendar_add.css new file mode 100644 index 0000000..369de40 --- /dev/null +++ b/source/style/page-calendar_add.css @@ -0,0 +1,13 @@ +#calendar_add .plankton_input_group_field[rel="attributed"] > .plankton_input_list > .plankton_input_list_elements > .plankton_input_list_element +{ + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +#calendar_add .plankton_input_group_field[rel="attributed"] > .plankton_input_list > .plankton_input_list_elements > .plankton_input_list_element > .plankton_input_list_element_input > .plankton_input_group +{ + display: flex; + flex-direction: row; + flex-wrap: wrap; +} diff --git a/source/style/page-event_add.css b/source/style/page-event_add.css new file mode 100644 index 0000000..c0e2d44 --- /dev/null +++ b/source/style/page-event_add.css @@ -0,0 +1,8 @@ +#event_add .plankton_input_group_field[rel="begin"] > .plankton_input_group +, +#event_add .plankton_input_group_field[rel="end"] > .plankton_input_soft_container > .plankton_input_soft_core_wrapper > .plankton_input_group +{ + display: flex; + flex-direction: row; + flex-wrap: wrap; +} diff --git a/source/style/page-event_edit.css b/source/style/page-event_edit.css new file mode 100644 index 0000000..c3ac020 --- /dev/null +++ b/source/style/page-event_edit.css @@ -0,0 +1,8 @@ +#event_edit .plankton_input_group_field[rel="begin"] > .plankton_input_group +, +#event_edit .plankton_input_group_field[rel="end"] > .plankton_input_soft_container > .plankton_input_soft_core_wrapper > .plankton_input_group +{ + display: flex; + flex-direction: row; + flex-wrap: wrap; +} diff --git a/source/style/page-overview.css b/source/style/page-overview.css new file mode 100644 index 0000000..5c5ffe0 --- /dev/null +++ b/source/style/page-overview.css @@ -0,0 +1,63 @@ +#overview-head +{ + text-align: center; + font-weight: bold; + margin-bottom: 12px; +} + +#overview-body +{ + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +#overview-body #overview-pane-left +{ + flex-grow: 0; + flex-shrink: 1; +} + +#overview-body #overview-pane-right +{ + flex-grow: 1; + flex-shrink: 1; +} + +@media all and (max-width: 950px) +{ + #overview #overview-pane-left + { + flex-basis: 0%; + } + + #overview #overview-pane-left > * + { + display: none; + } + + #overview #overview-pane-right + { + flex-basis: 100%; + } + + #overview #overview-pane-right-listview {} + #overview #overview-pane-right-weekview {display: none;} +} + +@media not all and (max-width: 950px) +{ + #overview #overview-pane-left + { + flex-basis: 12.5%; + } + + #overview #overview-pane-right + { + flex-basis: 87.5%; + } + + #overview #overview-pane-right-listview {display: none;} + #overview #overview-pane-right-weekview {} + +} diff --git a/source/style/pages.css b/source/style/pages.css deleted file mode 100644 index c957ddd..0000000 --- a/source/style/pages.css +++ /dev/null @@ -1,60 +0,0 @@ -#calendar_add .plankton_input_group_field[rel="attributed"] > .plankton_input_list > .plankton_input_list_elements > .plankton_input_list_element -{ - display: flex; - flex-direction: row; - flex-wrap: wrap; -} - -#calendar_add .plankton_input_group_field[rel="attributed"] > .plankton_input_list > .plankton_input_list_elements > .plankton_input_list_element > .plankton_input_list_element_input > .plankton_input_group -{ - display: flex; - flex-direction: row; - flex-wrap: wrap; -} - -#event_add .plankton_input_group_field[rel="begin"] > .plankton_input_group -, -#event_add .plankton_input_group_field[rel="end"] > .plankton_input_soft_container > .plankton_input_soft_core_wrapper > .plankton_input_group -, -#event_edit .plankton_input_group_field[rel="begin"] > .plankton_input_group -, -#event_edit .plankton_input_group_field[rel="end"] > .plankton_input_soft_container > .plankton_input_soft_core_wrapper > .plankton_input_group -{ - display: flex; - flex-direction: row; - flex-wrap: wrap; -} - -#overview-head -{ - text-align: center; - font-weight: bold; - margin-bottom: 12px; -} - -#overview-body -{ - display: flex; - flex-direction: row; - flex-wrap: wrap; -} - -#overview-body:not(.compact) #overview-pane-left -{ - flex-basis: 12.5%; -} - -#overview-body:not(.compact) #overview-pane-right -{ - flex-basis: 87.5%; -} - -#overview-body.compact #overview-pane-left -{ - flex-basis: 0%; -} - -#overview-body.compact #overview-pane-right -{ - flex-basis: 100%; -} diff --git a/source/style/plankton.css b/source/style/plankton.css index d59c33e..5595844 100644 --- a/source/style/plankton.css +++ b/source/style/plankton.css @@ -33,3 +33,9 @@ { display: inline-block; } + +.plankton_input_group_field textarea +{ + min-width: 250px; + min-height: 75px; +} diff --git a/source/style/widgets.css b/source/style/widget-listview.css similarity index 62% rename from source/style/widgets.css rename to source/style/widget-listview.css index 5c45cfa..cce2eb5 100644 --- a/source/style/widgets.css +++ b/source/style/widget-listview.css @@ -1,33 +1,13 @@ -.sources +.listview-add { - margin: 0; - padding: 0; - list-style-type: none; - font-size: 0.75em; + /* + text-transform: capitalize; + */ } -.sources-entry +.listview-add-hidden { - margin: 8px; - padding: 4px; - cursor: pointer; -} - -.weekview-controls -{ - margin-bottom: 12px; - text-align: center; -} - -.weekview-control -{ - margin: 0 12px; -} - -.weekview-table table -{ - width: 100%; - border-collapse: collapse; + display: none; } .listview-entries diff --git a/source/style/widget-sources.css b/source/style/widget-sources.css new file mode 100644 index 0000000..70ccf1d --- /dev/null +++ b/source/style/widget-sources.css @@ -0,0 +1,14 @@ +.sources +{ + margin: 0; + padding: 0; + list-style-type: none; + font-size: 0.75em; +} + +.sources-entry +{ + margin: 8px; + padding: 4px; + cursor: pointer; +} diff --git a/source/style/widget-weekview.css b/source/style/widget-weekview.css new file mode 100644 index 0000000..9f38e48 --- /dev/null +++ b/source/style/widget-weekview.css @@ -0,0 +1,91 @@ +.weekview-controls +{ + margin-bottom: 12px; + text-align: center; +} + +.weekview-control +{ + margin: 0 12px; +} + +.weekview-table table +{ + width: 100%; + border-collapse: collapse; +} + +.weekview-cell +{ + border: 1px solid hsl(0,0%,37.5%); + padding: 8px; + vertical-align: top; +} + +.weekview-cell-day +{ + width: 13.5%; +} + +.weekview-cell-week +{ + width: 5.5%; +} + +.weekview-cell-regular +{ + width: 13.5%; + height: 120px; + + cursor: copy; +} + +.weekview-cell-today +{ + outline: 2px solid hsl(0, 0%, 100%); +} + +.weekview-day +{ + font-size: 0.75em; + cursor: help; +} + +.weekview-events +{ + margin: 0; padding: 0; + list-style-type: none; +} + +.weekview-event_entry +{ + margin: 4px; + padding: 4px; + border-radius: 2px; + font-size: 0.75em; + color: #FFF; + font-weight: bold; + + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + min-width: 75px; + word-wrap: anywhere; +} + +.weekview-event_entry.access_level-none +, +.weekview-event_entry.access_level-view +{ + /* + cursor: default; + */ + cursor: pointer; +} + +.weekview-event_entry.access_level-edit +, +.weekview-event_entry.access_level-admin +{ + cursor: pointer; +} diff --git a/source/widgets/listview/logic.ts b/source/widgets/listview/logic.ts index 02e514f..bb8a945 100644 --- a/source/widgets/listview/logic.ts +++ b/source/widgets/listview/logic.ts @@ -124,6 +124,15 @@ namespace _zeitbild.frontend_web.widgets.listview "widget-listview", "main", { + "add_href": "", + "add_label": lib_plankton.translate.get("widget.listview.add"), + "add_extra_classes": ( + (! await _zeitbild.frontend_web.backend.is_logged_in()) + ? + " listview-add-hidden" + : + "" + ), "entries": ( ( await _zeitbild.frontend_web.helpers.promise_row( @@ -140,7 +149,7 @@ namespace _zeitbild.frontend_web.widgets.listview "location_extra_classes": ( (entry.event_object.location === null) ? - "listview-entry-field-empty" + " listview-entry-field-empty" : "" ), @@ -155,7 +164,7 @@ namespace _zeitbild.frontend_web.widgets.listview "link_extra_classes": ( (entry.event_object.link === null) ? - "listview-entry-field-empty" + " listview-entry-field-empty" : "" ), @@ -171,7 +180,7 @@ namespace _zeitbild.frontend_web.widgets.listview "description_extra_classes": ( (entry.event_object.description === null) ? - "listview-entry-field-empty" + " listview-entry-field-empty" : "" ), @@ -226,12 +235,19 @@ namespace _zeitbild.frontend_web.widgets.listview // control { + target_element.querySelector(".listview-add").addEventListener( + "click", + (event) => { + event.preventDefault(); + this.action_add(); + } + ); target_element.querySelectorAll(".listview-entry").forEach( (element) => { element.addEventListener( "click", (event) => { - if (! (event.target === element)) { + if ((event.target as Element).nodeName === "A") { // do nothing } else { diff --git a/source/widgets/listview/templates/entry.html.tpl b/source/widgets/listview/templates/entry.html.tpl index eea800b..62534cb 100644 --- a/source/widgets/listview/templates/entry.html.tpl +++ b/source/widgets/listview/templates/entry.html.tpl @@ -3,16 +3,16 @@
{{when_value}}
-
+
{{location_label}} {{location_value}}
-
+
{{link_label}} {{link_action}}