Mercurial > libervia-templates
changeset 128:4f27ce980ced
css: started to refactor CSS class to follow BEM conventions
author | Goffi <goffi@goffi.org> |
---|---|
date | Sat, 24 Mar 2018 11:14:14 +0100 (2018-03-24) |
parents | 27d6453a6209 |
children | ca42dc037bbf |
files | default/chat/select.html default/forum/view_topics.html default/merge-request/create.html default/static/chat_select.css default/static/file.css default/static/photo.css default/static/styles.css |
diffstat | 7 files changed, 72 insertions(+), 41 deletions(-) [+] |
line wrap: on
line diff
--- a/default/chat/select.html Sat Mar 24 11:11:37 2018 +0100 +++ b/default/chat/select.html Sat Mar 24 11:14:14 2018 +0100 @@ -3,14 +3,14 @@ {% import 'input/field.html' as field with context %} {% block body %} -<p class="instructions">{% trans %}Please select the chat room you want to enter{% endtrans %}</p> +<p class="instructions--head">{% trans %}Please select the chat room you want to enter{% endtrans %}</p> <ul class="rooms_list"> {% for room in rooms %} <li><a href="{{room.url}}">{{room.name}}</a></li> {% endfor %} </ul> -<p class="instructions room_jid">{% trans %}Or enter a room address{% endtrans %}</p> -{% call form.form(class="room_jid_form") %} +<p class="instructions--alt">{% trans %}Or enter a room address{% endtrans %}</p> +{% call form.form(class="form_single") %} {{ field.text("jid", _("Room address (JID)"), required=true)}} {{ field.submit(_("Join")) }} {% endcall %}
--- a/default/forum/view_topics.html Sat Mar 24 11:11:37 2018 +0100 +++ b/default/forum/view_topics.html Sat Mar 24 11:14:14 2018 +0100 @@ -7,7 +7,7 @@ {% block body %} {% if not topics %} - <div class="message_info"> + <div class="message--info"> {% trans %}There is not message yet in this forum.{% endtrans %} {% if profile %} {% trans %}You can start a topic of interest by filling this form.{% endtrans %}
--- a/default/merge-request/create.html Sat Mar 24 11:11:37 2018 +0100 +++ b/default/merge-request/create.html Sat Mar 24 11:14:14 2018 +0100 @@ -3,7 +3,7 @@ {% set category_menu = [('merge-requests_list', url_tickets_list)] %} {% extends 'base/base.html' %} {% block body %} -<div class="box message_info"> +<div class="box message--info"> <p>{% trans %}It is not yet possible to create a merge request from inside Libervia, please use <pre>jp merge-request set</pre> for now. Merge requests welcome ;){% endtrans %}</p> </div> {% endblock body %}
--- a/default/static/chat_select.css Sat Mar 24 11:11:37 2018 +0100 +++ b/default/static/chat_select.css Sat Mar 24 11:14:14 2018 +0100 @@ -2,11 +2,6 @@ overflow: auto; } -.instructions { - text-align: center; - font-style: italic; -} - .rooms_list { list-style: none; display: grid; @@ -33,24 +28,7 @@ background-color: #efefef; } -#jid { - margin: 0 1em; - width: 15em; - border-radius: 0.7em; - outline: none; - border: 1px solid black; - padding: 0.4em; - box-shadow: none; -} - -.room_jid_form { - text-align: center; -} - @media (min-width: 600px) { - .instructions { - padding-top: 3rem; - } .rooms_list { grid-template-columns: 1fr 1fr 1fr; } @@ -58,8 +36,4 @@ .rooms_list li { margin-top: 0; } - - .room_jid_form .form_submit.button { - display: inline; - } }
--- a/default/static/file.css Sat Mar 24 11:11:37 2018 +0100 +++ b/default/static/file.css Sat Mar 24 11:14:14 2018 +0100 @@ -40,9 +40,6 @@ margin: 0 auto; } -.icon--soft { - fill: #777; -} @media (min-width: 500px) { .file {
--- a/default/static/photo.css Sat Mar 24 11:11:37 2018 +0100 +++ b/default/static/photo.css Sat Mar 24 11:14:14 2018 +0100 @@ -35,10 +35,6 @@ font-weight: bold; } -.icon--small { - height: 1em; -} - .comments__count { font-weight: bold; }
--- a/default/static/styles.css Sat Mar 24 11:11:37 2018 +0100 +++ b/default/static/styles.css Sat Mar 24 11:14:14 2018 +0100 @@ -1,3 +1,8 @@ +:root { + --select-bg-color: #ddd; +} + + html { font-family: "sat-base-font"; } @@ -74,16 +79,46 @@ background-color: #bc0000; } +.instructions--head { + font-size: 1.5em; + text-align: center; +} + +.instructions--alt { + text-align: center; + font-style: italic; +} + +/*** icons ***/ + +.icon--medium { + height: 3em; + display: block; + margin: 0 auto; +} + +.icon--small { + height: 1em; +} + +.icon--soft { + fill: #777; +} + +.icon__name { + +} + /*** Messages ***/ -.message_info { +.message--info { max-width: 500px; margin: 0 auto; padding: 1em; text-align: justify; } -.message_info pre { +.message--info pre { background: #ddd; padding: 1em; } @@ -92,7 +127,6 @@ .menu ul { display: flex; - padding: 0; margin-top: 8px; list-style: none; } @@ -220,11 +254,32 @@ /*** Forms ***/ +/* a form with only one field */ + +.form_single { + text-align: center; +} + +.form_single input:not([type="submit"]) { + margin: 0 1em; + width: 15em; + border-radius: 0.7em; + outline: none; + border: 1px solid black; + padding: 0.4em; + box-shadow: none; +} + + .form_submit { margin: 1em auto 0; display: block; } +.form_jid { + text-align: center; +} + /* Textboxes */ form.textbox>* { @@ -366,4 +421,13 @@ padding: 0 6em; } + .instructions--alt { + padding-top: 3rem; + } + + /*** forms ***/ + + .form_single .form_submit.button { + display: inline; + } }