From 53051b2f37e7d4900ffe5311996cd166ec5e80be Mon Sep 17 00:00:00 2001
From: Astro <astro@spaceboyz.net>
Date: Fri, 30 Oct 2020 17:01:35 +0100
Subject: [PATCH] serve: rotate .dtstart to the left

---
 ticker-serve/src/index.rs     | 18 ++++++++++--------
 ticker-serve/static/style.css | 12 +++++++++---
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/ticker-serve/src/index.rs b/ticker-serve/src/index.rs
index 16a6920..4aecf70 100644
--- a/ticker-serve/src/index.rs
+++ b/ticker-serve/src/index.rs
@@ -99,7 +99,14 @@ fn render_index(app_state: &AppState) -> String {
                  </h2>
 
                  { day.events.iter().map(|e| html!(
-                     <article class="event" style={ format!("border-left: 1.5rem solid {}", &config.calendars.get(&e.calendar).map(|o| &o.color[..]).unwrap_or("white")) }>
+                     <article class="event"
+                              style={ format!("border-left: 1.5rem solid {}", &config.calendars.get(&e.calendar).map(|o| &o.color[..]).unwrap_or("white")) }
+                     >
+                       <p class="dtstart"
+                          title={ format!("{}", e.dtstart.format("%c")) }
+                       >
+                         { text!("{}", &e.dtstart.format("%H:%S")) }
+                       </p>
                        { match &e.url {
                            None => html!(
                              <h3>{ text!("{}", &e.summary) }</h3>
@@ -113,14 +120,9 @@ fn render_index(app_state: &AppState) -> String {
                            ),
                        } }
 
-                     <p class="dtstart" title={ format!("{}", e.dtstart.format("%c")) }>
-                       { text!("{}", &e.dtstart.format("%H:%S")) }
-                     </p>
-                     { e.location.as_ref().map(|location| html!(
                        <p class="location">
-                         { text!("{}", location) }
-                         </p>
-                     )) }
+                         { text!("{}", e.location.as_ref().unwrap_or(&"".to_owned())) }
+                       </p>
                    </article>
                  )) }
            </div>)
diff --git a/ticker-serve/static/style.css b/ticker-serve/static/style.css
index 4a1cea8..bfe3422 100644
--- a/ticker-serve/static/style.css
+++ b/ticker-serve/static/style.css
@@ -72,11 +72,17 @@ h3 a {
 }
 
 .dtstart {
-    margin-right: 1.3em;
+    position: absolute;
+    transform: translate(-2.5rem, 2.5rem) rotate(270deg);
+    transform-origin: top left;
+    color: #F7F7F7;
+    font-weight: 500;
+    font-size: 85%;
+    line-height: 1.5rem;
 }
-.dtstart, .location {
+.location {
     line-height: 1.1em;
-    display: inline;
+    min-height: 1.1em;
 }
 
 footer {