Ready for prod ?

2021-06-01 07:59:35 +02:00
parent 50801d45ce
commit d6705d77d7
16 changed files with 293 additions and 56 deletions
--- a/themes/coopgo-theme/assets/js/main.js
+++ b/themes/coopgo-theme/assets/js/main.js
@@ -1,3 +1,5 @@
+
+/* NAVBAR COLOR TOGGLE WHILE SCROLLING */
 function navbarToggleOnScroll() {
    var el = document.getElementById("navbar");
    if (window.pageYOffset >= 500) {
@@ -6,4 +8,41 @@ function navbarToggleOnScroll() {
        el.classList.remove("scroll");
    }
 }; 
-window.addEventListener("scroll", navbarToggleOnScroll);
+window.addEventListener("scroll", navbarToggleOnScroll);
+
+/* SIDEBAR TOGGLE */
+function hasClass(ele, cls) {
+    return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
+}
+
+function addClass(ele, cls) {
+    if (!hasClass(ele, cls)) ele.className += " " + cls;
+}
+
+function removeClass(ele, cls) {
+    if (hasClass(ele, cls)) {
+        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
+        ele.className = ele.className.replace(reg, ' ');
+    }
+}
+function toggleMenu() {
+    var ele = document.getElementsByTagName('body')[0];
+    if (!hasClass(ele, "menu-open")) {
+        addClass(ele, "menu-open");
+    } else {
+        removeClass(ele, "menu-open");
+    }
+}
+//Add event from js the keep the marup clean
+function init() {
+    document.getElementById("menutoggle").addEventListener("click", toggleMenu);
+    document.getElementById("body-overlay").addEventListener("click", toggleMenu);
+}
+
+
+//Prevent the function to run before the document is loaded
+document.addEventListener('readystatechange', function() {
+    if (document.readyState === "complete") {
+        init();
+    }
+});
--- a/themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_breakpoints.scss
+++ b/themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_breakpoints.scss
@@ -1,3 +1,3 @@

-$breakpoint-prone: 600px !default;
+$breakpoint-phone: 600px !default;
 $breakpoint-tablet: 992px !default;
--- a/themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_helpers.scss
+++ b/themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_helpers.scss
@@ -33,6 +33,10 @@ $widthvalues: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100, 125, 150, 200,
    width: 100% !important;
 }

