Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

client: tweak style

Browse Source
This commit is contained in:
syuilo 2021-12-10 11:56:23 +09:00
parent 43f2ac56ee
commit 640fc337af
1 changed files with 64 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
packages/client/src/pages/settings/index.vue
View File

@ -1,23 +1,25 @@
<template> <template>
<div ref="el" class="vvcocwet" :class="{ wide: !narrow }"> <MkSpacer :content-max="900" :margin-min="20" :margin-max="32">
<div v-if="!narrow || page == null" class="nav"> <div ref="el" class="vvcocwet" :class="{ wide: !narrow }">
<MkSpacer :content-max="700" :margin-min="20"> <div class="header">
<div class="baaadecd"> <div class="title">{{ $ts.settings }}</div>
<div class="title">{{ $ts.settings }}</div> <div v-if="childInfo" class="subtitle">{{ childInfo.title }}</div>
<MkInfo v-if="emailNotConfigured" warn class="info">{{ $ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ $ts.configure }}</MkA></MkInfo> </div>
<MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu> <div class="body">
<div v-if="!narrow || page == null" class="nav">
<div class="baaadecd">
<MkInfo v-if="emailNotConfigured" warn class="info">{{ $ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ $ts.configure }}</MkA></MkInfo>
<MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu>
</div>
</div> </div>
</MkSpacer> <div class="main">
</div> <div class="bkzroven">
<div class="main"> <component :is="component" :key="page" v-bind="pageProps" @info="onInfo"/>
<MkSpacer :content-max="600" :margin-min="20"> </div>
<div class="bkzroven">
<div v-if="childInfo" class="title">{{ childInfo.title }}</div>
<component :is="component" :key="page" v-bind="pageProps" @info="onInfo"/>
</div> </div>
</MkSpacer> </div>
</div> </div>
</div> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -292,66 +294,62 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.vvcocwet { .vvcocwet {
> .nav { > .header {
.baaadecd {
> .title {
margin: 16px;
font-size: 1.5em;
font-weight: bold;
}
> .info {
margin: 16px 0;
}
> .accounts {
> .avatar {
display: block;
width: 50px;
height: 50px;
margin: 8px auto 16px auto;
}
}
}
}
> .main {
.bkzroven {
> .title {
margin: 4px 0 20px 0;
font-size: 1.5em;
font-weight: bold;
}
}
}
&.wide {
display: flex; display: flex;
max-width: 1000px; margin-bottom: 24px;
margin: 0 auto; font-size: 1.5em;
height: 100%; font-weight: bold;
> .title {
width: 34%;
}
> .subtitle {
flex: 1;
min-width: 0;
}
}
> .body {
> .nav { > .nav {
width: 32%;
box-sizing: border-box;
overflow: auto;
.baaadecd { .baaadecd {
> .title { > .info {
margin: 24px 0; margin: 16px 0;
}
> .accounts {
> .avatar {
display: block;
width: 50px;
height: 50px;
margin: 8px auto 16px auto;
}
} }
} }
} }
> .main { > .main {
flex: 1;
min-width: 0;
overflow: auto;
.bkzroven { .bkzroven {
> .title { }
margin: 6px 0 24px 0; }
} }
&.wide {
> .body {
display: flex;
height: 100%;
> .nav {
width: 34%;
padding-right: 32px;
box-sizing: border-box;
overflow: auto;
}
> .main {
flex: 1;
min-width: 0;
overflow: auto;
} }
} }
} }