Style changes

- Increase day header sizes - Remove event borders, event status shown in category color bar - Remove zebra striping from timegrid, switched to hour & half hour lines
2024-11-23 00:13:35 +01:00 · 2016-01-19 22:09:09 +00:00 · 2016-01-19 22:09:09 +00:00 · 4cd43a2dee
commit 4cd43a2dee
parent 30d02fc5f0
4 changed files with 39 additions and 74 deletions
--- a/calendar/js/et2_widget_event.js
+++ b/calendar/js/et2_widget_event.js
@ -417,7 +417,7 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM],
 			cat.destroy();
 		}
 		
-		return '<div class="calendar_calEventTooltip ' + this._status_class() + '" style="border-color: '+border+'; background: '+bg_color+';">'+
+		return '<div class="calendar_calEventTooltip ' + this._status_class() + '" style="border-color: '+border+'; background-color: '+bg_color+';">'+
 			'<div class="calendar_calEventHeaderSmall">'+
 				'<font style="color:'+header_color+'">'+timespan+'</font>'+
 				this.icons[0].outerHTML+
--- a/calendar/templates/default/app.css
+++ b/calendar/templates/default/app.css
@ -162,7 +162,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 * it should work together with the backgrounds of calendar_calToday, calendar_calHoliday, th, row_on and row_off
 */
 .calendar_calBirthday,.calendar_calBirthday a{
-	color: black;
+	color: #626161;
 	font-weight: bold;
 	font-style: italic;
 }
@ -214,20 +214,26 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 *  top:
 */
 }
-.calendar_calTimeRow:nth-child(odd) {
-	background-color: rgba(0,0,0,0.01);
-}

 /* time in a timeRow
 */
