From 0efceeba36ba965a0c9e652a244bd75636b287e5 Mon Sep 17 00:00:00 2001
From: Jan Schneider <jan@horde.org>
Date: Wed, 11 Nov 2009 17:19:10 +0100
Subject: [PATCH] More CSS cleanup. Also rotate labels in left column by 90
 degrees.

---
 kronolith/js/kronolith.js            |   2 +-
 kronolith/templates/index/agenda.inc |   4 +-
 kronolith/templates/index/day.inc    |  16 +++---
 kronolith/templates/index/month.inc  |   2 +-
 kronolith/templates/index/tasks.inc  |   4 +-
 kronolith/templates/index/week.inc   |  16 +++---
 kronolith/themes/ie7.css             |   3 +
 kronolith/themes/ie8.css             |   3 +
 kronolith/themes/screen.css          | 103 +++++++++++++++++++++--------------
 9 files changed, 89 insertions(+), 64 deletions(-)
 create mode 100644 kronolith/themes/ie8.css

diff --git a/kronolith/js/kronolith.js b/kronolith/js/kronolith.js
index c024cdbe2..e3b52c02c 100644
--- a/kronolith/js/kronolith.js
+++ b/kronolith/js/kronolith.js
@@ -1071,7 +1071,7 @@ KronolithCore = {
 
             if (event.value.al) {
                 if (view == 'day') {
-                    $('kronolithViewDayBody').down('.kronolithAllDayContainer').insert(div.setStyle(style));
+                    $('kronolithViewDay').down('.kronolithAllDayContainer').insert(div.setStyle(style));
                 } else {
                     $('kronolithAllDay' + date).insert(div.setStyle(style));
                 }
diff --git a/kronolith/templates/index/agenda.inc b/kronolith/templates/index/agenda.inc
index 8fb3bee14..f36218ce8 100644
--- a/kronolith/templates/index/agenda.inc
+++ b/kronolith/templates/index/agenda.inc
@@ -1,4 +1,4 @@
-<div id="kronolithViewAgenda" class="kronolithView" style="display:none">
+<div id="kronolithViewAgenda" style="display:none">
 <table class="kronolithView">
   <caption>
     <span id="kronolithLoadingagenda" class="kronolithLoading"></span>
@@ -9,7 +9,7 @@
       <a title="<?php echo _("Next") ?>" class="kronolithNext">&gt;</a>
     </span>
   </caption>
-  <tbody id="kronolithViewAgendaBody" class="kronolithViewBody">
+  <tbody id="kronolithViewAgendaBody">
     <tr id="kronolithAgendaTemplate" style="display:none">
       <td class="kronolithFirstCol"></td>
       <td>
diff --git a/kronolith/templates/index/day.inc b/kronolith/templates/index/day.inc
index 3631ff8e6..b0bb298c2 100644
--- a/kronolith/templates/index/day.inc
+++ b/kronolith/templates/index/day.inc
@@ -1,4 +1,4 @@
-<div id="kronolithViewDay" class="kronolithView kronolithViewDay" style="display:none">
+<div id="kronolithViewDay" style="display:none">
 <div id="kronolithLoadingday" class="kronolithLoading"></div>
 <div id="kronolithEventsDay"></div>
 
@@ -13,17 +13,17 @@
   </caption>
 </table>
 
-<div style="position: relative; margin-right: 15px;">
+<div class="kronolithViewHead">
 <table class="kronolithView kronolithViewDay">
-  <thead class="kronolithViewHead">
+  <thead>
     <tr>
       <td class="kronolithFirstCol">&nbsp;</td>
       <td><span><?php echo _("Events for this day") ?></span></td>
     </tr>
   </thead>
-  <tbody class="kronolithViewBody">
+  <tbody>
     <tr class="kronolithAllDay">
-      <td class="kronolithFirstCol"><?php echo _("All day") ?></td>
+      <td class="kronolithFirstCol"><span><?php echo _("All day") ?></span></td>
       <td><div class="kronolithAllDayContainer">
       </div></td>
     </tr>
@@ -31,12 +31,12 @@
 </table>
 </div>
 
-<div style="position: absolute; top: 150px; right: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: scroll">
+<div class="kronolithViewBody">
 <table class="kronolithView kronolithViewDay">
-  <tbody id="kronolithViewDayBody" class="kronolithViewBody fixme">
+  <tbody id="kronolithViewDayBody" class="fixme">
     <?php for ($i = 0; $i < 24; $i++): ?>
     <tr<?php if ($i < 9 || $i > 19) echo ' class="kronolithNight"' ?>>
-      <td class="kronolithFirstCol"><?php echo $i ?>:00</td>
+      <td class="kronolithFirstCol"><span><?php echo $i ?>:00</span></td>
       <td></td>
     </tr>
     <?php endfor; ?>
diff --git a/kronolith/templates/index/month.inc b/kronolith/templates/index/month.inc
index f3e6652c0..a936d8495 100644
--- a/kronolith/templates/index/month.inc
+++ b/kronolith/templates/index/month.inc
@@ -1,5 +1,5 @@
 <div id="kronolithViewMonth" style="display:none">
-<table id="kronolithViewHead" class="kronolithView">
+<table id="kronolithViewMonthHead" class="kronolithView">
   <caption>
     <span>&nbsp;</span>
     <span class="kronolithNavigation">
diff --git a/kronolith/templates/index/tasks.inc b/kronolith/templates/index/tasks.inc
index 98b8a4603..a472f1562 100644
--- a/kronolith/templates/index/tasks.inc
+++ b/kronolith/templates/index/tasks.inc
@@ -1,4 +1,4 @@
-<div id="kronolithViewTasks" class="kronolithView kronolithViewTasks" style="display:none">
+<div id="kronolithViewTasks" style="display:none">
 <table class="kronolithView kronolithViewTasks">
   <caption class="tabset">
     <span id="kronolithLoadingtasks" class="kronolithLoading"></span>
@@ -10,7 +10,7 @@
       <li><a id="kronolithTasksFuture"><?php echo _("Future") ?></a></li>
     </ul>
   </caption>
-  <tbody id="kronolithViewTasksBody" class="kronolithViewBody">
+  <tbody id="kronolithViewTasksBody">
     <tr id="kronolithTasksTemplate" class="kronolithTaskRow" style="display:none">
       <td class="kronolithTaskCol">
       <div class="kronolithTaskCheckbox"/>
diff --git a/kronolith/templates/index/week.inc b/kronolith/templates/index/week.inc
index 1dbf1b424..12f8bc654 100644
--- a/kronolith/templates/index/week.inc
+++ b/kronolith/templates/index/week.inc
@@ -1,4 +1,4 @@
-<div id="kronolithViewWeek" class="kronolithView kronolithViewWeek" style="display:none">
+<div id="kronolithViewWeek" style="display:none">
 
 <div id="kronolithEventsWeek">
   <div class="kronolithEventsWeek"></div>
@@ -21,9 +21,9 @@
   </caption>
 </table>
 
-<div style="position: relative; margin-right: 15px;">
+<div class="kronolithViewHead">
 <table id="kronolithViewWeekHead" class="kronolithView kronolithViewDay">
-  <thead class="kronolithViewHead"><tr>
+  <thead><tr>
     <td class="kronolithFirstCol"><div id="kronolithLoadingweek" class="kronolithLoading"></div></td>
     <td class="kronolithWeekDay"><span>&nbsp;</span></td>
     <td class="kronolithWeekDay"><span>&nbsp;</span></td>
@@ -33,9 +33,9 @@
     <td class="kronolithWeekDay"><span>&nbsp;</span></td>
     <td class="kronolithWeekDay"><span>&nbsp;</span></td>
   </tr></thead>
-  <tbody class="kronolithViewBody">
+  <tbody>
     <tr class="kronolithAllDay">
-      <td class="kronolithFirstCol"><?php echo _("All day") ?></td>
+      <td class="kronolithFirstCol"><span><?php echo _("All day") ?><span></td>
       <td<?php if ($w == 6 || $w == 0) echo ' class="kronolithWeekend"' ?>><div class="kronolithAllDayContainer">
       </div></td>
       <td<?php if ($w == 5 || $w == 6) echo ' class="kronolithWeekend"' ?>><div class="kronolithAllDayContainer">
@@ -55,12 +55,12 @@
 </table>
 </div>
 
-<div style="position: absolute; top: 150px; right: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: scroll;">
+<div class="kronolithViewBody">
 <table class="kronolithView kronolithViewDay">
-  <tbody id="kronolithViewWeekBody" class="kronolithViewBody fixme">
+  <tbody id="kronolithViewWeekBody" class="fixme">
     <?php for ($i = 0; $i < 24; $i++): ?>
     <tr<?php if ($i < 9 || $i > 19) echo ' class="kronolithNight"' ?>>
-      <td class="kronolithFirstCol"><?php echo $i ?>:00</td>
+      <td class="kronolithFirstCol"><span><?php echo $i ?>:00</span></td>
       <td<?php if ($w == 6 || $w == 0) echo ' class="kronolithWeekend"' ?>>
       </td>
       <td<?php if ($w == 5 || $w == 6) echo ' class="kronolithWeekend"' ?>>
diff --git a/kronolith/themes/ie7.css b/kronolith/themes/ie7.css
index f8efec669..f216475ee 100644
--- a/kronolith/themes/ie7.css
+++ b/kronolith/themes/ie7.css
@@ -1,3 +1,6 @@
 #kronolithViewMonth {
     height: expression(kronolithViewMonthContainer.offsetHeight-12);
 }
+.kronolithFirstCol span {
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
diff --git a/kronolith/themes/ie8.css b/kronolith/themes/ie8.css
new file mode 100644
index 000000000..1766ec807
--- /dev/null
+++ b/kronolith/themes/ie8.css
@@ -0,0 +1,3 @@
+.kronolithFirstCol span {
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
diff --git a/kronolith/themes/screen.css b/kronolith/themes/screen.css
index aca078861..51f38d7e6 100644
--- a/kronolith/themes/screen.css
+++ b/kronolith/themes/screen.css
@@ -362,9 +362,12 @@ body.kronolithAjax {
     position: absolute;
     left: 0;
 }
-#kronolithLoadingday, #kronolithLoadingweek, #kronolithLoadingmonth {
+#kronolithLoadingday, #kronolithLoadingmonth {
     top: 24px;
 }
+#kronolithLoadingweek {
+    top: 2px;
+}
 #kronolithLoadingtasks, #kronolithLoadingagenda {
     display: inline-block;
     position: relative;
@@ -810,40 +813,30 @@ table.kronolithView td.kronolithFirstCol {
 }
 
 /* Main view header row */
-#kronolithViewHead {
+#kronolithViewMonthHead {
     width: 100%;
     height: 20px;
     line-height: 20px;
     font-weight: bold;
 }
