Browse Source

serve: rotate .dtstart to the left

master
Astro 10 months ago
parent
commit
53051b2f37
2 changed files with 19 additions and 11 deletions
  1. 10
    8
      ticker-serve/src/index.rs
  2. 9
    3
      ticker-serve/static/style.css

+ 10
- 8
ticker-serve/src/index.rs View File

@@ -99,7 +99,14 @@ fn render_index(app_state: &AppState) -> String {
99 99
                  </h2>
100 100
 
101 101
                  { day.events.iter().map(|e| html!(
102
-                     <article class="event" style={ format!("border-left: 1.5rem solid {}", &config.calendars.get(&e.calendar).map(|o| &o.color[..]).unwrap_or("white")) }>
102
+                     <article class="event"
103
+                              style={ format!("border-left: 1.5rem solid {}", &config.calendars.get(&e.calendar).map(|o| &o.color[..]).unwrap_or("white")) }
104
+                     >
105
+                       <p class="dtstart"
106
+                          title={ format!("{}", e.dtstart.format("%c")) }
107
+                       >
108
+                         { text!("{}", &e.dtstart.format("%H:%S")) }
109
+                       </p>
103 110
                        { match &e.url {
104 111
                            None => html!(
105 112
                              <h3>{ text!("{}", &e.summary) }</h3>
@@ -113,14 +120,9 @@ fn render_index(app_state: &AppState) -> String {
113 120
                            ),
114 121
                        } }
115 122
 
116
-                     <p class="dtstart" title={ format!("{}", e.dtstart.format("%c")) }>
117
-                       { text!("{}", &e.dtstart.format("%H:%S")) }
118
-                     </p>
119
-                     { e.location.as_ref().map(|location| html!(
120 123
                        <p class="location">
121
-                         { text!("{}", location) }
122
-                         </p>
123
-                     )) }
124
+                         { text!("{}", e.location.as_ref().unwrap_or(&"".to_owned())) }
125
+                       </p>
124 126
                    </article>
125 127
                  )) }
126 128
            </div>)

+ 9
- 3
ticker-serve/static/style.css View File

@@ -72,11 +72,17 @@ h3 a {
72 72
 }
73 73
 
74 74
 .dtstart {
75
-    margin-right: 1.3em;
75
+    position: absolute;
76
+    transform: translate(-2.5rem, 2.5rem) rotate(270deg);
77
+    transform-origin: top left;
78
+    color: #F7F7F7;
79
+    font-weight: 500;
80
+    font-size: 85%;
81
+    line-height: 1.5rem;
76 82
 }
77
-.dtstart, .location {
83
+.location {
78 84
     line-height: 1.1em;
79
-    display: inline;
85
+    min-height: 1.1em;
80 86
 }
81 87
 
82 88
 footer {

Loading…
Cancel
Save