From 1ec53294d1b4f2ab7275935cffbe2ebffa2d74da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Tue, 17 Feb 2015 08:37:37 +0100
Subject: [PATCH] Wiki summary flexboxed

---
 app/partials/wiki/wiki-summary.jade       | 21 ++++++-----
 app/styles/modules/wiki/wiki-summary.scss | 45 +++++++++++------------
 2 files changed, 32 insertions(+), 34 deletions(-)

diff --git a/app/partials/wiki/wiki-summary.jade b/app/partials/wiki/wiki-summary.jade
index 68b2624d..7fb31db1 100644
--- a/app/partials/wiki/wiki-summary.jade
+++ b/app/partials/wiki/wiki-summary.jade
@@ -1,13 +1,14 @@
-ul
-    li
-        span.number <%- totalEditions %>
-        span.description times <br />edited
-    li
-        span.number <%- lastModifiedDate %>
-        span.description last <br />edit
+div.wiki-times-edited
+    span.number <%- totalEditions %>
+    span.description times <br />edited
 
-    li.username-edition
-        figure.avatar
-            img(src!="<%- user.imgUrl %>" alt!="<%- user.name %>")
+div.wiki-last-modified
+    span.number <%- lastModifiedDate %>
+    span.description last <br />edit
+
+div.wiki-username-edition
+    figure.avatar
+        img(src!="<%- user.imgUrl %>" alt!="<%- user.name %>")
+    div.wiki-user-modification
         span.description last modification
         span.username <%- user.name %>
diff --git a/app/styles/modules/wiki/wiki-summary.scss b/app/styles/modules/wiki/wiki-summary.scss
index 7d83451f..200f7621 100644
--- a/app/styles/modules/wiki/wiki-summary.scss
+++ b/app/styles/modules/wiki/wiki-summary.scss
@@ -1,31 +1,28 @@
 .wiki-summary {
-    @include clearfix();
-    figure {
-        float: left;
-        margin-right: .5rem;
-        vertical-align: sub;
-        width: 32px;
-    }
-    ul {
-        align-items: flex-start;
+    align-items: center;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    div {
         display: flex;
-        flex-direction: row;
+        justify-content: space-between;
+        margin-right: 1rem;
+    }
+    .number {
+        line-height: 2rem;
+        top: 0;
+    }
+    .wiki-user-modification {
+        display: flex;
+        flex-direction: column;
         justify-content: flex-start;
     }
-    .username-edition {
-        min-width: 240px;
-        span {
-            display: block;
-            float: none;
-        }
-        .username {
-            @extend %large;
-            color: $fresh-taiga;
-            white-space: nowrap;
-        }
+    figure {
+        margin-right: .3rem;
+        width: 32px;
     }
-    .button {
-        color: $white;
-        float: right;
+    .username {
+        @extend %large;
+        color: $fresh-taiga;
+        white-space: nowrap;
     }
 }