From 9695689e51a61a65ed37d2dd893a2ed349ffb243 Mon Sep 17 00:00:00 2001
From: Banana <banana@optimus.de>
Date: Sat, 3 Nov 2018 11:45:38 +0100
Subject: [PATCH] rebuilding the overview page

---
 webroot/view/overview.php | 104 +++++++++++++++++++++++++++++---------
 1 file changed, 79 insertions(+), 25 deletions(-)

diff --git a/webroot/view/overview.php b/webroot/view/overview.php
index 4e34837..97e0875 100644
--- a/webroot/view/overview.php
+++ b/webroot/view/overview.php
@@ -26,44 +26,98 @@
  *
  */
  ?>
-<div class="row">
-	<div class="large-12 columns">
-		<h1 class="text-center">All of your links</h1>
-		<?php if(!empty($subHeadline)) { ?>
-		<h4 class="text-center"><?php echo $subHeadline; ?></h4>
-		<?php } ?>
+
+<section class="section">
+	<div class="columns">
+		<div class="column">
+    		<p class="has-text-right">
+    			<a href="index.php?p=overview&m=tag" title="all tags" class="is-small button">
+    				<span class="icon"><i class="ion-md-pricetag"></i></span>
+    			</a>
+    			<a href="index.php?p=overview&m=category" title="all categories" class="is-small button">
+    				<span class="icon"><i class="ion-md-list"></i></span>
+    			</a>
+    			<a href="index.php" title="... back to home" class="is-small button">
+    				<span class="icon"><i class="ion-md-home"></i></span>
+    			</a>
+    		</p>
+    	</div>
 	</div>
-</div>
-<div class="row expanded">
-	<div class="large-12 columns">
-		<p class="text-right">
-			<a href="index.php?p=overview&m=tag" title="all tags" class="tiny button"><i class="fi-price-tag"></i></a>
-			<a href="index.php?p=overview&m=category" title="all categories" class="tiny button"><i class="fi-ticket"></i></a>
-			<a href="index.php" title="... back to home" class="tiny button"><i class="fi-home"></i></a>
-		</p>
+
+	<div class="columns">
+		<div class="column">
+    		<h1 class="is-size-1">All of your links</h1>
+    		<?php if(!empty($subHeadline)) { ?>
+    		<h2 class="is-size-2"><i class="icon ion-md-list"></i> <?php echo $subHeadline; ?></h2>
+    		<?php } ?>
+		</div>
 	</div>
-</div>
+</section>
+
+<section class="section">
+	<div class="columns is-multiline">
+		<div class="column is-one-quarter">
+            <div class="box">
+              <article class="media">
+                <div class="media-left">
+                  <figure class="image is-64x64">
+                    <img src="https://bulma.io/images/placeholders/128x128.png" alt="Image">
+                  </figure>
+                </div>
+                <div class="media-content">
+                  <div class="content">
+                    <p>
+                      <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
+                      <br>
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
+                    </p>
+                  </div>
+                  <nav class="level is-mobile">
+                    <div class="level-left">
+                      <a class="level-item" aria-label="reply">
+                        <span class="icon is-small">
+                          <i class="fas fa-reply" aria-hidden="true"></i>
+                        </span>
+                      </a>
+                      <a class="level-item" aria-label="retweet">
+                        <span class="icon is-small">
+                          <i class="fas fa-retweet" aria-hidden="true"></i>
+                        </span>
+                      </a>
+                      <a class="level-item" aria-label="like">
+                        <span class="icon is-small">
+                          <i class="fas fa-heart" aria-hidden="true"></i>
+                        </span>
+                      </a>
+                    </div>
+                  </nav>
+                </div>
+              </article>
+            </div>
+		</div>
+</section>
 
+<section class="section">
 <?php if(!empty($linkCollection)) { ?>
-<div class="row expanded small-up-1 medium-up-2 large-up-3" data-equalizer data-equalize-by-row="true">
+<div class="columns is-multiline">
 <?php foreach ($linkCollection as $link) { ?>
-	<div class="column">
-		<div class="media-object linkbox" data-equalizer-watch>
-		<?php if(!empty($link['image'])) { ?>
-          	<div class="media-object-section">
+	<div class="column is-one-quarter">
+		<div class="columns">
+			<div class="column">
+    		<?php if(!empty($link['image'])) { ?>
           		<a href="<?php echo $link['link']; ?>" target="_blank">
             	<img class="linkthumbnail" src= "<?php echo $link['image']; ?>">
             	</a>
-          	</div>
-		<?php } ?>
-          	<div class="media-object-section">
+    		<?php } ?>
+    		</div>
+          	<div class="column">
 	            <h4><a href="<?php echo $link['link']; ?>" target="_blank"><?php echo $link['title']; ?></a></h4>
     	        <p><?php echo $link['description']; ?></p>
     	        <p>
     	        	<a href="<?php echo $link['link']; ?>" target="_blank" class="small button">Visit link</a>
     	        	<a href="index.php?p=linkinfo&id=<?php echo $link['hash']; ?>" class="small button">More details</a>
     	        </p>
-        	  </div>
+    	  	</div>
         </div>
 	</div>
 <?php } ?>
@@ -89,4 +143,4 @@
 	</div>
 </div>
 <?php } ?>
-
+</section>
-- 
2.39.5