Mercurial > libervia-templates

changeset 172:4a03d0a6839b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
css (styles): various styles improvments: - work on list - new paired-slides class - box-medium is a larger than before - use --text modified when size is 1em - added several list modifiers classes - added several box modifiers
author Goffi <goffi@goffi.org>
date Sat, 26 Jan 2019 20:22:18 +0100
parents cede18c118c9
children 221cd8f0c9d5
files sat_templates/templates/default/components/block.html sat_templates/templates/default/input/navigation.html sat_templates/templates/default/merge-request/item.html sat_templates/templates/default/photo/album.html sat_templates/templates/default/static/styles.css sat_templates/templates/default/ticket/item.html
diffstat 6 files changed, 150 insertions(+), 18 deletions(-) [+]
line wrap: on
line diff
--- a/sat_templates/templates/default/components/block.html	Fri Jan 25 11:28:41 2019 +0100
+++ b/sat_templates/templates/default/components/block.html	Sat Jan 26 20:22:18 2019 +0100
@@ -25,7 +25,7 @@
         {% for disco_entity in disco_entities %}
             <li class='grid__item grid__item--medium grid__item--selectable'>
                 <a href="{{disco_entity.url}}" class="items_vert--centered">
-                    {{ icon(icon_name, cls='icon--medium') }}
+                    {{ icon(icon_name, cls='icon--block icon--medium') }}
                     <span>{{ disco_entity.name }}</span>
                 </a>
             </li>
--- a/sat_templates/templates/default/input/navigation.html	Fri Jan 25 11:28:41 2019 +0100
+++ b/sat_templates/templates/default/input/navigation.html	Sat Jan 26 20:22:18 2019 +0100
@@ -1,10 +1,10 @@
 {% macro prev_next(prev_label=_("newer"), next_label=_("older")) %}
     <nav class="prev_next box box--large box--zero">
-        <ul>
+        <ul class="list list--inline">
             {% if previous_page_url is defined %}
                 <li class="prev_next__previous">
                     <a href="{{previous_page_url}}">
-                        {{ icon('angle-double-left', cls='icon--small') }}
+                        {{ icon('angle-double-left', cls='icon--text') }}
                         {{prev_label}}
                     </a>
                 </li>
@@ -13,7 +13,7 @@
                 <li class="prev_next__next">
                     <a href="{{next_page_url}}">
                         {{next_label}}
-                        {{ icon('angle-double-right', cls='icon--small') }}
+                        {{ icon('angle-double-right', cls='icon--text') }}
                     </a>
                 </li>
             {% endif %}
--- a/sat_templates/templates/default/merge-request/item.html	Fri Jan 25 11:28:41 2019 +0100
+++ b/sat_templates/templates/default/merge-request/item.html	Sat Jan 26 20:22:18 2019 +0100
@@ -33,7 +33,7 @@
             {% if url_ticket_edit is defined %}
                 <p class="box__tools">
                     <a href="{{url_ticket_edit}}">
-                    {{ icon('pencil', cls='icon--small') }}
+                    {{ icon('pencil', cls='icon--text') }}
                     edit
                     </a>
                 </p>
--- a/sat_templates/templates/default/photo/album.html	Fri Jan 25 11:28:41 2019 +0100
+++ b/sat_templates/templates/default/photo/album.html	Sat Jan 26 20:22:18 2019 +0100
@@ -17,7 +17,7 @@
                         {% if file.comments_count %}
                             <span class='comments__count'>({{file.comments_count}})</span>
                         {% endif %}
-                        {{ icon('comment-empty', cls='icon--small') }}
+                        {{ icon('comment-empty', cls='icon--text') }}
                     </span>
                     <div id='{{'comments_panel'|cur_gidx}}' class="panel-drawer">
                         {{ blog.show_items(file.comments, expanded=true, dates_fmt='relative') }}
--- a/sat_templates/templates/default/static/styles.css	Fri Jan 25 11:28:41 2019 +0100
+++ b/sat_templates/templates/default/static/styles.css	Sat Jan 26 20:22:18 2019 +0100
@@ -7,6 +7,7 @@
   --box--expand_limit: 20rem;
   --box--expand_height-min: 9rem;
   --select-bg-color: #ddd;
+  --size-small: 1.5rem;
   --size-medium: 3rem;
   --color-prim: #fafafa;
   --color-prim--light: #ffffff;
@@ -33,10 +34,6 @@
     box-sizing: border-box;
 }
 
-ul {
-    padding: 0;
-}
-
 p {
     margin: 0;
 }
@@ -157,6 +154,8 @@
  * Generic *
  ***********/
 
+/** Common Sizes **/
+
 /** Buttons **/
 
 .btn {
@@ -217,6 +216,12 @@
     box-shadow: 0px 0px 6px 1px #000;
 }
 
+/** heading **/
+.heading__subtitle {
+    font-size: 2em;
+    text-align: center;
+}
+
 /** instructions **/
 
 .instructions--head {
@@ -233,6 +238,18 @@
     font-style: italic;
 }
 
