test sidebar

diff --git a/backoffice/css/w3pro.css b/backoffice/css/w3pro.css
index 3013489..7b4b45d 100644 (file)
--- a/backoffice/css/w3pro.css
+++ b/backoffice/css/w3pro.css
@@ -44,8 +44,8 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-ul{list-style-type:none;padding:0;margin:0}.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none}
 .w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
 .w3-ripple:active{opacity:0.5}.w3-ripple{transition:opacity 0s}
-.w3-input{padding:8px;display:block;border:1px solid #ccc;width:100%;background-color: #e8f0fe; }
-.w3-select{padding:9px 0; display:block;width:100%;border:1px solid #ccc;background-color: #e8f0fe;}
+.w3-input{padding:4px;display:block;border:1px solid #ccc;width:100%;background-color: #e8f0fe; }
+.w3-select{padding:4px 0; display:block;width:100%;border:1px solid #ccc;background-color: #e8f0fe;}
 .w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
 .w3-dropdown-hover:hover .w3-dropdown-content{display:block; }
 .w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#ccc;color:#000}
@@ -68,13 +68,13 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-responsive{display:block;overflow-x:auto}
 .w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
 .w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
-.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
+.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter,.w3-fifth,.w3-twofifth,.w3-threefifth,.w3-fourfifth{float:left;width:100%}
 .w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%}
 .w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%}
 .w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%}
-@media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}
+@media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}.w3-fifth{width:20%;min-width:100px}
 .w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}
-.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}}
+.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}.w3-twofifth{width:40%}.w3-threefifth{width:60%}.w3-fourfifth{width:80%}}
 @media (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%}
 .w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%}
 .w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}}
@@ -106,7 +106,7 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-circle{border-radius:50%}
 .w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
 .w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
-.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
+.w3-container,.w3-panel{padding:0.01em 8px}.w3-panel{margin-top:8px;margin-bottom:8px}
 .w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
 .w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
 .w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
@@ -174,6 +174,7 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-dark-grey,.w3-hover-dark-grey:hover{color:#fff!important;background-color:#616161!important}
 .w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffe7e7!important}.w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#e7ffe7!important}
 .w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffd7!important}.w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#e7ffff!important}
