zeitbild/frontend-dali
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[mod] widget:weekview [mod] page:overview:responsive

Browse source
This commit is contained in:
Fenris Wolf 2024-10-20 18:26:05 +02:00
parent 18fcdd881e
commit fda85b38f9
20 changed files with 259 additions and 185 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
source/data/localization/deu.loc.json
View file

@ -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",

1
source/data/localization/eng.loc.json
View file

@ -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",

27
source/pages/overview/logic.ts
View file

@ -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"));
}
}
// 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
}
}
};
// listview
{
const widget = (
compact
?
(
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<void>(undefined);
},

4
source/pages/overview/templates/default.html.tpl
View file

@ -5,6 +5,10 @@
<div id="overview-pane-left">
</div>
<div id="overview-pane-right">
<div id="overview-pane-right-weekview">
</div>
<div id="overview-pane-right-listview">
</div>
</div>
</div>
</div>

69
source/style/common.css
View file

@ -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;
}

13
source/style/page-calendar_add.css Normal file
View file

@ -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;
}

8
source/style/page-event_add.css Normal file
View file

@ -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;
}

8
source/style/page-event_edit.css Normal file
View file

@ -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;
}

63
source/style/page-overview.css Normal file
View file

@ -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 {}
}

60
source/style/pages.css
View file

@ -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%;
}

6
source/style/plankton.css
View file

@ -33,3 +33,9 @@
{
display: inline-block;
}
.plankton_input_group_field textarea
{
min-width: 250px;
min-height: 75px;
}

32
source/style/widgets.css → source/style/widget-listview.css
View file

@ -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

14
source/style/widget-sources.css Normal file
View file

@ -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;
}

91
source/style/widget-weekview.css Normal file
View file

@ -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;
}

24
source/widgets/listview/logic.ts
View file

@ -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<string>(
@ -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 {

6
source/widgets/listview/templates/entry.html.tpl
View file

@ -3,16 +3,16 @@
<div class="listview-entry-field listview-entry-when">
<span class="listview-entry-value">{{when_value}}</span>
</div>
<div class="listview-entry-field listview-entry-location {{location_extra_classes}}">
<div class="listview-entry-field listview-entry-location{{location_extra_classes}}">
<span class="listview-entry-label">{{location_label}}</span>
<span class="listview-entry-value">{{location_value}}</span>
</div>
<div class="listview-entry-field listview-entry-link {{link_extra_classes}}">
<div class="listview-entry-field listview-entry-link{{link_extra_classes}}">
<span class="listview-entry-label">{{link_label}}</span>
<a class="listview-entry-value" href="{{link_value}}" target="_blank">{{link_action}}</a>
</div>
<!--
<div class="listview-entry-field listview-entry-description {{description_extra_classes}}">
<div class="listview-entry-field listview-entry-description{{description_extra_classes}}">
<span class="listview-entry-label">{{description_label}}</span>
<span class="listview-entry-value">{{description_value}}</span>
</div>

1
source/widgets/listview/templates/main.html.tpl
View file

@ -1,4 +1,5 @@
<div class="listview">
<a class="listview-add{{add_extra_classes}}" href="{{add_href}}">{{add_label}}</a>
<ul class="listview-entries">
{{entries}}
</ul>

2
source/widgets/weekview/templates/tableview-cell-entry.html.tpl
View file

@ -1,3 +1,3 @@
<li class="calendar-event_entry{{additional_classes}}" style="background-color: {{color}};" title="{{title}}" rel="{{rel}}">
<li class="weekview-event_entry{{additional_classes}}" style="background-color: {{color}};" title="{{title}}" rel="{{rel}}">
{{name}}
</li>

6
source/widgets/weekview/templates/tableview-cell.html.tpl
View file

@ -1,8 +1,8 @@
<td class="calendar-cell calendar-cell-regular{{extra_classes}}" rel="{{rel}}">
<span class="calendar-day" title="{{title}}">
<td class="weekview-cell weekview-cell-regular{{extra_classes}}" rel="{{rel}}">
<span class="weekview-day" title="{{title}}">
{{day}}
</span>
<ul class="calendar-events">
<ul class="weekview-events">
{{entries}}
</ul>
</td>

2
source/widgets/weekview/templates/tableview-row.html.tpl
View file

@ -1,5 +1,5 @@
<tr>
<th class="calendar-cell calendar-cell-week">
<th class="weekview-cell weekview-cell-week">
{{week}}
</th>
{{cells}}