-#kronolithViewHead span {
+#kronolithViewMonthHead span {
     padding: 0 5px;
 }
-#kronolithViewHead .kronolithFirstCol {
+#kronolithViewMonthHead .kronolithFirstCol {
     border-color: transparent;
 }
-.kronolithViewHead {
+.kronolithViewHead thead {
     height: 20px;
     line-height: 20px;
     font-weight: bold;
 }
-.kronolithViewHead span {
+.kronolithViewHead thead span {
     padding: 0 5px;
 }
-.kronolithViewHead .kronolithFirstCol {
+.kronolithViewHead thead .kronolithFirstCol {
     border-color: transparent;
 }
 
-/* Main view body */
-div.kronolithView div.kronolithViewBody {
-    position: absolute;
-    top: 25px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    overflow: auto;
-}
-
 /* Captions. */
 #kronolithBody caption {
     position: relative;
@@ -894,27 +887,12 @@ div.kronolithView div.kronolithViewBody {
     background-color: #fff760;
 }
 
-/* Main view month */
-#kronolithViewMonthContainer {
-    position: absolute;
-    top: 46px;
-    right: 0;
-    bottom: 0;
-    left: 0;
-}
-
 /* Main view week */
 .kronolithWeekDay {
     cursor: pointer;
 }
 
 /* Main view day */
-.kronolithViewDay td {
-    height: 40px;
-}
-.kronolithViewHead td {
-    height: 20px;
-}
 #kronolithEventsDay {
     position: absolute;
     top: 49px;
@@ -939,6 +917,51 @@ div.kronolithView div.kronolithViewBody {
     margin: 0 2px;
 }
 
+/* Main view week and day */
+.kronolithViewDay td {
+    height: 40px;
+}
+.kronolithViewHead thead td {
+    height: 16px;
+}
+.kronolithAllDay td {
+    height: 80px;
+}
+table.kronolithView td.kronolithFirstCol {
+    vertical-align: bottom;
+}
+.kronolithFirstCol span {
+    display: block;
+    margin-bottom: 5px;
+    -webkit-transform: rotate(-90deg);
+    -moz-transform: rotate(-90deg);
+}
+.kronolithViewHead {
+    position: relative;
+    margin-right: 15px;
+}
+.kronolithViewBody {
+    position: absolute;
+    top: 150px;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+
+/* Main view month */
+#kronolithViewMonthContainer {
+    position: absolute;
+    top: 46px;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+#kronolithViewMonthContainer table.kronolithView td.kronolithFirstCol {
+    vertical-align: top;
+}
+
 /* Main view agenda. */
 #kronolithViewAgenda td.kronolithFirstCol {
     width: 70px;
@@ -977,28 +1000,28 @@ div.kronolithView div.kronolithViewBody {
     padding-bottom: 0;
     border-bottom-style: dotted;
 }
-#kronolithViewTasks tbody.kronolithViewBody td {
+#kronolithViewTasksBody td {
     padding: 4px 4px 4px 4px;
     cursor: pointer;
 }
-#kronolithViewTasks tbody.kronolithViewBody div.kronolithTaskCheckbox {
+#kronolithViewTasksBody div.kronolithTaskCheckbox {
     background: url("graphics/checkbox_off.png") no-repeat;
     margin-right: 5px;
     float: left;
     width: 16px;
     height: 16px
 }
