monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

refactor(client): use css modules

Browse source
This commit is contained in:
syuilo 2023-01-10 14:37:32 +09:00
parent 17fa5667b8
commit d0755b5ce8
1 changed files with 27 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
packages/frontend/src/ui/_common_/common.vue
View file

@ -9,8 +9,15 @@
<XUpload v-if="uploads.length > 0"/> <XUpload v-if="uploads.length > 0"/>
<TransitionGroup :name="$store.state.animation ? 'notification' : ''" tag="div" class="notifications"> <TransitionGroup
<XNotification v-for="notification in notifications" :key="notification.id" :notification="notification" class="notification"/> tag="div" :class="$style.notifications"
:move-class="$store.state.animation ? $style.transition_notification_move : ''"
:enter-active-class="$store.state.animation ? $style.transition_notification_enterActive : ''"
:leave-active-class="$store.state.animation ? $style.transition_notification_leaveActive : ''"
:enter-from-class="$store.state.animation ? $style.transition_notification_enterFrom : ''"
:leave-to-class="$store.state.animation ? $style.transition_notification_leaveTo : ''"
>
<XNotification v-for="notification in notifications" :key="notification.id" :notification="notification" :class="$style.notification"/>
</TransitionGroup> </TransitionGroup>
<XStreamIndicator/> <XStreamIndicator/>
@ -73,11 +80,14 @@ if ($i) {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.notification-move, .notification-enter-active, .notification-leave-active { .transition_notification_move,
.transition_notification_enterActive,
.transition_notification_leaveActive {
transition: opacity 0.3s, transform 0.3s !important; transition: opacity 0.3s, transform 0.3s !important;
} }
.notification-enter-from, .notification-leave-to { .transition_notification_enterFrom,
.transition_notification_leaveTo {
opacity: 0; opacity: 0;
transform: translateX(-250px); transform: translateX(-250px);
} }
@ -91,27 +101,29 @@ if ($i) {
padding: 0 32px; padding: 0 32px;
pointer-events: none; pointer-events: none;
container-type: inline-size; container-type: inline-size;
}
> .notification { .notification {
& + .notification { & + .notification {
margin-top: 8px; margin-top: 8px;
} }
} }
@media (max-width: 500px) { @media (max-width: 500px) {
.notifications {
top: initial; top: initial;
bottom: calc(var(--minBottomSpacing) + var(--margin)); bottom: calc(var(--minBottomSpacing) + var(--margin));
padding: 0 var(--margin); padding: 0 var(--margin);
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
}
> .notification { .notification {
& + .notification { & + .notification {
margin-top: 0; margin-top: 0;
margin-bottom: 8px; margin-bottom: 8px;
} }
} }
}
} }
</style> </style>