ninegate

assets/app.js

@@ -41,6 +41,10 @@ require('spectrum-colorpicker2/dist/spectrum.min.css');
 require('crop-select-js/crop-select-js.min.css');
 window.CropSelectJs = require('crop-select-js/crop-select-js.min.js');
 
+// iframe-resizer
+require('iframe-resizer/js/iframeResizer.min.js');
+require('iframe-resizer/js/iframeResizer.contentWindow.min.js');
+
 // Start the Stimulus application
 import './bootstrap';
 

assets/js/app.js

@@ -2,13 +2,16 @@ $(document).ready(function() {
     // Color
     $(".pick-a-color").spectrum(
         {
-            type: "text",
-            showAlpha: false
+            preferredFormat: "hex",
+            type: "string",
+            showPalette: true,
+            allowEmpty: true,
+            showAlpha: false,            
         }
     );
     $(".pick-a-color").attr("autocomplete","off");
 
-    // method confirm
+    // Method confirm
     var doit = true;
     $("a[data-method]").on('click',function(){
         if($(this).data('confirm')){
@@ -57,33 +60,45 @@ $(document).ready(function() {
         }
     });  
         
-    // Resize
-    resize();
+    // select2-icon
+    function iformat(icon) {
+        return $('<span><i class="' + icon.id + '"></i> ' + icon.text + '</span>');
+    }
+    $('.select2-icon').select2({
+        width: "100%",
+        placeholder: 'choisir un icône',
+        allowClear: true,                
+        templateSelection: iformat,
+        templateResult: iformat,
+        formatResult: iformat,
+        allowHtml: true,
+        escapeMarkup: function(m) {
+            return m;
+        }
+    })
+
+    // Menu
+    $(".dropdown-toggle").click(function(){
+        $(this).parent().find(".dropdown-menu").toggle();
+    })
+    $(".nav-toogle").click(function(){
+        $("#selmenu").modal("toggle");
+    })
+    
+ 
+
+    // Forcer le resize des objects
+    Resize();
     
     // Focus
     $("#page").focus();
 });
 
 $( window ).resize(function() {
-    resize();
+    Resize();
 });
 
 
 
-function resize() {
-    if($("#header").is(":visible")){
-        $(".navbar-logo").hide();
-        $("#menulink").hide();
-        $("#header").hide();
-    }
-    else {
-        $(".navbar-logo").show();
-        $("#menulink").show();
-        $("#header").show();
-    }
 
-    $("main").css("height",$(window).height()-$(".header").height());
-    $("#page").css("height",$(window).height()-$(".header").height());
-    $("#sidebar").css("min-height",$("body").height()-$(".header").height());  
-}
 

assets/styles/app.css

@@ -114,52 +114,111 @@ border-width: 1px;
     padding: 0 0 0 0.5rem !important;
 }
 .navbar-logo img{
-    height:20px;
+    height:30px;
 }
 
-.navbar i {
-    font-size: 20px;
-    min-width: 30px;
-    height:20px;
+#menulink {
+    zoom:150%;
 }
 
 
 
 /* MENU */
 #menu {
-    height:50px;
+    min-height:44px;
     padding: 0px 0px 0px 10px !important;
+    justify-content: space-around;
 }
 
 #menu .navbar-logo {
     margin-right: 10px;
 }
 
+#menuapp {
+    background-color: var(--colorbgbodydark);
+}
+
+#menuuser {
+    min-width: 100px;
+    display:flex;
+    justify-content: end;
+}
+
+.nav-item {
+    padding:10px 10px;
+}
+
+
+.nav-item.active {
+    background-color: var(--colorbgbodydark-darker);
+}
+
+.menupage a {
+    display: flex;
+    align-items: center;
+}
+
+.menupage a i{
+    margin-right: 5px;
+}
+
+.dropdown-menu {
+    background-color: var(--colorbgbodydark);
+    margin-top: 15px;
+}
+
+.dropdown-item:hover, .dropdown-item:focus {
+    background-color: var(--colorbgbodydark-darker);
+    color:  var(--colorftbodydark);
+}
+
+
 @media (max-width: 991px) {
     #menu {
         display:flex !important;
-        height: auto;
         padding: 0px !important;
     }
 
