Add news to home

semantic.json

@@ -27,9 +27,9 @@
     "grid",
 
     "button",
-    "checkbox",
     "calendar",
     "card",
+    "checkbox",
     "dimmer",
     "divider",
     "dropdown",
@@ -45,6 +45,7 @@
     "menu",
     "message",
     "modal",
+    "placeholder",
     "popup",
     "progress",
     "segment",

semantic/dist/components/placeholder.css

@@ -0,0 +1,248 @@
+/*!
+ * # Fomantic-UI 2.8.8 - Loader
+ * http://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*-------------------
+      Content
+--------------------*/
+
+.ui.placeholder {
+  position: static;
+  overflow: hidden;
+  -webkit-animation: placeholderShimmer 2s linear;
+          animation: placeholderShimmer 2s linear;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  background-color: #FFFFFF;
+  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(0, 0, 0, 0.08)), color-stop(15%, rgba(0, 0, 0, 0.15)), color-stop(30%, rgba(0, 0, 0, 0.08)));
+  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.15) 15%, rgba(0, 0, 0, 0.08) 30%);
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.15) 15%, rgba(0, 0, 0, 0.08) 30%);
+  background-size: 1200px 100%;
+  max-width: 30rem;
+}
+@-webkit-keyframes placeholderShimmer {
+  0% {
+    background-position: -1200px 0;
+  }
+  100% {
+    background-position: 1200px 0;
+  }
+}
+@keyframes placeholderShimmer {
+  0% {
+    background-position: -1200px 0;
+  }
+  100% {
+    background-position: 1200px 0;
+  }
+}
+.ui.placeholder + .ui.placeholder {
+  margin-top: 2rem;
+}
+.ui.placeholder + .ui.placeholder {
+  -webkit-animation-delay: 0.15s;
+          animation-delay: 0.15s;
+}
+.ui.placeholder + .ui.placeholder + .ui.placeholder {
+  -webkit-animation-delay: 0.3s;
+          animation-delay: 0.3s;
+}
+.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
+  -webkit-animation-delay: 0.45s;
+          animation-delay: 0.45s;
+}
+.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
+  -webkit-animation-delay: 0.6s;
+          animation-delay: 0.6s;
+}
+.ui.placeholder,
+.ui.placeholder > :before,
+.ui.placeholder .image.header:after,
+.ui.placeholder .line,
+.ui.placeholder .line:after {
+  background-color: #FFFFFF;
+}
+.ui.placeholder.hidden {
+  display: none;
+}
+
+/* Image */
+.ui.placeholder .image:not(.header):not(.ui):not(.icon) {
+  height: 100px;
+}
+.ui.placeholder .square.image:not(.header) {
+  height: 0;
+  overflow: hidden;
+  
+/* 1/1 aspect ratio */
+  padding-top: 100%;
+}
+.ui.placeholder .rectangular.image:not(.header) {
+  height: 0;
+  overflow: hidden;
+  
+/* 4/3 aspect ratio */
+  padding-top: 75%;
+}
+
+/* Lines */
+.ui.placeholder .line {
+  position: relative;
+  height: 1em;
+}
+.ui.placeholder .line:before,
+.ui.placeholder .line:after {
+  top: 100%;
+  position: absolute;
+  content: '';
+  background-color: inherit;
+}
+.ui.placeholder .line:before {
+  left: 0;
+}
+.ui.placeholder .line:after {
+  right: 0;
+}
+
+/* Any Lines */
+.ui.placeholder .line {
+  margin-bottom: 0.58333333em;
+}
+.ui.placeholder .line:before,
+.ui.placeholder .line:after {
+  height: 0.58333333em;
+}
+.ui.placeholder .line:not(:first-child) {
+  margin-top: 0.58333333em;
+}
+
+/* Line Outdent */
+.ui.placeholder .line:nth-child(1):after {
+  width: 0;
+}
+.ui.placeholder .line:nth-child(2):after {
+  width: 50%;
+}
+.ui.placeholder .line:nth-child(3):after {
+  width: 10%;
+}
+.ui.placeholder .line:nth-child(4):after {
+  width: 35%;
+}
+.ui.placeholder .line:nth-child(5):after {
+  width: 65%;
+}
+
+/* Header Image + 2 Lines */
+.ui.placeholder .header {
+  position: relative;
+  overflow: hidden;
+}
+
+/* Header Line 1 & 2*/
+.ui.placeholder .header .line {
+  margin-bottom: 0.75em;
+}
+.ui.placeholder .header .line:before,
+.ui.placeholder .header .line:after {
+  height: 0.75em;
+}
+.ui.placeholder .header .line:not(:first-child) {
+  margin-top: 0.75em;
+}
+.ui.placeholder .header .line:after {
+  width: 20%;
+}
+.ui.placeholder .header .line:nth-child(2):after {
+  width: 60%;
+}
+/* Image Header */
+.ui.placeholder .image.header .line {
+  margin-left: 3em;
+}
+.ui.placeholder .image.header .line:before {
+  width: 0.83333333rem;
+}
+.ui.placeholder .image.header:after {
+  display: block;
+  height: 1em;
+  content: '';
+  margin-left: 3em;
+}
+
+/* Spacing */
+.ui.placeholder .image .line:first-child,
+.ui.placeholder .paragraph .line:first-child,
+.ui.placeholder .header .line:first-child {
+  height: 0.01px;
+}
+.ui.placeholder .image:not(:first-child):before,
+.ui.placeholder .paragraph:not(:first-child):before,
+.ui.placeholder .header:not(:first-child):before {
+  height: 1.66666667em;
+  content: '';
+  display: block;
+}
+
+/* Inverted Content Loader */
+.ui.inverted.placeholder {
+  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, 0.08)), color-stop(15%, rgba(255, 255, 255, 0.14)), color-stop(30%, rgba(255, 255, 255, 0.08)));
+  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.14) 15%, rgba(255, 255, 255, 0.08) 30%);
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.14) 15%, rgba(255, 255, 255, 0.08) 30%);
+}
+.ui.inverted.placeholder,
+.ui.inverted.placeholder > :before,
+.ui.inverted.placeholder .image.header:after,
+.ui.inverted.placeholder .line,
+.ui.inverted.placeholder .line:after {
+  background-color: #1B1C1D;
+}
+
+
+/*******************************
+            Variations
+*******************************/
+
+
+/*-------------------
+        Sizes
+--------------------*/
+
+.ui.placeholder .full.line.line.line:after {
+  width: 0;
+}
+.ui.placeholder .very.long.line.line.line:after {
+  width: 10%;
+}
+.ui.placeholder .long.line.line.line:after {
+  width: 35%;
+}
+.ui.placeholder .medium.line.line.line:after {
+  width: 50%;
+}
+.ui.placeholder .short.line.line.line:after {
+  width: 65%;
+}
+.ui.placeholder .very.short.line.line.line:after {
+  width: 80%;
+}
+
+/*-------------------
+          Fluid
+  --------------------*/
+
+.ui.fluid.placeholder {
+  max-width: none;
+}
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+

