From eaf1c46ba8515323c9d86c6fa2daa828f41e791c Mon Sep 17 00:00:00 2001 From: Vincent Ambo Date: Sun, 20 May 2018 14:12:07 +0200 Subject: [PATCH] feat(templates): Add new MDL based index page --- src/main.rs | 3 +- static/styles.css | 92 +++++++++++++++++++++++++++++++++++++++++ templates/index.html | 98 ++++++++++++++++++++++++++++---------------- 3 files changed, 157 insertions(+), 36 deletions(-) create mode 100644 static/styles.css diff --git a/src/main.rs b/src/main.rs index 9ca3c8552..4db4ab5cc 100644 --- a/src/main.rs +++ b/src/main.rs @@ -203,7 +203,8 @@ fn start_http_server(base_url: String, .resource("/oidc/login", |r| r.method(Method::GET).with(login)) .resource("/oidc/callback", |r| r.method(Method::POST).with3(callback)) .static_file("/static/highlight.css", include_bytes!("../static/highlight.css")) - .static_file("/static/highlight.js", include_bytes!("../static/highlight.js")); + .static_file("/static/highlight.js", include_bytes!("../static/highlight.js")) + .static_file("/static/styles.css", include_bytes!("../static/styles.css")); if require_login { app.middleware(RequireLogin) diff --git a/static/styles.css b/static/styles.css new file mode 100644 index 000000000..9e0ea7c69 --- /dev/null +++ b/static/styles.css @@ -0,0 +1,92 @@ +* :not(.material-icons) { + font-family: 'Ubuntu', sans-serif !important; +} + +.cvs-title, .thread-link { + text-decoration: none; +} + +.thread-list-item:hover { + background-color: #f5f5f5; +} + +.thread-link { + padding: 5px; + padding-top: 10px; +} + +.thread-title { + padding-right: 15vw; +} + +.search-field { + margin-right: 15px; + max-width: 200px; +} + +.thread-author { + font-style: italic; + font-size: 85%; +} + +@media only screen and (min-width: 768px) { + .converse main { + padding-top: 10px; + padding-bottom: 10px; + } +} + +.mdl-list__item-text-body { + max-height: 40px; +} + +.mdl-list__item-primary-content:after { + border-bottom: 1px solid rgba(0,0,0,.13); + content:""; + position: absolute; + width: 80%; +} + +html, body { + margin: 0; + padding: 0; +} +.converse .mdl-layout__header-row { + padding-left: 40px; +} +.converse .mdl-layout.is-small-screen .mdl-layout__header-row h3 { + font-size: inherit; +} +.converse .mdl-card { + height: auto; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +.converse .mdl-card > * { + height: auto; +} +.converse .mdl-card .mdl-card__supporting-text { + margin: 40px; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + padding: 0; + color: inherit; + width: calc(100% - 80px); +} +.mdl-demo.converse .mdl-card__supporting-text h4 { + margin-top: 0; + margin-bottom: 20px; +} +.converse .mdl-card__actions { + margin: 0; + padding: 4px 40px; + color: inherit; +} +.converse section.section--center { + max-width: 860px; +} diff --git a/templates/index.html b/templates/index.html index 024d0aef5..12369d379 100644 --- a/templates/index.html +++ b/templates/index.html @@ -2,44 +2,72 @@ - - - - - Converse Index + + Converse: Index + + + + + + + + + - -
- -
-
-
-
-
- {% for thread in threads -%} - -
-
{% if thread.sticky %}Sticky {% endif %}{{ thread.title | safe }}
- {{ thread.posted }} -
-
-

Created by {{ thread.author_name }}

- Last post by {{ thread.post_author }} -
- - {%- endfor %} + +
+
+
+ Converse +
+
+
+ + + +
+   + + +
+
+
+
+
+
+

Latest threads:

+ +
+
+
+
+
-
+