[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[Fmsystem-commits] [15923] more on template
From: |
sigurdne |
Subject: |
[Fmsystem-commits] [15923] more on template |
Date: |
Mon, 31 Oct 2016 18:50:07 +0000 (UTC) |
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>
[Prev in Thread] |
Current Thread |
[Next in Thread] |
- [Fmsystem-commits] [15923] more on template,
sigurdne <=