فهرست منبع

HUE-3281 [core] Add left menu

Johan Ahlen 9 سال پیش
والد
کامیت
ac48b2d
2فایلهای تغییر یافته به همراه176 افزوده شده و 7 حذف شده
  1. 158 5
      desktop/core/src/desktop/static/desktop/css/responsive.css
  2. 18 2
      desktop/core/src/desktop/templates/responsive.mako

+ 158 - 5
desktop/core/src/desktop/static/desktop/css/responsive.css

@@ -20,6 +20,7 @@ html {
   height: 100%;
   width: 100%;
   margin: 0;
+  font-size: 1em;
 }
 
 body {
@@ -42,15 +43,167 @@ body {
 }
 
 .top-nav {
-  display: flex;
-  flex: 0 0 35px;
+  flex: 0 0 2.5em;
   background-color: #31516a;
   width: 100%;
-  padding: 10px;
+  padding: 1em;
 }
 
-.page-content {
+.content-wrapper {
   display: flex;
-  flex:2;
+  flex: 2;
+  background-color: #FFF;
+  flex-direction: row;
+}
+
+.left-nav {
+  flex: 0 0 0em;
+  background-color: lightgrey;
+  -webkit-transition: 0.4s flex;
+  -moz-transition: 0.4s flex;
+  -ms-transition: 0.4s flex;
+  transition: 0.4s flex;
+}
+
+.left-nav-visible {
+  flex: 0 0 15em;
+  background-color: lightgrey;
+
+}
+
+.page-content {
+  flex: 2;
+  padding: 1em;
+}
+
+h1 {
+  font-size: 3rem;
+}
+
+h2 {
+  font-size: 2.25rem;
+}
+
+h3 {
+  font-size: 1.5rem;
+}
+
+h4 {
+  font-size: 1.313rem;
+}
+
+h5 {
+  font-size: 1.125rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+/*!
+ * Hamburgers
+ * @description Tasty CSS-animated hamburgers
+ * @author Jonathan Suh @jonsuh
+ * @site https://jonsuh.com/hamburgers
+ * @link https://github.com/jonsuh/hamburgers
+ */
+.hamburger {
+  padding: 0.4em 1em 0.4em 0.4em;
+  display: inline-block;
+  cursor: pointer;
+  transition-property: opacity, -webkit-filter;
+  transition-property: opacity, filter;
+  transition-property: opacity, filter, -webkit-filter;
+  transition-duration: 0.15s;
+  transition-timing-function: linear;
+  font: inherit;
+  color: inherit;
+  text-transform: none;
+  background-color: transparent;
+  border: 0;
+  margin: 0;
+  overflow: visible;
+}
+
+.hamburger:hover {
+  opacity: 0.7;
+}
+
+.hamburger-box {
+  width: 30px;
+  height: 24px;
+  display: inline-block;
+  position: relative;
+}
+
+.hamburger-inner {
+  display: block;
+  top: 50%;
+  margin-top: -2px;
+}
+
+.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
+  width: 30px;
+  height: 3px;
   background-color: #FFF;
+  border-radius: 4px;
+  position: absolute;
+  transition-property: -webkit-transform;
+  transition-property: transform;
+  transition-property: transform, -webkit-transform;
+  transition-duration: 0.15s;
+  transition-timing-function: ease;
+}
+
+.hamburger-inner::before, .hamburger-inner::after {
+  content: "";
+  display: block;
+}
+
+.hamburger-inner::before {
+  top: -8px;
+}
+
+.hamburger-inner::after {
+  bottom: -8px;
+}
+
+/*
+ * Squeeze
+ */
+.hamburger--squeeze .hamburger-inner {
+  transition-duration: 0.1s;
+  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+}
+
+.hamburger--squeeze .hamburger-inner::before {
+  transition: top 0.1s 0.14s ease, opacity 0.1s ease;
+}
+
+.hamburger--squeeze .hamburger-inner::after {
+  transition: bottom 0.1s 0.14s ease, -webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+}
+
+.hamburger--squeeze.is-active .hamburger-inner {
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+  transition-delay: 0.14s;
+  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.hamburger--squeeze.is-active .hamburger-inner::before {
+  top: 0;
+  opacity: 0;
+  transition: top 0.1s ease, opacity 0.1s 0.14s ease;
+}
+
+.hamburger--squeeze.is-active .hamburger-inner::after {
+  bottom: 0;
+  -webkit-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+  transition: bottom 0.1s ease, -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
 }

+ 18 - 2
desktop/core/src/desktop/templates/responsive.mako

@@ -64,14 +64,24 @@
 
 <div class="main-page">
   <div class="top-nav">
+    <a class="hamburger hamburger--squeeze pull-left" type="button">
+      <span class="hamburger-box">
+        <span class="hamburger-inner"></span>
+      </span>
+    </a>
     <a class="brand nav-tooltip pull-left" title="${_('About Hue')}" rel="navigator-tooltip" href="/about"><img
         src="${ static('desktop/art/hue-logo-mini-white.png') }"
         data-orig="${ static('desktop/art/hue-logo-mini-white.png') }"
         data-hover="${ static('desktop/art/hue-logo-mini-white-hover.png') }"/></a>
   </div>
 
-  <div class="page-content">
-    <h1>responsive</h1>
+  <div class="content-wrapper">
+    <div class="left-nav">
+
+    </div>
+    <div class="page-content">
+      <h1>responsive</h1>
+    </div>
   </div>
 </div>
 
@@ -82,6 +92,12 @@
 <script src="${ static('desktop/ext/js/jquery/plugins/jquery.total-storage.min.js') }"></script>
 
 <script type="text/javascript" charset="utf-8">
+
+  $(".hamburger").click(function () {
+    $(this).toggleClass("is-active");
+    $(".left-nav").toggleClass("left-nav-visible");
+  })
+
   moment.locale(window.navigator.userLanguage || window.navigator.language);
   localeFormat = function (time) {
     if (typeof ko !== 'undefined' && ko.isObservable(time)) {