nostr/primal-web-app
1
0
Fork 0
mirror of https://github.com/PrimalHQ/primal-web-app.git synced 2024-09-30 00:41:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Style image previews

Browse Source
This commit is contained in:
Bojan Mojsilovic 2024-05-31 17:46:49 +02:00
parent d32d2af392
commit 26d8885b9c
8 changed files with 47 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/reads_image_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
src/assets/images/reads_image_light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

22
src/components/ArticlePreview/ArticlePreview.module.scss
View File

@ -106,10 +106,21 @@
.image {
min-width: 164px;
height: fit-content;
border: 1px solid var(--devider);
border-radius: 4px;
overflow: hidden;
img {
width: 164px;
object-fit: scale-down;
}
.placeholderImage {
width: 164px;
height: 118px;
background-image: var(--reads-placeholder-image);
background-size: contain;
}
}
}
@ -162,10 +173,21 @@
}
.image {
min-width: 100px;
height: fit-content;
border: 1px solid var(--devider);
border-radius: 4px;
overflow: hidden;
img {
width: 100px;
object-fit: scale-down;
}
.placeholderImage {
width: 100px;
height: 70px;
background-image: var(--reads-placeholder-image);
background-size: contain;
}
}
}

5
src/components/ArticlePreview/ArticlePreview.tsx
View File

@ -249,7 +249,12 @@ const ArticlePreview: Component<{
</div>
</div>
<div class={styles.image}>
<Show
when={props.article.image}
fallback={<div class={styles.placeholderImage}></div>}
>
<img src={props.article.image} />
</Show>
</div>
</div>

7
src/components/ArticlePreview/ArticleShort.tsx
View File

@ -49,12 +49,15 @@ const ArticlePreview: Component<{
</div>
</div>
</div>
<Show when={props.article.image.length > 0}>
<div class={styles.image}>
<Show
when={props.article.image}
fallback={<div class={styles.placeholderImage}></div>}
>
<img src={props.article.image} />
</div>
</Show>
</div>
</div>
</A>
);
}

4
src/components/HomeSidebar/HomeSidebar.module.scss
View File

@ -69,6 +69,10 @@
.readsSidebar {
.section {
margin-bottom: 28px;
>a:last-child {
border-bottom: none;
}
}
.topic {

5
src/index.scss
View File

@ -144,7 +144,10 @@ body::after{
url(./assets/icons/nav/settings.svg)
url(./assets/icons/nav/settings_selected.svg)
url(./assets/icons/nav/long.svg)
url(./assets/icons/nav/long_selected.svg);
url(./assets/icons/nav/long_selected.svg)
url(./assets/images/reads_image.svg)
url(./assets/images/reads_image_dark.png)
url(./assets/images/reads_image_light.png);
}
.reply_icon {

4
src/palette.scss
View File

@ -62,6 +62,7 @@
--icon-network-popular: url('./assets/icons/network_popular.svg');
--icon-network-trending: url('./assets/icons/network_trending.svg');
--reads-placeholder-image: url('./assets/images/reads_image_dark.png');
select {
background-color: var(--background-site);
@ -133,6 +134,7 @@
--icon-network-popular: url('./assets/icons/network_popular.svg');
--icon-network-trending: url('./assets/icons/network_trending.svg');
--reads-placeholder-image: url('./assets/images/reads_image_dark.png');
select {
background-color: var(--background-site);
@ -203,6 +205,7 @@
--icon-network-popular: url('./assets/icons/network_popular.svg');
--icon-network-trending: url('./assets/icons/network_trending.svg');
--reads-placeholder-image: url('./assets/images/reads_image_light.png');
select {
background-color: var(--background-site);
@ -274,6 +277,7 @@
--icon-network-popular: url('./assets/icons/network_popular.svg');
--icon-network-trending: url('./assets/icons/network_trending.svg');
--reads-placeholder-image: url('./assets/images/reads_image_light.png');
select {
background-color: var(--background-site);