-.calendar_calTimeRowTime{
+.calendar_calTimeRowTime {
 	padding-left: 5px;
 	height: 100%;
 	line-height: 14px;
 	font-size:8pt;
 	text-align: left;
 }
-
+.calendar_calTimeRowTime[data-minute='0'] {
+	border-top: 1px solid silver;
+	background-image: none;
+}
+.calendar_calTimeRowTime[data-minute='30'] {
+	background-image: linear-gradient(to right, rgba(192, 192, 192, 0.75) 2px, transparent 0%);
+    background-position: top;
+    background-size: 6px 1px;
+    background-repeat: repeat-x;
+}
 /* contains (multiple) dayCol's
 */
 .calendar_calDayCols,.calendar_calDayCols12h,.calendar_calDayColsNoGrid{
@ -287,7 +293,8 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	padding-bottom: 2ex;
 }
 .calendar_calDayColHeader > div[data-date] {
-	height: 16px;
+	font-size: 14px;
+	line-height: 27px;
 	text-align: center;
 	border-bottom: 1px solid silver;
 }
@ -348,7 +355,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 .calendar_calGridHeader > div {
 	position: relative;
 	height: 100%;
-	margin-left: 55px;
+	margin-left: 58px;
 	width: initial;
 	white-space: nowrap;
 	border-left: 1px solid silver;
@ -357,6 +364,10 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 }
 .calendar_calGridHeader > label {
 	float: left;
+	font-size: 14px;
+	line-height: 27px;
+	width: 58px;
+	text-align: center;
 }
 .calendar_TimeGridNoLabel > .calendar_calGridHeader > ul {
    display: none;
@ -411,7 +422,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 */
 .calendar_calGridHeader{
 	text-align: left;
-	padding-left: 3px;
 	z-index: 29;
 	border-bottom: 1px solid silver;
 	border-top: 1px solid silver;
@ -488,28 +498,26 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 * All participants accepted the invitation
 */
 .calendar_calEventAllAccepted {
-	border-style: solid;
-	border-width: 1px;
 }

 /**
 * All participants answered the invitation, but not all accepted
 */
 .calendar_calEventAllAnswered {
-	border-style: dotted;
-	border-width: 2px;
-	border-color: white;
+	background-image: linear-gradient(transparent 50%, rgba(255,255,255,.8) 50%);
+	background-repeat: repeat-y;
+	background-size: 6px 2px;
 }

 /**
 * Some participants did NOT answer the invitation
 */
 .calendar_calEventSomeUnknown:not(.calendar_calEventUnknown) {
-	border-style: dashed;
-	border-width: 1px;
-	border-color: white;
+	background-image: linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%);
+	background-repeat: repeat-y;
+	background-size: 6px 5px;
 }
-.calendar_calEvent:not([class*="cat_"]) {
+.calendar_calEvent:not([class*=" cat_"]) {
 	/* Defaults for no category, so we don't override it */
 	background-color: #808080;
 }
@ -532,6 +540,12 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	min-width: 25ex;
 	overflow: auto;
 }
+
+/* Do not show icons in header, only tooltip */
+.calendar_calEventTooltip .calendar_calEventIcons {
+	display: inline-block;
+}
+.calendar_calEventTooltip .calendar_calEventBody,
 .calendar_calEventTooltip .calendar_calEventBodySmall {
 	padding-bottom: 1em;
 }
@ -560,6 +574,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	padding-left: 2px;
 	min-height: 1em;
 	overflow: hidden;
+	white-space: nowrap;
 /* set via inline style on runtime
 *  background-color: depending on category
 *	color: white || black depending on cat;
@ -574,6 +589,8 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	position: absolute;
 	right: 0px;
 	top: 0px;
+	/* Do not show icons in header, only tooltip */
+	display: none;
 }
 .calendar_calEventIcons img{
 	height: 13px;
@ -918,26 +935,10 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	border: 1px solid white;
 }

-.calendar_plannerEvent,.calendar_plannerEventPrivate{
-	position: absolute;
-	top: 0px;
+.calendar_plannerWidget .calendar_calEventHeader,.calendar_calEventHeaderSmall {
 	height: 100%;
-	overflow: hidden;
-	z-index: 20;
-	border: 1px solid black;
-	min-width: 5px;
-/* set via inline style on runtime:
- *  left: depending on startime
- *  width: depending on length
- *  background-color: depending on category
- */
-}
-.calendar_plannerEvent img,.calendar_plannerEventPrivate img {
 	padding-top: 2px;
 }
-.calendar_plannerEvent:hover{
-	cursor: pointer;
-}

 /* Special colors for the year view */
 .calendar_cal_year_legend_weekend {
--- a/calendar/templates/pixelegg/app.css
+++ b/calendar/templates/pixelegg/app.css
@ -681,12 +681,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 /* marks a day in the column-header additionaly as birthday of some contact,
 * it should work together with the backgrounds of calendar_calToday, calendar_calHoliday, th, row_on and row_off
 */
-.calendar_calBirthday,
-.calendar_calBirthday a {
-  color: black;
-  font-weight: bold;
-  font-style: italic;
-}
 /* timeGridWidget, contains timeRow's and dayCol's
 */
 .calendar_calTimeGrid {
@ -775,15 +769,9 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 }
 /* header of the time-grid, eg. for the weeks in the month-view (leftmost of the day-col-headers)
 */
-.calendar_calGridHeader {
-  text-align: left;
-  padding-left: 3px;
-}
 /* contains one event: header-row & -body
 */
-.calendar_calEvent,
-.calendar_calEventPrivate {
-  border-width: 1px;
+.calendar_calEvent {
  /* set via inline style on runtime:
     *  top: depending on startime
     *  height: depending on length
@ -797,24 +785,12 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 /**
 * All participants accepted the invitation
 */
-.calendar_calEventAllAccepted {
-  border-style: solid;
-  border-width: 1px;
-}
 /**
 * All participants answered the invitation, but not all accepted
 */
-.calendar_calEventAllAnswered {
-  border-style: dotted;
-  border-width: 2px;
-}
 /**
 * Some participants did NOT answer the invitation
 */
-.calendar_calEventSomeUnknown {
-  border-style: dashed;
-  border-width: 1px;
-}
 .calendar_calEventTooltip {
  max-height: 400px;
  overflow: auto;
--- a/calendar/templates/pixelegg/app.less
+++ b/calendar/templates/pixelegg/app.less
@ -792,9 +792,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 * it should work together with the backgrounds of calendar_calToday, calendar_calHoliday, th, row_on and row_off
 */
 .calendar_calBirthday,.calendar_calBirthday a{
-    color: black;
-    font-weight: bold;
-    font-style: italic;
 }


@ -903,14 +900,11 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 /* header of the time-grid, eg. for the weeks in the month-view (leftmost of the day-col-headers)
 */
 .calendar_calGridHeader{
-    text-align: left;
-    padding-left: 3px;
 }

 /* contains one event: header-row & -body
 */
-.calendar_calEvent,.calendar_calEventPrivate{
-    border-width: 1px;
+.calendar_calEvent {
    /* set via inline style on runtime:
     *  top: depending on startime
     *  height: depending on length
@ -926,24 +920,18 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 * All participants accepted the invitation
 */
 .calendar_calEventAllAccepted {
-    border-style: solid;
-    border-width: 1px;
 }

 /**
 * All participants answered the invitation, but not all accepted
 */
 .calendar_calEventAllAnswered {
-    border-style: dotted;
-    border-width: 2px;
 }

 /**
 * Some participants did NOT answer the invitation
 */
 .calendar_calEventSomeUnknown {
-    border-style: dashed;
-    border-width: 1px;
 }

 .calendar_calEventTooltip{