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}`"
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
class="alert-details"
:class="{ and: alert.and.fields, or: !alert.and.fields }"
@ -188,16 +158,48 @@
</span>
</div>
<div class="alert-actions">
<span
class="alert-id"
title="Alert ID"
>#{{ alert.id }}</span>
<div class="alert-meta">
<div class="alert-triggers">
<Icon
v-tooltip="alert.notify ? 'Notify in traxxx' : undefined"
icon="bell2"
:class="{ trigger: alert.notify }"
/>
<Icon
icon="bin"
@click="removeAlert(alert)"
/>
<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 class="alert-actions">
<span
class="alert-id"
title="Alert ID"
>#{{ alert.id }}</span>
<Icon
icon="bin"
@click="removeAlert(alert)"
/>
</div>
</div>
</li>
</ul>
@ -425,6 +427,10 @@ async function removeAlert(alert) {
}
}
.alert-meta {
display: flex;
}
.alert-actions {
display: flex;
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) {
.section-header {
padding: .5rem .5rem .5rem .5rem;