From 45ca873e19a9a9de77b382ab7f165103edf184a4 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sat, 7 Oct 2023 22:43:10 +0300 Subject: [PATCH] Better responsive design --- assets/styles/layout/_core.scss | 8 +- assets/styles/layout/_doc.scss | 2 +- assets/styles/layout/_mixins.scss | 7 - assets/styles/layout/_responsive.scss | 41 ++++-- assets/styles/layout/_sidebar.scss | 8 +- assets/styles/layout/_topbar.scss | 53 +++----- assets/styles/layout/layout.scss | 1 - layouts/AppTopBar.vue | 177 +++++++++++++------------- package.json | 2 +- 9 files changed, 146 insertions(+), 153 deletions(-) delete mode 100644 assets/styles/layout/_mixins.scss diff --git a/assets/styles/layout/_core.scss b/assets/styles/layout/_core.scss index 4934afe8a..2f56a0f61 100644 --- a/assets/styles/layout/_core.scss +++ b/assets/styles/layout/_core.scss @@ -31,7 +31,7 @@ h1, h2, h3, h4, h5, h6 { } h1 { - font-size: 2.25rem; + font-size: 2rem; } h2 { @@ -55,7 +55,7 @@ h6 { } p { - line-height: 1.5; + line-height: 1.75; margin: 0 0 1rem 0; } @@ -97,6 +97,6 @@ input[type="number"] { } button { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings); } \ No newline at end of file diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss index f323e5fac..e4f9aa63a 100644 --- a/assets/styles/layout/_doc.scss +++ b/assets/styles/layout/_doc.scss @@ -104,7 +104,7 @@ i { border-radius: 6px; padding: 2px 6px; - font-size: 0.875rem; + font-size: 1rem; font-weight: 600; font-style: normal; } diff --git a/assets/styles/layout/_mixins.scss b/assets/styles/layout/_mixins.scss deleted file mode 100644 index de5cd3638..000000000 --- a/assets/styles/layout/_mixins.scss +++ /dev/null @@ -1,7 +0,0 @@ -@mixin card { - background: var(--surface-ground); - border: 1px solid var(--surface-border); - padding: 2rem; - border-radius: 10px; - margin-bottom: 1rem; -} \ No newline at end of file diff --git a/assets/styles/layout/_responsive.scss b/assets/styles/layout/_responsive.scss index 5e854a4e6..e2f805d35 100644 --- a/assets/styles/layout/_responsive.scss +++ b/assets/styles/layout/_responsive.scss @@ -16,19 +16,17 @@ @media screen and (max-width: 991px) { .layout-wrapper { - .layout-topbar { + .layout-topbar { + padding-left: 2rem; + padding-right: 2rem; + .menu-button { - display: flex; - margin-right: 1rem; + display: block; } .layout-topbar-logo-container { width: auto; margin-right: 0; - - svg { - height: 2rem; - } } #docsearch { @@ -64,9 +62,15 @@ height: 100%; transform: translateX(-100%); background-color: var(--surface-overlay); - width: 250px; + width: 300px; + opacity: 0; + + nav { + padding: 1rem 1rem; + } &.active { + opacity: 1; transform: translateX(0); } } @@ -110,6 +114,11 @@ } } + .layout-content { + padding-left: 2rem; + padding-right: 2rem; + } + .blocked-scroll { overflow: hidden; padding-right: var(--scrollbar-width); @@ -118,16 +127,22 @@ @media screen and (max-width: 575px) { .layout-wrapper { - .layout-topbar-inner { + .layout-topbar { padding-left: 1rem; padding-right: 1rem; + + .layout-topbar-logo { + display: none; + } + + .layout-topbar-icon { + display: block; + } } .layout-content { - .layout-content-inner { - padding-left: 1rem; - padding-right: 1rem; - } + padding-left: 1rem; + padding-right: 1rem; } .layout-footer { diff --git a/assets/styles/layout/_sidebar.scss b/assets/styles/layout/_sidebar.scss index 4d155a0f6..8c0c568bd 100644 --- a/assets/styles/layout/_sidebar.scss +++ b/assets/styles/layout/_sidebar.scss @@ -2,14 +2,15 @@ position: sticky; left: 0; top: 7rem; - height: 100%; + height: calc(100vh - 9rem); user-select: none; - transition: transform .4s cubic-bezier(.05,.74,.2,.99); + transition: transform .4s cubic-bezier(.05,.74,.2,.99), opacity .3s; display: flex; flex-direction: column; - padding: 0; + padding: 0 0 0 0; flex: 0 0 250px; margin-right: 4rem; + overflow: auto; .logo { display: flex; @@ -20,7 +21,6 @@ padding: 0; margin: 0; flex-grow: 1; - overflow-y: auto; } .layout-menu { diff --git a/assets/styles/layout/_topbar.scss b/assets/styles/layout/_topbar.scss index 870278294..0a3f213c8 100644 --- a/assets/styles/layout/_topbar.scss +++ b/assets/styles/layout/_topbar.scss @@ -1,5 +1,4 @@ .layout-topbar { - padding: 0; height: 5rem; position: fixed; top: 0; @@ -9,50 +8,32 @@ z-index: 1100; transition: background-color 1s; border-bottom: 1px solid var(--surface-border); - - .layout-topbar-logo-container { - width: 250px; - display: flex; - align-items: center; - justify-content: center; - margin-right: 4rem; - } - - .layout-topbar-inner { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 4rem 0 0; - height: 100%; - width: calc(100% - var(--scrollbar-width, 0px)); - } + display: flex; + align-items: center; + justify-content: space-between; &.layout-topbar-sticky { backdrop-filter: blur(8px); } - .menu-button { - display: none; - color: var(--text-color); - width: 3rem; - height: 3rem; - background-color: var(--surface-card); - border: 1px solid var(--surface-border); - align-items: center; - justify-content: center; - transition: border-color .3s; - cursor: pointer; + .layout-topbar-logo-container { + width: 250px; + text-align: center; + margin-right: 4rem; - &:hover { - border-color: var(--primary-color); - } - - i { - font-size: 1.5rem; + .layout-topbar-icon { + display: none; } } -} + #docsearch { + margin-right: auto; + } + + .menu-button { + display: none; + } +} .layout-wrapper-light { .layout-topbar { diff --git a/assets/styles/layout/layout.scss b/assets/styles/layout/layout.scss index 165b05693..bd30e6237 100644 --- a/assets/styles/layout/layout.scss +++ b/assets/styles/layout/layout.scss @@ -1,6 +1,5 @@ @charset 'UTF-8'; -@import './_mixins'; @import './_core'; @import './_topbar'; @import './_sidebar'; diff --git a/layouts/AppTopBar.vue b/layouts/AppTopBar.vue index 2e17bf8d5..25e0aac46 100755 --- a/layouts/AppTopBar.vue +++ b/layouts/AppTopBar.vue @@ -1,92 +1,97 @@ diff --git a/package.json b/package.json index bbc38c582..2bac18a37 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "primevue", - "version": "3.35.1-SNAPSHOT", + "version": "3.35.1", "homepage": "https://primevue.org/", "repository": { "type": "git",