mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-23 09:45:46 +03:00
Code Issues Projects Releases Packages Wiki Activity

Replace ALT badge with info icon

Browse source 
ALT is just… too technical.
This commit is contained in:
Lim Chee Aun 2023-02-11 22:36:19 +08:00
parent 2f2e343115
commit 61edcb2115
4 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/app.css
View file

@ -972,6 +972,12 @@ button.carousel-dot:is(.active, [disabled].active) {
mask-image: linear-gradient(to bottom, transparent 0%, black 10px); mask-image: linear-gradient(to bottom, transparent 0%, black 10px);
} }
/* ICON */
.icon {
flex-shrink: 0;
}
/* TAG */ /* TAG */
.tag { .tag {

1
src/components/icon.jsx
View file

@ -52,6 +52,7 @@ const ICONS = {
list: 'mingcute:list-check-line', list: 'mingcute:list-check-line',
search: 'mingcute:search-2-line', search: 'mingcute:search-2-line',
hashtag: 'mingcute:hashtag-line', hashtag: 'mingcute:hashtag-line',
info: 'mingcute:information-line',
}; };
const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js'); const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');

2
src/components/media-modal.jsx
View file

@ -123,7 +123,7 @@ function MediaModal({
setShowMediaAlt(media.description); setShowMediaAlt(media.description);
}} }}
> >
<span class="tag">ALT</span>{' '} <Icon icon="info" />
<span class="media-alt-desc">{media.description}</span> <span class="media-alt-desc">{media.description}</span>
</button> </button>
)} )}

6
src/components/status.css
View file

@ -532,13 +532,13 @@
text-align: left; text-align: left;
border-radius: 8px; border-radius: 8px;
color: var(--text-color); color: var(--text-color);
padding: 4px 8px 4px 4px; padding: 4px 8px;
border: 1px solid var(--outline-color); border: 1px solid var(--outline-color);
box-shadow: 0 4px 16px var(--outline-color); box-shadow: 0 4px 16px var(--outline-color);
max-width: min(40em, calc(100% - 32px)); max-width: min(40em, calc(100% - 32px));
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 8px;
font-size: 90%; font-size: 90%;
} }
.carousel-item button.media-alt .media-alt-desc { .carousel-item button.media-alt .media-alt-desc {
@ -550,7 +550,7 @@
box-orient: vertical; box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
line-clamp: 2; line-clamp: 2;
line-height: 1.2; line-height: 1.4;
} }
.carousel-item button.media-alt[hidden] { .carousel-item button.media-alt[hidden] {
opacity: 0; opacity: 0;