+.w3-text-align-right { text-align: right;}
 .w3-text-amber,.w3-hover-text-amber:hover{color:#ffc107!important}
 .w3-text-aqua,.w3-hover-text-aqua:hover{color:#00ffff!important}
 .w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important}
@@ -253,7 +254,7 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-hover-border-theme:hover {border-color:#6a92d3 !important}
 
 .w3-label { color: rgb(153, 150, 150);}
-#main {margin-left: 210px;}
+/* #main {margin-left: 210px;} */
 @media (max-width:768px){
   #sidebar { display: none;}
   #main { margin-left: 0px;} 

diff --git a/backoffice/js/admin.js b/backoffice/js/admin.js
index 2c7e9cb..f6b9e32 100644 (file)
--- a/backoffice/js/admin.js
+++ b/backoffice/js/admin.js
@@ -1,37 +1,59 @@
 var admin = {\r
-  loadpage: function(modulepage,modulename){\r
-    //console.log(modulename);\r
-    //console.log("Load module:" + modulepage);\r
-    if (modulename){\r
-      document.getElementById("modulename").innerHTML = modulename;\r
+    loadpage: function(modulepage, modulename) {\r
+        //console.log(modulename);\r
+        //console.log("Load module:" + modulepage);\r
+        if (modulename) {\r
+            document.getElementById("modulename").innerHTML = modulename;\r
+        }\r
+        document.getElementById("moduleframe").setAttribute('src', modulepage);\r
+    },\r
+    sidebarclick: function(modulepage, modulename) {\r
+        admin.ladpage(modulepage, modulename);\r
+    },\r
+    logout: function() {\r
+        req.reqdata("POST", location.href, { "logout": "1" }, admin.reloadpage);\r
+\r
+    },\r
+    reloadpage(page) {\r
+        location.href = location.href;\r
+\r
     }\r
-    document.getElementById("moduleframe").setAttribute('src',modulepage);\r
-  },\r
-  sidebarclick: function(modulepage,modulename){\r
-    admin.ladpage(modulepage,modulename);\r
-  },\r
-  logout: function(){\r
-    req.reqdata("POST",location.href,{"logout":"1"},admin.reloadpage);\r
-\r
-  },\r
-  reloadpage(page){\r
-    location.href=location.href;\r
-\r
-  }\r
 }\r
 \r
-function reload_page(){\r
-  location.href=location.href;\r
+function reload_page() {\r
+    location.href = location.href;\r
 }\r
 \r
-function closeSidebar(){\r
-  document.getElementById("sidebar").style.display = "none";\r
-  document.getElementById("main").style.margin = "0 0 0 0";\r
-  document.getElementById("modulename").style.setProperty("margin-left","0px");\r
+// function closeSidebar(){\r
+//   document.getElementById("sidebar").style.display = "none";\r
+//   document.getElementById("main").style.margin = "0 0 0 0";\r
+//   document.getElementById("modulename").style.setProperty("margin-left","0px");\r
+// }\r
+\r
+// function openSidebar(){\r
+//   document.getElementById("sidebar").style.display = "block";\r
+//   document.getElementById("main").style.setProperty("margin-left","210px");\r
+//   document.getElementById("modulename").style.setProperty("margin-left","150px");\r
+// }\r
+\r
+var mySidebar = document.getElementById("mySidebar");\r
+\r
+// Get the DIV with overlay effect\r
+var overlayBg = document.getElementById("myOverlay");\r
+\r
+// Toggle between showing and hiding the sidebar, and add overlay effect\r
+function w3_open() {\r
+    if (mySidebar.style.display === 'block') {\r
+        mySidebar.style.display = 'none';\r
+        overlayBg.style.display = "none";\r
+    } else {\r
+        mySidebar.style.display = 'block';\r
+        overlayBg.style.display = "block";\r
+    }\r
 }\r
 \r
-function openSidebar(){\r
-  document.getElementById("sidebar").style.display = "block";\r
-  document.getElementById("main").style.setProperty("margin-left","210px");\r
-  document.getElementById("modulename").style.setProperty("margin-left","150px");\r
+// Close the sidebar with the close button\r
+function w3_close() {\r
+    mySidebar.style.display = "none";\r
+    overlayBg.style.display = "none";\r
 }
\ No newline at end of file

diff --git a/backoffice/tmpl/block/head.tt b/backoffice/tmpl/block/head.tt
index 32d3858..7382d2b 100644 (file)
--- a/backoffice/tmpl/block/head.tt
+++ b/backoffice/tmpl/block/head.tt
@@ -1,7 +1,7 @@
 <head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>[% sitename %] - [% pagename %]</title>
   <meta name="language" content="fr">
     <meta name="author" content="DKS sarl">

diff --git a/backoffice/tmpl/skeleton/index.tt b/backoffice/tmpl/skeleton/index.tt
index 68f33a6..141c89c 100644 (file)
--- a/backoffice/tmpl/skeleton/index.tt
+++ b/backoffice/tmpl/skeleton/index.tt
@@ -1,47 +1,46 @@
-[% USE dksdb = DBI(dsn, dbuser, dbpassword) %]
-[% appaccess = dksdb.prepare("select ap.icon,ap.app,ap.name,ug.usergroup from useringroups uig join apps ap on (uig.id_group=ap.id_usergroup)  join usergroups ug on (uig.id_group=ug.id) where uig.id_user=? group by ap.id,ug.id order by ap.sort;")%]
+[% USE dksdb = DBI(dsn, dbuser, dbpassword) %] [% appgaccess = dksdb.prepare("select ap.icon,ap.app,ap.name,ug.usergroup from useringroups uig join apps ap on (uig.id_group=ap.id_usergroup) join usergroups ug on (uig.id_group=ug.id) where uig.id_user=?
+and menutype='global' group by ap.id,ug.id order by ap.sort;")%] [% appsaccess = dksdb.prepare("select ap.icon,ap.app,ap.name,ug.usergroup from useringroups uig join apps ap on (uig.id_group=ap.id_usergroup) join usergroups ug on (uig.id_group=ug.id)
+where uig.id_user=? and menutype='schema' group by ap.id,ug.id order by ap.sort;")%]
 <!DOCTYPE html>
 <html lang="en">
- [% INCLUDE block/head.tt %]
+[% INCLUDE block/head.tt %]
+
 <body>
-<!--begin sidebar-->
-    <div class="w3-sidebar w3-card-4 w3-border-right w3-white" id="sidebar" style="width: 210px; z-index: 3;"> 
-            <div class="w3-bar w3-grey">
-  <a href="[% abspath %]/backoffice/index.html" class="w3-bar-item"><img src="[% abspath %]img/toplogo.png" alt="logo" style="width: 80px;"/></a>
-  <button onclick="closeSidebar();"
-  class="w3-bar-item w3-button w3-right w3-padding-16" title="close Sidebar">&times;</button>
-  </div>
-  <div class="w3-bar-block">
-  [% FOREACH ap = appaccess.execute(session.id) %]
-            <a href="javascript:admin.loadpage('module/[% ap.app %]/index.html','[% ap.name %]');" class="w3-bar-item w3-button">
-              <img src="[% abspath %]img/icons/[% ap.icon %]" style="width: 24px;">&nbsp;[% ap.name %]
+
+    <!-- NEW -->
+    <div class="w3-bar w3-top w3-theme-light w3-large" style="z-index:4">
+        <button class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey" onclick="w3_open();" id="btnsidemenu"><img src="[% abspath %][% staticpath %]img/icons/menu.svg" style="height: 33px;"/></button>
+        <span class="w3-bar-item">POT / Hourtrax</span>
+        <span class="w3-bar-item w3-right" id="modulename"></span>
+    </div>
+    <nav class="w3-sidebar w3-collapse w3-theme-light w3-animate-left" id="mySidebar" style="z-index:3;width:200px; padding-top: 35px;">
+        <div class="w3-bar-block">
+            <a class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" href="#" onclick="w3_close()" title="close menu">Close Menu</a>
+            <a class="w3-bar-item w3-button w3-padding-16 w3-dark-grey w3-hover-black" href="#" onclick="" title="close menu">Logout</a>[% FOREACH ap = appgaccess.execute(session.id) %]
+            <a href="javascript:admin.loadpage('module/[% ap.app %]/index.html','[% ap.name %]');" class="w3-bar-item w3-button w3-padding">
+                <img src="[% abspath %]img/icons/[% ap.icon %]" style="width: 24px;">&nbsp;[% ap.name %]
+            </a>
+            [% END %]
+            <select class="w3-select" id="globaldatasets" onchange="admin.loaddataset();"></select> [% FOREACH ap = appsaccess.execute(session.id) %]
+            <a href="javascript:admin.loadpage('module/[% ap.app %]/index.html','[% ap.name %]');" class="w3-bar-item w3-button w3-padding">
+                <img src="[% abspath %]img/icons/[% ap.icon %]" style="width: 24px;">&nbsp;[% ap.name %]
             </a>
             [% END %]
-  </div>
-            
-            
+        </div>
+    </nav>
+    <div class="w3-overlay w3-hide-large w3-animate-opacity" id="myOverlay" onclick="w3_close()" style="cursor:pointer" title="close side menu"></div>
     </div>
-<!--end sidebar -->
-  <div class="w3-display-container" style="min-with: 320px;">
-      
-    <div class="w3-container"  style="margin: 0px;  padding: 0px;">
-        <header class="w3-top w3-bar w3-border-bottom w3-white">
-            <button class="w3-bar-item w3-button w3-black" id="btnsidebar" onclick="openSidebar();"><img src="[% abspath %]img/icons/menu_white.svg" style="height: 33px;" /></button>
-            <h5 class="w3-bar-item" id="modulename" style="margin-left: 150px; max-width: 300px; overflow: hidden;"></h5>
-            <a class="w3-bar-item w3-button w3-right w3-border w3-black" href="javascript:admin.logout();"><img src="[% abspath %]img/icons/logout_white.svg" style="height: 32px;" /></a>
-            
-          </header> 
-      <!-- <div class="main-panel"> -->
+    <div class="w3-display-container w3-main" style="margin-left:200px;margin-top:13px;">
         <div class="w3-display-container" id="main">
-         
-         <iframe id="moduleframe" src="module/dashboard/index.html" sandbox="allow-forms allow-pointer-lock allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups allow-popups-to-escape-sandbox" style="margin-top: 48px; bottom: 0px;border: 0px;height: 90vh;width: 100%; overflow-y: scroll;"></iframe>
+            <iframe id="moduleframe" sandbox="allow-forms allow-pointer-lock allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups allow-popups-to-escape-sandbox" src="" style="margin-top: 30px; bottom: 0px;border: 0px;height: 92vh;width: 100%; overflow-y: scroll;"></iframe>
         </div>
-      <!-- </div> -->
     </div>
-  </div>
-  
-<script src="js/request.js"></script>
-<script src="js/admin.js"></script>
+
+    <!-- END NEW -->
+
+
+    <script src="js/request.js"></script>
+    <script src="js/admin.js"></script>
 </body>
-</html>
 
+</html>
\ No newline at end of file