Browse Source

style

master
Astro 10 months ago
parent
commit
b471b76bec

+ 5
- 2
libticker/src/config.rs View File

@@ -3,15 +3,18 @@ use std::collections::BTreeMap;
3 3
 use serde::{Serialize, Deserialize};
4 4
 
5 5
 
6
-#[derive(Debug, PartialEq, Serialize, Deserialize)]
6
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
7 7
 pub struct CalendarOptions {
8 8
     pub url: String,
9
+    pub color: String,
9 10
 }
10 11
 
11
-#[derive(Debug, PartialEq, Serialize, Deserialize)]
12
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
12 13
 pub struct Config {
13 14
     pub db_url: String,
14 15
     pub calendars: BTreeMap<String, CalendarOptions>,
16
+    pub weekdays: Vec<String>,
17
+    pub months: Vec<String>,
15 18
 }
16 19
 
17 20
 impl Config {

+ 22
- 5
ticker-serve/src/index.rs View File

@@ -8,7 +8,7 @@ use mime::TEXT_HTML;
8 8
 
9 9
 use typed_html::{html, text, dom::DOMTree};
10 10
 use diesel::prelude::*;
11
-use chrono::{offset::Local, NaiveDate};
11
+use chrono::{offset::Local, Datelike, NaiveDate};
12 12
 
13 13
 use libticker::{
14 14
     schema::{self, events::dsl::events},
@@ -63,18 +63,33 @@ fn render_index(app_state: &AppState) -> String {
63 63
         .unwrap();
64 64
     let days = group_by_day(&es);
65 65
 
66
+    let config = &app_state.config;
67
+
66 68
     let doc: DOMTree<String> = html!(
67 69
       <html>
68 70
         <head>
69 71
           <title>"Ticker"</title>
70 72
           <meta charset="utf-8" />
73
+          <link rel="stylesheet" title="Style" type="text/css" href="static/style.css"/>
71 74
         </head>
72 75
         <body>
73 76
           { days.iter().map(|day| html!(<div>
74
-            <nav><h2>{ text!("{}", &day.date) }</h2></nav>
77
+            <h2>
78
+              <span class="date">
79
+                <span class="day">
80
+                  { text!("{}", day.date.day()) }
81
+                </span>
82
+                <span class="month">
83
+                  { text!("{}", &config.months[day.date.month0() as usize]) }
84
+                </span>
85
+              </span>
86
+              <span class="weekday">
87
+                { text!("{}", &config.weekdays[day.date.weekday().num_days_from_monday() as usize]) }
88
+              </span>
89
+            </h2>
75 90
 
76 91
             { day.events.iter().map(|e| html!(
77
-                <article class="event">
92
+                <article class="event" style={ format!("border-left: 1.5rem solid {}", &config.calendars.get(&e.calendar).map(|o| &o.color[..]).unwrap_or("white")) }>
78 93
                   { match &e.url {
79 94
                       None => html!(
80 95
                         <h3>{ text!("{}", &e.summary) }</h3>
@@ -88,9 +103,11 @@ fn render_index(app_state: &AppState) -> String {
88 103
                       ),
89 104
                   } }
90 105
 
91
-                <p class="dtstart">{ text!("{}", &e.dtstart) }</p>
106
+                <p class="dtstart" title={ format!("{}", e.dtstart.format("%c")) }>
107
+                  { text!("{}", &e.dtstart.format("%H:%S")) }
108
+                </p>
92 109
                 { e.location.as_ref().map(|location| html!(
93
-                  <p>
110
+                  <p class="location">
94 111
                     { text!("{}", location) }
95 112
                     </p>
96 113
                 )) }

+ 3
- 1
ticker-serve/src/main.rs View File

@@ -20,6 +20,7 @@ mod index;
20 20
 #[derive(Clone, StateData)]
21 21
 pub struct AppState {
22 22
     pub db: Arc<Mutex<PgConnection>>,
23
+    pub config: Config,
23 24
 }
24 25
 
25 26
 fn main() {
@@ -28,7 +29,8 @@ fn main() {
28 29
         .expect("DB");
29 30
 
30 31
     let state = AppState {
31
-        db: Arc::new(Mutex::new(db))
32
+        db: Arc::new(Mutex::new(db)),
33
+        config,
32 34
     };
33 35
     let (chain, pipelines) = single_pipeline(
34 36
         single_middleware(

+ 72
- 0
ticker-serve/static/style.css View File

@@ -0,0 +1,72 @@
1
+body {
2
+    font-family: sans-serif;
3
+    margin: 0 auto;
4
+    padding: 1rem 0;
5
+    background-color: #373737;
6
+    color: #e7e7e7;
7
+    max-width: 40rem;
8
+}
9
+
10
+h2 {
11
+    margin: 0 0;
12
+}
13
+
14
+.date {
15
+    display: inline-flex;
16
+    flex-flow: column nowrap;
17
+    border: 1px solid black;
18
+    background-color: #ffffff;
19
+    color: #444;
20
+    font-weight: 900;
21
+    width: 4rem;
22
+    margin-left: -1.5rem;
23
+    text-align: center;
24
+    width: 4rem;
25
+}
26
+.date .day {
27
+    align-self: center;
28
+    font-size: 140%;
29
+}
30
+.date .month {
31
+    align-self: center;
32
+    font-size: 50%;
33
+    font-variant-caps: small-caps;
34
+}
35
+.weekday {
36
+    padding-left: 1rem;
37
+}
38
+
39
+article {
40
+    background-color: #f7f7f7;
41
+    color: #222;
42
+    margin: 0;
43
+    padding: 0.5rem 0 0.5rem 1rem;
44
+    clear: both;
45
+    line-height: 1.3rem;
46
+    /*box-shadow: 0 -0.3rem 0.5rem 0.5rem #373737;*/
47
+}
48
+
49
+article p {
50
+    margin: 0 0;
51
+}
52
+
53
+a {
54
+    text-decoration: none;
55
+    color: #000;
56
+}
57
+
58
+h3 {
59
+    margin: 0;
60
+}
61
+
62
+h3 a {
63
+    color: #222;
64
+}
65
+
66
+.dtstart {
67
+    margin-right: 1.3em;
68
+}
69
+.dtstart, .location {
70
+    line-height: 1.1em;
71
+    display: inline;
72
+}

+ 1
- 1
ticker-update/src/main.rs View File

@@ -258,7 +258,7 @@ impl std::fmt::Display for Error {
258 258
 }
259 259
 
260 260
 fn main() {
261
-    let config = Config::read_yaml_file("config.yaml");
261
+    let config = Config::read_yaml_file("../config.yaml");
262 262
     let res = Resources::new(
263 263
         config.db_url,
264 264
         config.calendars.into_iter()

Loading…
Cancel
Save