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
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;
+    }
 }