Mercurial > libervia-templates

changeset 155:954759f0e8fa

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 %}