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

Fix svg wish images

Browse source
This commit is contained in:
grandeljay 2022-06-17 09:06:05 +02:00
parent 55170bbad4
commit d5b9ad0f7d
2 changed files with 12 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,7 +3,6 @@
:root { :root {
--lineHeight: 1.4285; --lineHeight: 1.4285;
--wishPreviewHeight: min(30vh, 224px); --wishPreviewHeight: min(30vh, 224px);
--themeTransitionDuration: 2s;
} }
html { html {
@ -71,25 +70,24 @@ figure {
} }
/** Image */ /** Image */
svg#no-image, svg,
.wishlist .ui.card > .image > svg { .wishlist .ui.card > .image > svg {
color: #f0f0f0; color: #f0f0f0;
background-color: #f4f4f4; background-color: #f4f4f4;
} }
.wishlist .ui.card > .image > svg { .wishlist .ui.card > .image > svg {
transition: var(--themeTransitionDuration) ease color,
var(--themeTransitionDuration) ease background-color;
width: 100%; width: 100%;
height: var(--wishPreviewHeight); height: var(--wishPreviewHeight);
padding: 15% 10%;
box-sizing: border-box; box-sizing: border-box;
border-radius: inherit; border-radius: inherit;
} }
.wishlist .ui.card > .image > svg#no-image {
padding: 15% 10%;
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
svg#no-image, svg,
.wishlist .ui.card > .image > svg { .wishlist .ui.card > .image > svg {
color: #0f0f0f; color: #0f0f0f;
background-color: #0b0b0b; background-color: #0b0b0b;
@ -98,24 +96,19 @@ svg#no-image,
@media (hover: hover) { @media (hover: hover) {
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
.wishlist .ui.card > .image > svg { .wishlist .ui.card > .image > svg {
transition: var(--themeTransitionDuration) ease color, transition: 0.2s linear height,
var(--themeTransitionDuration) ease background-color,
0.2s linear height,
0.2s linear padding, 0.2s linear padding,
0.2s linear opacity; 0.2s linear opacity;
} }
} }
.wishlist .ui.card:hover > .image > svg { .wishlist .ui.card:hover > .image > svg {
height: calc(1em + 3 * var(--padding) - 5px); height: calc(1em + 3 * var(--padding) - 5px);
padding: 0; padding: 0 !important;
opacity: 0; opacity: 0;
} }
} }
.wishlist .ui.card > .image > img.preview { .wishlist .ui.card > .image > img.preview {
transition: var(--themeTransitionDuration) ease filter,
var(--themeTransitionDuration) ease background-color;
height: var(--wishPreviewHeight); height: var(--wishPreviewHeight);
object-fit: cover; object-fit: cover;
@ -174,8 +167,6 @@ svg#no-image,
/** Provider name */ /** Provider name */
.wishlist .ui.card > .image > span.provider { .wishlist .ui.card > .image > span.provider {
transition: var(--themeTransitionDuration) ease background-color;
display: block; display: block;
width: 100%; width: 100%;
padding: calc(var(--padding) * 1.5) var(--padding); padding: calc(var(--padding) * 1.5) var(--padding);
@ -414,8 +405,6 @@ p .ui.horizontal.label {
* Filter * Filter
*/ */
.ui.basic.white.button { .ui.basic.white.button {
transition: var(--themeTransitionDuration) ease background-color;
color: inherit; color: inherit;
background-color: #fff; background-color: #fff;
} }

4
src/classes/wish.php
View file

@ -182,7 +182,11 @@ class Wish
<?php if ($this->image) { ?> <?php if ($this->image) { ?>
<?php if ('svg' === pathinfo($this->image, PATHINFO_EXTENSION)) { ?> <?php if ('svg' === pathinfo($this->image, PATHINFO_EXTENSION)) { ?>
<?php if (file_exists(ROOT . $this->image)) { ?>
<?= file_get_contents(ROOT . $this->image) ?> <?= file_get_contents(ROOT . $this->image) ?>
<?php } else { ?>
<?= file_get_contents($this->image) ?>
<?php } ?>
<?php } else { ?> <?php } else { ?>
<img class="preview" src="<?= $this->image ?>" loading="lazy" /> <img class="preview" src="<?= $this->image ?>" loading="lazy" />
<?php } ?> <?php } ?>