mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-01-18 06:03:22 +08:00
improve styling
This commit is contained in:
Philipp Kühn
parent
31ed0fb89b
commit
0759f6f8ab
@ -45,10 +45,6 @@
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
@ -1,20 +1,19 @@
|
||||
<template>
|
||||
<div class="app">
|
||||
<div class="app__navigation">
|
||||
<g-link class="app__name" to="/">
|
||||
<div class="app__top-bar">
|
||||
<g-link class="app__logo" to="/">
|
||||
<img src="~@/assets/images/logo.svg">
|
||||
</g-link>
|
||||
|
||||
<span style="position: relative">
|
||||
<div class="app__menu">
|
||||
<span class="app__menu-item">
|
||||
Search
|
||||
<div class="app__search-docsearch" />
|
||||
</span>
|
||||
<g-link to="/overview/installation">
|
||||
Documentation
|
||||
</g-link>
|
||||
<g-link to="https://github.com/ueberdosis/tiptap-next">
|
||||
GitHub
|
||||
</g-link>
|
||||
|
||||
<portal-target name="desktop-menu" />
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="app__menu-icon"
|
||||
@ -31,33 +30,34 @@
|
||||
<icon name="close" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="app__mobile-menu" v-if="menuIsVisible">
|
||||
<portal-target name="mobile-menu" />
|
||||
<portal-target name="mobile-sidebar" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app__content">
|
||||
<div class="app__sidebar" v-if="showSidebar">
|
||||
<portal-target name="desktop-nav" />
|
||||
<portal-target name="desktop-sidebar" />
|
||||
</div>
|
||||
|
||||
<main class="app__main">
|
||||
<div class="app__top-bar">
|
||||
<div class="app__inner app__top-bar-inner" />
|
||||
<div class="app__mobile-nav" v-if="menuIsVisible">
|
||||
<portal-target name="mobile-nav" />
|
||||
</div>
|
||||
</div>
|
||||
<main class="app__main">
|
||||
<div class="app__inner">
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
<div class="app__page-navigation" v-if="showSidebar">
|
||||
<div class="app__inner">
|
||||
<page-navigation />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<portal :to="portal">
|
||||
<nav class="app__sidebar-navigation">
|
||||
<portal :to="menuPortal">
|
||||
<g-link class="app__menu-item" to="/overview/installation">
|
||||
Documentation
|
||||
</g-link>
|
||||
<g-link class="app__menu-item" to="https://github.com/ueberdosis/tiptap-next">
|
||||
GitHub
|
||||
</g-link>
|
||||
</portal>
|
||||
|
||||
<portal :to="sidebarPortal" v-if="showSidebar">
|
||||
<nav class="app__sidebar-menu">
|
||||
<div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i">
|
||||
<div class="app__link-group-title">
|
||||
{{ linkGroup.title }}
|
||||
@ -119,7 +119,6 @@ query {
|
||||
<script>
|
||||
import linkGroups from '@/links.yaml'
|
||||
import Icon from '@/components/Icon'
|
||||
import PageNavigation from '@/components/PageNavigation'
|
||||
// import GithubButton from 'vue-github-button'
|
||||
|
||||
export default {
|
||||
@ -132,7 +131,6 @@ export default {
|
||||
|
||||
components: {
|
||||
Icon,
|
||||
PageNavigation,
|
||||
// GithubButton,
|
||||
},
|
||||
|
||||
@ -145,12 +143,20 @@ export default {
|
||||
},
|
||||
|
||||
computed: {
|
||||
portal() {
|
||||
menuPortal() {
|
||||
if (this.windowWidth && this.windowWidth < 800) {
|
||||
return 'mobile-nav'
|
||||
return 'mobile-menu'
|
||||
}
|
||||
|
||||
return 'desktop-nav'
|
||||
return 'desktop-menu'
|
||||
},
|
||||
|
||||
sidebarPortal() {
|
||||
if (this.windowWidth && this.windowWidth < 800) {
|
||||
return 'mobile-sidebar'
|
||||
}
|
||||
|
||||
return 'desktop-sidebar'
|
||||
},
|
||||
|
||||
currentPath() {
|
||||
@ -173,6 +179,10 @@ export default {
|
||||
$route() {
|
||||
this.menuIsVisible = false
|
||||
},
|
||||
|
||||
windowWidth() {
|
||||
this.menuIsVisible = false
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
@ -192,8 +202,10 @@ export default {
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.initSearch()
|
||||
this.handleResize()
|
||||
this.$nextTick(() => {
|
||||
this.initSearch()
|
||||
})
|
||||
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
|
||||
@ -2,19 +2,16 @@ $navHeight: 4.5rem;
|
||||
$mobileBreakPoint: 600px;
|
||||
$menuBreakPoint: 800px;
|
||||
|
||||
|
||||
|
||||
.app {
|
||||
&__navigation {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: $navHeight;
|
||||
max-height: 100vh;
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba($colorBlack, 0.1);
|
||||
padding: 0 2rem;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
@ -31,31 +28,68 @@ $menuBreakPoint: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
&__top-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
height: $navHeight;
|
||||
padding: 0 1rem;
|
||||
|
||||
@media (min-width: $menuBreakPoint) {
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__menu-item {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
|
||||
@media (min-width: $menuBreakPoint) {
|
||||
display: inline-flex;
|
||||
margin-right: 1.5rem;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__name {
|
||||
&__logo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
color: $colorBlack;
|
||||
font-size: 1.5rem;
|
||||
margin-right: auto;
|
||||
|
||||
@media (min-width: 500px) {
|
||||
&::after {
|
||||
content: '2.0 alpha';
|
||||
display: block;
|
||||
margin-left: 0.5rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05rem;
|
||||
text-transform: uppercase;
|
||||
border-radius: 5px;
|
||||
border: 1px solid $colorBlack;
|
||||
border-radius: 0.4rem;
|
||||
border: 2px solid $colorBlack;
|
||||
padding: 0 0.4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__github {
|
||||
display: block;
|
||||
@ -105,45 +139,18 @@ $menuBreakPoint: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
&__sidebar-menu {
|
||||
margin-top: 1.5rem;
|
||||
|
||||
@media (min-width: $menuBreakPoint) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__main {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
// &__top-bar {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// padding: 1rem 0;
|
||||
// position: sticky;
|
||||
// z-index: 2;
|
||||
// top: 0;
|
||||
// backdrop-filter: blur(10px);
|
||||
// max-height: 100vh;
|
||||
|
||||
// @media (min-width: $menuBreakPoint) {
|
||||
// padding: 1.5rem 0;
|
||||
// }
|
||||
|
||||
// &::after {
|
||||
// content: '';
|
||||
// z-index: -1;
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// background-color: $colorWhite;
|
||||
// opacity: 0.8;
|
||||
// transform: translate3d(0,0,0);
|
||||
// pointer-events: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
&__top-bar-inner {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
padding-top: $navHeight;
|
||||
}
|
||||
|
||||
&__menu-icon,
|
||||
@ -153,7 +160,7 @@ $menuBreakPoint: 800px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: $colorText;
|
||||
margin-left: 1rem;
|
||||
margin-left: 1.5rem;
|
||||
transition: color 0.2s $ease;
|
||||
|
||||
&:hover {
|
||||
@ -165,16 +172,6 @@ $menuBreakPoint: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
// &__inner {
|
||||
// margin: 0 auto;
|
||||
// max-width: 50rem;
|
||||
// padding: 0 1rem;
|
||||
|
||||
// @media (min-width: $mobileBreakPoint) {
|
||||
// padding: 0 2rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
&__link-group {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@ -201,7 +198,7 @@ $menuBreakPoint: 800px;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
&__mobile-nav &__link-list &__link-list {
|
||||
&__mobile-menu &__link-list &__link-list {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -209,6 +206,14 @@ $menuBreakPoint: 800px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__mobile-menu &__menu-item {
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -294,25 +299,12 @@ $menuBreakPoint: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
&__mobile-nav &__link--with-children::after {
|
||||
&__mobile-menu &__link--with-children::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__main {
|
||||
padding: 1rem 0;
|
||||
|
||||
@media (min-width: $mobileBreakPoint) {
|
||||
padding: 2rem 0;
|
||||
padding-top: $navHeight;
|
||||
}
|
||||
}
|
||||
|
||||
&__page-navigation {
|
||||
border-top: 1px solid rgba($colorBlack, 0.1);
|
||||
}
|
||||
|
||||
&__mobile-nav {
|
||||
padding: 1rem;
|
||||
&__mobile-menu {
|
||||
padding: 1rem 0 1rem 1rem;
|
||||
flex: 1 1 auto;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
@ -320,7 +312,7 @@ $menuBreakPoint: 800px;
|
||||
overscroll-behavior: contain;
|
||||
|
||||
@media (min-width: $mobileBreakPoint) {
|
||||
padding: 2rem;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3,6 +3,9 @@
|
||||
<app-section>
|
||||
<VueRemarkContent class="text" />
|
||||
</app-section>
|
||||
<app-section>
|
||||
<page-navigation />
|
||||
</app-section>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
@ -20,10 +23,12 @@ query($path: String!) {
|
||||
|
||||
<script>
|
||||
import AppSection from '@/components/AppSection'
|
||||
import PageNavigation from '@/components/PageNavigation'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AppSection,
|
||||
PageNavigation,
|
||||
},
|
||||
|
||||
metaInfo() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user