PrivateCoffee/wishthis
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add card style

Browse source
This commit is contained in:
grandeljay 2022-06-08 09:53:10 +02:00
parent b033332d83
commit a5d568492a
5 changed files with 149 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/assets/css/blog.css Normal file
View file

@ -0,0 +1,10 @@
.ui.card > .image img {
display: block;
width: 100%;
height: 100%;
max-height: 20vh;
object-fit: cover;
object-position: center;
}

58
src/assets/css/default.css
View file

@ -38,19 +38,19 @@ img {
}
/**
* Card
* Wishlist Card
*/
.ui.card {
.wishlist .ui.card {
--padding: 0.91666667em;
--buttonsHeight: calc(0.75em * 2 + 1em + 2 * var(--padding) - 2px);
}
.ui.fluid.card.stretch {
.wishlist .ui.fluid.card.stretch {
height: 100%;
}
/** Image */
.ui.card > .image > img.preview {
.wishlist .ui.card > .image > img.preview {
height: var(--wishPreviewHeight);
object-fit: cover;
@ -59,33 +59,33 @@ img {
}
@media (hover: hover) {
@media (prefers-reduced-motion: no-preference) {
.ui.card > .image > img.preview {
.wishlist .ui.card > .image > img.preview {
transition: height 0.2s linear, opacity 0.2s linear;
}
}
.ui.card:hover > .image > img.preview {
.wishlist .ui.card:hover > .image > img.preview {
height: calc(1em + 3 * var(--padding));
}
.ui.card:hover > .image > img.preview[src="/src/assets/img/no-image.svg"] {
.wishlist .ui.card:hover > .image > img.preview[src="/src/assets/img/no-image.svg"] {
object-fit: contain;
background-color: #f9f9f9;
}
}
/** Provider */
.ui.card > .image,
.ui.card > .image > span.provider {
.wishlist .ui.card > .image,
.wishlist .ui.card > .image > span.provider {
border-radius: .33333333rem .33333333rem 0 0;
}
.ui.card > .image > img.favicon,
.ui.card > .image > span.provider {
.wishlist .ui.card > .image > img.favicon,
.wishlist .ui.card > .image > span.provider {
position: absolute;
top: 0;
}
/** Favicon */
.ui.card > .image > img.favicon {
.wishlist .ui.card > .image > img.favicon {
padding: calc(var(--padding) * 1.5) var(--padding);
height: 1.25em;
@ -95,12 +95,12 @@ img {
z-index: 1;
}
.ui.card > .image > img.favicon + span.provider {
.wishlist .ui.card > .image > img.favicon + span.provider {
padding-left: 3em;
}
/** Provider name */
.ui.card > .image > span.provider {
.wishlist .ui.card > .image > span.provider {
display: block;
width: 100%;
padding: calc(var(--padding) * 1.5) var(--padding);
@ -116,13 +116,13 @@ img {
backdrop-filter: blur(4px);
}
@supports (backdrop-filter: blur(4px)) {
.ui.card > .image > span.provider {
.wishlist .ui.card > .image > span.provider {
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(4px);
}
}
@media (hover: hover) {
.ui.card > .image > span.provider {
.wishlist .ui.card > .image > span.provider {
transition: opacity 0.2s linear;
position: absolute;
@ -130,7 +130,7 @@ img {
opacity: 0;
}
.ui.card:hover > .image > span.provider {
.wishlist .ui.card:hover > .image > span.provider {
display: block;
opacity: 1;
@ -138,23 +138,23 @@ img {
}
/** Content */
.ui.card > .content:not(.extra) {
.wishlist .ui.card > .content:not(.extra) {
height: calc(0.75 * var(--wishPreviewHeight));
overflow: auto;
}
@media (hover: hover) {
@media (prefers-reduced-motion: no-preference) {
.ui.card > .content:not(.extra) {
.wishlist .ui.card > .content:not(.extra) {
transition: height 0.2s linear,
margin-bottom 0.2s linear;
}
}
.ui.card > .content:not(.extra) {
.wishlist .ui.card > .content:not(.extra) {
overflow: hidden;
}
.ui.card:hover > .content:not(.extra) {
.wishlist .ui.card:hover > .content:not(.extra) {
height: calc(1.5 * var(--wishPreviewHeight) - var(--buttonsHeight) - 4px);
margin-bottom: var(--buttonsHeight);
@ -162,12 +162,12 @@ img {
}
}
.ui.card > .content > .header {
.wishlist .ui.card > .content > .header {
max-height: calc(2 * 1.28571429em);
overflow: hidden;
}
.ui.card > .content > .description-fade {
.wishlist .ui.card > .content > .description-fade {
position: absolute;
right: 0;
bottom: 0;
@ -180,7 +180,7 @@ img {
}
/** Buttons */
.ui.card > .extra.buttons {
.wishlist .ui.card > .extra.buttons {
transition: 0.4s ease opacity;
display: flex;
@ -189,7 +189,7 @@ img {
z-index: 2;
}
@media (hover: hover) {
.ui.card > .extra.buttons {
.wishlist .ui.card > .extra.buttons {
transition: opacity 0.2s ease;
position: absolute;
@ -203,23 +203,23 @@ img {
margin-bottom: 0;
}
@media (prefers-reduced-motion: no-preference) {
.ui.card > .extra.buttons {
.wishlist .ui.card > .extra.buttons {
transition: opacity 0.2s ease,
bottom 0.2s ease;
}
}
.ui.card:hover > .extra.buttons {
.wishlist .ui.card:hover > .extra.buttons {
opacity: 1;
bottom: 0;
}
}
.ui.card > .extra.buttons > .button {
.wishlist .ui.card > .extra.buttons > .button {
flex: 1 1 auto;
}
.ui.card > .extra.buttons > :last-child {
.wishlist .ui.card > .extra.buttons > :last-child {
margin-right: 0;
}

82
src/classes/blog.php
View file

@ -8,17 +8,85 @@ namespace wishthis;
class Blog
{
private const URL = 'https://wishthis.online/src/blog';
private const ENDPOINT_POSTS = self::URL . '/wp-json/wp/v2/posts';
private const ENDPOINT_BASE = 'https://wishthis.online/src/blog/wp-json/wp/v2';
private const ENDPOINT_POSTS = self::ENDPOINT_BASE . '/posts';
private const ENDPOINT_MEDIA = self::ENDPOINT_BASE . '/media/%d';
private const ENDPOINT_CATEGORIES = self::ENDPOINT_BASE . '/categories/%d';
public static function getPosts(): array {
$posts_remote = file_get_contents(self::ENDPOINT_POSTS);
$posts = array();
private static function get(string $url): \stdClass|array
{
$postsRemote = file_get_contents($url);
$response = array();
if (false !== $posts_remote) {
$posts = json_decode($posts_remote);
if (false !== $postsRemote) {
$response = json_decode($postsRemote);
}
return $response;
}
public static function getPosts(): array
{
$posts = self::get(self::ENDPOINT_POSTS);
return $posts;
}
public static function getMedia(int $mediaID): \stdClass
{
$media = self::get(sprintf(self::ENDPOINT_MEDIA, $mediaID));
return $media;
}
public static function getMediaHTML(int $mediaID): string
{
$htmlPicture = '';
$media = self::getMedia($mediaID);
$mediaSizes = (array) $media->media_details->sizes;
uasort(
$mediaSizes,
function ($a, $b) {
return $a->width <=> $a->width;
}
);
$mediaSizes = (object) $mediaSizes;
ob_start();
?>
<picture>
<?php foreach ($mediaSizes as $size => $image) { ?>
<source srcset="<?= $image->source_url ?> <?= $image->width ?>w" type="<?= $image->mime_type ?>" media="(max-width: <?= $image->width ?>px)" />
<?php } ?>
<img src="<?= $media->source_url; ?>" alt="<?= $media->alt_text; ?>" />
</picture>
<?php
$htmlPicture .= ob_get_clean();
return $htmlPicture;
}
public static function getCategory(int $categoryID): \stdClass
{
$category = self::get(sprintf(self::ENDPOINT_CATEGORIES, $categoryID));
return $category;
}
public static function getCategoriesHTML(array $categoryIDs): string
{
$categoriesHTML = '';
$categoriesName = array();
foreach ($categoryIDs as $categoryID) {
$category = self::get(sprintf(self::ENDPOINT_CATEGORIES, $categoryID));
$categoriesName[] = $category->name;
}
$categoriesHTML = implode(', ', $categoriesName);
return $categoriesHTML;
}
}

2
src/classes/wishlist.php
View file

@ -92,7 +92,7 @@ class Wishlist
* Cards
*/
?>
<div class="ui three column doubling stackable grid">
<div class="ui three column doubling stackable grid wishlist">
<?php if (!empty($this->wishes)) { ?>
<?php foreach ($this->wishes as $wish) { ?>
<div class="column">

41
src/pages/blog.php
View file

@ -22,13 +22,40 @@ $posts = Blog::getPosts();
<?= $page->messages() ?>
<?php foreach ($posts as $post) { ?>
<div class="ui segment">
<h2 class="ui header"><?= $post->title->rendered ?></h2>
<div><?= $post->content->rendered ?></div>
</div>
<?php } ?>
<div class="ui two column doubling stackable grid">
<?php foreach ($posts as $post) { ?>
<?php
$dateFormatter = new \IntlDateFormatter(
$user->locale,
\IntlDateFormatter::MEDIUM,
\IntlDateFormatter::NONE
);
$mediaHTML = isset($post->featured_media) ? Blog::getMediaHTML($post->featured_media) : '';
$categoriesHTML = Blog::getCategoriesHTML($post->categories);
?>
<div class="column">
<div class="ui fluid card stretch">
<div class="image"><?= $mediaHTML ?></div>
<div class="content">
<div class="header"><?= $post->title->rendered ?></div>
<div class="meta">
<a><?= $categoriesHTML ?></a>
</div>
<div class="description"><?= $post->excerpt->rendered ?></div>
</div>
<div class="extra content">
<span class="right floated"><?= $dateFormatter->format(strtotime($post->date)) ?></span>
<!--
<span>
<i class="user icon"></i>
75 Friends
</span>
-->
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</main>