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

chore: modify vitepress layout in farris theme

This commit is contained in:
Sagi 2022-10-06 00:48:21 +08:00
parent e3bb4609c3
commit 59346761d9
7 changed files with 41 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/ui-vue/docs/.vitepress/farris-theme/components/VPContent.vue
View File

@ -77,8 +77,8 @@ useCopyCode()
@media (min-width: 1440px) {
.VPContent.has-sidebar {
padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
/* padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)); */
}
}
</style>

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

@ -106,6 +106,7 @@ const pageName = computed(() =>
.container {
margin: 0 auto;
width: 100%;
max-width: 100%;
}
.aside {

4
packages/ui-vue/docs/.vitepress/farris-theme/components/VPNav.vue
View File

@ -35,6 +35,9 @@ provide('close-screen', closeScreen)
width: 100%;
pointer-events: none;
}
.VPNav.has-sidebar{
padding:0;
}
@media (min-width: 960px) {
.VPNav {
@ -46,6 +49,7 @@ provide('close-screen', closeScreen)
backdrop-filter: saturate(50%) blur(8px);
background: rgba(255, 255, 255, 0.7); */
background: transparent;
padding: 0 32px;
}
.dark .VPNav.no-sidebar {

10
packages/ui-vue/docs/.vitepress/farris-theme/components/VPNavBar.vue
View File

@ -51,7 +51,7 @@ const { hasSidebar } = useSidebar()
.VPNavBar {
position: relative;
border-bottom: 1px solid var(--vp-c-divider-light);
padding: 0 8px 0 24px;
padding: 0 8px 0 0;
height: var(--vp-nav-height-mobile);
transition: border-color 0.5s, background-color 0.5s;
pointer-events: none;
@ -59,7 +59,7 @@ const { hasSidebar } = useSidebar()
@media (min-width: 768px) {
.VPNavBar {
padding: 0 32px;
padding: 0 8px 0 0;
}
}
@ -71,10 +71,11 @@ const { hasSidebar } = useSidebar()
.VPNavBar.has-sidebar .content {
margin-right: -32px;
padding-right: 32px;
/* padding-right: 32px; */
-webkit-backdrop-filter: saturate(50%) blur(8px);
backdrop-filter: saturate(50%) blur(8px);
background: rgba(255, 255, 255, 0.7);
padding-right: 64px;
}
.dark .VPNavBar.has-sidebar .content {
@ -96,7 +97,8 @@ const { hasSidebar } = useSidebar()
display: flex;
justify-content: space-between;
margin: 0 auto;
max-width: calc(var(--vp-layout-max-width) - 64px);
/* max-width: calc(var(--vp-layout-max-width) - 64px); */
max-width:100%;
pointer-events: none;
padding: 0;
}

12
packages/ui-vue/docs/.vitepress/farris-theme/components/VPNavBarTitle.vue
View File

@ -27,10 +27,16 @@ const { hasSidebar } = useSidebar()
@media (min-width: 960px) {
.VPNavBarTitle.has-sidebar {
margin-right: 32px;
width: calc(var(--vp-sidebar-width) - 64px);
/* margin-right: 32px; */
/* width: calc(var(--vp-sidebar-width) - 64px); */
border-bottom-color: var(--vp-c-divider-light);
background-color: var(--vp-c-bg-alt);
/* background-color: var(--vp-c-bg-alt); */
padding-left: 32px;
margin-right: 0;
background-color: rgba(255,255,255,.7);
width: var(--vp-sidebar-width);
backdrop-filter: saturate(50%) blur(8px);
padding-right: 32px;
}
}

45
packages/ui-vue/docs/.vitepress/farris-theme/components/VPSidebar.vue
View File

@ -1,37 +1,29 @@
<script lang="ts" setup>
import { ref, watchPostEffect, nextTick } from 'vue'
import { useSidebar } from '../composables/sidebar.js'
import VPSidebarGroup from './VPSidebarGroup.vue'
import { ref, watchPostEffect, nextTick } from "vue";
import { useSidebar } from "../composables/sidebar.js";
import VPSidebarGroup from "./VPSidebarGroup.vue";
const { sidebar, hasSidebar } = useSidebar()
const { sidebar, hasSidebar } = useSidebar();
const props = defineProps<{
open: boolean
}>()
open: boolean;
}>();
// a11y: focus Nav element when menu has opened
let navEl = ref<(Element & { focus(): void }) | null>(null)
let navEl = ref<(Element & { focus(): void }) | null>(null);
watchPostEffect(async () => {
if (props.open) {
await nextTick()
navEl.value?.focus()
await nextTick();
navEl.value?.focus();
}
})
});
</script>
<template>
<aside
v-if="hasSidebar"
class="VPSidebar"
:class="{ open }"
ref="navEl"
@click.stop
>
<aside v-if="hasSidebar" class="VPSidebar" :class="{ open }" ref="navEl" @click.stop>
<nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1">
<span class="visually-hidden" id="sidebar-aria-label">
Sidebar Navigation
</span>
<span class="visually-hidden" id="sidebar-aria-label"> Sidebar Navigation </span>
<div v-for="group in sidebar" :key="group.text" class="group">
<VPSidebarGroup
@ -48,7 +40,7 @@ watchPostEffect(async () => {
<style scoped>
.VPSidebar {
position: fixed;
top: 0;
/* top: 0; */
bottom: 0;
left: 0;
z-index: var(--vp-z-index-sidebar);
@ -62,14 +54,15 @@ watchPostEffect(async () => {
overflow-y: auto;
transform: translateX(-100%);
transition: opacity 0.5s, transform 0.25s ease;
top: var(--vp-nav-height);
padding-top: 0;
}
.VPSidebar.open {
opacity: 1;
visibility: visible;
transform: translateX(0);
transition: opacity 0.25s,
transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
transition: opacity 0.25s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.dark .VPSidebar {
@ -79,7 +72,7 @@ watchPostEffect(async () => {
@media (min-width: 960px) {
.VPSidebar {
z-index: 1;
padding-top: var(--vp-nav-height-desktop);
/* padding-top: var(--vp-nav-height-desktop); */
padding-bottom: 128px;
width: var(--vp-sidebar-width);
max-width: 100%;
@ -93,8 +86,8 @@ watchPostEffect(async () => {
@media (min-width: 1440px) {
.VPSidebar {
padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
/* padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2)); */
/* width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px); */
}
}

1
packages/ui-vue/docs/components/button-edit/index.md
View File

@ -259,4 +259,3 @@ type TextAlignment = 'left' | 'center' | 'right';
::: tip
暂无内容
:::
Í