profxadke/misskey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

tweak classic ui

Browse source
This commit is contained in:
syuilo 2022-12-28 14:44:53 +09:00
parent ef6f361fb9
commit dc68c39cb1
4 changed files with 32 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

25
packages/frontend/src/ui/classic.header.vue
View file

@ -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;

11
packages/frontend/src/ui/classic.sidebar.vue
View file

@ -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;

1
packages/frontend/src/ui/classic.vue
View file

@ -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;

2
packages/frontend/src/ui/universal.widgets.vue
View file

@ -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;
} }