From 4a7868abc5695f2371f08318f0ead9c2b11fc811 Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Fri, 12 Jun 2015 17:09:14 -0400
Subject: [PATCH] Flexbox feeds

---
 src/definitions/views/feed.less          | 21 ++++++++++++++-------
 src/themes/default/views/feed.variables  | 18 +++++-------------
 src/themes/timeline/views/feed.overrides | 16 ++++------------
 src/themes/timeline/views/feed.variables | 10 +++-------
 4 files changed, 26 insertions(+), 39 deletions(-)

diff --git a/src/definitions/views/feed.less b/src/definitions/views/feed.less
index 18d4cb6da..583048d1f 100755
--- a/src/definitions/views/feed.less
+++ b/src/definitions/views/feed.less
@@ -29,7 +29,7 @@
   margin-top: 0em;
 }
 .ui.feed:last-child {
-  margin-top: 0em;
+  margin-bottom: 0em;
 }
 
 
@@ -39,7 +39,8 @@
 
 /* Event */
 .ui.feed > .event {
-  display: @eventDisplay;
+  display: flex;
+  flex-direction: row;
   width: @eventWidth;
   padding: @eventPadding;
   margin: @eventMargin;
@@ -56,10 +57,11 @@
 
 /* Event Label */
 .ui.feed > .event > .label {
-  display: @labelDisplay;
+  display: block;
+  flex: 0 0 auto;
   width: @labelWidth;
   height: @labelHeight;
-  vertical-align: @labelVerticalAlign;
+  align-self: @labelAlignSelf;
   text-align: @labelTextAlign;
 }
 .ui.feed > .event > .label .icon {
@@ -78,13 +80,18 @@
   border-radius: @imageLabelBorderRadius;
 }
 .ui.feed > .event > .label + .content {
-  padding: @labeledContentPadding;
+  margin: @labeledContentMargin;
 }
 
+/*--------------
+     Content
+---------------*/
+
 /* Content */
 .ui.feed > .event > .content {
-  display: @contentDisplay;
-  vertical-align: @contentVerticalAlign;
+  display: block;
+  flex: 1 1 auto;
+  align-self: @contentAlignSelf;
   text-align: @contentTextAlign;
   word-wrap: @contentWordWrap;
 }
diff --git a/src/themes/default/views/feed.variables b/src/themes/default/views/feed.variables
index df43af0ec..6fcf0fbe6 100644
--- a/src/themes/default/views/feed.variables
+++ b/src/themes/default/views/feed.variables
@@ -13,18 +13,16 @@
 --------------------*/
 
 /* Event */
-@eventDisplay: table;
 @eventWidth: 100%;
-@eventPadding: 0.5rem 0em;
+@eventPadding: 0.214285rem 0em;
 @eventMargin: 0em;
 @eventBackground: none;
 @eventDivider: none;
 
 /* Event Label */
-@labelDisplay: table-cell;
 @labelWidth: 2.5em;
-@labelHeight: 2.5em;
-@labelVerticalAlign: top;
+@labelHeight: auto;
+@labelAlignSelf: stretch;
 @labelTextAlign: left;
 
 /* Icon Label */
@@ -43,12 +41,11 @@
 @imageLabelBorderRadius: @circularRadius;
 
 /* Content w/ Label */
-@labeledContentPadding: 0.5em 0em 0.5em 1.25em;
+@labeledContentMargin: 0.5em 0em 0.35714em @relativeLarge;
 @lastLabeledContentPadding: 0em;
 
 /* Content */
-@contentDisplay: table-cell;
-@contentVerticalAlign: top;
+@contentAlignSelf: stretch;
 @contentTextAlign: left;
 @contentWordWrap: break-word;
 
@@ -142,8 +139,3 @@
 /*-------------------
       Variations
 --------------------*/
-
-/* Size */
-@small: 0.9em;
-@medium: 1em;
-@large: 1.1em;
\ No newline at end of file
diff --git a/src/themes/timeline/views/feed.overrides b/src/themes/timeline/views/feed.overrides
index 55acd7c1e..4b51e3487 100644
--- a/src/themes/timeline/views/feed.overrides
+++ b/src/themes/timeline/views/feed.overrides
@@ -9,6 +9,10 @@
   border-left-color: transparent;
 }
 
+.ui.feed > .event > .label {
+  margin-left: 1.6em;
+}
+
 .ui.feed > .event > .label > img,
 .ui.feed > .event > .label > .icon {
   background-color: #009FDA;
@@ -21,15 +25,3 @@
   opacity: 1;
   position: relative;
 }
-
-.ui.feed > .event > .content {
-  display: block;
-  border-left: 3px solid #ddd;
-  padding-bottom: 2em;
-  padding-left: 4em;
-}
-.ui.feed > .event > .label + .content {
-  display: table-cell;
-  border-left: medium none;
-  margin-left: 0;
-}
\ No newline at end of file
diff --git a/src/themes/timeline/views/feed.variables b/src/themes/timeline/views/feed.variables
index 8052083a0..d1345e80b 100644
--- a/src/themes/timeline/views/feed.variables
+++ b/src/themes/timeline/views/feed.variables
@@ -6,15 +6,15 @@
       Elements
 --------------------*/
 
-@eventMargin: 0em 0em 0em 2em;
+@eventMargin: 0em;
 @eventDivider: none;
 @eventPadding: 0em;
 
 /* Event Label */
 @labelWidth: 3em;
-@labelHeight: 3em;
+@labelHeight: auto;
 
-@labeledContentPadding: 0.75em 0em 2em 0.75em;
+@labeledContentMargin: 0.75em 0em 2em 0.75em;
 
 /* Icon */
 @iconLabelBackground: @primaryColor;
@@ -34,7 +34,3 @@
 /*-------------------
       Variations
 --------------------*/
-
-/* Size */
-@small: 0.9em;
-@medium: 1em;
\ No newline at end of file