Add news to home
This commit is contained in:
grandeljay
parent
2c33e2b8c5
commit
0fc7e7ede2
11 changed files with 2447 additions and 1779 deletions
|
|
@ -27,9 +27,9 @@
|
|||
"grid",
|
||||
|
||||
"button",
|
||||
"checkbox",
|
||||
"calendar",
|
||||
"card",
|
||||
"checkbox",
|
||||
"dimmer",
|
||||
"divider",
|
||||
"dropdown",
|
||||
|
|
@ -45,6 +45,7 @@
|
|||
"menu",
|
||||
"message",
|
||||
"modal",
|
||||
"placeholder",
|
||||
"popup",
|
||||
"progress",
|
||||
"segment",
|
||||
|
|
|
|||
248
semantic/dist/components/placeholder.css
vendored
Normal file
248
semantic/dist/components/placeholder.css
vendored
Normal file
|
|
@ -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
|
||||
*******************************/
|
||||
|
||||
9
semantic/dist/components/placeholder.min.css
vendored
Normal file
9
semantic/dist/components/placeholder.min.css
vendored
Normal file
|
|
@ -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}
|
||||
2085
semantic/dist/semantic.css
vendored
2085
semantic/dist/semantic.css
vendored
File diff suppressed because it is too large
Load diff
1754
semantic/dist/semantic.js
vendored
1754
semantic/dist/semantic.js
vendored
File diff suppressed because it is too large
Load diff
2
semantic/dist/semantic.min.css
vendored
2
semantic/dist/semantic.min.css
vendored
File diff suppressed because one or more lines are too long
2
semantic/dist/semantic.min.js
vendored
2
semantic/dist/semantic.min.js
vendored
File diff suppressed because one or more lines are too long
48
src/api/blog.php
Normal file
48
src/api/blog.php
Normal file
|
|
@ -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();
|
||||
|
|
@ -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%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue