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

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

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

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) {
+				await widget_sources.load(target_element.querySelector("#overview-pane-left"));
-					// 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
 						}
 					}
 				};
-				const widget = (
+				// listview
-					compact
+				{
-					?
+					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-weekview"));
-				await widget.load(target_element.querySelector("#overview-pane-right"));
+				}
 			}
 			return Promise.resolve<void>(undefined);
 		},

source/pages/overview/templates/default.html.tpl

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

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

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

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

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

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

source/style/pages.css

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

source/style/plankton.css

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

source/style/widget-listview.css

@@ -1,33 +1,13 @@
-.sources
+.listview-add
 {
-	margin: 0;
+	/*
-	padding: 0;
+	text-transform: capitalize;
-	list-style-type: none;
+	 */
-	font-size: 0.75em;
 }
 
-.sources-entry
+.listview-add-hidden
 {
-	margin: 8px;
+	display: none;
-	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;
 }
 
 .listview-entries

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

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

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

source/widgets/listview/templates/entry.html.tpl

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

source/widgets/listview/templates/main.html.tpl

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

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

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

source/widgets/weekview/templates/tableview-cell.html.tpl

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

source/widgets/weekview/templates/tableview-row.html.tpl

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