From 5f99f4456ddd1c776e865437c8bcbf2e31285b22 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Mon, 18 Nov 2013 20:11:12 +0100
Subject: [PATCH] properly lay out event detail view, a first step

---
 css/style.css                |  63 +++++++++++++--
 templates/part.editevent.php |   7 +-
 templates/part.eventform.php | 147 ++++++++++++++---------------------
 templates/part.newevent.php  |   2 +-
 4 files changed, 120 insertions(+), 99 deletions(-)

diff --git a/css/style.css b/css/style.css
index 61f9d918..3574db0a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -135,19 +135,72 @@ button.category{margin:0 3px;}
 	font-weight: bold;
 }
 
-/* bigger event title in detail view */
-#event-title {
+/* input fields take whole width */
+#event-title,
+#event-location,
+#category,
+#event-description {
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 	width: 100%;
+	margin: 3px 0;
+}
+/* bigger event title in detail view */
+#event-title {
 	font-size: 20px;
+}
+/* group from and to date fields */
+#event-time {
+	display: block;
+	margin: 5px 0;
+}
+#event-time-from {
+	float: left;
+}
+#event-time-to {
+	float: right;
+}
+#from, #to {
+	width: 65px;
 	margin: 0;
 }
+#fromtime, #totime {
+	margin: 0;
+}
+#event-allday {
+	display: inline-block;
+	margin: 7px 0;
+}
+/* category input field leaves room for edit button */
+#category {
+	width: 90%;
+}
+#editCategories {
+	display: inline-block;
+	padding: 6px 12px;
+}
+/* whole line for buttons of 'Advanced' and 'Export' */
+#advanced_options_button,
+#editEvent-export {
+	display: block;
+	margin: 0;
+}
+/* normal font weight for secondary buttons for less obtrusiveness */
+#advanced_options_button,
+#editEvent-export,
+#editEvent-delete {
+	font-weight: normal;
+}
+/* more space for action buttons below */
+#actions {
+	height: 45px;
+}
+
 
 /* make popups scrollable in smaller viewports */
 .ui-dialog {
-	height: 94% !important;
-	top: 4% !important;
+	max-height: 80% !important;
+	top: 10% !important;
 	overflow-y: auto;
 	overflow-x: hidden;
 	padding: 0;
@@ -156,7 +209,7 @@ button.category{margin:0 3px;}
 	overflow: initial;
 }
 #appsettings_popup {
-	height: 70%;
+	max-height: 70%;
 	overflow-y: auto;
 	overflow-x: hidden;
 }
diff --git a/templates/part.editevent.php b/templates/part.editevent.php
index 5bce4757..8418adfb 100644
--- a/templates/part.editevent.php
+++ b/templates/part.editevent.php
@@ -1,13 +1,12 @@
-<div id="event" title="<?php p($l->t("Edit an event"));?>">
+<div id="event" title="<?php p($l->t("Edit event"));?>">
 	<form id="event_form">
 		<input type="hidden" name="id" value="<?php p($_['eventid']) ?>">
 		<input type="hidden" name="lastmodified" value="<?php p($_['lastmodified']) ?>">
 <?php print_unescaped($this->inc("part.eventform")); ?>
 	<div style="width: 100%;text-align: center;color: #FF1D1D;" id="errorbox"></div>
 	<div id="actions">
-		<input type="button" class="submit actionsfloatleft" id="editEvent-submit" value="<?php p($l->t("Submit"));?>" data-link="<?php print_unescaped(OCP\Util::linkTo('calendar', 'ajax/event/edit.php')) ?>">
-		<input type="button" class="submit actionsfloatleft" id="editEvent-delete"  name="delete" value="<?php p($l->t("Delete"));?>" data-link="<?php print_unescaped(OCP\Util::linkTo('calendar', 'ajax/event/delete.php')) ?>">
-		<input type="button" class="submit actionsfloatright" id="editEvent-export"  name="export" value="<?php p($l->t("Export"));?>" data-link="<?php print_unescaped(OCP\Util::linkTo('calendar', 'export.php')) ?>?eventid=<?php p($_['eventid']) ?>">
+		<input type="button" class="submit actionsfloatright primary" id="editEvent-submit" value="<?php p($l->t('Save event'));?>" data-link="<?php print_unescaped(OCP\Util::linkTo('calendar', 'ajax/event/edit.php')) ?>">
+		<input type="button" class="submit actionsfloatleft" id="editEvent-delete"  name="delete" value="<?php p($l->t('Delete event'));?>" data-link="<?php print_unescaped(OCP\Util::linkTo('calendar', 'ajax/event/delete.php')) ?>">
 	</div>
 	</form>
 </div>
