From 4a703d7cf63ae799e1bec020b790bea3a431ff62 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 19 May 2023 16:25:48 +0900
Subject: [PATCH] refactor
---
.../frontend/src/pages/antenna-timeline.vue | 72 +++++++++----------
packages/frontend/src/pages/timeline.vue | 14 ++--
.../frontend/src/pages/user-list-timeline.vue | 72 +++++++++----------
3 files changed, 73 insertions(+), 85 deletions(-)
diff --git a/packages/frontend/src/pages/antenna-timeline.vue b/packages/frontend/src/pages/antenna-timeline.vue
index 62e8178af1..a22714791f 100644
--- a/packages/frontend/src/pages/antenna-timeline.vue
+++ b/packages/frontend/src/pages/antenna-timeline.vue
@@ -1,19 +1,20 @@
<template>
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
- <div ref="rootEl" v-hotkey.global="keymap" class="tqmomfks">
- <div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
- <div class="tl">
- <MkTimeline
- ref="tlEl" :key="antennaId"
- class="tl"
- src="antenna"
- :antenna="antennaId"
- :sound="true"
- @queue="queueUpdated"
- />
+ <MkSpacer :contentMax="800">
+ <div ref="rootEl" v-hotkey.global="keymap">
+ <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">
+ <MkTimeline
+ ref="tlEl" :key="antennaId"
+ src="antenna"
+ :antenna="antennaId"
+ :sound="true"
+ @queue="queueUpdated"
+ />
+ </div>
</div>
- </div>
+ </MkSpacer>
</MkStickyContainer>
</template>
@@ -89,36 +90,29 @@ definePageMetadata(computed(() => antenna ? {
} : null));
</script>
-<style lang="scss" scoped>
-.tqmomfks {
- padding: var(--margin);
+<style lang="scss" module>
+.new {
+ position: sticky;
+ top: calc(var(--stickyTop, 0px) + 16px);
+ z-index: 1000;
+ width: 100%;
+ margin: calc(-0.675em - 8px) 0;
- > .new {
- position: sticky;
- 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;
+ &:first-child {
+ margin-top: calc(-0.675em - 8px - var(--margin));
}
}
-@container (min-width: 800px) {
- .tqmomfks {
- max-width: 800px;
- margin: 0 auto;
- }
+.newButton {
+ display: block;
+ margin: var(--margin) auto 0 auto;
+ padding: 8px 16px;
+ border-radius: 32px;
+}
+
+.tl {
+ background: var(--bg);
+ border-radius: var(--radius);
+ overflow: clip;
}
</style>
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
index 2c971e9cab..a441c6f728 100644
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@@ -6,7 +6,7 @@
<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);"/>
- <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">
<MkTimeline
ref="tlComponent"
@@ -187,13 +187,13 @@ definePageMetadata(computed(() => ({
&:first-child {
margin-top: calc(-0.675em - 8px - var(--margin));
}
+}
- > button {
- display: block;
- margin: var(--margin) auto 0 auto;
- padding: 8px 16px;
- border-radius: 32px;
- }
+.newButton {
+ display: block;
+ margin: var(--margin) auto 0 auto;
+ padding: 8px 16px;
+ border-radius: 32px;
}
.postForm {
diff --git a/packages/frontend/src/pages/user-list-timeline.vue b/packages/frontend/src/pages/user-list-timeline.vue
index acf7ea9b2c..f66670e1f6 100644
--- a/packages/frontend/src/pages/user-list-timeline.vue
+++ b/packages/frontend/src/pages/user-list-timeline.vue
@@ -1,19 +1,20 @@
<template>
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
- <div ref="rootEl" class="eqqrhokj">
- <div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
- <div class="tl">
- <MkTimeline
- ref="tlEl" :key="listId"
- class="tl"
- src="list"
- :list="listId"
- :sound="true"
- @queue="queueUpdated"
- />
+ <MkSpacer :contentMax="800">
+ <div ref="rootEl">
+ <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">
+ <MkTimeline
+ ref="tlEl" :key="listId"
+ src="list"
+ :list="listId"
+ :sound="true"
+ @queue="queueUpdated"
+ />
+ </div>
</div>
- </div>
+ </MkSpacer>
</MkStickyContainer>
</template>
@@ -82,36 +83,29 @@ definePageMetadata(computed(() => list ? {
} : null));
</script>
-<style lang="scss" scoped>
-.eqqrhokj {
- padding: var(--margin);
+<style lang="scss" module>
+.new {
+ position: sticky;
+ top: calc(var(--stickyTop, 0px) + 16px);
+ z-index: 1000;
+ width: 100%;
+ margin: calc(-0.675em - 8px) 0;
- > .new {
- position: sticky;
- 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;
+ &:first-child {
+ margin-top: calc(-0.675em - 8px - var(--margin));
}
}
-@container (min-width: 800px) {
- .eqqrhokj {
- max-width: 800px;
- margin: 0 auto;
- }
+.newButton {
+ display: block;
+ margin: var(--margin) auto 0 auto;
+ padding: 8px 16px;
+ border-radius: 32px;
+}
+
+.tl {
+ background: var(--bg);
+ border-radius: var(--radius);
+ overflow: clip;
}
</style>