semantic/dist/components/placeholder.min.css

@@ -0,0 +1,9 @@
+/*!
+ * # Fomantic-UI 2.8.8 - Loader
+ * http://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */.ui.placeholder{position:static;overflow:hidden;-webkit-animation:placeholderShimmer 2s linear;animation:placeholderShimmer 2s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;background-color:#fff;background-image:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(0,0,0,.08)),color-stop(15%,rgba(0,0,0,.15)),color-stop(30%,rgba(0,0,0,.08)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.08) 0,rgba(0,0,0,.15) 15%,rgba(0,0,0,.08) 30%);background-image:linear-gradient(to right,rgba(0,0,0,.08) 0,rgba(0,0,0,.15) 15%,rgba(0,0,0,.08) 30%);background-size:1200px 100%;max-width:30rem}@-webkit-keyframes placeholderShimmer{0%{background-position:-1200px 0}100%{background-position:1200px 0}}@keyframes placeholderShimmer{0%{background-position:-1200px 0}100%{background-position:1200px 0}}.ui.placeholder+.ui.placeholder{margin-top:2rem}.ui.placeholder+.ui.placeholder{-webkit-animation-delay:.15s;animation-delay:.15s}.ui.placeholder+.ui.placeholder+.ui.placeholder{-webkit-animation-delay:.3s;animation-delay:.3s}.ui.placeholder+.ui.placeholder+.ui.placeholder+.ui.placeholder{-webkit-animation-delay:.45s;animation-delay:.45s}.ui.placeholder+.ui.placeholder+.ui.placeholder+.ui.placeholder+.ui.placeholder{-webkit-animation-delay:.6s;animation-delay:.6s}.ui.placeholder,.ui.placeholder .image.header:after,.ui.placeholder .line,.ui.placeholder .line:after,.ui.placeholder>:before{background-color:#fff}.ui.placeholder.hidden{display:none}.ui.placeholder .image:not(.header):not(.ui):not(.icon){height:100px}.ui.placeholder .square.image:not(.header){height:0;overflow:hidden;padding-top:100%}.ui.placeholder .rectangular.image:not(.header){height:0;overflow:hidden;padding-top:75%}.ui.placeholder .line{position:relative;height:1em}.ui.placeholder .line:after,.ui.placeholder .line:before{top:100%;position:absolute;content:'';background-color:inherit}.ui.placeholder .line:before{left:0}.ui.placeholder .line:after{right:0}.ui.placeholder .line{margin-bottom:.58333333em}.ui.placeholder .line:after,.ui.placeholder .line:before{height:.58333333em}.ui.placeholder .line:not(:first-child){margin-top:.58333333em}.ui.placeholder .line:nth-child(1):after{width:0}.ui.placeholder .line:nth-child(2):after{width:50%}.ui.placeholder .line:nth-child(3):after{width:10%}.ui.placeholder .line:nth-child(4):after{width:35%}.ui.placeholder .line:nth-child(5):after{width:65%}.ui.placeholder .header{position:relative;overflow:hidden}.ui.placeholder .header .line{margin-bottom:.75em}.ui.placeholder .header .line:after,.ui.placeholder .header .line:before{height:.75em}.ui.placeholder .header .line:not(:first-child){margin-top:.75em}.ui.placeholder .header .line:after{width:20%}.ui.placeholder .header .line:nth-child(2):after{width:60%}.ui.placeholder .image.header .line{margin-left:3em}.ui.placeholder .image.header .line:before{width:.83333333rem}.ui.placeholder .image.header:after{display:block;height:1em;content:'';margin-left:3em}.ui.placeholder .header .line:first-child,.ui.placeholder .image .line:first-child,.ui.placeholder .paragraph .line:first-child{height:.01px}.ui.placeholder .header:not(:first-child):before,.ui.placeholder .image:not(:first-child):before,.ui.placeholder .paragraph:not(:first-child):before{height:1.66666667em;content:'';display:block}.ui.inverted.placeholder{background-image:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,.08)),color-stop(15%,rgba(255,255,255,.14)),color-stop(30%,rgba(255,255,255,.08)));background-image:-webkit-linear-gradient(left,rgba(255,255,255,.08) 0,rgba(255,255,255,.14) 15%,rgba(255,255,255,.08) 30%);background-image:linear-gradient(to right,rgba(255,255,255,.08) 0,rgba(255,255,255,.14) 15%,rgba(255,255,255,.08) 30%)}.ui.inverted.placeholder,.ui.inverted.placeholder .image.header:after,.ui.inverted.placeholder .line,.ui.inverted.placeholder .line:after,.ui.inverted.placeholder>:before{background-color:#1b1c1d}.ui.placeholder .full.line.line.line:after{width:0}.ui.placeholder .very.long.line.line.line:after{width:10%}.ui.placeholder .long.line.line.line:after{width:35%}.ui.placeholder .medium.line.line.line:after{width:50%}.ui.placeholder .short.line.line.line:after{width:65%}.ui.placeholder .very.short.line.line.line:after{width:80%}.ui.fluid.placeholder{max-width:none}

src/api/blog.php

@@ -0,0 +1,48 @@
+<?php
+
+/**
+ * Blog
+ */
+
+namespace wishthis;
+
+$api           = true;
+$response      = array();
+$dateFormatter = new \IntlDateFormatter(
+    'en_GB',
+    \IntlDateFormatter::MEDIUM,
+    \IntlDateFormatter::NONE
+);
+
+ob_start();
+
+require '../../index.php';
+
+switch ($_SERVER['REQUEST_METHOD']) {
+    case 'GET':
+        $posts = Blog::getPosts();
+        $html  = '';
+
+        for ($i = 0; $i < 2; $i++) {
+            $post = $posts[$i];
+            $date = $dateFormatter->format(strtotime($post->date));
+
+            $html .= '<div class="item">';
+            $html .= '    <i class="large rss middle aligned icon"></i>';
+            $html .= '    <div class="content">';
+            $html .= '         <a class="header" href="/?page=post&slug=' . $post->slug . '">' . $post->title->rendered . '</a>';
+            $html .= '         <div class="description">' . sprintf(__('Posted on %s'), $date) . '</div>';
+            $html .= '    </div>';
+            $html .= '</div>';
+        }
+
+        $response['posts'] = $posts;
+        $response['html']  = $html;
+        break;
+}
+
+$response['warning'] = ob_get_clean();
+
+header('Content-type: application/json; charset=utf-8');
+echo json_encode($response);
+die();

src/assets/css/default/dark.css

@@ -407,4 +407,21 @@ body,
     .ui.steps .step .description {
         color: rgba(255, 255, 255, 0.87);
     }
+
+    /** Placeholder */
+    .ui.placeholder,
+    .ui.placeholder .image.header::after,
+    .ui.placeholder .line,
+    .ui.placeholder .line::after,
+    .ui.placeholder > ::before {
+        background-color: #000;
+    }
+    .ui.placeholder {
+        background-image: linear-gradient(
+            to right,
+            rgba(255, 255, 255, 0.08) 0,
+            rgba(255, 255, 255, 0.15) 15%,
+            rgba(255, 255, 255, 0.08) 30%
+        );
+    }
 }

