Some Conference Scheduler Design Improvements

The collapse and expand glyphicons of tracks and session now change colour upon hovering. Furthermore some small colour and spacing changes have been made.
cgars · Aug 2, 2018 · 2003d8f · 2003d8f
1 parent e174bd6
commit 2003d8f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 13 deletions.
diff --git a/app/assets/javascripts/conference-schedule.js b/app/assets/javascripts/conference-schedule.js
@@ -311,12 +311,12 @@ require(["main"], function () {
                             templateEventContent += "<tr data-bind='click: function (data, event) {"
                                 + "displayEventInfo(\"" + ev.id + "\", " + eventIndex + ")}'>"
                                 + "<td style='border: none; width: 2%'></td>"
-                                + "<td style='width: 2%'></td>"
-                                + "<td><strong>" + moment(ev.baseEvent.tracks[eventIndex].getStart()).format("HH:mm")
+                                + "<td style='width: 12px'></td>"
+                                + "<td style='width: 1px'><strong>" + moment(ev.baseEvent.tracks[eventIndex].getStart()).format("HH:mm")
                                 + "</br> - </br>" + moment(ev.baseEvent.tracks[eventIndex].getEnd()).format("HH:mm") + "</strong></td>"
-                                + "<td style='width: 2%'></td>"
+                                + "<td style='width: 12px'></td>"
                                 + "<td><strong>" + ev.baseEvent.tracks[eventIndex].title + "</strong></td>"
-                                + "<td style='width: 2%'></td>"
+                                + "<td style='width: 12px'></td>"
                                 + "<td style='border: none; width: 2%'></td></tr>";
                         }
                         templateEventContent += "</table>";
@@ -331,12 +331,12 @@ require(["main"], function () {
                             templateEventContent += "<tr data-bind='click: function (data, event) {"
                                 + "displayEventInfo(\"" + ev.id + "\", " + eventIndex + ")}'>"
                                 + "<td style='border: none; width: 2%'></td>"
-                                + "<td style='width: 2%'></td>"
-                                + "<td><strong>" + moment(ev.baseEvent.events[eventIndex].getStart()).format("HH:mm")
+                                + "<td style='width: 12px'></td>"
+                                + "<td style='width: 1px'><strong>" + moment(ev.baseEvent.events[eventIndex].getStart()).format("HH:mm")
                                 + "</br> - </br>" + moment(ev.baseEvent.events[eventIndex].getEnd()).format("HH:mm") + "</strong></td>"
-                                + "<td style='width: 2%'></td>"
+                                + "<td style='width: 12px'></td>"
                                 + "<td><strong>" + ev.baseEvent.events[eventIndex].title + "</strong></td>"
-                                + "<td style='width: 2%'></td>"
+                                + "<td style='width: 12px'></td>"
                                 + "<td style='border: none; width: 2%'></td></tr>";
                         }
                         templateEventContent += "</table>";

diff --git a/app/assets/stylesheets/custom/_classes.less b/app/assets/stylesheets/custom/_classes.less
@@ -71,7 +71,6 @@ p.paragraph-small {
 
 .conference-scheduler-event {
   position: relative;
-  background-color: white;
   width: 100%;
   height: 100%;
   border-radius: 6px;
@@ -176,6 +175,11 @@ p.paragraph-small {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  color: @color-conference-schedule-scheduler-mod;
+}
+
+.conference-scheduler-mod:hover {
+  color: darken(@color-conference-schedule-scheduler-mod, 20%);
 }
 
 .conference-scheduler-navbar {
@@ -230,15 +234,14 @@ p.paragraph-small {
   display: inline;
 }
 
-
 .conference-scheduler-navbar-days li button.active {
   background-color: darken(@color-conference-schedule-navbar-selector, 30%);
 }
 
 .conference-scheduler-navbar button {
-  outline: 0px none white;
-  background-color: white;
-  border: 0px none white;
+  outline: 0px none @color-conference-schedule-navbar;
+  background-color: @color-conference-schedule-navbar;
+  border: 0px none @color-conference-schedule-navbar;
   height: 100%;
   overflow: hidden;
   white-space: nowrap;

diff --git a/app/assets/stylesheets/custom/_colors.less b/app/assets/stylesheets/custom/_colors.less
@@ -15,6 +15,8 @@
 @color-conference-schedule-track: rgb(206, 245, 175);
 @color-conference-schedule-session: rgb(245, 187, 175);
 @color-conference-schedule-scheduler-border: rgb(206, 206, 206);
+@color-conference-schedule-scheduler-mod: rgb(90, 90, 90);
+@color-conference-schedule-navbar: white;
 @color-conference-schedule-navbar-selector: rgba(190,190,190,0.2);
 @color-conference-schedule-header-border: rgba(120, 120, 120, 0.4);
 @color-conference-schedule-table-border: rgba(120, 120, 120, 0.4);