From bef3084516ebac401a903e30f3b06964d39c4e43 Mon Sep 17 00:00:00 2001
From: awesomerobot <awesomerobot@gmail.com>
Date: Tue, 1 Sep 2015 10:38:37 -0400
Subject: [PATCH] flexbox for the post header

---
 .../stylesheets/common/base/header.scss       | 14 ++++-
 .../stylesheets/common/base/menu-panel.scss   |  3 --
 app/assets/stylesheets/common/base/topic.scss |  7 +--
 .../common/components/badges.css.scss         |  4 +-
 .../stylesheets/common/foundation/mixins.scss | 54 +++++++++++++++++++
 5 files changed, 73 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index bc20cefeaa4..6de1b2fcc3e 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -6,6 +6,14 @@
     background-color: $header_background;
     box-shadow: 0 2px 4px -1px rgba(0,0,0, .25);
 
+    .ember-view {
+      min-width: 0; //flexbox fix
+    }
+
+    .title {
+      @include flex(0,0,auto);
+    }
+
     .docked & {
       position: fixed;
       backface-visibility: hidden;  /** do magic for scrolling performance **/
@@ -13,6 +21,8 @@
 
     .contents {
       margin: 8px 0;
+      @include flexbox();
+      @include align-items(center);
     }
 
     .title {
@@ -34,8 +44,10 @@
     }
 
     .panel {
-      float: right;
       position: relative;
+      margin-left: auto;
+      min-width: 125px;
+      @include order(3)
     }
 
     .login-button, button.sign-up-button {
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index bf718f19ad4..deb49386d5c 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -268,6 +268,3 @@ div.menu-links-header {
     margin-right: 0.2em;
   }
 }
-
-
-
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index 015b4b68714..873ab685bc6 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -27,11 +27,12 @@
 }
 
 .extra-info-wrapper {
+  @include order(2);
+  line-height: 1.5;
   .badge-wrapper {
     float: left;
-    &.bullet {
-      margin-top: 5px;
-    }
+    margin-left: 2px;
+    line-height: 1.2;
   }
 
 }
diff --git a/app/assets/stylesheets/common/components/badges.css.scss b/app/assets/stylesheets/common/components/badges.css.scss
index 47fb1a1cb6e..34b97c1784e 100644
--- a/app/assets/stylesheets/common/components/badges.css.scss
+++ b/app/assets/stylesheets/common/components/badges.css.scss
@@ -52,8 +52,8 @@
 
 
   &.bullet { //bullet category style
-    display: inline-flex;
-    align-items: baseline;
+    @include inline-flex;
+    @include align-items(baseline);
     margin-right: 10px;
 
     span.badge-category {
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index 55b15a9b537..e9cb375a50c 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -113,3 +113,57 @@
 	-webkit-transform: $transforms;
           transform: $transforms;
 }
+
+// ---------------------------------------------------
+
+//Flexbox
+
+@mixin flexbox() {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+@mixin inline-flex() {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -moz-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+
+@mixin align-items($alignment) {
+    -webkit-box-align: $alignment;
+    -webkit-align-items: $alignment;
+    -ms-flex-align: $alignment;
+    -ms-align-items: $alignment;
+    align-items:$alignment;
+}
+
+@mixin order($val) {
+  -webkit-box-ordinal-group: $val;
+  -moz-box-ordinal-group: $val;
+  -ms-flex-order: $val;
+  -webkit-order: $val;
+  order: $val;
+}
+
+@mixin flex($fg: 1, $fs: null, $fb: null) {
+
+	$fg-boxflex: $fg;
+
+	// Box-Flex only supports a flex-grow value
+	@if type-of($fg) == 'list' {
+		$fg-boxflex: nth($fg, 1);
+	}
+
+	-webkit-box-flex: $fg-boxflex;
+	-webkit-flex: $fg $fs $fb;
+	-moz-box-flex: $fg-boxflex;
+	-moz-flex: $fg $fs $fb;
+	-ms-flex: $fg $fs $fb;
+	flex: $fg $fs $fb;
+}