fix date timepicker layout in sidebar

Signed-off-by: Georg Ehrke <developer@georgehrke.com>
nextcloud · Apr 5, 2017 · 437ec2e · 437ec2e
1 parent 8f13705
commit 437ec2e
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 27 deletions.
diff --git a/css/app/eventdialog.css b/css/app/eventdialog.css
@@ -44,22 +44,10 @@
 	float: right;
 }
 
-.advanced .start-end-container {
-	margin-right: 15px;
-}
-
 .advanced .advanced--checkbox {
 	margin: 10px 0;
 }
 
-.advanced .timezone-container {
-	margin: 4px -17px;
-}
-
-.advanced .timezone-select {
-	width: 110% !important; /* very dirty hack to fix alignment issues. */
-}
-
 .modal-open .modal.popover,
 .modal-open .modal.import {
 	position: absolute;
@@ -99,28 +87,47 @@
 	margin-right: 0;
 }
 
+.advanced .event-time-interior,
 .events .event-time-interior {
-	width: 170px;
+	width: 40%;
+}
+
+@media (max-width: 1600px) {
+	.advanced .event-time-interior {
+		width: 45%;
+	}
+}
+
+@media (max-width: 1450px) {
+	.advanced .event-time-interior {
+		width: 48%;
+	}
 }
 
+@media (max-width: 1350px) {
+	.advanced .event-time-interior {
+		width: 100%;
+	}
+}
+
+.advanced .events--date,
 .events .events--date {
-	width: 55%;
+	/* width: 55%; */
+	width: calc(100% - 70px);
 	border-right-width: 0;
 	border-top-right-radius: 0;
 	border-bottom-right-radius: 0;
 	margin-right: 0;
 }
 
+.advanced .events--date:focus,
+.advanced .events--date:hover,
 .events .events--date:focus,
 .events .events--date:hover {
 	border-right-width: 1px;
 	border-right-style: solid;
 }
 
-.advanced .events--date {
-	width: 100%;
-}
-
 .events .events--input__full {
 	width: 345px;
 }
@@ -135,14 +142,19 @@
 	display: inline !important;
 }
 
+.advanced .events--time,
 .events .events--time {
-	width: 45%;
+	/* width: 45%; */
+	width: 70px;
 	border-left: 0;
 	border-top-left-radius: 0;
 	border-bottom-left-radius: 0;
 	margin-right: 0;
+	text-align: right;
 }
 
+.advanced .events--time:focus,
+.advanced .events--time:hover,
 .events .events--time:focus,
 .events .events--time:hover {
 	border-left-width: 1px;
@@ -158,10 +170,6 @@
 	resize: none;
 }
 
-.advanced .events--time {
-	width: 100%;
-}
-
 .events .events--checkbox {
 	padding: 3px 0 10px;
 }

diff --git a/templates/editor.sidebar.php b/templates/editor.sidebar.php
@@ -20,14 +20,14 @@ class="advanced--input h2 advanced--textarea"
 				</fieldset>
 
 				<fieldset class="advanced--fieldset start-end-container" ng-disabled="readOnly">
-					<div class="event-time-interior pull-left pull-half">
-						<span><?php p($l->t('starts')); ?></span>
+					<div class="event-time-interior pull-left">
+						<span><?php p($l->t('Starts')); ?></span>
 						<ocdatetimepicker ng-model="properties.dtstart.value" disabletime="properties.allDay" datetabindex="203" timetabindex="204" readonly="readOnly"></ocdatetimepicker>
 						<select ng-options="timezone.value as timezone.displayname | timezoneWithoutContinentFilter group by timezone.group for timezone in timezones" ng-model="properties.dtstart.parameters.zone" ng-show="edittimezone || readOnly" ng-disabled="properties.allDay"
 								ng-change="loadTimezone(properties.dtstart.parameters.zone)" class="timezone-select" tabindex="205"></select>
 					</div>
-					<div class="event-time-interior pull-right pull-half">
-						<span><?php p($l->t('ends')); ?></span>
+					<div class="event-time-interior pull-right">
+						<span><?php p($l->t('Ends')); ?></span>
 						<ocdatetimepicker ng-model="properties.dtend.value" disabletime="properties.allDay" datetabindex="206" timetabindex="207" readonly="readOnly"></ocdatetimepicker>
 						<select ng-options="timezone.value as timezone.displayname | timezoneWithoutContinentFilter group by timezone.group for timezone in timezones" ng-model="properties.dtend.parameters.zone" ng-show="edittimezone || readOnly" ng-disabled="properties.allDay"
 							ng-change="loadTimezone(properties.dtend.parameters.zone)" class="timezone-select" tabindex="208"></select>