@imiobe/plonetheme-smartweb-base 0.0.3 → 0.0.4

package/dist/js/theme.js

@@ -0,0 +1 @@
+(()=>{"use strict";$(document).ready((function(){$("#portal-globalnav-collapse").on("show.bs.collapse",(function(){document.body.classList.add("open-nav-overflow"),document.documentElement.classList.add("open-nav-overflow")})),$("#portal-globalnav-collapse").on("hidden.bs.collapse",(function(){document.body.classList.remove("open-nav-overflow"),document.documentElement.classList.remove("open-nav-overflow")}))}))})();

package/package.json

@@ -23,7 +23,7 @@
     "plone",
     "smartweb"
   ],
-  "version": "0.0.3",
+  "version": "0.0.4",
   "license": "GPL version 2",
   "scripts": {
     "stylelint": "npx stylelint 'src/**/*.{css,less}' 'src/**/*.{css,less}",

package/src/index.js

@@ -1,36 +1,12 @@
 import "./scss/main.scss";
 
-// // function wrap(el, wrapper) {
-// //     el.parentNode.insertBefore(wrapper, el);
-// //     wrapper.appendChild(el);
-// // }
-
-// // // example: wrapping an anchor with class "wrap_me" into a new div element
-// // wrap(document.getElementById('portal-logo'), document.createElement('div'));
-// // var element = document.createElement("div");
-// // document.getElementById('portal-logo').appendChild(element);  
-
-
-// $( document ).ready(function() {
-//     function wrap(el,el2,el3, wrapper) {
-//         el.parentNode.insertBefore(wrapper,el);
-//         el2.parentNode.insertBefore(wrapper,el2);
-//         el3.parentNode.insertBefore(wrapper,el3);
-//         wrapper.id = 'portal-header-top';
-//         wrapper.appendChild(el);
-//         wrapper.appendChild(el2);
-//         wrapper.appendChild(el3);
-
-//     }
-//     wrap(document.getElementById('portal-logo'), document.getElementById('portal-globalnav-wrapper'), document.getElementById('header-links'), document.createElement('div'));
-
-    
-//     function insertAfter(referenceNode, newNode) {
-//         referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
-//       }
-      
-//       var el = document.createElement("div");
-//       el.id = "banner-homepage";
-//       var div = document.getElementById("portal-header-top");
-//       insertAfter(div, el);
-// });
+$( document ).ready(function() {
+    $('#portal-globalnav-collapse').on('show.bs.collapse', function () {
+        document.body.classList.add('open-nav-overflow');
+        document.documentElement.classList.add('open-nav-overflow');
+    })
+    $('#portal-globalnav-collapse').on('hidden.bs.collapse', function () {
+        document.body.classList.remove('open-nav-overflow');
+        document.documentElement.classList.remove('open-nav-overflow');
+    })
+});

package/src/scss/_breadcrum.scss

@@ -1,46 +1,56 @@
-//*// BREADCRUMBS //*//
-
+// *// BREADCRUMBS //* //
 #portal-breadcrumbs {
-    background-color: $breadcrumb-bg;
-    margin-bottom: 0;
-    position: relative;
-    @if $enable-full-width-breacrumb {
-        &:after{
-          @include full-width;
-          background: $breadcrumb-bg;
-        }
-      }
-    .container{
-      padding: 0;
+  position: relative;
+  margin-bottom: 0;
+  background-color: $breadcrumb-bg;
+  @if $enable-full-width-breacrumb {
+    &::after {
+      @include full-width;
+
+      background: $breadcrumb-bg;
     }
-    .breadcrumb {
-      background-color: transparent;
-      .breadcrumb-item{
-        & +.breadcrumb-item {
-          padding-left: 0;
-        }
-        a{
-          text-decoration: none;
-        }
-        &:before {
-          float: right;
-          content: ">";
-          padding-right: 0.25rem;
-          padding-left: 0.25rem;
-        }
-        &:last-child:before {
-          content: "";
-        }
+  }
+
+  .container {
+    padding: 0;
+  }
+
+  .breadcrumb {
+    background-color: transparent;
+
+    .breadcrumb-item {
+      & + .breadcrumb-item {
+        padding-left: 0;
+      }
+
+      a {
+        text-decoration: none;
+      }
+
+      &::before {
+        padding-right: 0.25rem;
+        padding-left: 0.25rem;
+        content: ">";
+        float: right;
+      }
+
+      &:last-child::before {
+        content: "";
       }
     }
+  }
 }
-.section-home-page{
-  #plone-breadcrumb{
+
+.section-home-page {
+  #plone-breadcrumb {
     display: none;
   }
 }
+
 // cacher le breadcrumb à la racine du site
-.section-home-page-bla nav#portal-breadcrumbs,.portaltype-imio-smartweb-portalpage #portal-breadcrumbs {
+.section-home-page-bla nav#portal-breadcrumbs,
+.portaltype-imio-smartweb-portalpage #portal-breadcrumbs {
   display: none;
 }
-//---//
+
+// --- //

package/src/scss/_edition.scss

@@ -1,4 +1,4 @@
 /* correctif navigation de gestion en mode contenu (couper copier coller) s'affiche devant le menu principal) */
 #content-core .pat-structure .navbar.ui-offset-parent {
-    z-index: 0;
-}
+  z-index: 0;
+}

