[Fmsystem-commits] [15923] more on template

[sigurdne]

Revision: 15923
          http://svn.sv.gnu.org/viewvc/?view=rev&root=fmsystem&revision=15923
Author:   sigurdne
Date:     2016-10-31 18:50:06 +0000 (Mon, 31 Oct 2016)
Log Message:
-----------
more on template

Modified Paths:
--------------
    trunk/phpgwapi/templates/bookingfrontend/css/frontend.css
    trunk/phpgwapi/templates/bookingfrontend/footer.tpl
    trunk/phpgwapi/templates/bookingfrontend/head.tpl

Modified: trunk/phpgwapi/templates/bookingfrontend/css/frontend.css
===================================================================
--- trunk/phpgwapi/templates/bookingfrontend/css/frontend.css   2016-10-31 
15:30:55 UTC (rev 15922)
+++ trunk/phpgwapi/templates/bookingfrontend/css/frontend.css   2016-10-31 
18:50:06 UTC (rev 15923)
@@ -287,4 +287,156 @@
     .splash-head {
         font-size: 300%;
     }
+}
+
+.custom-menu-wrapper {
+  /*  background-color: #808080;*/
+    margin-bottom: 2.5em;
+    white-space: nowrap;
+    position: relative;
+}
+
+.custom-menu {
+    display: inline-block;
+    width: auto;
+    vertical-align: middle;
+    -webkit-font-smoothing: antialiased;
+}
+
+.custom-menu .pure-menu-link,
+.custom-menu .pure-menu-heading {
+    color: white;
+}
+
+.custom-menu .pure-menu-link:hover,
+.custom-menu .pure-menu-heading:hover {
+    background-color: transparent;
+}
+
+.custom-menu-top {
+    position: relative;
+    padding-top: .5em;
+    padding-bottom: .5em;
+}
+
+.custom-menu-brand {
+    display: block;
+    text-align: left;
+    position: relative;
+}
+
+.custom-menu-toggle {
+    width: 44px;
+    height: 44px;
+    display: block;
+    position: absolute;
+    top: 3px;
+    right: 0;
+    display: none;
+}
+
+.custom-menu-toggle .bar {
+    background-color: white;
+    display: block;
+    width: 20px;
+    height: 2px;
+    border-radius: 100px;
+    position: absolute;
+    top: 22px;
+    right: 12px;
+    -webkit-transition: all 0.5s;
+    -moz-transition: all 0.5s;
+    -ms-transition: all 0.5s;
+    transition: all 0.5s;
+}
+
+.custom-menu-toggle .bar:first-child {
+    -webkit-transform: translateY(-6px);
+    -moz-transform: translateY(-6px);
+    -ms-transform: translateY(-6px);
+    transform: translateY(-6px);
+}
+
+.custom-menu-toggle.x .bar {
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+
+.custom-menu-toggle.x .bar:first-child {
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+}
+
+.custom-menu-screen {
+   /* background-color: rgba(0, 0, 0, 0.5);*/
+       background-color: #2d3e50;
+    -webkit-transition: all 0.5s;
+    -moz-transition: all 0.5s;
+    -ms-transition: all 0.5s;
+    transition: all 0.5s;
+    height: 3em;
+    width: 70em;
+    position: absolute;
+    top: 0;
+    z-index: -1;
+}
+
+.custom-menu-tucked .custom-menu-screen {
+    -webkit-transform: translateY(-44px);
+    -moz-transform: translateY(-44px);
+    -ms-transform: translateY(-44px);
+    transform: translateY(-44px);
+}
+
address@hidden (max-width: 62em) {
+
+    .custom-menu {
+        display: block;
+    }
+
+    .custom-menu-toggle {
+        display: block;
+        display: none\9;
+    }
+
+    .custom-menu-bottom {
+        position: absolute;
+        width: 100%;
+        border-top: 1px solid #eee;
+        background-color: #2d3e50\9;
+        z-index: 100;
+    }
+
+    .custom-menu-bottom .pure-menu-link {
+        opacity: 1;
+        -webkit-transform: translateX(0);
+        -moz-transform: translateX(0);
+        -ms-transform: translateX(0);
+        transform: translateX(0);
+        -webkit-transition: all 0.5s;
+        -moz-transition: all 0.5s;
+        -ms-transition: all 0.5s;
+        transition: all 0.5s;
+    }
+
+    .custom-menu-bottom.custom-menu-tucked .pure-menu-link {
+        -webkit-transform: translateX(-140px);
+        -moz-transform: translateX(-140px);
+        -ms-transform: translateX(-140px);
+        transform: translateX(-140px);
+        opacity: 0;
+        opacity: 1\9;
+    }
+
+    .pure-menu-horizontal.custom-menu-tucked {
+        z-index: -1;
+        top: 45px;
+        position: absolute;
+        overflow: hidden;
+    }
+
 }
\ No newline at end of file

Modified: trunk/phpgwapi/templates/bookingfrontend/footer.tpl
===================================================================
--- trunk/phpgwapi/templates/bookingfrontend/footer.tpl 2016-10-31 15:30:55 UTC 
(rev 15922)
+++ trunk/phpgwapi/templates/bookingfrontend/footer.tpl 2016-10-31 18:50:06 UTC 
(rev 15923)
@@ -1,10 +1,20 @@
-               </div>
-               <div id="footer">
+</div>
+<div id="footer">
 
-               </div>
-               <div class="footer l-box is-center">
-                       {footer_address}
-               </div>
-       </body>
-       {javascript_end}
+</div>
+<div class="footer l-box is-center">
+       {footer_address}
+</div>
+</body>
+{javascript_end}
+<script>
+       (function (window, document)
+       {
+               document.getElementById('toggle').addEventListener('click', 
function (e)
+               {
+                       
document.getElementById('tuckedMenu').classList.toggle('custom-menu-tucked');
+                       document.getElementById('toggle').classList.toggle('x');
+               });
+       })(this, this.document);
+</script>
 </html>

Modified: trunk/phpgwapi/templates/bookingfrontend/head.tpl
===================================================================
--- trunk/phpgwapi/templates/bookingfrontend/head.tpl   2016-10-31 15:30:55 UTC 
(rev 15922)
+++ trunk/phpgwapi/templates/bookingfrontend/head.tpl   2016-10-31 18:50:06 UTC 
(rev 15923)
@@ -36,26 +36,30 @@
                        {win_on_events}
                        //-->
                </script>
-
+       <div class="header">
        </head>
        <body>
                <div class="header">
-                       <div class="home-menu pure-menu pure-menu-horizontal 
pure-menu-fixed">
-                               <a class="pure-menu-heading" 
href="{site_url}">{site_title}</a>
 
-                               <ul class="pure-menu-list">
-                                       <li class="pure-menu-item 
pure-menu-selected"><a href="{manual_url}">{manual_text}</a></li>
-                                       <li class="pure-menu-item"><a 
href="{help_url}">{help_text}</a></li>
-                                       <li class="pure-menu-item"><a 
href="{org_url}">{login_text_org}</a></li>
-                                       <li class="pure-menu-item"><a 
href="{login_url}">{login_text}</a></li>
-                               </ul>
-                               <span id="change"></span>
+
+                       <div class="home-menu custom-menu-wrapper">
+                               <div class="pure-menu custom-menu 
custom-menu-top">
+                                       <a href="{site_url}" 
class="pure-menu-heading custom-menu-brand">{site_title}</a>
+                                       <a href="#" class="custom-menu-toggle" 
id="toggle"><s class="bar"></s><s class="bar"></s></a>
+                               </div>
+                               <div class="pure-menu pure-menu-horizontal 
pure-menu-scrollable custom-menu custom-menu-bottom custom-menu-tucked" 
id="tuckedMenu">
+                                       <div class="custom-menu-screen"></div>
+                                       <ul class="pure-menu-list">
+                                               <li class="pure-menu-item"><a 
href="{manual_url}" class="pure-menu-link">{manual_text}</a></li>
+                                               <li class="pure-menu-item"><a 
href="{help_url}" class="pure-menu-link">{help_text}</a></li>
+                                               <li class="pure-menu-item"><a 
href="{org_url}" class="pure-menu-link">{login_text_org}</a></li>
+                                               <li class="pure-menu-item"><a 
href="{login_url}" class="pure-menu-link">{login_text}</a></li>
+                                       </ul>
+                               </div>
                        </div>
+                       <span id="change"></span>
                </div>
 
                <div id="content-wrapper">
-                       <div class="content">
-                               <h2 class="content-head is-center"></h2>
-                       </div>