Merge pull request #678 from owncloud/bugfix/fix-date-alignment-sidebar

Fixes alignment issues in the sidebar.
owncloud · Aug 5, 2016 · 54266cd · 54266cd
2 parents a45b460 + 15982ef
commit 54266cd
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 9 deletions.
diff --git a/css/app/eventdialog.css b/css/app/eventdialog.css
@@ -40,6 +40,26 @@
 	display: block;
 }
 
+.advanced .btn-timezone {
+	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;
@@ -84,7 +104,7 @@
 }
 
 .advanced .events--date {
-	width: 80px;
+	width: 100%;
 }
 
 .events .events--input__full {
@@ -101,7 +121,7 @@
 }
 
 .advanced .events--time {
-	width: 75px;
+	width: 100%;
 }
 
 .events .events--checkbox {
@@ -192,7 +212,7 @@ button.delete:focus {
 }
 
 .advanced .pull-half {
-	width: 48% !important;
+	width: 45% !important;
 }
 
 .advanced .pull-quarter {

diff --git a/templates/editor.sidebar.php b/templates/editor.sidebar.php
@@ -13,28 +13,27 @@ class="advanced--input h2"
 						ng-options="c as c.displayname for c in calendars | orderBy:['order'] | calendarSelectorFilter: oldCalendar"></select>
 			</fieldset>
 
-			<fieldset class="advanced--fieldset" ng-disabled="readOnly">
+			<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>
 					<ocdatetimepicker ng-model="properties.dtstart.value" disabletime="properties.allDay"></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)"></select>
+							ng-change="loadTimezone(properties.dtstart.parameters.zone)" class="timezone-select"></select>
 				</div>
 				<div class="event-time-interior pull-right pull-half">
 					<span><?php p($l->t('ends')); ?></span>
 					<ocdatetimepicker ng-model="properties.dtend.value" disabletime="properties.allDay"></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)"></select>
+						ng-change="loadTimezone(properties.dtend.parameters.zone)" class="timezone-select"></select>
 				</div>
-				<div class="clear-both"></div>
-				<div class="advanced--checkbox pull-left">
+				<div class="advanced--checkbox pull-left pull-half">
 					<input type="checkbox" name="alldayeventcheckbox"
 						   ng-model="properties.allDay"
 						   id="alldayeventcheckbox" class="event-checkbox"
 						   ng-change="toggledAllDay()"/>
 					<label for="alldayeventcheckbox"><?php p($l->t('All day Event'))?></label>
 				</div>
-				<div class="pull-right">
+				<div class="pull-right pull-half timezone-container">
 					<button class="button btn-default btn-timezone" ng-click="edittimezone = !edittimezone" ng-show="!readOnly" type="button">
 						<span class="icon-timezone"></span>
 					</button>