Add layout based on list entries

5 files changed, 113 insertions, 60 deletions

diff --git a/templates/card/card.twig b/templates/card/card.twig
index 9a91bfa..fcf6bd0 100644
--- a/templates/card/card.twig
+++ b/templates/card/card.twig
@@ -4,9 +4,11 @@
   Cards
 {% endblock %}
 {% block main %}
-  <div style="align-content: center; text-align: center">
-    <button onclick="location.href='/card/list'">List</button>
-    <button onclick="location.href='/card/add'">Add</button>
+  <div class="content content-header">
+    <button onclick="location.href='/card/list'">Overview</button>
+    <button onclick="location.href='/card/add'">New Card</button>
+  </div>
+  <div class="content content-header">
     <h3>{% block pagetitle %}{% endblock %}</h3>
   </div>
 
diff --git a/templates/card/card_add.twig b/templates/card/card_add.twig
index ef01632..db91fc4 100644
--- a/templates/card/card_add.twig
+++ b/templates/card/card_add.twig
@@ -1,6 +1,24 @@
 {% extends 'card/card.twig' %}
 
 {% block pagetitle %}
+  Edit Card
+{% endblock %}
+{% block pagecontent %}
+  <div class="content">
+    <form action="/card/{{ card.id }}/edit" method="post" enctype="multipart/form-data">
+      {% for meta in card.meta %}
+        <p>
+          <label>{{ meta.key }}</label><br>
+          <input type="text" name="{{ meta.key }}" value="{{ meta.value }}">
+        </p>
+      {% endfor %}
+
+      <input type="submit" value="Save">
+    </form>
+  </div>
+{% endblock %}
+
+{% block pagetitle %}
   Add Card
 {% endblock %}
 {% block pagecontent %}
diff --git a/templates/card/card_display.twig b/templates/card/card_display.twig
index 27d5bea..7b2ed3e 100644
--- a/templates/card/card_display.twig
+++ b/templates/card/card_display.twig
@@ -4,22 +4,45 @@
   Show Card
 {% endblock %}
 {% block pagecontent %}
-  {% for meta in card.meta %}
-    <p>
-      <label>{{ meta.key }}</label><br>
-      <input type="text" name="{{ meta.key }}" value="{{ meta.value }}" disabled>
-    </p>
-  {% endfor %}
+  <div class="content">
+    <button onclick="location.href='/card/{{ card.id }}/edit'">Edit</button>
+  </div>
+
+  <div class="content">
+    <div class="row">
+      <div class="column column-5">
+        <button class="vote"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></button>
+        {{ card.getVotesTotal() }}
+        <button class="vote"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i></button>
+      </div>
+      <div class="column column-95">
+        {% for meta in card.meta %}
+          <p>
+            <label>{{ meta.key }}</label><br>
+            <input type="text" name="{{ meta.key }}" value="{{ meta.value }}" disabled>
+          </p>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
 
-  <button onclick="location.href='/card/{{ card.id }}/edit'">Edit</button>
+  <div class="content content-header">
+    <h3>Artworks</h3>
+  </div>
 
-  <h4>Artworks</h4>
   {% for artwork in card.artworks %}
-    <p>
-      <img style='max-width: 100%; max-height:300px;' src='{{ artwork.path }}'>
-      <button>Up</button>
-      <button>Down</button>
-      <button onclick="location.href='/artwork/{{ artwork.id }}'">Show</button>
-    </p>
+  <div class="content">
+    <div class="row">
+      <div class="column column-5">
+        <button class="vote"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></button>
+        {{ artwork.getVotesTotal() }}
+        <button class="vote"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i></button>
+      </div>
+      <div class="column column-95">
+        <img class="image" src='{{ artwork.path }}'>
+        <button onclick="location.href='/artwork/{{ artwork.id }}'">Show</button>
+      </div>
+    </div>
+  </div>
   {% endfor %}
 {% endblock %}
diff --git a/templates/card/card_edit.twig b/templates/card/card_edit.twig
index a7f9aa7..b066437 100644
--- a/templates/card/card_edit.twig
+++ b/templates/card/card_edit.twig
@@ -4,23 +4,33 @@
   Edit Card
 {% endblock %}
 {% block pagecontent %}
-  <form action="/card/{{ card.id }}/edit" method="post" enctype="multipart/form-data">
-    {% for meta in card.meta %}
-      <p>
-        <label>{{ meta.key }}</label><br>
-        <input type="text" name="{{ meta.key }}" value="{{ meta.value }}">
-      </p>
-    {% endfor %}
+  <div class="content">
+    <form action="/card/{{ card.id }}/edit" method="post" enctype="multipart/form-data">
+      {% for meta in card.meta %}
+        <p>
+          <label>{{ meta.key }}</label><br>
+          <input type="text" name="{{ meta.key }}" value="{{ meta.value }}">
+        </p>
+      {% endfor %}
 
-    <input type="submit" value="Save">
-  </form>
+      <input type="submit" value="Save">
+    </form>
+  </div>
+
+  <div class="content content-header">
+    <h3>Edit Artworks</h3>
+  </div>
+
+  <div class="content">
+    <button>Add Artwork</button>
+  </div>
 
-  <h4>Artworks</h4>
   {% for artwork in card.artworks %}
-    <p>
-      <img style='max-width: 100%; max-height:300px;' src='{{ artwork.path }}'>
+    <div class="content">
+      <img class="image" src='{{ artwork.path }}'>
       <button onclick="location.href='/artwork/{{ artwork.id }}/edit'">Edit</button>
-      <button onclick="location.href='/artwork/{{ artwork.id }}'">Delete</button>
-    </p>
+      <button>Remove</button>
+    </div>
   {% endfor %}
-{% endblock %}
+
+{% endblock %}
\ No newline at end of file
diff --git a/templates/card/card_list.twig b/templates/card/card_list.twig
index 1714fc8..b6d8bbe 100644
--- a/templates/card/card_list.twig
+++ b/templates/card/card_list.twig
@@ -4,35 +4,35 @@
 List
 {% endblock %}
 {% block pagecontent %}
-  <table>
-    <thead>
-    <tr>
-      <th>ID</th>
-      {% for meta in cards[0].getAllMeta() %}
-        <th>{{ meta.key }}</th>
-      {% endfor %}
-      <th>Votes</th>
-      <th></th>
-    </tr>
-    </thead>
-    <tbody>
-    {% for card in cards %}
-      <tr>
-        <td>{{ card.id }}</td>
-        {% for meta in card.getAllMeta() %}
-          <td>{{ meta.value }}</td>
-        {% endfor %}
-        <td>
+  {% for card in cards %}
+    <div class="content">
+      <div class="row">
+        <div class="column column-5">
+          <button class="vote"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></button>
           {{ card.getVotesTotal() }}
-          <button>Up</button>
-          <button>Down</button>
-        </td>
-        <td>
+          <button class="vote"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i></button>
+        </div>
+        <div class="column column-95">
+          <table>
+            <thead>
+              <tr>
+                {% for meta in card.getAllMeta() %}
+                  <th>{{ meta.key }}</th>
+                {% endfor %}
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                {% for meta in card.getAllMeta() %}
+                  <td>{{ meta.value }}</td>
+                {% endfor %}
+              </tr>
+            </tbody>
+          </table>
           <button onclick="location.href='/card/{{ card.id }}'">Card</button>
           <button onclick="location.href='/card/{{ card.id }}/artworks'">Artworks</button>
-        </td>
-      </tr>
-    {% endfor %}
-    </tbody>
-  </table>
+        </div>
+      </div>
+    </div>
+  {% endfor %}
 {% endblock %}