package/src/scss/_fonts.scss

@@ -1,9 +1,21 @@
-h1,h2,h3,h4,h5,h6{
-    font-family: $font-family-title;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $font-family-title;
+  color: $font-title-color;
+  font-weight:$font-title-weight;
 }
 
 @if $enable-title-uppercase {
-    h1,h2,h3,h4,h5,h6{
-        text-transform: uppercase;
-    }
-}
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    text-transform: uppercase;
+  }
+}

package/src/scss/_general.scss

@@ -0,0 +1,14 @@
+ul {
+    padding-left: 0;
+}
+.offcanvas-start {
+    top: 0;
+    left: 0;
+    width: 95%;
+}
+
+.contact_gallery {
+    img {
+        max-width: 100%;
+    }
+}

package/src/scss/_header.scss

@@ -1,71 +1,142 @@
-#portal-globalnav-wrapper{
-    background: transparent;
+#portal-globalnav-wrapper {
+  background: transparent;
 }
-.portaltype-imio-smartweb-portalpage #portal-breadcrumbs{
-    display: none;
+.portaltype-imio-smartweb-portalpage #portal-breadcrumbs {
+  display: none;
 }
-#portal-header{
-    display: block;
+#portal-header {
+  z-index: 2;
+  display: block;
+  margin-top: 0;
+  #portal-header-top {
+    @include media-breakpoint-down(lg) {
+      justify-content: space-between;
+    }
+    position: relative;
     z-index: 2;
-    margin-top: 0;
-    #portal-header-top{
-        // display: grid;
-        // grid-template-columns: 115px 1fr auto !important;
-        // grid-template-areas: "logo menu link";
-        display: flex;
-        padding: $header-top-padding;
-        z-index: 2;
-        @if $header-center-nav {
-            justify-content: space-between;
-            #portal-globalnav-wrapper{
-                margin-right: 0!important;
-            }
-        }
-        #portal-logo{
-            max-width: $main-logo-max-width;
-            margin-top: 0;
-            img{
-                max-width: 100%;
-            }
+    // display: grid;
+    // grid-template-columns: 115px 1fr auto !important;
+    // grid-template-areas: "logo menu link";
+    display: flex;
+    align-items: center;
+    padding: $header-top-padding;
+    @if $header-center-nav {
+      justify-content: space-between;
+      #portal-globalnav-wrapper {
+        margin-right: 0 !important;
+      }
+    }
+    &:after {
+      content: "";
+      position: absolute;
+      width: 100vw;
+      top: 0;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50vw);
+      z-index: -1;
+      background: $header-top-background;
+    }
+    #portal-logo {
+      max-width: $main-logo-max-width;
+      margin-top: 0;
+      img {
+        max-width: 100%;
+      }
+    }
+    #portal-globalnav-wrapper {
+      margin: $header-nav-margin;
+    }
+
+    #header-links {
+      display: flex;
+      align-items: center;
+      gap: 26px;
+      @include media-breakpoint-up(lg) {
+        margin-left: auto;
+      }
+      @include media-breakpoint-down(lg) {
+        order: -2;
+      }
+      #header-actions {
+        @include media-breakpoint-down(lg) {
+          display: none !important;
         }
