Mercurial > libervia-templates
changeset 133:0a0d9a953d98
css: some more refactoring
author | Goffi <goffi@goffi.org> |
---|---|
date | Mon, 26 Mar 2018 08:13:53 +0200 |
parents | c70f405f9b86 |
children | f1d47c2942ae |
files | default/components/avatar.html default/forum/view_topics.html default/static/chat.css default/static/forum.css default/static/styles.css |
diffstat | 5 files changed, 79 insertions(+), 60 deletions(-) [+] |
line wrap: on
line diff
--- a/default/components/avatar.html Mon Mar 26 08:13:53 2018 +0200 +++ b/default/components/avatar.html Mon Mar 26 08:13:53 2018 +0200 @@ -1,9 +1,9 @@ -{% macro avatar(jid) %} +{% macro avatar(jid, class) %} {%- if identities is defined -%} {%- if identities[jid].avatar_basename is defined %} - <img class="avatar" src="{{cache_path}}{{identities[jid].avatar_basename}}"> + <img class="avatar {{class}}" src="{{cache_path}}{{identities[jid].avatar_basename}}"> {% else %} - <span class="avatar generated">{{author|first|upper}}</span> + <span class="avatar avatar--generated {{class}}"><span class="avatar__content">{{identities[jid].nick|first|upper}}</span></span> {%- endif -%} {%- endif -%} {% endmacro %}
--- a/default/forum/view_topics.html Mon Mar 26 08:13:53 2018 +0200 +++ b/default/forum/view_topics.html Mon Mar 26 08:13:53 2018 +0200 @@ -17,14 +17,14 @@ </div> {% endif %} {% if profile %} - <div class="forum_topic_create"> + <div class="forum__topic_create"> {% call textbox.textbox(service, node, placeholder=_("Your message"), submit_label=_("Create topic"), type="new_topic") %} {{ field.text("title", placeholder=_("Your topic (try to be short and explicit)"), required=True) }} {% endcall %} </div> {% endif %} - <div id="forum_topics"> + <div class="forum__topics"> {% for topic in topics %} <div> <a href="{{topic.http_uri}}">
--- a/default/static/chat.css Mon Mar 26 08:13:53 2018 +0200 +++ b/default/static/chat.css Mon Mar 26 08:13:53 2018 +0200 @@ -63,22 +63,6 @@ color: #049282; } -.avatar { - height: 2rem; - width: 2rem; - float: left; - background: #ccc; - border-radius: 0.2rem; - margin-right: 0.3rem; - margin-top: 0.3rem; -} - -.generated { - font-size: 1.5rem; - text-align: center; - background: #43d2f6; -} - .msg_header { display: block; font-size: 0.9em;
--- a/default/static/forum.css Mon Mar 26 08:13:53 2018 +0200 +++ b/default/static/forum.css Mon Mar 26 08:13:53 2018 +0200 @@ -36,11 +36,11 @@ font-size: 0.8em; } -#forum_topics { +.forum__topics { margin-top: 3em; } -#forum_topics>div { +.forum__topics>div { box-sizing: border-box; width: 80%; margin: 0.5em auto; @@ -49,17 +49,16 @@ } -#forum_topics>:hover { +.forum__topics>:hover { background-color: #43d2f6; } -#forum_topics img.avatar { - width: 1.5rem; +.forum__topics img.avatar { vertical-align: middle; - padding-right: 1em; + margin-right: 1em; } -#forum_topics a { +.forum__topics a { display: block; text-decoration: none; color: inherit;
--- a/default/static/styles.css Mon Mar 26 08:13:53 2018 +0200 +++ b/default/static/styles.css Mon Mar 26 08:13:53 2018 +0200 @@ -1,5 +1,6 @@ :root { --select-bg-color: #ddd; + --size-medium: 3em; } @@ -66,12 +67,12 @@ /*** Generic ***/ .button { - padding: 0.5em 1em; - background: #333; - color: #ccc; - border: 1px solid #555; - border-radius: 0.8em; - font-weight: bold; + padding: 0.5em 1em; + background: #333; + color: #ccc; + border: 1px solid #555; + border-radius: 0.8em; + font-weight: bold; } @@ -85,8 +86,14 @@ } .instructions--alt { - text-align: center; - font-style: italic; + text-align: center; + font-style: italic; +} + +.items_vert--centered { + display: flex; + flex-direction: column; + align-items: center; } /*** blocks ***/ @@ -98,14 +105,14 @@ .block_separator__label { display: inline-block; - margin: 0 0.2em; + margin: 0 0.2em; } .block_separator__line { - height: 1px; - background: #ccc; - flex: 1; - margin-top: 0.7em; + height: 1px; + background: #ccc; + flex: 1; + margin-top: 0.7em; } /*** grids ***/ @@ -139,10 +146,39 @@ background-color: var(--select-bg-color); } +/*** avatars ***/ + +.avatar { + height: 2rem; + width: 2rem; + display: inline-flex; + flex-direction: column; + align-content: center; + justify-content: center; + background: #ccc; + border-radius: 0.2rem; +} + +.avatar__content { + +} + +.avatar--medium { + height: var(--size-medium); + width: var(--size-medium); + border-radius: 0.5rem; +} + +.avatar--generated { + text-align: center; + background: #43d2f6; +} + + /*** icons ***/ .icon--medium { - height: 3em; + height: var(--size-medium); display: block; margin: 0 auto; } @@ -311,12 +347,12 @@ } .form_single input:not([type="submit"]) { - margin: 0 1em; - width: 15em; - border-radius: 0.7em; - outline: none; - border: 1px solid black; - padding: 0.4em; + margin: 0 1em; + width: 15em; + border-radius: 0.7em; + outline: none; + border: 1px solid black; + padding: 0.4em; box-shadow: none; } @@ -419,24 +455,24 @@ /*** Notifications ***/ .notification.retry { - position: fixed; - top: 1rem; - margin: auto; - width: 80%; - background: #DB1616; - border: 3px solid silver; - left: 10%; - text-align: center; + position: fixed; + top: 1rem; + margin: auto; + width: 80%; + background: #DB1616; + border: 3px solid silver; + left: 10%; + text-align: center; } #retry_counter { - font-weight: bold; + font-weight: bold; } #retry_now { - color: blue; - text-decoration: underline; - cursor: pointer; + color: blue; + text-decoration: underline; + cursor: pointer; } @media (min-width: 800px) {