Mercurial > libervia-templates
changeset 155:954759f0e8fa
css: styles improvments + following a bit more BEM conventions
author | Goffi <goffi@goffi.org> |
---|---|
date | Thu, 21 Jun 2018 01:12:40 +0200 |
parents | 80cf52fbcc40 |
children | b01b58d06894 |
files | sat_templates/default/blog/discover.html sat_templates/default/chat/select.html sat_templates/default/file/discover.html sat_templates/default/merge-request/discover.html sat_templates/default/photo/discover.html sat_templates/default/static/event.css sat_templates/default/static/styles.css sat_templates/default/ticket/discover.html |
diffstat | 8 files changed, 240 insertions(+), 39 deletions(-) [+] |
line wrap: on
line diff
--- a/sat_templates/default/blog/discover.html Thu Jun 21 01:11:07 2018 +0200 +++ b/sat_templates/default/blog/discover.html Thu Jun 21 01:12:40 2018 +0200 @@ -28,7 +28,7 @@ {% if disco_entities %} <p class="instructions--alt">{% trans %}Or enter the jid of a blog writer{% endtrans %}</p> {% endif %} -{% call form.form(class="form_single") %} +{% call form.form(class="form--single") %} {{ field.text("jid", _("blog writer jid"), required=true)}} {{ field.submit(_("Consult")) }} {% endcall %}
--- a/sat_templates/default/chat/select.html Thu Jun 21 01:11:07 2018 +0200 +++ b/sat_templates/default/chat/select.html Thu Jun 21 01:12:40 2018 +0200 @@ -10,7 +10,7 @@ {% endfor %} </ul> <p class="instructions--alt">{% trans %}Or enter a room address{% endtrans %}</p> -{% call form.form(class="form_single") %} +{% call form.form(class="form--single") %} {{ field.text("jid", _("Room address (JID)"), required=true)}} {{ field.submit(_("Join")) }} {% endcall %}
--- a/sat_templates/default/file/discover.html Thu Jun 21 01:11:07 2018 +0200 +++ b/sat_templates/default/file/discover.html Thu Jun 21 01:12:40 2018 +0200 @@ -66,7 +66,7 @@ </div> <p class="instructions--alt">{% trans %}Or enter a full jid of a device{% endtrans %}</p> -{% call form.form(class="form_single") %} +{% call form.form(class="form--single") %} {{ field.text("jid", _("device full jid"), required=true)}} {{ field.submit(_("Access")) }} {% endcall %}
--- a/sat_templates/default/merge-request/discover.html Thu Jun 21 01:11:07 2018 +0200 +++ b/sat_templates/default/merge-request/discover.html Thu Jun 21 01:12:40 2018 +0200 @@ -18,7 +18,7 @@ </div> {% endif %} -{% call form.form(class="form_single") %} +{% call form.form(class="form--single") %} {{ field.text("jid", _("handler jid"), required=true)}} {{ field.submit(_("Access")) }} {% endcall %}
--- a/sat_templates/default/photo/discover.html Thu Jun 21 01:11:07 2018 +0200 +++ b/sat_templates/default/photo/discover.html Thu Jun 21 01:12:40 2018 +0200 @@ -4,7 +4,7 @@ {% block body %} <p class="instructions--alt">{% trans %}Photo discovery is not implemented yet, however you can enter a jid below to find its albums{% endtrans %}</p> -{% call form.form(class="form_single") %} +{% call form.form(class="form--single") %} {{ field.text("jid", _("device full jid"), required=true)}} {{ field.submit(_("Access")) }} {% endcall %}
--- a/sat_templates/default/static/event.css Thu Jun 21 01:11:07 2018 +0200 +++ b/sat_templates/default/static/event.css Thu Jun 21 01:12:40 2018 +0200 @@ -11,12 +11,12 @@ margin: 0; } -#event_picture { +.event__picture { max-width: 100%; border-radius: 2em; } -#event_counter { +.event__counter { font-weight: bold; font-size: 1.3em; text-align: center;
--- a/sat_templates/default/static/styles.css Thu Jun 21 01:11:07 2018 +0200 +++ b/sat_templates/default/static/styles.css Thu Jun 21 01:12:40 2018 +0200 @@ -42,29 +42,6 @@ font-size: 0.7em; font-weight: bold; } - -.box { - background-color: #edf2ff; - border-radius: 0; - border-color: silver; -} - -.box__tools { - margin: 0; - padding: 0; -} - -.box__tools a { - text-decoration: none; - color: inherit; - padding: 0.2em; - border-radius: 0.4em; -} - -.box__tools a:hover { - background-color: var(--select-bg-color); -} - .title { font-weight: bold; text-align: center; @@ -112,6 +89,58 @@ align-items: center; } +/*** boxes ***/ + +.box { + background-color: #edf2ff; + border-radius: 0; + border-color: silver; + margin: 0 auto; +} + +.box--medium { + max-width: 50em; +} + +.box--small { + max-width: 20em; +} + +.box--hollow { + border-radius: 0; + border-style: solid; + border-color: silver; + border-width: 1px 0; + margin: 0; +} + +.box--paper { + text-align: center; + font-variant: small-caps; + border: none; +} + +.box--center { +} + +.box__tools { + /* toolbar in a box */ + margin: 0; + padding: 0; +} + +.box__tools a { + text-decoration: none; + color: inherit; + padding: 0.2em; + border-radius: 0.4em; +} + +.box__tools a:hover { + background-color: var(--select-bg-color); +} + + /*** blocks ***/ .block_separator { @@ -131,19 +160,35 @@ margin-top: 0.7em; } +/*** lists ***/ + +.list { + list-style: none; + display: flex; + flex-direction: column; +} + +.list__item>a { + text-decoration: none; + color: inherit; +} + /*** grids ***/ .grid { - list-style: none; display: flex; flex-wrap: wrap; } +ul.grid { + list-style: none; +} + .grid--center { justify-content: center; } -.grid__item>a { +li.grid__item>a { text-decoration: none; color: inherit; } @@ -162,6 +207,33 @@ background-color: var(--select-bg-color); } +/*** tables ***/ + +.table--main { + margin: 1em auto; + border-collapse: collapse; + text-align: center; +} + +.table--main th { + font-variant: small-caps; + border: 1px solid; + padding: 0.5em; +} + +.table--main td { + border: 1px solid; + padding: 0 0.5em; +} + +.table__total { + font-variant: small-caps; +} + +.table__total_value { + font-weight: bold; +} + /*** avatars ***/ .avatar { @@ -190,6 +262,11 @@ background: #43d2f6; } +/*** images ***/ +.img--small { + height: 100px; +} + /*** icons ***/ @@ -225,6 +302,13 @@ padding: 1em; } +.message--note { + max-width: 500px; + margin: 0 auto; + padding: 1em; + text-align: center; +} + /*** Menus ***/ .menu ul { @@ -359,12 +443,28 @@ /* a form with only one field */ -.form_single { - text-align: center; +.form--paper label { + font-variant: small-caps; +} + +.form--paper label.required:after { + content: " *"; + font-weight: bold; } -.form_single input:not([type="submit"]) { - margin: 0 1em; +.form--paper textarea { + resize: vertical; +} + +.form--single { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.form--single input:not([type="submit"]) { + margin: 1em 1em; width: 15em; border-radius: 0.7em; outline: none; @@ -373,18 +473,80 @@ box-shadow: none; } +.form--single .form_input { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + .form_submit { margin: 1em auto 0; display: block; } +.form--single .form_submit { + margin: 0; +} + .form_jid { text-align: center; } +.form__panel--vertical { + display: flex; + flex-direction: column; + padding: 2em 0; +} + +.form__panel--vertical label { + display: block; +} + +.form__panel--vertical .form_input { + margin: 0.5em 0; +} + +.form__panel--center textarea,input:not([type="radio"]) { + display: block; + margin-left: auto; + margin-right: auto; +} + +.form__panel--center label { + text-align: center; +} + +.form__field--tiny>input { + box-sizing: border-box; + width: 3em; +} + +.form__field--small>input { + box-sizing: border-box; + width: 20em; + max-width: 95%; +} + +.form__field--medium>input { + box-sizing: border-box; + width: 50em; + max-width: 95%; +} + +.form__field--big>input,textarea { + box-sizing: border-box; + width: 100%; +} + /* Textboxes */ +.textbox { + margin-left: auto; + margin-right: auto; +} + form.textbox>* { display: block; margin: 1em auto; @@ -505,9 +667,38 @@ overflow: auto; } + /*** boxes ***/ + .box { border-radius: 1em; box-shadow: 10px 10px 16px -5px rgba(0,0,0,0.5); + width: 94%; + margin: 1em auto; + border: solid 1px; + border-color: #9ca0a8; + } + + .box--medium { + width: 33rem; + } + + .box--hollow { + border-radius: 0.2em; + border-width: 1px; + margin: 0.5em; + } + + /*** Forms ***/ + + .form__panel--vertical { + display: flex; + flex-direction: column; + padding: 2em; + } + + .form__field--big>input,textarea { + box-sizing: border-box; + width: 95%; } .main_menu a { @@ -530,7 +721,17 @@ /*** forms ***/ - .form_single .form_submit.button { - display: inline; + .form--single input:not([type="submit"]) { + margin: 0 1em; + } + + .form--single { + display: flex; + justify-content: center; + flex-direction: row; + } + + .form--single .form_input { + flex-direction: row; } }
--- a/sat_templates/default/ticket/discover.html Thu Jun 21 01:11:07 2018 +0200 +++ b/sat_templates/default/ticket/discover.html Thu Jun 21 01:12:40 2018 +0200 @@ -18,7 +18,7 @@ </div> {% endif %} -{% call form.form(class="form_single") %} +{% call form.form(class="form--single") %} {{ field.text("jid", _("tickets tracker jid"), required=true)}} {{ field.submit(_("Access")) }} {% endcall %}