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

refactor

Browse source
This commit is contained in:
syuilo 2023-05-19 16:25:48 +09:00
parent 95470a40a7
commit 4a703d7cf6
3 changed files with 73 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
packages/frontend/src/pages/antenna-timeline.vue
View file

@ -1,19 +1,20 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<div ref="rootEl" v-hotkey.global="keymap" class="tqmomfks"> <MkSpacer :contentMax="800">
<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div> <div ref="rootEl" v-hotkey.global="keymap">
<div class="tl"> <div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
<MkTimeline <div :class="$style.tl">
ref="tlEl" :key="antennaId" <MkTimeline
class="tl" ref="tlEl" :key="antennaId"
src="antenna" src="antenna"
:antenna="antennaId" :antenna="antennaId"
:sound="true" :sound="true"
@queue="queueUpdated" @queue="queueUpdated"
/> />
</div>
</div> </div>
</div> </MkSpacer>
</MkStickyContainer> </MkStickyContainer>
</template> </template>
@ -89,36 +90,29 @@ definePageMetadata(computed(() => antenna ? {
} : null)); } : null));
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.tqmomfks { .new {
padding: var(--margin); position: sticky;
top: calc(var(--stickyTop, 0px) + 16px);
z-index: 1000;
width: 100%;
margin: calc(-0.675em - 8px) 0;
> .new { &:first-child {
position: sticky; margin-top: calc(-0.675em - 8px - var(--margin));
top: calc(var(--stickyTop, 0px) + 16px);
z-index: 1000;
width: 100%;
margin: calc(-0.675em - 8px - var(--margin)) 0 calc(-0.675em - 8px);
> button {
display: block;
margin: var(--margin) auto 0 auto;
padding: 8px 16px;
border-radius: 32px;
}
}
> .tl {
background: var(--bg);
border-radius: var(--radius);
overflow: clip;
} }
} }
@container (min-width: 800px) { .newButton {
.tqmomfks { display: block;
max-width: 800px; margin: var(--margin) auto 0 auto;
margin: 0 auto; padding: 8px 16px;
} border-radius: 32px;
}
.tl {
background: var(--bg);
border-radius: var(--radius);
overflow: clip;
} }
</style> </style>

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

@ -6,7 +6,7 @@
<XTutorial v-if="$i && defaultStore.reactiveState.timelineTutorial.value != -1" class="_panel" style="margin-bottom: var(--margin);"/> <XTutorial v-if="$i && defaultStore.reactiveState.timelineTutorial.value != -1" class="_panel" style="margin-bottom: var(--margin);"/>
<MkPostForm v-if="defaultStore.reactiveState.showFixedPostForm.value" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--margin);"/> <MkPostForm v-if="defaultStore.reactiveState.showFixedPostForm.value" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--margin);"/>
<div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div> <div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
<div :class="$style.tl"> <div :class="$style.tl">
<MkTimeline <MkTimeline
ref="tlComponent" ref="tlComponent"
@ -187,13 +187,13 @@ definePageMetadata(computed(() => ({
&:first-child { &:first-child {
margin-top: calc(-0.675em - 8px - var(--margin)); margin-top: calc(-0.675em - 8px - var(--margin));
} }
}
> button { .newButton {
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;
}
} }
.postForm { .postForm {

72
packages/frontend/src/pages/user-list-timeline.vue
View file

@ -1,19 +1,20 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<div ref="rootEl" class="eqqrhokj"> <MkSpacer :contentMax="800">
<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div> <div ref="rootEl">
<div class="tl"> <div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
<MkTimeline <div :class="$style.tl">
ref="tlEl" :key="listId" <MkTimeline
class="tl" ref="tlEl" :key="listId"
src="list" src="list"
:list="listId" :list="listId"
:sound="true" :sound="true"
@queue="queueUpdated" @queue="queueUpdated"
/> />
</div>
</div> </div>
</div> </MkSpacer>
</MkStickyContainer> </MkStickyContainer>
</template> </template>
@ -82,36 +83,29 @@ definePageMetadata(computed(() => list ? {
} : null)); } : null));
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.eqqrhokj { .new {
padding: var(--margin); position: sticky;
top: calc(var(--stickyTop, 0px) + 16px);
z-index: 1000;
width: 100%;
margin: calc(-0.675em - 8px) 0;
> .new { &:first-child {
position: sticky; margin-top: calc(-0.675em - 8px - var(--margin));
top: calc(var(--stickyTop, 0px) + 16px);
z-index: 1000;
width: 100%;
margin: calc(-0.675em - 8px - var(--margin)) 0 calc(-0.675em - 8px);
> button {
display: block;
margin: var(--margin) auto 0 auto;
padding: 8px 16px;
border-radius: 32px;
}
}
> .tl {
background: var(--bg);
border-radius: var(--radius);
overflow: clip;
} }
} }
@container (min-width: 800px) { .newButton {
.eqqrhokj { display: block;
max-width: 800px; margin: var(--margin) auto 0 auto;
margin: 0 auto; padding: 8px 16px;
} border-radius: 32px;
}
.tl {
background: var(--bg);
border-radius: var(--radius);
overflow: clip;
} }
</style> </style>