Nicer styling for calendars

pyvec · Oct 29, 2017 · 858cdd2 · 858cdd2
1 parent c6b9205
commit 858cdd2
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/naucse/static/css/calendar.css b/naucse/static/css/calendar.css
@@ -1,12 +1,15 @@
-.calendar-card .card-header .year {
-    color: #868e96;
+.calendar-heading {
+    margin-top: 2em;
+    margin-bottom: 1em;
+    text-align: center;
 }
 
 table.calendar {
     border-spacing: 0.25em;
     border-collapse: separate;
-    display: block;
     margin: 0.5em auto;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 table.calendar tr {
@@ -16,7 +19,6 @@ table.calendar tr {
 table.calendar td,
 table.calendar th {
     width: 14.28%;
-    min-width: 5em;
     height: 100%;
     background-color: rgba(0,0,0,.03);
     vertical-align: center;
@@ -55,9 +57,16 @@ table.calendar .session-number {
 
 table.calendar .session-title {
     display: block;
-    width: 4em;
     text-align: center;
     text-overflow: '…';
     white-space: nowrap;
+    width: 4em;
     overflow: hidden;
 }
+
+@media (min-width: 768px) {
+    table.calendar td,
+    table.calendar th {
+        min-width: 5em;
+    }
+}
diff --git a/naucse/templates/course_calendar.html b/naucse/templates/course_calendar.html
@@ -31,7 +31,7 @@ <h2>{{ course.subtitle }}</h2>
 
     {% if course.start_date %}
         {% for year, month in months %}
-            <h3>
+            <h3 class="calendar-heading">
                 {{ month | monthname }} <span class="year">{{ year }}</span>
             </h3>
             <table class="calendar">
@@ -63,7 +63,6 @@ <h3>
                     {% endif %}
                     {% if date.weekday() == 6 %}</tr>{% endif %}
                 {% endfor %}
-                </tr>
             </table>
         {% endfor %}
     {% else %}