mirror of
https://iceshrimp.dev/limepotato/jormungandr-bite.git
synced 2024-11-22 18:07:31 -07:00
refactor clinet
This commit is contained in:
syuilo
parent
0b8a8443d9
commit
7ab5aa9f91
15 changed files with 171 additions and 244 deletions
|
|
@ -10,7 +10,7 @@
|
|||
</span>
|
||||
<button class="_button" @click="$refs.modal.close()"><i class="fas fa-times"></i></button>
|
||||
</div>
|
||||
<div class="body _fitSide_">
|
||||
<div class="body">
|
||||
<keep-alive>
|
||||
<component :is="component" v-bind="props" :ref="changePage"/>
|
||||
</keep-alive>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<template #headerLeft>
|
||||
<button v-if="history.length > 0" class="_button" @click="back()" v-tooltip="$ts.goBack"><i class="fas fa-arrow-left"></i></button>
|
||||
</template>
|
||||
<div class="yrolvcoq _fitSide_">
|
||||
<div class="yrolvcoq">
|
||||
<component :is="component" v-bind="props" :ref="changePage"/>
|
||||
</div>
|
||||
</XWindow>
|
||||
|
|
|
|||
|
|
@ -153,10 +153,4 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
._fitSide_ .ssazuxis {
|
||||
> header {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -42,8 +42,4 @@ export default defineComponent({
|
|||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
._fitSide_ .fpezltsf {
|
||||
border-radius: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -343,7 +343,6 @@ export default defineComponent({
|
|||
> .main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
--baseContentWidth: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
<div>
|
||||
<MkHeader :info="header"/>
|
||||
|
||||
<div class="yweeujhr _root" v-size="{ max: [400] }">
|
||||
<MkSpacer :content-max="800">
|
||||
<div class="yweeujhr" v-size="{ max: [400] }">
|
||||
<MkButton @click="start" primary class="start"><i class="fas fa-plus"></i> {{ $ts.startMessaging }}</MkButton>
|
||||
|
||||
<div class="history" v-if="messages.length > 0">
|
||||
|
|
@ -37,6 +38,7 @@
|
|||
</div>
|
||||
<MkLoading v-if="fetching"/>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -177,7 +179,7 @@ export default defineComponent({
|
|||
.yweeujhr {
|
||||
|
||||
> .start {
|
||||
margin: var(--margin) auto var(--margin) auto;
|
||||
margin: 0 auto var(--margin) auto;
|
||||
}
|
||||
|
||||
> .history {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="fcuexfpr">
|
||||
<div class="_root">
|
||||
<MkSpacer :content-max="800">
|
||||
<div class="fcuexfpr">
|
||||
<transition name="fade" mode="out-in">
|
||||
<div v-if="note" class="note">
|
||||
<div class="_gap" v-if="showNext">
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
<MkLoading v-else/>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -153,7 +153,6 @@ export default defineComponent({
|
|||
.fcuexfpr {
|
||||
background: var(--bg);
|
||||
|
||||
> ._root {
|
||||
> .note {
|
||||
> .main {
|
||||
> .load {
|
||||
|
|
@ -206,6 +205,5 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -311,7 +311,6 @@ export default defineComponent({
|
|||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: auto;
|
||||
--baseContentWidth: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,11 +65,4 @@ export default defineComponent({
|
|||
background: var(--bg);
|
||||
}
|
||||
}
|
||||
|
||||
._fitSide_ .yrzkoczt {
|
||||
> .tab {
|
||||
padding-left: var(--margin);
|
||||
padding-right: var(--margin);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -81,7 +81,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ftskorzw narrow _root" v-else-if="user && narrow === true" v-size="{ max: [500] }">
|
||||
<MkSpacer v-else-if="user && narrow === true" :content-max="800">
|
||||
<div class="ftskorzw narrow" v-size="{ max: [500] }">
|
||||
<!-- TODO -->
|
||||
<!-- <div class="punished" v-if="user.isSuspended"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSuspended }}</div> -->
|
||||
<!-- <div class="punished" v-if="user.isSilenced"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSilenced }}</div> -->
|
||||
|
|
@ -187,6 +188,7 @@
|
|||
<XGallery v-else-if="page === 'gallery'" :user="user" class="_gap"/>
|
||||
</div>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
<MkError v-else-if="error" @retry="fetch()"/>
|
||||
<MkLoading v-else/>
|
||||
</transition>
|
||||
|
|
@ -833,16 +835,4 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
._fitSide_ .ftskorzw.narrow {
|
||||
> .profile {
|
||||
> .warn {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> .main {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
@charset "utf-8";
|
||||
|
||||
:root {
|
||||
--baseContentWidth: 760px;
|
||||
--radius: 12px;
|
||||
--marginFull: 16px;
|
||||
--marginHalf: 10px;
|
||||
|
|
@ -349,22 +348,6 @@ hr {
|
|||
contain: layout; // ふき出しがボックスから飛び出て表示されるようなデザインをする場合もあるので paint は contain することができない
|
||||
}
|
||||
|
||||
// TODO: 廃止
|
||||
._root {
|
||||
box-sizing: border-box;
|
||||
margin: var(--root-margin, 32px) auto;
|
||||
max-width: min(var(--baseContentWidth), calc(100% - (var(--root-margin, 32px) * 2)));
|
||||
|
||||
// 子marginが突き抜けるのを防ぐため
|
||||
// https://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element
|
||||
padding-top: 1px;
|
||||
margin-top: calc(var(--root-margin, 32px) - 1px);
|
||||
|
||||
@media (max-width: 500px) {
|
||||
--root-margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
._monolithic_ {
|
||||
._section:not(:empty) {
|
||||
box-sizing: border-box;
|
||||
|
|
@ -380,33 +363,6 @@ hr {
|
|||
}
|
||||
}
|
||||
|
||||
._fitSide_ {
|
||||
--root-margin: 0px;
|
||||
--baseContentWidth: 100%;
|
||||
--panelBorder: none;
|
||||
|
||||
._block {
|
||||
//border-top: solid 0.5px var(--divider);
|
||||
//border-bottom: solid 0.5px var(--divider);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
._isolated {
|
||||
margin: var(--margin);
|
||||
}
|
||||
|
||||
._block._isolated {
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
._root {
|
||||
--root-margin: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._narrow_ ._card {
|
||||
> ._title {
|
||||
padding: 16px;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<header class="header" @contextmenu.prevent.stop="onContextmenu">
|
||||
<MkHeader class="title" :info="pageInfo" :center="false"/>
|
||||
</header>
|
||||
<component :is="component" v-bind="props" :ref="changePage" class="body _fitSide_"/>
|
||||
<component :is="component" v-bind="props" :ref="changePage" class="body"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</template>
|
||||
</template>
|
||||
|
||||
<router-view v-slot="{ Component }" class="_fitSide_">
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition>
|
||||
<keep-alive :include="['timeline']">
|
||||
<component :is="Component" :ref="changePage" @contextmenu.stop="onContextmenu"/>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
</template>
|
||||
|
||||
<main class="main" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
|
||||
<div class="content" :class="{ _fitSide_: !fullView }">
|
||||
<div class="content">
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
|
||||
<keep-alive :include="['timeline']">
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<template #header><i class="fas fa-bell"></i>{{ $ts.notifications }}</template>
|
||||
<template #func><button @click="configure()" class="_button"><i class="fas fa-cog"></i></button></template>
|
||||
|
||||
<div class="_fitSide_">
|
||||
<div>
|
||||
<XNotifications :include-types="props.includingTypes"/>
|
||||
</div>
|
||||
</MkContainer>
|
||||
|
|
|
|||
Loading…
Reference in a new issue