+.h-full {
+    height: 100% !important;
+}
+
 /* POSITIONING */

 .ta-r {
--- a/themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_nav.scss
+++ b/themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_nav.scss
@@ -1,27 +1,29 @@
 nav {
-    z-index: 100;
-    height: 3em;
-    display: flex;
-    justify-content: flex-between;
-    align-items: center;
-    position: fixed; /* Set the navbar to fixed position */
-    top: 0; /* Position the navbar at the top of the page */
-    width: 100%;
-
-    /* Menus */
-    ul {
-        justify-content: flex-evenly;
+    &#navbar {
+        z-index: 100;
+        height: 3em;
        display: flex;
+        justify-content: flex-between;
+        align-items: center;
+        position: fixed; /* Set the navbar to fixed position */
+        top: 0; /* Position the navbar at the top of the page */
+        width: 100%;

-        li {
-            flex: 1;
-            display: inline;
-            text-align: center;
-            list-style: none;
+        /* Menus */
+        ul {
+            justify-content: flex-evenly;
+            display: flex;

-            a {
-                color: inherit;
-                text-decoration: none;
+            li {
+                flex: 1;
+                display: inline;
+                text-align: center;
+                list-style: none;
+
+                a {
+                    color: inherit;
+                    text-decoration: none;
+                }
            }
        }
    }
--- a/themes/coopgo-theme/assets/sass/main.scss
+++ b/themes/coopgo-theme/assets/sass/main.scss
@@ -1,32 +1,93 @@
@import 'coopgo-web-ui-kit/styles';
 // @import 'colors' <- we use the library's default values for colors, we don't need this

-nav {
-    .left {
-        flex:0;
-        text-align: left;
-        background-color: $backgroundcolor;
+nav{ 
+    &#navbar {
+        .left {
+            flex:0;
+            text-align: left;
+            background-color: $backgroundcolor;

-        img {
-            margin: 1em;
-            height: 1.3em;
+            img {
+                margin: 1em;
+                height: 1.3em;
+            }
+        }
+
+        .center {
+            flex:1;
+            color: $primarycolor;
+            font-size: 1em;
+            background-color: $backgroundcolor;
+        }
+        .right {
+            font-family: $brandfont;
+            color: $white;
+        }
+
+        #menutoggle {
+            display: none;
+        }
+
+        @media(max-width: $breakpoint-phone) {
+            #menutoggle {
+                display: block;
+            }
+            .center {
+                display: none;
+            }
+        }
+
+        @media(max-width: $breakpoint-tablet) {
+            .right {
+                display: none;
+            }
        }
    }

-    .center {
-        flex:1;
-        color: $primarycolor;
-        font-size: 1em;
-        background-color: $backgroundcolor;
+    &#sidebar {
+        position: fixed;
+        top: 0;
+        left: -300px;
+        width: 300px;
+        height: 100%;
+        z-index: 200;
+        box-shadow: 0 6px 12px rgba(107, 82, 82, 0.3);
+        background-color: $white;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        transition: ease 0.2s all;
    }
-    .right {
-        font-family: $brandfont;
-        color: $white;
+}
+
+@media(max-width: $breakpoint-phone) {
+    nav#navbar {
+        background-color: $white;
+    }
+}
+
+#body-overlay {
+    width: 100vw;
+    height: 100vh;
+    display: none;
+    position: fixed;
+    z-index: 150;
+    top: 0;
+    overflow: hidden;
+    background: rgba(0, 0, 0, 0.5);
+}
+
+body {
+    &.menu-open{
+        #body-overlay {
+            display: block;
+        }
    }

-    @media(max-width: $breakpoint-tablet) {
-        .right {
-            display: none;
+    &.menu-open {
+        nav#sidebar {
+            left: 0;
        }
    }
 }
--- a/themes/coopgo-theme/layouts/_default/list.html
+++ b/themes/coopgo-theme/layouts/_default/list.html
@@ -1,10 +1,23 @@
 {{ define "main" }}

+{{if (isset .Params "titleimg")}}
+{{$titleimg := resources.Get .Params.titleimg}}
+<div class="bg-primary p-t-100  p-b-100 ta-c">
+    <img class="max-x-300" src="{{$titleimg.Permalink}}" alt="{{.Title}}" />
+</div>
+{{end}}
+
 <div class="container flex-row j-center wrap p-30">
    {{range .Pages}}
    <a href="{{.Permalink}}">
-        <div class="max-w-200 flex-1">
+        <div class="max-w-300 flex-1 m-20">
+            {{ if (isset .Params "featuredimage" )}}
+            {{$img := resources.Get .Params.featuredimage}}
+            <div style='background-image: url({{ $img.Permalink }}); background-size: cover; background-position: center center;' class="bg-bubble w-150 h-150 m-auto"></div>
+            {{end}}
            <h3 class="primary ta-c">{{.Title}}</h3>
+            <p class="ta-c" style="font-size: 0.8em; text-style: italic;">Le {{dateFormat "02/01/2006" .Date}}</p>
+            <p class="ta-j">{{.Description}}</p>
        </div>
    </a>
    {{end}}
--- a/themes/coopgo-theme/layouts/partials/head.html
+++ b/themes/coopgo-theme/layouts/partials/head.html
@@ -11,5 +11,7 @@

    {{ $title := print .Site.Title " | " .Title }}
    {{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
+
+    {{ template "_internal/opengraph.html" . }}
    <title>{{ $title }}</title>
 </head>
--- a/themes/coopgo-theme/layouts/partials/header.html
+++ b/themes/coopgo-theme/layouts/partials/header.html
@@ -1,4 +1,9 @@
+<div id="body-overlay"></div>
 <nav id="navbar">
+    <div id="menutoggle">
+        {{$icon := resources.Get "images/icons/menu.svg"}}
+        <img class="w-20 h-20 m-20" src="{{$icon.Permalink}}" />
+    </div>
    <div class='left bg-white'>
        {{ $logo := resources.Get .Site.Params.Logo }}
        <a href="{{.Site.BaseURL}}"><img src="{{ $logo.Permalink }}" alt="COOPGO" /></a>
@@ -7,7 +12,7 @@
        <ul class="flex-row j-center ai-center">
            {{ $pages := where .Site.RegularPages.ByDate "Type" "in" .Site.Params.mainPages }}
            {{ range $pages }}
-            <li class="max-w-200">
+            <li class="max-w-200 h-full">
                <a href="{{ .Permalink }}">{{ .Title }}</a>
            </li>
            {{ end }}
@@ -24,4 +29,32 @@
            {{ if eq (relURL .URL) ("/" | safeHTML) }}<li><a href="#section4">NOS PROJETS</a></li>{{ end }}
        </ul>
    </div>
+</nav>
+
+<nav id="sidebar">
+    <div class="m-20 ta-c">
+        {{ $logo := resources.Get .Site.Params.Logo }}
+        <a href="{{.Site.BaseURL}}"><img class="max-w-150" src="{{ $logo.Permalink }}" alt="COOPGO" /></a>
+    </div>
+    <div>
+        <ul>
+            {{ $pages := where .Site.RegularPages.ByDate "Type" "in" .Site.Params.mainPages }}
+            {{ range $pages }}
+            <li>
+                <a href="{{ .Permalink }}">{{ .Title }}</a>
+            </li>
+            {{ end }}
+        </ul>
+    </div>
+    <div class='bg-primary p-10'>
+        <ul>
+            <li style="list-style: none;">
+                {{ $gotogether := resources.Get "images/gotogether-lemag.svg" }}
+                <a href="/gotogether/">
+                    <img class="h-25" src="{{ $gotogether.Permalink }}" alt="GO TOGETHER le mag" />
+                </a>
+            </li>
+            {{ if eq (relURL .URL) ("/" | safeHTML) }}<li style="list-style: none;"><a class="white brand" href="#section4">NOS PROJETS</a></li>{{ end }}
+        </ul>
+    </div>
 </nav>