HTML/CSS improvements for the event list in the calendar.

calendar/lib.php

@@ -382,36 +382,36 @@ function calendar_print_event($event) {
     static $strftimetime;
 
     $event = calendar_add_event_metadata($event);
-    echo '<table class="eventfull">';
-    echo '<tr><td class="eventfullpicture">';
+    echo '<table class="event">';
+    echo '<tr><td class="picture">';
     if (!empty($event->icon)) {
         echo $event->icon;
     } else {
         print_spacer(16,16);
     }
     echo '</td>';
-    echo '<td class="eventfullheader">';
+    echo '<td class="header">';
 
     if (!empty($event->referer)) {
         echo '<div class="referer">'.$event->referer.'</div>';
     } else {
-        echo '<div style="float:left;" class="event">'.$event->name."</div>";
+        echo '<div class="name">'.$event->name."</div>";
     }
     if (!empty($event->courselink)) {
-        echo '<div style="float:left; clear: left; font-size: 0.8em;">'.$event->courselink.' </div>';
+        echo '<div class="course">'.$event->courselink.' </div>';
     }
     if (!empty($event->time)) {
-        echo '<span style="float:right;" class="event_date">'.$event->time.'</span>';
+        echo '<span class="date">'.$event->time.'</span>';
     } else {
-        echo '<span style="float:right;" class="event_date">'.calendar_time_representation($event->timestart).'</span>';
+        echo '<span class="date">'.calendar_time_representation($event->timestart).'</span>';
     }
 
-    echo "</td></tr>";
-    echo "<tr><td valign=\"top\" class=\"eventfullside\" width=\"32\">&nbsp;</td>";
-    echo "<td class=\"eventfullmessage\">\n";
+    echo '</td></tr>';
+    echo '<tr><td class="side">&nbsp;</td>';
+    echo '<td class="description">';
     echo format_text($event->description, FORMAT_HTML);
     if (calendar_edit_event_allowed($event)) {
-        echo '<div align="right">';
+        echo '<div class="commands">';
         if (empty($event->cmid)) {
             $editlink   = CALENDAR_URL.'event.php?action=edit&amp;id='.$event->id;
             $deletelink = CALENDAR_URL.'event.php?action=delete&amp;id='.$event->id;

theme/standard/styles_color.css

@@ -411,13 +411,14 @@ table.minicalendar {
     border-color:#DDDDDD;
 }
 
-#calendar .maincalendar .eventlist .eventfull {
+#calendar .maincalendar .eventlist .event {
     border-color:#DDDDDD;
 }
 
-#calendar .maincalendar .eventlist .eventfullheader,
-#calendar .maincalendar .eventlist .eventfullpicture,
-#calendar .maincalendar .eventlist .eventfullside {
+#calendar .maincalendar .eventlist .event .header,
+#calendar .maincalendar .eventlist .event .picture,
+#calendar .maincalendar .eventlist .event .side
+{
     background-color:#EEEEEE;
 }
 

theme/standard/styles_fonts.css

@@ -302,10 +302,18 @@ table.formtable tbody th {
 ***
 ******************************/
 
-#calendar .maincalendar .eventfull .referer {
+#calendar .maincalendar .eventlist .event .referer {
     font-weight:bold;
 }
 
+#calendar .maincalendar .eventlist .event .course {
+    font-size:0.8em;
+}
+
+#calendar .maincalendar .eventlist .event .description .commands {
+    text-align: right;
+}
+
 #calendar .maincalendar table.calendarmonth td {
     font-size:0.8em;
     line-height:1.2em;

theme/standard/styles_layout.css

@@ -609,8 +609,8 @@ table.minicalendar th {
     padding: 10px;
 }
 
-#calendar .maincalendar .eventlist .eventfull {
-    width: 100%;
+#calendar .maincalendar .eventlist .event {
+    width:100%;
     margin-bottom:10px;
     border-spacing:0px;
     border-collapse:separate;
@@ -618,14 +618,35 @@ table.minicalendar th {
     border-style:solid;
 }
 
-#calendar .maincalendar .eventlist .eventfullmessage {
-    padding: 5px;
+#calendar .maincalendar .eventlist .event .name {
+    float:left;
 }
 
-#calendar .maincalendar .eventlist .eventfullpicture {
+#calendar .maincalendar .eventlist .event .course {
+    float:left;
+    clear:left;
+}
+
+#calendar .maincalendar .eventlist .event .date {
+    float:right;
+}
+
+#calendar .maincalendar .eventlist .event .description .commands {
+    width:100%;
+}
+
+#calendar .maincalendar .eventlist .event .description {
+    padding:5px;
+}
+
+#calendar .maincalendar .eventlist .event .picture {
     padding:8px;
 }
 
+#calendar .maincalendar .eventlist .event .side {
+    width:32px;
+}
+
 #calendar #selecteventtype table {
     margin:auto;
 }

theme/standard/styles_moz.css

@@ -80,16 +80,16 @@
     -moz-border-radius-bottomright:10px;
 }
 
-#calendar .eventlist .eventfull {
+#calendar .eventlist .event {
     -moz-border-radius-bottomleft:15px;
     -moz-border-radius-bottomright:15px;
 }
 
-#calendar .eventlist .eventfullside {
+#calendar .eventlist .event .side {
     -moz-border-radius-bottomleft:15px;
 }
 
-#calendar .eventlist .eventfullmessage {
+#calendar .eventlist .event .description {
     -moz-border-radius-bottomright:15px;
 }