use flexbox for content and sidebar layout, refs mrliptontea#15

orzechow · Aug 9, 2015 · 6c8432f · 6c8432f
1 parent f12816d
commit 6c8432f
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ A free Redmine theme for modern browsers.
 
 ![Screenshot](https://github.com/HolonGlobe/PurpleMine2/raw/master/screenshots/issues-list.png)
 
-Compatible with Redmine 2.5+ and browsers: IE9+, latest Firefox and Google Chrome (others were not tested).
+Compatible with Redmine 2.5+ and browsers: IE10+/Edge, latest Firefox and Google Chrome (others were not tested).
 
 It's written in [SCSS]. It uses [normalize.css] and benefits from some parts of [Bootstrap][bootstrap-sass] like mixins, structure, and stuff.
 
@@ -62,6 +62,7 @@ Latest (master):
 * Fixed #13: #header was missing clearfix and was breaking the layout is some cases
 * Coloring issue's title instead of link in Gantt diagram for overdue issues
 * Updated npm packages: grunt-sass from 0.18.0 to 1.0.0 and grunt-contrib-uglify 0.7.0 to 0.9.1
+* Use flexbox layout by default (can be changed by setting `$flexbox-layout` to `false`)
 
 v1.6.0 (2015-06-10):
 

diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
@@ -7,6 +7,7 @@
 //
 
 $fixed-layout:                  false !default;
+$flexbox-layout:                true !default;
 $sidebar-position:              left !default;
 $color-priorities:              true !default;
 $color-trackers:                true !default;

diff --git a/src/sass/components/_content.scss b/src/sass/components/_content.scss
@@ -1,5 +1,12 @@
 #main {
     @extend %clearfix;
+
+    @if $flexbox-layout {
+        // scss-lint:disable VendorPrefix
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+    }
 }
 
 
@@ -9,7 +16,15 @@
 
 #content {
     padding: $padding-side;
-    overflow: hidden;
+
+    @if $flexbox-layout {
+        // scss-lint:disable VendorPrefix
+        -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+        flex: 1 1 auto;
+    } @else {
+        overflow: hidden;
+    }
 }
 
 
@@ -18,38 +33,56 @@
 // --------------------------------------------------
 
 #sidebar {
-    width: $sidebar-width - ($sidebar-padding-horizontal * 2) - 1px;
+    // scss-lint:disable VendorPrefix
+    $sidebar-width-computed: $sidebar-width - ($sidebar-padding-horizontal * 2) - 1px;
+
     padding: $padding-side $sidebar-padding-horizontal;
-    float: $sidebar-position;
 
-    @media screen and (min-width: 1px) {
-        // scss-lint:disable VendorPrefix
-        $border: $sidebar-link-active-border;
-        $body:   $body-bg;
+    @if $flexbox-layout {
+        -webkit-flex: 0 0 $sidebar-width-computed;
+        -ms-flex: 0 0 $sidebar-width-computed;
+        flex: 0 0 $sidebar-width-computed;
 
+        @if $sidebar-position == "left" {
+            -webkit-order: -1;
+            -ms-flex-order: -1;
+            order: -1;
+        } @else {
+            -webkit-order: 1;
+            -ms-flex-order: 1;
+            order: 1;
+        }
+    } @else {
+        width: $sidebar-width-computed;
+        float: $sidebar-position;
+    }
+
+    @media screen and (min-width: 1px) {
         padding-bottom: $padding-side * 3;
-        background-image: -webkit-linear-gradient($body 1%, $border 10%, $border 85%, $body);
-        background-image:      -o-linear-gradient($body 1%, $border 10%, $border 85%, $body);
-        background-image:         linear-gradient($body 1%, $border 10%, $border 85%, $body);
-        background-repeat: no-repeat;
-        background-size: 1px 100%;
 
         @if $sidebar-position == "left" {
-            padding-right: $sidebar-padding-horizontal + 1px;
-            background-position: right 0;
+            border-right: 1px solid $sidebar-link-active-border;
             box-shadow: inset -9px 0 6px -6px rgba(0, 0, 0, .05);
         } @else {
-            padding-left: $sidebar-padding-horizontal + 1px;
-            background-position: left 0;
+            border-left: 1px solid $sidebar-link-active-border;
             box-shadow: inset 9px 0 6px -6px rgba(0, 0, 0, .05);
         }
     }
 
     .nosidebar & {
-        width: 0;
         margin: 0;
         padding: 0;
-        float: none;
+        border: 0 none;
+
+        @if $flexbox-layout {
+            // scss-lint:disable VendorPrefix
+            -webkit-flex: 0 0 auto;
+            -ms-flex: 0 0 auto;
+            flex: 0 0 auto;
+        } @else {
+            width: 0;
+            float: none;
+        }
     }
 
     h3 {
@@ -117,7 +150,7 @@
 }
 
 #footer {
-    margin: $line-height-computed $padding-side;
+    margin: 0 $padding-side $line-height-computed;
     padding-top: $line-height-computed;
     border-top: 1px solid $gray-lighter;
     color: $gray-light;

diff --git a/src/sass/components/_tabs.scss b/src/sass/components/_tabs.scss
@@ -7,20 +7,42 @@
 
     position: relative;
     margin-bottom: $line-height-computed;
-    padding-right: $tabs-buttons-width;
     overflow: hidden;
 
+    @if not $flexbox-layout {
+        padding-right: $tabs-buttons-width;
+    }
+
     > ul {
-        width: 2000px; // stop it from breaking
+        // scss-lint:disable VendorPrefix
         margin: 0;
         padding-left: 0;
         border-bottom: 1px solid $tab-border;
         list-style: none;
-        @extend %clearfix;
+
+        @if $flexbox-layout {
+            display: -ms-flexbox;
+            display: -webkit-flex;
+            display: flex;
+            height: $line-height-computed + $tab-padding-vertical * 2 + 1px;
+            -webkit-flex-wrap: nowrap;
+            -ms-flex-wrap: nowrap;
+            flex-wrap: nowrap;
+        } @else {
+            width: 2000px;
+            @extend %clearfix;
+        }
 
         > li {
             margin-bottom: -1px;
-            float: left;
+
+            @if $flexbox-layout {
+                -webkit-flex: 0 1 auto;
+                -ms-flex: 0 1 auto;
+                flex: 0 1 auto;
+            } @else {
+                float: left;
+            }
 
             > a {
                 display: block;
@@ -30,6 +52,7 @@
                 border: 1px solid transparent;
                 border-radius: $border-radius-base $border-radius-base 0 0;
                 text-align: center;
+                white-space: nowrap;
 
                 &:hover,
                 &:focus {
@@ -53,11 +76,12 @@
         right: 0;
         width: $tabs-buttons-width;
         padding-left: 5px;
+        border-bottom: 1px solid $tab-border;
         background-color: $body-bg;
 
         > button {
             width: 50%;
-            height: $tab-padding-vertical * 2 + $line-height-computed;
+            height: $tab-padding-vertical * 2 + $line-height-computed + 1px;
             margin: 0;
             padding: 0;
             float: left;

diff --git a/stylesheets/application.css b/stylesheets/application.css