Эх сурвалжийг харах

HUE-3281 [core] Use flex layout for top bar and page contents

Johan Ahlen 9 жил өмнө
parent
commit
633b66d3f6

+ 18 - 1
desktop/core/src/desktop/static/desktop/css/responsive.css

@@ -31,9 +31,26 @@ body {
   overflow-y: hidden;
 }
 
+.main-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  overflow-y: hidden;
+}
+
 .top-nav {
+  display: flex;
+  flex: 0 0 35px;
   background-color: #31516a;
   width: 100%;
-  height: 35px;
   padding: 10px;
+}
+
+.page-content {
+  display: flex;
+  flex:2;
+  background-color: #FFF;
 }

+ 9 - 9
desktop/core/src/desktop/templates/responsive.mako

@@ -62,18 +62,18 @@
 
 <body>
 
-<div class="top-nav">
-  <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="main-page">
+  <div class="top-nav">
+    <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="container">
-  <div>
+  <div class="page-content">
     <h1>responsive</h1>
   </div>
-</div><!-- /.container -->
+</div>
 
 <script src="${ static('desktop/ext/js/jquery/jquery-2.2.3.min.js') }"></script>
 <script src="${ static('desktop/js/hue.utils.js') }"></script>