diff --git a/templates/part.eventform.php b/templates/part.eventform.php
index 8d7589e3..d40fc56e 100644
--- a/templates/part.eventform.php
+++ b/templates/part.eventform.php
@@ -11,97 +11,59 @@
 	<?php } ?>
 </ul>
 <div id="tabs-1">
-	<table width="100%">
-		<tr>
-			<th width="75px"><?php p($l->t("Title"));?>:</th>
-			<td>
-				<input type="text" style="width:350px;" size="100" placeholder="<?php p($l->t("Title of the Event"));?>" value="<?php p(isset($_['title']) ? $_['title'] : '') ?>" maxlength="100" name="title" autofocus="autofocus"/>
-			</td>
-		</tr>
-	</table>
-	<table width="100%">
-		<tr>
-			<th width="75px"><?php p($l->t("Category"));?>:</th>
-			<td>
-				<input id="category" name="categories" type="text" placeholder="<?php p($l->t('Separate categories with commas')); ?>" value="<?php p(isset($_['categories']) ? $_['categories'] : '') ?>">
-				<a class="action edit" id="editCategories" title="<?php p($l->t('Edit categories')); ?>"><img alt="<?php p($l->t('Edit categories')); ?>" src="<?php print_unescaped(OCP\image_path('core','actions/rename.svg'))?>" class="svg action" style="width: 16px; height: 16px;"></a>
-			</td>
-			<?php if(count($_['calendar_options']) > 1) { ?>
-			<th width="75px">&nbsp;&nbsp;&nbsp;<?php p($l->t("Calendar"));?>:</th>
-			<td>
-				<select style="width:140px;" name="calendar">
-					<?php
-					if (!isset($_['calendar'])) {$_['calendar'] = false;}
-					print_unescaped(OCP\html_select_options($_['calendar_options'], $_['calendar'], array('value'=>'id', 'label'=>'displayname')));
-					?>
-				</select>
-			</td>
-			<?php } else { ?>
-			<th width="75px">&nbsp;</th>
-			<td>
-				<input type="hidden" name="calendar" value="<?php p($_['calendar_options'][0]['id']); ?>">
-			</td>
-			<?php } ?>
-		</tr>
-		<tr>
-			<th width="75px"><?php p($l->t("Access Class"));?>:</th>
-			<td>
-				<select style="width:140px;" name="accessclass">
-					<?php
-					if (!isset($_['calendar'])) {$_['calendar'] = false;}
-					print_unescaped(OCP\html_select_options($_['access_class_options'], $_['accessclass']));
-					?>
-				</select>
-			</td>
-		</tr>
-	</table>
-	<hr>
-	<table width="100%">
-		<tr>
-			<th width="75px"></th>
-			<td>
-				<input type="checkbox"<?php if($_['allday']) {print_unescaped('checked="checked"');} ?> id="allday_checkbox" name="allday">
-				<label for="allday_checkbox"><?php p($l->t("All Day Event"));?></label>
-			</td>
-		</tr>
-		<tr>
-			<th width="75px"><?php p($l->t("From"));?>:</th>
-			<td>
-				<input type="text" value="<?php p($_['startdate']);?>" name="from" id="from">
-				&nbsp;&nbsp;
-				<input type="time" value="<?php p($_['starttime']);?>" name="fromtime" id="fromtime">
-			</td>
-		</tr>
-		<tr>
-			<th width="75px"><?php p($l->t("To"));?>:</th>
-			<td>
-				<input type="text" value="<?php p($_['enddate']);?>" name="to" id="to">
-				&nbsp;&nbsp;
-				<input type="time" value="<?php p($_['endtime']);?>" name="totime" id="totime">
-			</td>
-		</tr>
-	</table>
-	<input type="button" class="submit" value="<?php p($l->t("Advanced options")); ?>" id="advanced_options_button">
+	<input id="event-title" type="text" size="100"
+		placeholder="<?php p($l->t('Title of the Event'));?>"
+		value="<?php p(isset($_['title']) ? $_['title'] : '') ?>"
+		maxlength="100" name="title" autofocus="autofocus"/>
+
+	<?php if(count($_['calendar_options']) > 1) { ?>
+	<?php p($l->t("Calendar"));?>
+	<select style="width:140px;" name="calendar">
+		<?php if (!isset($_['calendar'])) {$_['calendar'] = false;}
+		print_unescaped(OCP\html_select_options($_['calendar_options'], $_['calendar'], array('value'=>'id', 'label'=>'displayname'))); ?>
+	</select>
+	<?php } else { ?>
+	<input style="display:none;" type="hidden" name="calendar" value="<?php p($_['calendar_options'][0]['id']); ?>">
+	<?php } ?>
+
+	<div id="event-time">
+		<div id="event-time-from">
+			<?php p($l->t('from'));?>
+			<input type="text" value="<?php p($_['startdate']);?>" name="from" id="from">
+			<input type="time" value="<?php p($_['starttime']);?>" name="fromtime" id="fromtime">
+		</div>
+		<div id="event-time-to">
+			<?php p($l->t('to'));?>
+			<input type="text" value="<?php p($_['enddate']);?>" name="to" id="to">
+			<input type="time" value="<?php p($_['endtime']);?>" name="totime" id="totime">
+		</div>
+	</div>
+
+	<label id="event-allday">
+		<input id="allday_checkbox" type="checkbox"<?php if($_['allday']) {print_unescaped('checked="checked"');} ?> name="allday">
+		<?php p($l->t("All Day Event"));?>
+	</label>
+
+	<input id="advanced_options_button" type="button" class="submit" value="<?php p($l->t('Advanced options')); ?>">
+
 	<div id="advanced_options" style="display: none;">
