refactor(components): update default layout
This commit is contained in:
parent
24d04983a9
commit
521618f955
GPG Key ID:
924A5F6AF051E87C
@ -2,74 +2,247 @@
|
|||||||
import { theme } from "ant-design-vue";
|
import { theme } from "ant-design-vue";
|
||||||
import navbar from "~/components/layouts/navbar.vue";
|
import navbar from "~/components/layouts/navbar.vue";
|
||||||
import cfooter from "~/components/layouts/footer.vue";
|
import cfooter from "~/components/layouts/footer.vue";
|
||||||
|
import sidebarThing from "~/components/layouts/sidebar.vue";
|
||||||
import icon from "~/components/icon.vue";
|
import icon from "~/components/icon.vue";
|
||||||
|
import { ISidebarItem } from "~/models/sidebarEntry";
|
||||||
const { useToken } = theme;
|
const { useToken } = theme;
|
||||||
const { token } = useToken();
|
const { token } = useToken();
|
||||||
|
|
||||||
const { data: totals }: any = await useApiFetch("/totals");
|
const col = token.value.colorText;
|
||||||
|
|
||||||
|
const { data: totals } = await useApiFetch<any>("/totals");
|
||||||
|
|
||||||
|
const collapsed = ref<boolean>(true);
|
||||||
|
|
||||||
|
const sideTriggerVal = computed(() => {
|
||||||
|
let th = collapsed.value ? " collapsed" : "";
|
||||||
|
return `sider-trigger${th}`;
|
||||||
|
});
|
||||||
|
|
||||||
|
// const {data: rd } = await useApiFetch<ISidebarItem[]>("/sidebar")
|
||||||
|
// provide("sidebar-items", rd.data)
|
||||||
|
|
||||||
|
provide("collapsed", collapsed);
|
||||||
|
const loaded = inject<Ref<boolean>>("loaded");
|
||||||
let darko = inject("dark");
|
let darko = inject("dark");
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<a-layout style="padding: 10px; background: unset !important">
|
<a-layout class="ylayout" has-sider>
|
||||||
<a-layout-header class="alayhead">
|
<a-layout class="mlayout">
|
||||||
<div style="display: flex; align-items: center">
|
<a-layout-header class="alayhead">
|
||||||
<a-typography-title
|
<div style="display: flex; align-items: center; flex-wrap: wrap">
|
||||||
class="siteTitle"
|
<a-typography-title class="siteTitle"> Rockfic </a-typography-title>
|
||||||
:style="{
|
<div class="stat-block">
|
||||||
color: '#ff2883',
|
<div>
|
||||||
fontFamily: 'jandles',
|
<a-typography-text> Band fiction that rocks </a-typography-text>
|
||||||
fontSize: '5em',
|
<a-typography-text type="secondary">
|
||||||
margin: 0,
|
With {{ totals.stories }} stories by
|
||||||
}"
|
{{ totals.authors }} authors
|
||||||
>
|
</a-typography-text>
|
||||||
Rockfic
|
</div>
|
||||||
</a-typography-title>
|
</div>
|
||||||
<div style="display: flex; flex-direction: column">
|
<navbar />
|
||||||
<a-typography-text> Band fiction that rocks </a-typography-text>
|
</div>
|
||||||
<br />
|
</a-layout-header>
|
||||||
<a-typography-text type="secondary">
|
<a-layout-content>
|
||||||
With {{ totals.stories }} stories by {{ totals.authors }} authors
|
<slot />
|
||||||
</a-typography-text>
|
<!-- <a-float-button
|
||||||
|
type="primary"
|
||||||
|
:style="{ height: '50px', width: '50px' }"
|
||||||
|
tooltip="Post a new Story" @click="() => navigateTo('/new-story')"
|
||||||
|
>
|
||||||
|
<template #icon>
|
||||||
|
<icon istyle="regular" name="file-plus" />
|
||||||
|
</template>
|
||||||
|
</a-float-button> -->
|
||||||
|
</a-layout-content>
|
||||||
|
<a-layout-footer style="bottom: 100%">
|
||||||
|
<cfooter />
|
||||||
|
</a-layout-footer>
|
||||||
|
</a-layout>
|
||||||
|
<a-layout-sider
|
||||||
|
:theme="darko ? 'dark' : 'light'"
|
||||||
|
:breakpoint="'md'"
|
||||||
|
:trigger="null"
|
||||||
|
v-model:collapsed="collapsed"
|
||||||
|
:collapsible="true"
|
||||||
|
:style="{
|
||||||
|
color: col,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<sidebar-thing />
|
||||||
|
<div class="outerst" @click="() => (collapsed = !collapsed)">
|
||||||
|
<div :class="sideTriggerVal">
|
||||||
|
<icon istyle="solid" name="chevron-right" :size="30" />
|
||||||
</div>
|
</div>
|
||||||
<navbar />
|
|
||||||
</div>
|
</div>
|
||||||
</a-layout-header>
|
</a-layout-sider>
|
||||||
<a-layout-content>
|
|
||||||
<slot />
|
|
||||||
<a-float-button
|
|
||||||
type="primary"
|
|
||||||
:style="{ height: '50px', width: '50px' }"
|
|
||||||
tooltip="Post a new Story"
|
|
||||||
>
|
|
||||||
<template #icon>
|
|
||||||
<icon istyle="regular" name="file-plus" />
|
|
||||||
</template>
|
|
||||||
</a-float-button>
|
|
||||||
</a-layout-content>
|
|
||||||
<a-layout-footer>
|
|
||||||
<cfooter />
|
|
||||||
</a-layout-footer>
|
|
||||||
</a-layout>
|
</a-layout>
|
||||||
|
<!-- <div class="mlayout">
|
||||||
|
<a-skeleton/>
|
||||||
|
<a-skeleton/>
|
||||||
|
<a-skeleton/>
|
||||||
|
<a-skeleton/>
|
||||||
|
<a-skeleton/>
|
||||||
|
<a-skeleton/>
|
||||||
|
</div> -->
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.stat-block {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sideWrap {
|
||||||
|
height: 100vh;
|
||||||
|
right: -1rem;
|
||||||
|
width: inherit;
|
||||||
|
/* display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 100%;
|
||||||
|
padding-bottom: 2em;
|
||||||
|
overflow-x: "clip";
|
||||||
|
height: "100vh";
|
||||||
|
width: 80px !important;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
border-left: 2px solid #ffcbe5; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.sideWrap > * {
|
||||||
|
position: fixed;
|
||||||
|
right: 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-block > div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outerst {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
position: fixed;
|
||||||
|
top: 75vh;
|
||||||
|
transform: translateX(15px);
|
||||||
|
/* height: 100vh; */
|
||||||
|
/* overflow-y: scroll; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.mlayout,
|
||||||
|
footer {
|
||||||
|
padding: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 760px) {
|
||||||
|
.stat-block > div {
|
||||||
|
}
|
||||||
|
|
||||||
|
.mlayout {
|
||||||
|
padding: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mlayout > footer {
|
||||||
|
padding: 0;
|
||||||
|
/* padding-right: calc(4em + 90px); */
|
||||||
|
}
|
||||||
|
|
||||||
|
.mlayout {
|
||||||
|
/* padding-right: calc(4em + 90px); */
|
||||||
|
background: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alayhead {
|
||||||
|
display: inline-block;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
/* background: inherit !important; */
|
||||||
|
height: unset !important;
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
width: 100%;
|
||||||
|
/* margin-right: auto; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.alayhead > div {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.siteTitle {
|
||||||
|
display: inline-block;
|
||||||
|
min-width: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alayhead > div {
|
||||||
|
flex-direction: row !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.siteTitle {
|
.siteTitle {
|
||||||
min-width: max-content;
|
/* min-width: max-content; */
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
color: #ff2883 !important;
|
||||||
|
font-family: "jandles";
|
||||||
|
font-size: 5em;
|
||||||
|
margin: 0;
|
||||||
|
display: block;
|
||||||
|
min-width: 100%;
|
||||||
/* float: left; */
|
/* float: left; */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sider-trigger {
|
||||||
|
/* display: flex; */
|
||||||
|
/* padding-left: 4.8em;
|
||||||
|
padding-right: 1.8em; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.sider-trigger.collapsed i {
|
||||||
|
/* transform: rotate3d(0, 1, 0, 180deg); */
|
||||||
|
transform: rotate(540deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sider-trigger i,
|
||||||
|
.sider-trigger.collapsed i {
|
||||||
|
transition: all 0.75s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
.alayhead {
|
.alayhead {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: baseline;
|
||||||
/* background: inherit !important; */
|
/* background: inherit !important; */
|
||||||
height: unset !important;
|
height: unset !important;
|
||||||
margin-bottom: 1.5em;
|
margin-bottom: 1.5em;
|
||||||
|
padding-left: 0.5em;
|
||||||
|
padding-right: 0.5em;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alayhead > div {
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alayhead > div > * + * {
|
.alayhead > div > * + * {
|
||||||
margin-left: 1.2em;
|
margin-left: 1.2em;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<style>
|
||||||
|
body[data-theme="dark"] .ant-layout > *,
|
||||||
|
body[data-theme="dark"] .ant-layout {
|
||||||
|
background: #141414 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-layout-sider-trigger {
|
||||||
|
background: inherit !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-menu-light {
|
||||||
|
background: inherit !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-layout-sider-children {
|
||||||
|
/* display: flex; */
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user