Add articles meta and fix some margins on sliders and sticky elements

diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index 5317dc9ba9ec0b5204a47bf1fb391a5361bc4230..ac344b8d994d381d91afd1d9d1d2dd50e4a919a4 100755 (executable)
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -21,6 +21,7 @@
 @import 'search';
 @import 'pattern';
 @import 'tag';
+@import 'share-links';
 
 // Typography modules
 @import 'dashed';

diff --git a/app/static/src/sass/modules/_page.scss b/app/static/src/sass/modules/_page.scss
index e1d9b4405a9bf30489a667dd52a5ad24c915819c..43d69ac123028b52c5af4cf11621c747b08f52fc 100644 (file)
--- a/app/static/src/sass/modules/_page.scss
+++ b/app/static/src/sass/modules/_page.scss
@@ -2,6 +2,14 @@ $module: ".page";
 
 #{$module} {
 
+    &__sidebar {
+
+        @include mq($until: sm) {
+            background: white;
+        }
+
+    }
+
     &__slider {
 
     background: white;
@@ -15,4 +23,38 @@ $module: ".page";
 
     }
 
+    &__meta {
+
+        @include margin-bottom(2);
+
+    }
+
+    &__meta-separator {
+
+        height: 1px;
+        background: black;
+        width: 45px;
+
+        @include margin(1 0);
+
+    }
+
+    &__meta-date {
+
+        @include font-size(l);
+        @include line-height(1);
+        @include typeface(serif);
+        font-weight: weight(heavy);
+
+    }
+
+    &__meta-title {
+
+        @include font-size(l);
+        @include line-height(1);
+        @include typeface(serif);
+        font-weight: weight(heavy);
+
+    }
+
 }

diff --git a/app/static/src/sass/modules/_share-links.scss b/app/static/src/sass/modules/_share-links.scss
new file mode 100644 (file)
index 0000000..7b3140c
--- /dev/null
+++ b/app/static/src/sass/modules/_share-links.scss
@@ -0,0 +1,17 @@
+$module: ".share-links";
+
+#{$module} {
+
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+
+    &__item {
+
+        display: inline-block;
+        font-size: 1.5rem;
+        @include margin-right(.5);
+
+    }
+
+}

diff --git a/app/static/src/sass/modules/navs/_nav-tree.scss b/app/static/src/sass/modules/navs/_nav-tree.scss
index 1032ac279154384b14368da4c36e2a119ecb5bb6..3bffd7d44dfccb72cbc7a9fe6d316bb7fb3baa03 100644 (file)
--- a/app/static/src/sass/modules/navs/_nav-tree.scss
+++ b/app/static/src/sass/modules/navs/_nav-tree.scss
@@ -8,9 +8,7 @@ $module: ".nav-tree";
 
     &--level-0 {
 
-        @include mq($until: sm) {
-            @include margin-bottom(3);
-        }
+        @include margin-bottom(2);
 
     }
 

diff --git a/app/static/src/sass/modules/sliders/_slider-page.scss b/app/static/src/sass/modules/sliders/_slider-page.scss
index e3e4d14a861f9fbb54668cd1f34e9fcaec269da1..c802a1adb01bd0cab8a5cd4a686a1de5bb0c83db 100644 (file)
--- a/app/static/src/sass/modules/sliders/_slider-page.scss
+++ b/app/static/src/sass/modules/sliders/_slider-page.scss
@@ -5,7 +5,6 @@ $module: ".slider-page";
     list-style-type: none;
     margin: 0;
     padding: 0;
-    height: 520px;
 
     //
     // Not lightslider, lets go with Flexbox W00t W00t
