mirror of
https://codeberg.org/yeentown/barkey
synced 2024-12-01 18:47:26 +00:00
tweak classic ui
This commit is contained in:
parent
ef6f361fb9
commit
dc68c39cb1
4 changed files with 32 additions and 7 deletions
|
@ -2,6 +2,9 @@
|
||||||
<div class="azykntjl">
|
<div class="azykntjl">
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
|
<button v-click-anime class="item _button instance" @click="openInstanceMenu">
|
||||||
|
<img :src="$instance.iconUrl ?? $instance.faviconUrl ?? '/favicon.ico'" class="_ghost"/>
|
||||||
|
</button>
|
||||||
<MkA v-click-anime v-tooltip="$ts.timeline" class="item index" active-class="active" to="/" exact>
|
<MkA v-click-anime v-tooltip="$ts.timeline" class="item index" active-class="active" to="/" exact>
|
||||||
<i class="ti ti-home ti-fw"></i>
|
<i class="ti ti-home ti-fw"></i>
|
||||||
</MkA>
|
</MkA>
|
||||||
|
@ -40,6 +43,7 @@
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineAsyncComponent, defineComponent } from 'vue';
|
import { defineAsyncComponent, defineComponent } from 'vue';
|
||||||
|
import { openInstanceMenu } from './_common_/common';
|
||||||
import { host } from '@/config';
|
import { host } from '@/config';
|
||||||
import { search } from '@/scripts/search';
|
import { search } from '@/scripts/search';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
|
@ -88,6 +92,8 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
openInstanceMenu,
|
||||||
|
|
||||||
calcViewState() {
|
calcViewState() {
|
||||||
this.settingsWindowed = (window.innerWidth > 1400);
|
this.settingsWindowed = (window.innerWidth > 1400);
|
||||||
},
|
},
|
||||||
|
@ -186,6 +192,25 @@ export default defineComponent({
|
||||||
border-right: solid 0.5px var(--divider);
|
border-right: solid 0.5px var(--divider);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
> .instance {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 56px;
|
||||||
|
height: 100%;
|
||||||
|
vertical-align: bottom;
|
||||||
|
|
||||||
|
> img {
|
||||||
|
display: inline-block;
|
||||||
|
width: 24px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
> .post {
|
> .post {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
|
|
|
@ -32,9 +32,9 @@
|
||||||
</MkA>
|
</MkA>
|
||||||
<div class="divider"></div>
|
<div class="divider"></div>
|
||||||
<div class="about">
|
<div class="about">
|
||||||
<MkA v-click-anime class="link" to="/about">
|
<button v-click-anime class="item _button" @click="openInstanceMenu">
|
||||||
<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
|
<img :src="$instance.iconUrl ?? $instance.faviconUrl ?? '/favicon.ico'" class="_ghost"/>
|
||||||
</MkA>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<!--<MisskeyLogo class="misskey"/>-->
|
<!--<MisskeyLogo class="misskey"/>-->
|
||||||
</div>
|
</div>
|
||||||
|
@ -42,6 +42,7 @@
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineAsyncComponent, defineComponent } from 'vue';
|
import { defineAsyncComponent, defineComponent } from 'vue';
|
||||||
|
import { openInstanceMenu } from './_common_/common';
|
||||||
import { host } from '@/config';
|
import { host } from '@/config';
|
||||||
import { search } from '@/scripts/search';
|
import { search } from '@/scripts/search';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
|
@ -107,6 +108,8 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
openInstanceMenu,
|
||||||
|
|
||||||
calcViewState() {
|
calcViewState() {
|
||||||
this.iconOnly = (window.innerWidth <= 1400) || (this.$store.state.menuDisplay === 'sideIcon');
|
this.iconOnly = (window.innerWidth <= 1400) || (this.$store.state.menuDisplay === 'sideIcon');
|
||||||
this.settingsWindowed = (window.innerWidth > 1400);
|
this.settingsWindowed = (window.innerWidth > 1400);
|
||||||
|
@ -207,7 +210,7 @@ export default defineComponent({
|
||||||
padding: 8px 0 16px 0;
|
padding: 8px 0 16px 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
> .link {
|
> .item {
|
||||||
display: block;
|
display: block;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
|
@ -235,7 +235,6 @@ onMounted(() => {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
width: 750px;
|
width: 750px;
|
||||||
margin: 0 16px 0 0;
|
margin: 0 16px 0 0;
|
||||||
background: var(--panel);
|
|
||||||
border-left: solid 1px var(--divider);
|
border-left: solid 1px var(--divider);
|
||||||
border-right: solid 1px var(--divider);
|
border-right: solid 1px var(--divider);
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|
|
@ -89,8 +89,6 @@ function updateWidgets(thisWidgets) {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
&.universal {
|
&.universal {
|
||||||
padding: var(--margin) 0;
|
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
margin: var(--margin) 0;
|
margin: var(--margin) 0;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue