vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-10 09:22:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fixes to flex

Browse source
This commit is contained in:
Cagatay Civici 2023-10-07 18:46:59 +03:00
parent fb5b36d3da
commit 42159ac96d
9 changed files with 59 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

10
assets/styles/layout/_content.scss
View file

@ -1,10 +1,10 @@
.layout-content {
padding-top: 5rem;
.layout-content-inner {
padding: 2rem 4rem;
padding: 7rem 4rem 0 4rem;
display: flex;
gap: 4rem;
.layout-content-slot {
flex: 1 1 auto;
width: 1%;
}
}

23
assets/styles/layout/_responsive.scss
View file

@ -1,5 +1,5 @@
@media screen and (min-width: 1729px) {
.layout-content-inner {
.layout-content {
max-width: 1478px;
margin: 0 auto;
}
@ -17,11 +17,18 @@
@media screen and (max-width: 991px) {
.layout-wrapper {
.layout-topbar {
left: 0;
width: 100%;
.menu-button {
display: flex;
margin-right: 1rem;
}
.layout-topbar-logo-container {
width: auto;
margin-right: 0;
svg {
height: 2rem;
}
}
#docsearch {
@ -51,19 +58,19 @@
.layout-sidebar {
top: 0;
left: 0;
position: fixed;
z-index: 1102;
height: 100%;
transform: translateX(-100%);
background-color: var(--surface-overlay);
width: 250px;
&.active {
transform: translateX(0);
}
}
.layout-content {
margin-left: 0;
}
.layout-mask {
background-color: rgba(0, 0, 0, 0.1);

6
assets/styles/layout/_sidebar.scss
View file

@ -1,15 +1,15 @@
.layout-sidebar {
position: sticky;
left: 0;
top: 5rem;
top: 7rem;
height: 100%;
width: 250px;
user-select: none;
transition: transform .4s cubic-bezier(.05,.74,.2,.99);
display: flex;
flex-direction: column;
padding: 0;
flex-shrink: 0;
flex: 0 0 250px;
margin-right: 4rem;
.logo {
display: flex;

7
assets/styles/layout/_topbar.scss
View file

@ -10,17 +10,12 @@
transition: background-color 1s;
border-bottom: 1px solid var(--surface-border);
.layout-topbar-start {
display: flex;
align-items: center;
gap: 4rem;
.layout-topbar-logo-container {
width: 250px;
display: flex;
align-items: center;
justify-content: center;
}
margin-right: 4rem;
}
.layout-topbar-inner {

2
components/doc/DocSectionCode.vue
View file

@ -80,7 +80,7 @@
></Button>
</div>
<div :style="scrollable ? { 'max-height': '40rem', overflow: 'auto' } : undefined">
<div :style="scrollable ? { 'max-height': '40rem' } : undefined">
<template v-if="codeMode === 'basic' && importCode">
<pre v-code.script><code>{{ code.basic }}
</code></pre>

4
components/doc/DocSectionNav.vue
View file

@ -39,9 +39,9 @@ export default {
}
},
mounted() {
this.scrollCurrentUrl();
//this.scrollCurrentUrl();
window.addEventListener('scroll', this.onScroll, { passive: true });
//window.addEventListener('scroll', this.onScroll, { passive: true });
},
beforeUnmount() {
window.removeEventListener('scroll', this.onScroll, { passive: true });

9
layouts/AppTopBar.vue
View file

@ -1,7 +1,9 @@
<template>
<div :ref="containerRef" class="layout-topbar">
<div class="layout-topbar-inner">
<div class="layout-topbar-start">
<button type="button" class="px-link menu-button" @click="onMenuButtonClick" aria-haspopup aria-label="Menu">
<i class="pi pi-bars"></i>
</button>
<div class="layout-topbar-logo-container">
<PrimeVueNuxtLink to="/" class="logo" aria-label="PrimeVue logo">
<svg width="165" height="40" viewBox="0 0 165 40" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -23,12 +25,7 @@
</svg>
</PrimeVueNuxtLink>
</div>
<button type="button" class="px-link menu-button" @click="onMenuButtonClick" aria-haspopup aria-label="Menu">
<i class="pi pi-bars"></i>
</button>
<div id="docsearch"></div>
</div>
<ul class="flex list-none m-0 p-0 gap-2 align-items-center">
<li>

2
layouts/default.vue
View file

@ -5,8 +5,8 @@
<app-configurator :configActive="appConfigActive" @updateConfigActive="onUpdateConfigActive" />
<div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div>
<div class="layout-content">
<div class="layout-content-inner">
<app-menu :active="sidebarActive" />
<div class="layout-content-slot">
<slot></slot>
</div>
</div>