Skip to content
Snippets Groups Projects
Commit 1c57983b authored by syuilo's avatar syuilo
Browse files

refactor

parent bdf08c8a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 113 additions and 154 deletions
packages/frontend/src/components/MkTagCloud.vue
+ 10
− 14
View file @ 1c57983b
<template>
<div ref="rootEl" class="meijqfqm">
<canvas :id="idForCanvas" ref="canvasEl" class="canvas" :width="width" height="300" @contextmenu.prevent="() => {}"></canvas>
<div :id="idForTags" ref="tagsEl" class="tags">
<div ref="rootEl" :class="$style.root">
<canvas :id="idForCanvas" ref="canvasEl" style="display: block;" :width="width" height="300" @contextmenu.prevent="() => {}"></canvas>
<div :id="idForTags" ref="tagsEl" :class="$style.tags">
<ul>
<slot></slot>
</ul>
......@@ -70,21 +70,17 @@ defineExpose({
});
</script>
<style lang="scss" scoped>
.meijqfqm {
<style lang="scss" module>
.root {
position: relative;
overflow: clip;
display: grid;
place-items: center;
}
> .canvas {
display: block;
}
> .tags {
position: absolute;
top: 999px;
left: 999px;
}
.tags {
position: absolute;
top: 999px;
left: 999px;
}
</style>
packages/frontend/src/components/form/slot.vue
+ 18
− 20
View file @ 1c57983b
<template>
<div class="adhpbeou">
<div class="label" @click="focus"><slot name="label"></slot></div>
<div class="content">
<div>
<div :class="$style.label" @click="focus"><slot name="label"></slot></div>
<div :class="$style.content">
<slot></slot>
</div>
<div class="caption"><slot name="caption"></slot></div>
<div :class="$style.caption"><slot name="caption"></slot></div>
</div>
</template>
......@@ -16,26 +16,24 @@ function focus() {
}
</script>
<style lang="scss" scoped>
.adhpbeou {
> .label {
font-size: 0.85em;
padding: 0 0 8px 0;
user-select: none;
<style lang="scss" module>
.label {
font-size: 0.85em;
padding: 0 0 8px 0;
user-select: none;
&:empty {
display: none;
}
&:empty {
display: none;
}
}
> .caption {
font-size: 0.85em;
padding: 8px 0 0 0;
color: var(--fgTransparentWeak);
.caption {
font-size: 0.85em;
padding: 8px 0 0 0;
color: var(--fgTransparentWeak);
&:empty {
display: none;
}
&:empty {
display: none;
}
}
</style>
packages/frontend/src/pages/pages.vue
+ 12
− 24
View file @ 1c57983b
......@@ -2,22 +2,28 @@
<MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="700">
<div v-if="tab === 'featured'" class="rknalgpo">
<div v-if="tab === 'featured'">
<MkPagination v-slot="{items}" :pagination="featuredPagesPagination">
<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
<div class="_gaps">
<MkPagePreview v-for="page in items" :key="page.id" :page="page"/>
</div>
</MkPagination>
</div>
<div v-else-if="tab === 'my'" class="rknalgpo my">
<div v-else-if="tab === 'my'" class="_gaps">
<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
<MkPagination v-slot="{items}" :pagination="myPagesPagination">
<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
<div class="_gaps">
<MkPagePreview v-for="page in items" :key="page.id" :page="page"/>
</div>
</MkPagination>
</div>
<div v-else-if="tab === 'liked'" class="rknalgpo">
<div v-else-if="tab === 'liked'">
<MkPagination v-slot="{items}" :pagination="likedPagesPagination">
<MkPagePreview v-for="like in items" :key="like.page.id" class="ckltabjg" :page="like.page"/>
<div class="_gaps">
<MkPagePreview v-for="like in items" :key="like.page.id" :page="like.page"/>
</div>
</MkPagination>
</div>
</MkSpacer>
......@@ -79,21 +85,3 @@ definePageMetadata(computed(() => ({
icon: 'ti ti-note',
})));
</script>
<style lang="scss" scoped>
.rknalgpo {
&.my .ckltabjg:first-child {
margin-top: 16px;
}
.ckltabjg:not(:last-child) {
margin-bottom: 8px;
}
@media (min-width: 500px) {
.ckltabjg:not(:last-child) {
margin-bottom: 16px;
}
}
}
</style>
packages/frontend/src/pages/settings/apps.vue
+ 23
− 23
View file @ 1c57983b
......@@ -9,11 +9,11 @@
</template>
<template #default="{items}">
<div class="_gaps">
<div v-for="token in items" :key="token.id" class="_panel bfomjevm">
<img v-if="token.iconUrl" class="icon" :src="token.iconUrl" alt=""/>
<div class="body">
<div class="name">{{ token.name }}</div>
<div class="description">{{ token.description }}</div>
<div v-for="token in items" :key="token.id" class="_panel" :class="$style.app">
<img v-if="token.iconUrl" :class="$style.appIcon" :src="token.iconUrl" alt=""/>
<div :class="$style.appBody">
<div :class="$style.appName">{{ token.name }}</div>
<div>{{ token.description }}</div>
<MkKeyValue oneline>
<template #key>{{ i18n.ts.installedDate }}</template>
<template #value><MkTime :time="token.createdAt"/></template>
......@@ -28,7 +28,7 @@
<li v-for="p in token.permission" :key="p">{{ i18n.t(`_permissions.${p}`) }}</li>
</ul>
</details>
<div class="actions">
<div>
<MkButton inline danger @click="revoke(token)"><i class="ti ti-trash"></i></MkButton>
</div>
</div>
......@@ -75,27 +75,27 @@ definePageMetadata({
});
</script>
<style lang="scss" scoped>
.bfomjevm {
<style lang="scss" module>
.app {
display: flex;
padding: 16px;
}
> .icon {
display: block;
flex-shrink: 0;
margin: 0 12px 0 0;
width: 50px;
height: 50px;
border-radius: 8px;
}
.appIcon {
display: block;
flex-shrink: 0;
margin: 0 12px 0 0;
width: 50px;
height: 50px;
border-radius: 8px;
}
> .body {
width: calc(100% - 62px);
position: relative;
.appBody {
width: calc(100% - 62px);
position: relative;
}
> .name {
font-weight: bold;
}
}
.appName {
font-weight: bold;
}
</style>
packages/frontend/src/pages/user/activity.vue
+ 0
− 4
View file @ 1c57983b
......@@ -34,7 +34,3 @@ const props = defineProps<{
}>();
</script>
<style lang="scss" scoped>
</style>
packages/frontend/src/pages/user/followers.vue
+ 0
− 3
View file @ 1c57983b
......@@ -56,6 +56,3 @@ definePageMetadata(computed(() => user ? {
avatar: user,
} : null));
</script>
<style lang="scss" scoped>
</style>
packages/frontend/src/pages/user/following.vue
+ 0
− 3
View file @ 1c57983b
......@@ -56,6 +56,3 @@ definePageMetadata(computed(() => user ? {
avatar: user,
} : null));
</script>
<style lang="scss" scoped>
</style>
packages/frontend/src/pages/user/index.vue
+ 13
− 26
View file @ 1c57983b
......@@ -2,21 +2,19 @@
<MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<div>
<Transition name="fade" mode="out-in">
<div v-if="user">
<XHome v-if="tab === 'home'" :user="user"/>
<XTimeline v-else-if="tab === 'notes'" :user="user"/>
<XActivity v-else-if="tab === 'activity'" :user="user"/>
<XAchievements v-else-if="tab === 'achievements'" :user="user"/>
<XReactions v-else-if="tab === 'reactions'" :user="user"/>
<XClips v-else-if="tab === 'clips'" :user="user"/>
<XLists v-else-if="tab === 'lists'" :user="user"/>
<XPages v-else-if="tab === 'pages'" :user="user"/>
<XGallery v-else-if="tab === 'gallery'" :user="user"/>
</div>
<MkError v-else-if="error" @retry="fetchUser()"/>
<MkLoading v-else/>
</Transition>
<div v-if="user">
<XHome v-if="tab === 'home'" :user="user"/>
<XTimeline v-else-if="tab === 'notes'" :user="user"/>
<XActivity v-else-if="tab === 'activity'" :user="user"/>
<XAchievements v-else-if="tab === 'achievements'" :user="user"/>
<XReactions v-else-if="tab === 'reactions'" :user="user"/>
<XClips v-else-if="tab === 'clips'" :user="user"/>
<XLists v-else-if="tab === 'lists'" :user="user"/>
<XPages v-else-if="tab === 'pages'" :user="user"/>
<XGallery v-else-if="tab === 'gallery'" :user="user"/>
</div>
<MkError v-else-if="error" @retry="fetchUser()"/>
<MkLoading v-else/>
</div>
</MkStickyContainer>
</template>
......@@ -118,14 +116,3 @@ definePageMetadata(computed(() => user ? {
},
} : null));
</script>
<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.125s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>
packages/frontend/src/widgets/WidgetClock.vue
+ 37
− 37
View file @ 1c57983b
<template>
<MkContainer :naked="widgetProps.transparent" :showHeader="false" data-cy-mkw-clock class="mkw-clock">
<div class="vubelbmv" :class="widgetProps.size">
<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label a abbrev">{{ tzAbbrev }}</div>
<MkContainer :naked="widgetProps.transparent" :showHeader="false" data-cy-mkw-clock>
<div :class="[$style.root, $style[widgetProps.size]]">
<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace" :class="[$style.label, $style.a]">{{ tzAbbrev }}</div>
<MkAnalogClock
class="clock"
:class="$style.clock"
:thickness="widgetProps.thickness"
:offset="tzOffset"
:graduations="widgetProps.graduations"
......@@ -11,8 +11,8 @@
:twentyfour="widgetProps.twentyFour"
:sAnimation="widgetProps.sAnimation"
/>
<MkDigitalClock v-if="widgetProps.label === 'time' || widgetProps.label === 'timeAndTz'" class="_monospace label c time" :showS="false" :offset="tzOffset"/>
<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label d offset">{{ tzOffsetLabel }}</div>
<MkDigitalClock v-if="widgetProps.label === 'time' || widgetProps.label === 'timeAndTz'" :class="[$style.label, $style.c]" class="_monospace" :showS="false" :offset="tzOffset"/>
<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace" :class="[$style.label, $style.d]">{{ tzOffsetLabel }}</div>
</div>
</MkContainer>
</template>
......@@ -140,39 +140,10 @@ defineExpose<WidgetComponentExpose>({
});
</script>
<style lang="scss" scoped>
.vubelbmv {
<style lang="scss" module>
.root {
position: relative;
> .label {
position: absolute;
opacity: 0.7;
&.a {
top: 14px;
left: 14px;
}
&.b {
top: 14px;
right: 14px;
}
&.c {
bottom: 14px;
left: 14px;
}
&.d {
bottom: 14px;
right: 14px;
}
}
> .clock {
margin: auto;
}
&.small {
padding: 12px;
......@@ -197,4 +168,33 @@ defineExpose<WidgetComponentExpose>({
}
}
}
.label {
position: absolute;
opacity: 0.7;
&.a {
top: 14px;
left: 14px;
}
&.b {
top: 14px;
right: 14px;
}
&.c {
bottom: 14px;
left: 14px;
}
&.d {
bottom: 14px;
right: 14px;
}
}
.clock {
margin: auto;
}
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment