DebaucheryLibrarian
/
traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Improved alert list mobile layout.

This commit is contained in:
DebaucheryLibrarian 2024-09-01 00:43:21 +02:00
parent 4f4ff0b4bc
commit 8fba01dbdd
1 changed files with 56 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
pages/users/@username/+Page.vue
View File

@ -71,36 +71,6 @@
:key="`alert-${alert.id}`" :key="`alert-${alert.id}`"
class="alert" class="alert"
> >
<div class="alert-triggers">
<Icon
v-tooltip="alert.notify ? 'Notify in traxxx' : undefined"
icon="bell2"
:class="{ trigger: alert.notify }"
/>
<Icon
v-if="alert.stashes.some((stash) => !stash.isPrimary)"
v-tooltip="`Add to ${alert.stashes.map((stash) => stash.name).join(', ')}`"
icon="folder-heart"
class="trigger"
/>
<Icon
v-else
v-tooltip="alert.stashes.length > 0 ? 'Add to Favorites' : undefined"
icon="heart7"
:class="{ trigger: alert.stashes.length > 0 }"
/>
<!--
<Icon
icon="envelop5"
title="E-mail me"
:class="{ trigger: alert.email }"
/>
-->
</div>
<div <div
class="alert-details" class="alert-details"
:class="{ and: alert.and.fields, or: !alert.and.fields }" :class="{ and: alert.and.fields, or: !alert.and.fields }"
@ -188,16 +158,48 @@
</span> </span>
</div> </div>
<div class="alert-actions"> <div class="alert-meta">
<span <div class="alert-triggers">
class="alert-id" <Icon
title="Alert ID" v-tooltip="alert.notify ? 'Notify in traxxx' : undefined"
>#{{ alert.id }}</span> icon="bell2"
:class="{ trigger: alert.notify }"
/>
<Icon <Icon
icon="bin" v-if="alert.stashes.some((stash) => !stash.isPrimary)"
@click="removeAlert(alert)" v-tooltip="`Add to ${alert.stashes.map((stash) => stash.name).join(', ')}`"
/> icon="folder-heart"
class="trigger"
/>
<Icon
v-else
v-tooltip="alert.stashes.length > 0 ? 'Add to Favorites' : undefined"
icon="heart7"
:class="{ trigger: alert.stashes.length > 0 }"
/>
<!--
<Icon
icon="envelop5"
title="E-mail me"
:class="{ trigger: alert.email }"
/>
-->
</div>
<div class="alert-actions">
<span
class="alert-id"
title="Alert ID"
>#{{ alert.id }}</span>
<Icon
icon="bin"
@click="removeAlert(alert)"
/>
</div>
</div> </div>
</li> </li>
</ul> </ul>
@ -425,6 +427,10 @@ async function removeAlert(alert) {
} }
} }
.alert-meta {
display: flex;
}
.alert-actions { .alert-actions {
display: flex; display: flex;
align-items: center; align-items: center;
@ -461,6 +467,17 @@ async function removeAlert(alert) {
} }
} }
@media(--small-20) {
.alert {
flex-direction: column;
}
.alert-meta {
padding: .5rem 0 .75rem 0;
justify-content: flex-end;
}
}
@media(--small-30) { @media(--small-30) {
.section-header { .section-header {
padding: .5rem .5rem .5rem .5rem; padding: .5rem .5rem .5rem .5rem;