@@ -45,6 +44,7 @@ $module: ".slider-page";
         }
         .flexbox & {
             visibility: visible;
+            padding: 0 5px;
             @include mq($from: sm) {
                 -webkit-order: 0;
                 -ms-flex-order: 0;

diff --git a/app/templates/includes/share_buttons.html b/app/templates/includes/share_buttons.html
index 96b499e25cd224de8c772fa91e08b4ae635d4a9e..6736ce619516ddaa429ca3ae81f97fd326a129b9 100644 (file)
--- a/app/templates/includes/share_buttons.html
+++ b/app/templates/includes/share_buttons.html
@@ -1,16 +1,16 @@
 {% load i18n %}
 
-<ul class="share__links">
-    <li>
-        <a class="share__link__item  share-facebook" target="_blank" href="http://facebook.com/sharer.php?u={{ request.build_absolute_uri }}&amp;t={{ object.title|urlencode }}"><i class="icon icon__facebook"></i> {% trans "Share on Facebook" %}</a>
+<ul class="share-links">
+    <li class="share-links__item share-links__item--facebook">
+        <a target="_blank" href="http://facebook.com/sharer.php?u={{ request.build_absolute_uri }}&amp;t={{ object.title|urlencode }}" title="{% trans "Share on Facebook" %}"><i class="fa fa-facebook-square"></i></a>
     </li>
-    <li>
-        <a class="share__link__item  share-twitter" target="_blank" href="http://twitter.com/home?status={{ object.title|urlencode }}%20{{ request.build_absolute_uri }}"><i class="icon icon__twitter"></i>  {% trans "Share on Twitter" %}</a>
+    <li class="share-links__item share-links__item--twitter">
+        <a target="_blank" href="http://twitter.com/home?status={{ object.title|urlencode }}%20{{ request.build_absolute_uri }}" title="{% trans "Share on Twitter" %}"><i class="fa fa-twitter-square"></i></a>
     </li>
-    <li>
-        <a class="share__link__item  share-email" href="mailto:?subject={{ object.title }}&amp;body={{ request.build_absolute_uri }}"> <i class="icon icon__envelope"></i> {% trans "Share by email" %}</a>
+    <li class="share-links__item share-links__item--email">
+        <a href="mailto:?subject={{ object.title }}&amp;body={{ request.build_absolute_uri }}" title="{% trans "Share by email" %}"> <i class="fa fa-envelope-square"></i></a>
     </li>
-    <li>
-        <a class="share__link__item  share-print" href="javascript:window.print()"><i class="icon icon__print"></i> {% trans "Print this page" %}</a>
+    <li class="share-links__item share-links__item--print">
+        <a href="javascript:window.print()" title="{% trans "Print this page" %}"><i class="fa fa-print"></i></a>
     </li>
 </ul>

diff --git a/app/templates/magazine/article/article_detail.html b/app/templates/magazine/article/article_detail.html
index 35d872218396c963fc8d3162317f7ef765bd63a4..ecee4c9fc6624badeddc405566b797d720a05f19 100644 (file)
--- a/app/templates/magazine/article/article_detail.html
+++ b/app/templates/magazine/article/article_detail.html
@@ -29,14 +29,15 @@
 
 {% block page_tags %}
 
+{% if department_name %}
+    <div class="tag dashed dashed--gray">
+      {{ department_name }}
+    </div>
+{% endif %}
     <div class="tag tag--category">
         {% trans 'News' %}
     </div>
-    {% if department_name %}
-        <div class="tag dashed dashed--gray">
-          {{ department_name }}
-        </div>
-    {% endif %}
+
 
 {% endblock %}
 
@@ -46,11 +47,13 @@
         <h1 class="dotted">{{ article.title }}</h1>
     {% endeditable %}
 
-    {% editable article.sub_title %}
-        <div class="chapo">
-            {{ article.sub_title }}
-        </div>
-    {% endeditable %}
+    {% if article.sub_title %}
+        {% editable article.sub_title %}
+            <div class="chapo">
+                {{ article.sub_title }}
+            </div>
+        {% endeditable %}
+    {% endif %}
 
 {% endblock %}
 
@@ -102,12 +105,24 @@
 
 {% block page_sidebar %}
 
-    <div class="page__meta">
+    <div class="page__meta" data-sticky data-sticky-parent="row" data-sticky-offset="100" data-sticky-detach-at="971">
         {% editable article.publish_date %}
-            <h6 class="post-meta">
+            <div class="page__meta-date">
                 {{ article.publish_date|date:"DATE_FORMAT" }}
-            </h6>
+            </div>
         {% endeditable %}
+        <div class="page__meta-separator">
+
+        </div>
+        {% if article.categories.all.length > 0 %}
+            <div class="page__meta-date">
+                {% for category in article.categories.all %}
+                    {% if forloop.first %} | {% endif %}
+                    {% if not forloop.first %}, {% endif %}
+                    <strong>{{ category }}</strong>
+                {% endfor %}
+            </div>
+        {% endif %}
         {% with article as object %}
             {% include "includes/share_buttons.html" %}
         {% endwith %}

diff --git a/app/templates/magazine/article/includes/article_card.html b/app/templates/magazine/article/includes/article_card.html
index cd9eee05c1aa47fd90003b47a701f9aabb106116..5794e821f501b16ddf2f66c820c7839269c9ce2b 100644 (file)
--- a/app/templates/magazine/article/includes/article_card.html
+++ b/app/templates/magazine/article/includes/article_card.html
@@ -14,9 +14,9 @@
                 {% trans 'News' %}
             </div>
             {% if article.department %}
-            <div class="tag tag--small dashed dashed--gray">
-              {{ article.department.name }}
-            </div>
+                <div class="tag tag--small dashed dashed--gray">
+                  {{ article.department.name }}
+                </div>
             {% endif %}
         </div>
     </div>