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 navbar from "~/components/layouts/navbar.vue";
|
||||
import cfooter from "~/components/layouts/footer.vue";
|
||||
import sidebarThing from "~/components/layouts/sidebar.vue";
|
||||
import icon from "~/components/icon.vue";
|
||||
import { ISidebarItem } from "~/models/sidebarEntry";
|
||||
const { useToken } = theme;
|
||||
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");
|
||||
</script>
|
||||
<template>
|
||||
<a-layout style="padding: 10px; background: unset !important">
|
||||
<a-layout-header class="alayhead">
|
||||
<div style="display: flex; align-items: center">
|
||||
<a-typography-title
|
||||
class="siteTitle"
|
||||
:style="{
|
||||
color: '#ff2883',
|
||||
fontFamily: 'jandles',
|
||||
fontSize: '5em',
|
||||
margin: 0,
|
||||
}"
|
||||
>
|
||||
Rockfic
|
||||
</a-typography-title>
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<a-typography-text> Band fiction that rocks </a-typography-text>
|
||||
<br />
|
||||
<a-typography-text type="secondary">
|
||||
With {{ totals.stories }} stories by {{ totals.authors }} authors
|
||||
</a-typography-text>
|
||||
<a-layout class="ylayout" has-sider>
|
||||
<a-layout class="mlayout">
|
||||
<a-layout-header class="alayhead">
|
||||
<div style="display: flex; align-items: center; flex-wrap: wrap">
|
||||
<a-typography-title class="siteTitle"> Rockfic </a-typography-title>
|
||||
<div class="stat-block">
|
||||
<div>
|
||||
<a-typography-text> Band fiction that rocks </a-typography-text>
|
||||
<a-typography-text type="secondary">
|
||||
With {{ totals.stories }} stories by
|
||||
{{ totals.authors }} authors
|
||||
</a-typography-text>
|
||||
</div>
|
||||
</div>
|
||||
<navbar />
|
||||
</div>
|
||||
</a-layout-header>
|
||||
<a-layout-content>
|
||||
<slot />
|
||||
<!-- <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>
|
||||
<navbar />
|
||||
</div>
|
||||
</a-layout-header>
|
||||
<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-sider>
|
||||
</a-layout>
|
||||
<!-- <div class="mlayout">
|
||||
<a-skeleton/>
|
||||
<a-skeleton/>
|
||||
<a-skeleton/>
|
||||
<a-skeleton/>
|
||||
<a-skeleton/>
|
||||
<a-skeleton/>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
<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 {
|
||||
min-width: max-content;
|
||||
/* min-width: max-content; */
|
||||
font-weight: normal;
|
||||
color: #ff2883 !important;
|
||||
font-family: "jandles";
|
||||
font-size: 5em;
|
||||
margin: 0;
|
||||
display: block;
|
||||
min-width: 100%;
|
||||
/* 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 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
align-items: baseline;
|
||||
/* background: inherit !important; */
|
||||
height: unset !important;
|
||||
margin-bottom: 1.5em;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.alayhead > div {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.alayhead > div > * + * {
|
||||
margin-left: 1.2em;
|
||||
}
|
||||
</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