rebuilding the overview page

diff --git a/webroot/view/overview.php b/webroot/view/overview.php
index 4e348375be8357e810ba36211196f3e5c630f99b..97e08755e55f62ed153ff2ae6905b513951819e6 100644 (file)
--- 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>