-#kronolithViewTasks tbody.kronolithViewBody div.kronolithTaskCheckbox:hover {
+#kronolithViewTasksBody div.kronolithTaskCheckbox:hover {
     background: url("graphics/checkbox_on.png") no-repeat;
 }
-#kronolithViewTasks tbody.kronolithViewBody td.kronolithTaskCompleted {
+#kronolithViewTasksBody td.kronolithTaskCompleted {
     color: #ccc;
     text-decoration: line-through;
 }
-#kronolithViewTasks tbody.kronolithViewBody td.kronolithTaskCompleted div {
+#kronolithViewTasksBody td.kronolithTaskCompleted div {
     background: url("graphics/checkbox_on.png") no-repeat;
 }
-#kronolithViewTasks tbody.kronolithViewBody td.kronolithTaskDue {
+#kronolithViewTasksBody td.kronolithTaskDue {
     color: #a00;
     font-weight: bold;
 }
@@ -1007,10 +1030,6 @@ div.kronolithView div.kronolithViewBody {
 }
 
 /* More main view */
-div.kronolithView div.kronolithViewBody .kronolithEvent {
-    margin-bottom: 2px;
-    margin-right: 2px;
-}
 .kronolithFirstCol {
     font-weight: bold;
     text-align: center;
-- 
2.11.0