-		<hr>
-		<table>
-			<tr>
-				<th width="85px"><?php p($l->t("Location"));?>:</th>
-				<td>
-					<input type="text" style="width:350px;" size="100" placeholder="<?php p($l->t("Location of the Event"));?>" value="<?php p(isset($_['location']) ? $_['location'] : '') ?>" maxlength="100"  name="location" />
-				</td>
-			</tr>
-		</table>
-		<table>
-			<tr>
-				<th width="85px" style="vertical-align: top;"><?php p($l->t("Description"));?>:</th>
-				<td>
-					<textarea style="width:350px;height: 150px;" placeholder="<?php p($l->t("Description of the Event"));?>" name="description"><?php p(isset($_['description']) ? $_['description'] : '') ?></textarea>
-				</td>
-			</tr>
-		</table>
-	</div>
+		<input id="event-location" type="text" size="100"
+			placeholder="<?php p($l->t('Location'));?>"
+			value="<?php p(isset($_['location']) ? $_['location'] : '') ?>"
+			maxlength="100"  name="location" />
+
+		<input id="category" name="categories" type="text"
+			placeholder="<?php p($l->t('Categories (separate by comma)')); ?>"
+			value="<?php p(isset($_['categories']) ? $_['categories'] : '') ?>">
+		<a class="action edit" id="editCategories" title="<?php p($l->t('Edit categories')); ?>">
+		<img alt="<?php p($l->t('Edit categories')); ?>" src="<?php print_unescaped(OCP\image_path('core','actions/rename.svg'))?>" class="svg action" style="width: 16px; height: 16px;"></a>
+
+		<textarea id="event-description" placeholder="<?php p($l->t('Description'));?>" name="description"><?php p(isset($_['description']) ? $_['description'] : '') ?></textarea>
+
+		<input type="button" class="submit" id="editEvent-export"  name="export" value="<?php p($l->t('Export event'));?>" data-link="<?php print_unescaped(OCP\Util::linkTo('calendar', 'export.php')) ?>?eventid=<?php p($_['eventid']) ?>">
 	</div>
+</div>
+
 <div id="tabs-2">
 	<table style="width:100%">
 			<tr>
@@ -255,5 +217,12 @@
 <?php if($_['eventid'] != 'new' && $_['permissions'] & OCP\PERMISSION_SHARE) { ?>
 <div id="tabs-5">
 	<?php if($_['eventid'] != 'new') { print_unescaped($this->inc('part.share')); } ?>
+
+	<br>
+	<?php p($l->t('Visibility to people shared with'));?>
+	<select style="width:140px;" name="accessclass">
+		<?php if (!isset($_['calendar'])) {$_['calendar'] = false;}
+		print_unescaped(OCP\html_select_options($_['access_class_options'], $_['accessclass'])); ?>
+	</select>
 </div>
 <?php } ?>
diff --git a/templates/part.newevent.php b/templates/part.newevent.php
index dc1d0296..53e7149a 100644
--- a/templates/part.newevent.php
+++ b/templates/part.newevent.php
@@ -3,7 +3,7 @@
 <?php print_unescaped($this->inc("part.eventform")); ?>
 	<div style="width: 100%;text-align: center;color: #FF1D1D;" id="errorbox"></div>
 	<div id="actions">
-		<input type="button" id="submitNewEvent" data-link="<?php print_unescaped(OCP\Util::linkTo('calendar', 'ajax/event/new.php')); ?>" class="submit actionsfloatleft"  value="<?php p($l->t("Submit"));?>">
+		<input type="button" id="submitNewEvent" data-link="<?php print_unescaped(OCP\Util::linkTo('calendar', 'ajax/event/new.php')); ?>" class="submit actionsfloatleft"  value="<?php p($l->t('Create event'));?>">
 	</div>
 	</form>
 </div>