From fb9ea437e9fd47d2b4cb432ad6fc576d4a08614f Mon Sep 17 00:00:00 2001 From: Vincent Ambo Date: Mon, 21 May 2018 23:17:34 +0200 Subject: [PATCH] feat(templates): Add new thread view with MDL design --- static/styles.css | 37 +++++++++ templates/index.html | 1 - templates/thread.html | 171 ++++++++++++++++++++++++++---------------- 3 files changed, 142 insertions(+), 67 deletions(-) diff --git a/static/styles.css b/static/styles.css index 929e61b60..66b3200fd 100644 --- a/static/styles.css +++ b/static/styles.css @@ -94,3 +94,40 @@ html, body { .converse section.section--center { max-width: 860px; } +.converse .mdl-card .avatar-card { + margin-left: auto; + margin-right: auto; + margin-top: 30px; +} +.mobile-avatar { + width: 30px; + border-radius: 8px; + margin-bottom: 5px; +} +.mobile-date { + text-decoration: none; +} +.converse .mdl-card .post-box { + margin: 20px; +} +.converse .mdl-card .post-actions { + display: flex; + padding-right: 5px; +} +.post-action { + margin: 5px; + margin-bottom: 10px; +} +.converse section.post-section { + padding: 5px; +} +.post-date { + text-decoration: none; + font-size: 80%; +} +.mdl-layout__content { + flex: 1 0 auto; +} +.converse .reply-box { + padding-top: 10px; +} diff --git a/templates/index.html b/templates/index.html index 12369d379..c10493899 100644 --- a/templates/index.html +++ b/templates/index.html @@ -44,7 +44,6 @@ {% for thread in threads -%}
  • - + + + +
    + {% for post in posts -%} +
    + {# card to display avatars on desktop #} +
    +
    + +
    + {{ post.author_name }} +
    +
    + {# card for main post content #} +
    + {# card section for displaying user & post information on mobile #} +
    + +  {{ post.author_name }} posted on + {{ post.posted }} +
    + {# card section to display post date on desktop #} +
    + {{ post.posted }} +
    + {# card section for actual post content #} +
    {{ post.body | safe }}
    + {# card section for post actions #} +
    +
    + + {#%- TODO if post.editable %#} + + {#% endif -%#} + + {% if post.editable %} + + edit + Edit post + + {% endif %} + +
    +
    +
    + {% endfor %} + + {# section for writing a response on the same page #} +
    +
    +
    + + +
    +
    + + +
    + +
    +
    +
    +
    +
    + - - {% for post in posts -%} -
    -
    - - {{ post.author_name }} -
    - -
    {{ post.body | safe }}
    - -
    - - {{ post.posted }} - - -
    - {%- if post.editable %} - Edit - {% endif -%} - Quote -
    -
    -
    - {%- endfor %} - -
    -
    - - -
    - -
    - -
    -
    -
    -
    - - - + +