Add layout based on list entries

10 files changed, 221 insertions, 74 deletions

diff --git a/public/css/style.css b/public/css/style.css
index 8cb9dca..bdb53f8 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1,7 +1,6 @@
 :root {
-  --bg: #fff;
-  --accent-bg: #f5f7ff;
-  --bg-header: #212121;
+  --bg: #f5f7ff;
+  --accent-bg: #fff;
   --text-header: #dcdcdc;
   --text: #212121;
   --text-light: #585858;
@@ -26,11 +25,66 @@ main h3 {
 }
 
 main h4 {
-  margin-top: 2.5rem;
+  margin-top: 1rem;
   margin-bottom: 0rem
 }
 
 main p {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
+}
+
+.vote {
+  background: none;
+  color: var(--accent);
+}
+
+input:disabled {
+  cursor: default;
+}
+
+.content {
+  background: var(--accent-bg);
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  align-content: center;
+  text-align: center;
+  margin: 15px 0 15px 0;
+  padding: 15px;
+}
+
+.content-header {
+  margin-top: 50px;
+}
+
+.row:after {
+  content: "";
+  display: table;
+  clear: both
+}
+
+.column {
+  float: left;
+}
+
+.column-5 {
+  width: 5%;
+}
+
+.column-90 {
+  width: 90%;
+}
+
+.column-95 {
+  width: 95%;
+}
+
+.image {
+  max-width: 100%;
+  max-height:300px;
+}
+
+.image-preview {
+  max-width: 100%;
+  max-height:300px;
 }
\ No newline at end of file
diff --git a/src/Controller/Home.php b/src/Controller/Home.php
index 7eda5ee..36879e0 100644
--- a/src/Controller/Home.php
+++ b/src/Controller/Home.php
@@ -30,7 +30,11 @@ class Home
 
   public static function dashboard()
   {
-    return Template::render('dashboard.twig', []);
+    $cards = DB::$entityManager->getRepository(Card::class)->findAll();
+    $cardOfTheDay = $cards[array_rand($cards)];
+    return Template::render('dashboard.twig', [
+      'cardOfTheDay' => $cardOfTheDay,
+    ]);
   }
 }
 
diff --git a/src/Model/Artwork.php b/src/Model/Artwork.php
index 25f6ee5..6380f62 100644
--- a/src/Model/Artwork.php
+++ b/src/Model/Artwork.php
@@ -88,9 +88,9 @@ class Artwork
   {
     $result = DB::$entityManager
       ->createQuery(
-	'SELECT sum(v.value) as total
-	FROM Elements\Model\VoteArtwork v
-	WHERE v.artwork = :artwork'
+        'SELECT sum(v.value) as total
+        FROM Elements\Model\VoteArtwork v
+        WHERE v.artwork = :artwork'
       )
       ->setParameter('artwork', $this)
       ->getOneOrNullResult();
diff --git a/templates/base.twig b/templates/base.twig
index a27b5d7..758b6f8 100644
--- a/templates/base.twig
+++ b/templates/base.twig
@@ -2,9 +2,13 @@
 
 {% block css %}
   {{ parent() }}
+  <!-- SimpleCSS -->
   <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
 
   <link rel="stylesheet" href="/css/style.css"/>
+
+  <!-- Fork Awesome Icons -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
 {% endblock %}
 
 {% block body %}
@@ -12,7 +16,9 @@
     <nav>
       <a href="/dashboard">Dashboard</a>
       <a href="/card/list">Cards</a>
-      <a href="/card/add">New Card</a>
+      <a href="/events/list">Events</a>
+      <a href="/news/list">News</a>
+      <a href="https://gitlab.com/DRogueRonin/elements">Gitlab</a>
     </nav>
     <h1>Elements</h1>
     <p>{% block subtitle %}{% endblock %}</p>
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 %}
diff --git a/templates/dashboard.twig b/templates/dashboard.twig
index 31f2353..97534bf 100644
--- a/templates/dashboard.twig
+++ b/templates/dashboard.twig
@@ -4,9 +4,39 @@
   Dashboard
 {% endblock %}
 {% block main %}
-  <p>Home?</p>
-  <p>Updates to own cards?</p>
-  <p>Card of the day?</p>
-  <p>Events?</p>
-  <p>News?</p>
+  <div class="content content-header">
+    <h3>Hello World</h3>
+  </div>
+  <div class="content content-header">
+    <h3>Cards</h3>
+  </div>
+  <div class="content">
+    <h4>Card of the day</h4>
+    <div class="row">
+      <div class="column column-5">
+        <button class="vote"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></button>
+        {{ cardOfTheDay.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 cardOfTheDay.meta %}
+          <p>
+            <label>{{ meta.key }}</label><br>
+            <input type="text" name="{{ meta.key }}" value="{{ meta.value }}" disabled>
+          </p>
+        {% endfor %}
+      </div>
+      <button onclick="location.href='/card/{{ cardOfTheDay.id }}'">Card</button>
+      <button onclick="location.href='/card/{{ cardOfTheDay.id }}/artworks'">Artworks</button>
+    </div>
+  </div>
+  <div class="content">
+    <h4>Updates to my cards</h4>
+  </div>
+  <div class="content content-header">
+    <h3>Events</h3>
+  </div>
+  <div class="content content-header">
+    <h3>News</h3>
+  </div>
 {% endblock %}