flexy flexboxfeature/flexy-flexbox

4 files changed, 25 insertions, 3 deletions

diff --git a/assets_src/css/materialize_extend.css b/assets_src/css/materialize_extend.css
index f06d042..64b58e2 100644
--- a/assets_src/css/materialize_extend.css
+++ b/assets_src/css/materialize_extend.css
@@ -1,3 +1,24 @@
 span.badge.new.no-caption::after {
         content: "";
 }
+
+/* some flexy flexbox stuff */
+.flex {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: stretch;
+}
+
+.flex .flex-card {
+  display: flex;
+  margin-right: 16px;
+  max-width: 400px;
+}
+
+.flex .flex-card .pull-down {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+}
diff --git a/frontend/renderer.go b/frontend/renderer.go
index 7d3a161..6fada60 100644
--- a/frontend/renderer.go
+++ b/frontend/renderer.go
@@ -19,6 +19,7 @@ type Action struct {
 // Card ist eine Karte im Materialize-Design.
 type Card struct {
         Title       string
+        SubTitle                *string
         Image       string
         Description string
         Size        string
diff --git a/views/includes/card.html b/views/includes/card.html
index a96cb49..457eef9 100644
--- a/views/includes/card.html
+++ b/views/includes/card.html
@@ -1,6 +1,6 @@
 {{ define "card" }}
 {{ $card := . }}
-<div class="col s12 m6 l4">
+<div class="flex-card">
         <div class="card white">
                 <div class="card-content black-text">
                         {{ if $card.Image }}
@@ -8,7 +8,7 @@
                                 <img class="circle responsive-img card-image" src="{{ $card.Image }}" />
                         </div>
                         {{ end }}
-                        <span class="card-title">{{ $card.Title | html }}</span>
+                        <span class="card-title valign-wrapper">{{ $card.Title | html }}{{ if $card.SubTitle }}{{ $card.SubTitle | html }}{{ end }}</span>
                         <p>{{ $card.Description | html }}</p>
                 </div>
                 <div class="card-action">
diff --git a/views/pages/dashboard.html b/views/pages/dashboard.html
index 589b0fd..2eacaba 100644
--- a/views/pages/dashboard.html
+++ b/views/pages/dashboard.html
@@ -11,7 +11,7 @@
                         <div class="row">
                         {{ range $category := .categories }}
                                 <h2>{{ $category.Title }}</h2>
-                                <div class="row">
+                                <div class="flex">
                                 {{ range $category.Cards }}
                                         {{ template "card" . }}
                                 {{ end }}