+    #menuapp {
+        position: absolute;
+        top:50px;
+        left:0px;
+        width:100%;
+        overflow-y: auto;
+        height:500px;
+        display:none;
+    }
+    
+    #menuapp .nav {
+        flex-direction: column;
+    }
+
+    #menuapp .navbar-nav {
+        flex-direction: column;
+        padding:15px;
+    }
+
+    #menu .nav-toogle {
+        display:block !important;
+    }
+
+    #pagesportal {
+        display:block !important;
+    }
+    
+    #pagesuser {
+        display:block !important;
+    }
+    
     .navbar-logo {
         padding: 10px 5px 10px 10px !important;
     }
 
-    .navbar-logo img {
-        height:40px;
-    }
-
-    .navbar i {
-        font-size: 20px;
-        min-width: 30px;
-        height:20px;
-    }
-
     #switchHeader {
         display:none;
     }
-}    
+}      
+
 
 /* SIDEBAR */
 #sidebar {
@@ -230,6 +289,10 @@ border-width: 1px;
     display: none !important;
 }
 
+.card-body .form-group:first-child {
+    margin-top: 0px !important;
+}
+
 
 /* ITEM */
 .itemframe {
@@ -239,6 +302,7 @@ border-width: 1px;
 .items-list {
     display:flex;
     flex-wrap: wrap;
+    margin-bottom: 5px;
 }
 
 .item {
@@ -247,7 +311,7 @@ border-width: 1px;
     text-align: center;
     justify-content: center;
     margin-right:5px;
-    margin-top:5px;
+    margin-bottom:5px;
     flex-wrap: wrap;
     color: var(--colorftbodydark) !important;
 }
@@ -287,7 +351,7 @@ border-width: 1px;
 }
 
 .item-subtitle {
-    font-size: 12px;
+    font-size: 10px;
     margin:0px;
     color: var(--colorftbodydark);
 }
@@ -295,9 +359,16 @@ border-width: 1px;
 .item-description {
     color: var(--colorftbodydark);
     text-align: left;
-    padding: 0px 10px;
+    padding: 0px 5px;
 }
 
+.item-description img {
+    max-width: 100% !important;
+    height: auto !important;
+}
+.item-description p:last-child {
+    margin-bottom: 0px;
+}
 
 .item-verysmall {
     width: 80px;
@@ -433,3 +504,67 @@ border-width: 1px;
 .item-list .item-action {
     width:auto;
 }
+
+.item-list .item-description {
+    padding:10px 0px 5px 0px;
+}
+
+/* WIDGET */
+.widget{
+    margin-bottom:30px;
+}
+.widget-bordered {
+    border:1px solid;
+}
+.widget-menu {
+    float: right;
+    color: #fff;
+    margin: 10px 5px 0px 0px;        
+    display:none;
+}
+.widget-menu i {
+    cursor:pointer;
+}
+.widget-header {
+    padding:10px 10px 5px 10px;
+    font-family: var(--fonttitle);
+    font-size: 25px;
+}
+.widget-logo {
+    height:40px;
+    margin-right:5px;
+    margin-top:-5px;
+    cursor: pointer;
+
+}
+.widget-title {
+    cursor: pointer;
+}
+.widget-body {
+    padding: 5px 0px 0px 0px;
+}
+.widget-bordered .widget-body {
+    padding: 5px;
+}
+
+.widget-body .items-list {
+    margin-bottom: 5px;
+}
+.widget-body .item-list:first-child {
+    margin-top: 0px;
+}
+.widget-body .items-list:last-child {
+    margin-bottom: -5px;
+}
+.widget-body .item-description {
+    padding:10px 0px 0px 0px;
+}
+
+.cat-list {
+    color: var(--colorfttitledark);
+    background-color: var(--colorbgbodydark);
+    padding: 5px 10px;
+    display: inline-block;
+    cursor: pointer;
+}
+