graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-10 08:03:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(client): use css modules

Browse source
This commit is contained in:
syuilo 2023-01-10 10:35:02 +09:00
parent ce528ff22e
commit d10e000883
1 changed files with 26 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
packages/frontend/src/pages/timeline.vue
View file

@ -2,15 +2,14 @@
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="headerTabs" :display-my-avatar="true"/></template> <template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="headerTabs" :display-my-avatar="true"/></template>
<MkSpacer :content-max="800"> <MkSpacer :content-max="800">
<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf"> <div ref="rootEl" v-hotkey.global="keymap">
<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _panel" style="margin-bottom: var(--margin);"/> <XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="_panel" style="margin-bottom: var(--margin);"/>
<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _panel" fixed style="margin-bottom: var(--margin);"/> <XPostForm v-if="$store.reactiveState.showFixedPostForm.value" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--margin);"/>
<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div> <div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
<div class="tl"> <div :class="$style.tl">
<XTimeline <XTimeline
ref="tl" :key="src" ref="tl" :key="src"
class="tl"
:src="src" :src="src"
:sound="true" :sound="true"
@queue="queueUpdated" @queue="queueUpdated"
@ -154,30 +153,28 @@ definePageMetadata(computed(() => ({
}))); })));
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.cmuxhskf { .new {
> .new { position: sticky;
position: sticky; top: calc(var(--stickyTop, 0px) + 16px);
top: calc(var(--stickyTop, 0px) + 16px); z-index: 1000;
z-index: 1000; width: 100%;
width: 100%;
> button { > button {
display: block; display: block;
margin: var(--margin) auto 0 auto; margin: var(--margin) auto 0 auto;
padding: 8px 16px; padding: 8px 16px;
border-radius: 32px; border-radius: 32px;
}
}
> .post-form {
border-radius: var(--radius);
}
> .tl {
background: var(--bg);
border-radius: var(--radius);
overflow: clip;
} }
} }
.postForm {
border-radius: var(--radius);
}
.tl {
background: var(--bg);
border-radius: var(--radius);
overflow: clip;
}
</style> </style>