testzm0318
/
farris-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(vitepress): set farris document content max-width to 860px

This commit is contained in:
Sagi 2022-10-10 00:30:49 +08:00
parent 96e8086bf5
commit 575a5d5b49
1 changed files with 110 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

225
packages/ui-vue/docs/.vitepress/farris-theme/components/VPDoc.vue
View File

@ -1,180 +1,175 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue' import { computed } from 'vue';
import { useRoute } from 'vitepress' import { useRoute } from 'vitepress';
import { useSidebar } from '../composables/sidebar.js' import { useSidebar } from '../composables/sidebar.js';
import VPDocAside from './VPDocAside.vue' import VPDocAside from './VPDocAside.vue';
import VPDocFooter from './VPDocFooter.vue' import VPDocFooter from './VPDocFooter.vue';
const route = useRoute() const route = useRoute();
const { hasSidebar, hasAside } = useSidebar() const { hasSidebar, hasAside } = useSidebar();
const pageName = computed(() => const pageName = computed(() => route.path.replace(/[./]+/g, '_').replace(/_html$/, ''));
route.path.replace(/[./]+/g, '_').replace(/_html$/, '')
)
</script> </script>
<template> <template>
<div <div class="VPDoc" :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside }">
class="VPDoc" <div class="container">
:class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside }" <div v-if="hasAside" class="aside">
> <div class="aside-curtain" />
<div class="container"> <div class="aside-container">
<div v-if="hasAside" class="aside"> <div class="aside-content">
<div class="aside-curtain" /> <VPDocAside>
<div class="aside-container"> <template #aside-top><slot name="aside-top" /></template>
<div class="aside-content"> <template #aside-bottom><slot name="aside-bottom" /></template>
<VPDocAside> <template #aside-outline-before><slot name="aside-outline-before" /></template>
<template #aside-top><slot name="aside-top" /></template> <template #aside-outline-after><slot name="aside-outline-after" /></template>
<template #aside-bottom><slot name="aside-bottom" /></template> <template #aside-ads-before><slot name="aside-ads-before" /></template>
<template #aside-outline-before><slot name="aside-outline-before" /></template> <template #aside-ads-after><slot name="aside-ads-after" /></template>
<template #aside-outline-after><slot name="aside-outline-after" /></template> </VPDocAside>
<template #aside-ads-before><slot name="aside-ads-before" /></template> </div>
<template #aside-ads-after><slot name="aside-ads-after" /></template> </div>
</VPDocAside> </div>
</div>
</div>
</div>
<div class="content"> <div class="content">
<div class="content-container"> <div class="content-container">
<slot name="doc-before" /> <slot name="doc-before" />
<main class="main"> <main class="main">
<Content class="vp-doc" :class="pageName" /> <Content class="vp-doc" :class="pageName" />
</main> </main>
<slot name="doc-footer-before" /> <slot name="doc-footer-before" />
<VPDocFooter /> <VPDocFooter />
<slot name="doc-after" /> <slot name="doc-after" />
</div>
</div>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<style scoped> <style scoped>
.VPDoc { .VPDoc {
padding: 32px 24px 96px; padding: 32px 24px 96px;
width: 100%; width: 100%;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.VPDoc { .VPDoc {
padding: 48px 32px 128px; padding: 48px 32px 128px;
} }
} }
@media (min-width: 960px) { @media (min-width: 960px) {
.VPDoc { .VPDoc {
padding: 32px 32px 0; padding: 32px 32px 0;
} }
.VPDoc:not(.has-sidebar) .container { .VPDoc:not(.has-sidebar) .container {
display: flex; display: flex;
justify-content: center; justify-content: center;
max-width: 992px; max-width: 992px;
} }
.VPDoc:not(.has-sidebar) .aside { .VPDoc:not(.has-sidebar) .aside {
display: block; display: block;
} }
.VPDoc:not(.has-sidebar) .content { .VPDoc:not(.has-sidebar) .content {
max-width: 752px; max-width: 752px;
} }
} }
@media (min-width: 1280px) { @media (min-width: 1280px) {
.VPDoc .container { .VPDoc .container {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.VPDoc .aside { .VPDoc .aside {
display: block; display: block;
} }
} }
@media (min-width: 1440px) { @media (min-width: 1440px) {
.VPDoc:not(.has-sidebar) .content { .VPDoc:not(.has-sidebar) .content {
max-width: 784px; max-width: 860px;
} }
.VPDoc:not(.has-sidebar) .container { .VPDoc:not(.has-sidebar) .container {
max-width: 1104px; max-width: 1104px;
} }
} }
.container { .container {
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
} }
.aside { .aside {
position: relative; position: relative;
display: none; display: none;
order: 2; order: 2;
flex-grow: 1; flex-grow: 1;
padding-left: 32px; padding-left: 32px;
width: 100%; width: 100%;
max-width: 256px; max-width: 256px;
} }
.aside-container { .aside-container {
position: sticky; position: sticky;
top: 0; top: 0;
margin-top: calc(var(--vp-nav-height-desktop) * -1 - 32px); margin-top: calc(var(--vp-nav-height-desktop) * -1 - 32px);
padding-top: calc(var(--vp-nav-height-desktop) + 32px); padding-top: calc(var(--vp-nav-height-desktop) + 32px);
height: 100vh; height: 100vh;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
scrollbar-width: none; scrollbar-width: none;
} }
.aside-container::-webkit-scrollbar { .aside-container::-webkit-scrollbar {
display: none; display: none;
} }
.aside-curtain { .aside-curtain {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
z-index: 10; z-index: 10;
width: 224px; width: 224px;
height: 32px; height: 32px;
background: linear-gradient(transparent, var(--vp-c-bg) 70%); background: linear-gradient(transparent, var(--vp-c-bg) 70%);
} }
.aside-content { .aside-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: calc(100vh - (var(--vp-nav-height-desktop) + 32px)); min-height: calc(100vh - (var(--vp-nav-height-desktop) + 32px));
padding-bottom: 32px; padding-bottom: 32px;
} }
.content { .content {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
} }
@media (min-width: 960px) { @media (min-width: 960px) {
.content { .content {
padding: 0 32px 128px; padding: 0 32px 128px;
} }
} }
@media (min-width: 1280px) { @media (min-width: 1280px) {
.content { .content {
order: 1; order: 1;
margin: 0; margin: 0;
min-width: 640px; min-width: 640px;
} }
} }
.content-container { .content-container {
margin: 0 auto; margin: 0 auto;
} }
.VPDoc.has-aside .content-container { .VPDoc.has-aside .content-container {
max-width: 688px; max-width: 688px;
} }
</style> </style>