+/** descriptions **/
+
+.description {
+    padding: 1em;
+    text-align: center;
+    font-size: 1.2em;
+}
+
+.description--emphasis {
+    font-weight: bold;
+}
+
 /** images **/
 
 .img--center{
@@ -241,10 +258,38 @@
     max-width: 100%;
 }
 
+.img--float-left {
+    float: left;
+}
+
+.img--float-right {
+    float: right;
+}
+
+.img--inline {
+    vertical-align: middle;
+}
+
+.img--inline-bottom {
+    vertical-align: bottom;
+}
+
+.img--very-small {
+    height: 2em;
+}
+
 .img--small {
     height: 100px;
 }
 
+.img--medium {
+    height: 10rem;
+}
+
+.img--large {
+    width: 40rem;
+}
+
 /** other language **/
 
 .other_lang.state_init>div.info>p {
@@ -293,8 +338,8 @@
 }
 
 .box__content img {
+    margin: 0;
     max-width: 100%;
-    margin: 0;
 }
 
 .box__content video {
@@ -306,9 +351,8 @@
     white-space: pre-wrap;
 }
 
-
 .box--large {
-    max-width: 80rem;
+    max-width: 60rem;
 }
 
 .box--plain {
@@ -342,10 +386,16 @@
     background: var(--color-prim);
 }
 
+.box--middle {
+    margin-left: auto;
+    margin-right: auto;
+}
+
 .box--center {
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-direction: column;
 }
 
 .box--zero {
@@ -361,6 +411,23 @@
     transition: max-height 0.5s;
 }
 
+.box--quarter-screen{
+    min-height: 25vh;
+}
+
+.box--third-screen{
+    min-height: 33vh;
+}
+
+.box--half-screen{
+    min-height: 50vh;
+}
+
+.box--screen{
+    /* box taking a whole screen */
+    min-height: 100vho
+}
+
 .box__expand_zone {
     /* zone to click to expand/fold the box */
     cursor: pointer;
@@ -515,9 +582,28 @@
  *********/
 
 .list {
+    padding: 0;
     list-style: none;
     display: flex;
     flex-direction: column;
+    margin: 0;
+}
+
+.list--features {
+    font-variant: small-caps;
+}
+
+.list--features svg {
+    margin-right: 0.5em;
+}
+
+.list--inline {
+    flex-direction: row;
+    margin: 0;
+}
+
+.list__item {
+    margin: 0.5em;
 }
 
 .list__item>a {
@@ -525,6 +611,11 @@
     color: inherit;
 }
 
+.list__item--selected {
+    font-weight: bold;
+    text-decoration: underline;
+}
+
 /*********
  * Grids *
  *********/
@@ -630,17 +721,24 @@
  * icons *
  *********/
 
-.icon--medium {
-    height: var(--size-medium);
+.icon--block {
     display: block;
     margin: 0 auto;
 }
 
-.icon--small {
+.icon--text {
     height: 1em;
     vertical-align: middle;
 }
 
+.icon--small {
+    height: var(--size-small);
+}
+
+.icon--medium {
+    height: var(--size-medium);
+}
+
 .icon--soft {
     fill: #777;
 }
@@ -934,6 +1032,23 @@
     text-align: center;
 }
 
+/*****************
+ * paired slides *
+ ****************/
+
+ .paired-slides {
+     display: flex;
+     flex-direction: row;
+     flex-wrap: wrap;
+ }
+
+ div.paired-slides:nth-child(odd) {
+     flex-direction: row-reverse;
+ }
+
+ .paires-slides
+
+
 /**************
  * Navigation *
  **************/
@@ -1110,7 +1225,7 @@
     }
 
     .box--medium {
-        width: 33rem;
+        width: 43rem;
         max-width: 100%;
     }
 
@@ -1120,6 +1235,11 @@
         margin: 0.5em;
     }
 
+    .box--extra-margin {
+        margin-top: 5rem;
+        margin-bottom: 5rem;
+    }
+
     .box--zero {
         box-shadow: none;
         border: none;
@@ -1163,6 +1283,18 @@
         flex-direction: row;
     }
 
+    /*****************
+     * paired slides *
+     ****************/
+
+     .paired-slides {
+         flex-wrap: nowrap;
+     }
+
+     .paired-slides>*:last-child {
+         margin-left: 1em;
+     }
+
     /*********
      * Menus *
      *********/
--- a/sat_templates/templates/default/ticket/item.html	Fri Jan 25 11:28:41 2019 +0100
+++ b/sat_templates/templates/default/ticket/item.html	Sat Jan 26 20:22:18 2019 +0100
@@ -26,7 +26,7 @@
     {% if url_ticket_edit is defined %}
         <p class="box__tools">
             <a href="{{url_ticket_edit}}">
-            {{ icon('pencil', cls='icon--small') }}
+            {{ icon('pencil', cls='icon--text') }}
             edit
             </a>
         </p>