src/assets/js/home.js

@@ -46,6 +46,18 @@ $(function() {
         observerWishlists.observe(document.querySelector('#wishlists'));
         observerUsers.observe(document.querySelector('#users'));
     });
+
+    /**
+     * News
+     */
+     fetch('/src/api/blog.php', {
+        method: 'GET'
+    })
+    .then(handleFetchError)
+    .then(handleFetchResponse)
+    .then(function(response) {
+        $('.ui.list.news').html(response.html);
+    });
 });
 
 function showStatistic(elementStatistic, amount, timeout) {

src/pages/home.php

@@ -85,9 +85,54 @@ $page->navigation();
                         </li>
                     </ul>
                 </div>
+
+                <div class="ui segment">
+                    <h2 class="ui header"><?= __('News') ?></h2>
+
+                    <div class="ui relaxed divided list news">
+
+                        <div class="item">
+                            <i class="large rss middle aligned icon"></i>
+                            <div class="content">
+                                <div class="ui placeholder">
+                                    <div class="paragraph">
+                                        <div class="full line"></div>
+                                        <div class="long line"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="item">
+                            <i class="large rss middle aligned icon"></i>
+                            <div class="content">
+                                <div class="ui placeholder">
+                                    <div class="paragraph">
+                                        <div class="short line"></div>
+                                        <div class="very short line"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="item">
+                            <i class="large rss middle aligned icon"></i>
+                            <div class="content">
+                                <div class="ui placeholder">
+                                    <div class="paragraph">
+                                        <div class="medium line"></div>
+                                        <div class="very long line"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
             </div>
 
             <div class="four wide column">
+
                 <div class="ui segment">
                     <h2 class="ui header"><?= __('Statistics') ?></h2>
 
@@ -111,6 +156,7 @@ $page->navigation();
                         </div>
                     </div>
                 </div>
+
             </div>
         </div>
     </div>