-        #portal-globalnav-wrapper{
-            margin:$header-nav-margin;
+      }
+      a,
+      span {
+        color: $header-links-color;
+      }
+      .account {
+        margin: $header-links-account-margin;
+        padding: $header-links-account-padding;
+        border: $header-links-account-border;
+        background: $header-links-account-bg;
+        &:hover,
+        &:focus {
+          border: $header-links-account-hover-border;
+          background: $header-links-account-hover-bg;
+          color: $header-links-account-hover-color !important;
         }
-        #header-links{
-            margin-left: auto;
-            #search-link {
-                cursor: pointer;
-            }
+      }
+      #search-link {
+        cursor: pointer;
+        a {
+          width: 46px;
+          height: 46px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border: 1px solid #c1c1c1;
+          border-radius: 50px;
+          &:before {
+            content: "";
+            width: 14px;
+            height: 14px;
+            background: $header-search-icon no-repeat;
+            background-size: 14px;
+            display: block;
+          }
         }
+      }
     }
+  }
 }
-header#content-header{
-    position: relative;
-    z-index: 9;
+
+header#content-header {
+  position: relative;
+  z-index: 9;
+}
+
+@include media-breakpoint-down(lg) {
+  .navbar-expand-md .navbar-toggler {
+    display: block !important;
+  }
 }
+
 // .subsite-container{   ---------------------- POURQUOI clip ???
 //     grid-area: sub;
 //     overflow-x: clip;
 //   }
 
-
 // MASK
 
-.mask-menu{
-    opacity: 0;
-    z-index: 1;
-    visibility: hidden;
-    display: block;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    transition: opacity .05s,visibility 0s linear .25s;
-    background-color: $nav-mask-background;
-    &.in {
-        opacity: 1;
-        visibility: visible;
-        transition: opacity .2s ease,visibility 0s;
-    }
+.mask-menu {
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  background-color: $nav-mask-background;
+  opacity: 0;
+  transition: opacity 0.05s, visibility 0s linear 0.25s;
+  visibility: hidden;
+
+  &.in {
+    opacity: 1;
+    transition: opacity 0.2s ease, visibility 0s;
+    visibility: visible;
+  }
 }

package/src/scss/_mixin.scss

@@ -0,0 +1,50 @@
+@mixin full-width {
+    content: "";
+    position: absolute;
+    width: 100vw;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50vw);
+    z-index: -1;
+}
+
+@mixin last-item-no-margin-bottom {
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+@mixin first-item-no-margin-top {
+    &:first-child {
+        margin-top: 0;
+    }
+}
+@mixin ul-rm-padding {
+    padding-left: 0;
+}
+@mixin section-padding-top {
+    padding-top: map-get($section-padding, sm);
+    @include media-breakpoint-up(md) {
+        padding-top: map-get($section-padding, md);
+    }
+    @include media-breakpoint-up(lg) {
+        padding-top: map-get($section-padding, lg);
+    }
+}
+@mixin section-padding-bottom {
+    padding-bottom: map-get($section-padding, sm);
+    @include media-breakpoint-up(md) {
+        padding-bottom: map-get($section-padding, md);
+    }
+    @include media-breakpoint-up(lg) {
+        padding-bottom: map-get($section-padding, lg);
+    }
+}
+
+@mixin fit-cover {
+    position: absolute;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    object-position: top;
+}

package/src/scss/_print.scss

@@ -1,8 +1,9 @@
 @media print {
-    #content-header{
-        display: none;
-    }
-    #portal-footer-wrapper{
-        display: none;
-    }
-}
+  #content-header {
+    display: none;
+  }
+
+  #portal-footer-wrapper {
+    display: none;
+  }
+}