Basicpage submenu implementation and style

diff --git a/app/static/src/sass/config/_colors.scss b/app/static/src/sass/config/_colors.scss
index a6ec95a51b618f6426d6d32015251793d41a5d7b..06a1cf2c9ac622b1d9ee892b065ed1ebcc291cdd 100755 (executable)
--- a/app/static/src/sass/config/_colors.scss
+++ b/app/static/src/sass/config/_colors.scss
@@ -14,3 +14,4 @@ $color-white: #FFFFFF;
 $color-main: #F8E71C;
 $color-gray: #C3C3C3;
 $color-black: #1D1D1B;
+$color-black-light: #343432;

diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index 1cec1332d54ded5d4f4db1c339e09f50d3a6a73a..cca25cef93985a244de083b133b0f316938c1e96 100755 (executable)
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -2,6 +2,7 @@
 @import "navs/nav-actions";
 @import "navs/nav-header";
 @import "navs/nav-footer";
+@import "navs/nav-tree";
 
 // Page modules
 @import 'breadcrumb';

diff --git a/app/static/src/sass/modules/navs/_nav-tree.scss b/app/static/src/sass/modules/navs/_nav-tree.scss
new file mode 100644 (file)
index 0000000..2184e15
--- /dev/null
+++ b/app/static/src/sass/modules/navs/_nav-tree.scss
@@ -0,0 +1,40 @@
+$module: ".nav-tree";
+
+#{$module} {
+
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+
+    &__item {
+
+        margin-top: 2px;
+
+    }
+
+    &__link {
+
+        display: block;
+        color: white;
+        background: $color-black-light;
+        padding: 4px 20px;
+
+        @include font-size(xs);
+        @include typeface(sans-serif);
+
+        &.active {
+            background: $color-main;
+            color: $color-black-light;
+            padding: 8px 20px;
+            @include font-size(s);
+        }
+
+        &--sub {
+            @include padding-left(2);
+            background: rgba($color_main, 0.6);
+            color: $color-black-light;
+        }
+
+    }
+
+}

diff --git a/app/templates/pages/basicpage.html b/app/templates/pages/basicpage.html
index bf987c9c176ec915f8bc95e82e5aa6867686902e..2940f958c9644f6f85715d7e0643d22db5ca5c7d 100644 (file)
--- a/app/templates/pages/basicpage.html
+++ b/app/templates/pages/basicpage.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load i18n mezzanine_tags keyword_tags featured_tags %}
+{% load i18n mezzanine_tags keyword_tags featured_tags pages_tags %}
 
 {% block meta_title %}{{ page.meta_title }}{% endblock %}
 
@@ -36,7 +36,10 @@
     </div>
 
     <div class="row">
-        <div class="col-lg-8 col-lg-push-2">
+        <div class="col-lg-2">
+            {% page_menu "pages/menus/current_tree.html" %}
+        </div>
+        <div class="col-lg-8">
             {% editable page.basicpage.content %}
                 {{ page.basicpage.content|richtext_filters|safe }}
             {% endeditable %}

diff --git a/app/templates/pages/menus/current_tree.html b/app/templates/pages/menus/current_tree.html
new file mode 100644 (file)
index 0000000..cacfbed
--- /dev/null
+++ b/app/templates/pages/menus/current_tree.html
@@ -0,0 +1,43 @@
+{% load i18n pages_tags %}
+
+{% spaceless %}
+{% if page_branch_in_menu %}
+<ul class="nav-tree nav-tree--level-{{ branch_level }}">
+    {% if branch_level == 0 %}
+        {% for page in page_branch %}
+            {% if page.in_menu %}
+                {% if page.is_primary and page.is_current_or_ascendant %}
+                    <li class="nav-tree__item">
+                        <a class="nav-tree__link{% if page.is_current %} active{% endif %}" href="{{ page.get_absolute_url }}">Accueil</a>
+                    </li>
+                {% endif %}
+                {% if page.is_current_or_ascendant %}
+                    {% if page.has_children_in_menu %}
+                        {% page_menu page %}
+                    {% endif %}
+                {% endif %}
+            {% endif %}
+        {% endfor %}
+    {% endif %}
+    {% if branch_level == 1 %}
+        {% for page in page_branch %}
+            <li class="nav-tree__item">
+                <a class="nav-tree__link{% if page.is_current or page.is_current_or_ascendant %} active{% endif %}" href="{{ page.get_absolute_url }}">{{ page.title }}</a>
+                {% if page.is_current_or_ascendant and page.has_children_in_menu %}
+                    <ul class="nav-tree nav-tree--level-{{ branch_level }}">
+                        {% page_menu page %}
+                    </ul>
+                {% endif %}
+            </li>
+        {% endfor %}
+    {% endif %}
+    {% if branch_level == 2 %}
+        {% for page in page_branch %}
+            <li class="nav-tree__item nav-tree__item--sub">
+                <a class="nav-tree__link nav-tree__link--sub" href="{{ page.get_absolute_url }}">{{ page.title }}</a>
+            </li>
+        {% endfor %}
+    {% endif %}
+</ul>
+{% endif %}
+{% endspaceless %}