vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

responsiveness

pull/2208/head
Tuğçe Küçükoğlu 2022-02-24 09:56:01 +03:00 committed by Tuğçe Küçükoğlu
parent 69ab7c1576
commit 57ad1be0a5
3 changed files with 46 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/AppTopBar.vue
View File

@ -4,13 +4,12 @@
<i class="pi pi-bars"></i> <i class="pi pi-bars"></i>
</a> </a>
<router-link to="/" class="logo"> <router-link to="/" class="logo">
<img alt="logo" src="./assets/images/primevue-logo.png"> <img :src="'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo"/>
</router-link> </router-link>
<div class="app-theme" v-tooltip.bottom="$appState.theme"> <div class="app-theme" v-tooltip.bottom="$appState.theme">
<img :src="'demo/images/themes/' + logoMap[$appState.theme]" /> <img :src="'demo/images/themes/' + logoMap[$appState.theme]" />
</div> </div>
<ul ref="topbarMenu" class="topbar-menu"> <ul ref="topbarMenu" class="topbar-menu">
<li><router-link to="/setup">Get Started</router-link></li>
<li class="topbar-submenu"> <li class="topbar-submenu">
<a tabindex="0" @click="toggleMenu($event, 0)"> <a tabindex="0" @click="toggleMenu($event, 0)">
<span v-badge.danger>Themes</span> <span v-badge.danger>Themes</span>
@ -122,6 +121,15 @@
</ul> </ul>
</transition> </transition>
</li> </li>
<li class="topbar-submenu">
<a tabindex="0" @click="toggleMenu($event, 3)">v3.12.0</a>
<transition name="p-connected-overlay" @enter="onMenuEnter">
<ul v-show="activeMenuIndex === 3" style="width: 100%">
<li><router-link to="/"><span class="m-0">v3.12.0</span></router-link></li>
<li><a href="https://www.primefaces.org/primevue/showcase-v2/#/"><span class="m-0">v2.9.0</span></a></li>
</ul>
</transition>
</li>
</ul> </ul>
</div> </div>
</template> </template>

22
src/assets/styles/app/_responsive.scss
View File

@ -24,11 +24,12 @@
} }
.layout-topbar { .layout-topbar {
margin-left: 0;
height: 110px; height: 110px;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
padding: 0; padding: 0;
left: 0;
width: 100%;
.menu-button { .menu-button {
display: block; display: block;
@ -51,20 +52,18 @@
width: 100%; width: 100%;
height: 40px; height: 40px;
margin: 0; margin: 0;
border-top: 1px solid var(--surface-border);
> li { > li {
height: 40px;
line-height: 40px;
width: 25%; width: 25%;
margin-right: 0;
> a { > a {
padding-bottom: 0; display: flex;
height: 40px; height: 100%;
line-height: 38px;
width: 100%; width: 100%;
font-size: 14px; justify-content: center;
min-width: auto; align-items: center;
border-radius: 0;
} }
&.topbar-submenu > ul { &.topbar-submenu > ul {
@ -75,8 +74,10 @@
} }
.layout-sidebar { .layout-sidebar {
top: 0;
z-index: 1102;
height: 100%;
transform: translateX(-100%); transform: translateX(-100%);
z-index: 999;
&.active { &.active {
transform: translateX(0); transform: translateX(0);
@ -85,6 +86,7 @@
.layout-content { .layout-content {
margin-left: 0; margin-left: 0;
padding-top: 110px;
.content-section { .content-section {
&.introduction { &.introduction {

42
src/assets/styles/app/_topbar.scss
View File

@ -1,5 +1,5 @@
.layout-topbar { .layout-topbar {
padding: 0 4rem; padding: 0;
height: 70px; height: 70px;
position: fixed; position: fixed;
top: 0; top: 0;
@ -8,6 +8,7 @@
z-index: 1100; z-index: 1100;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 4rem;
&.layout-topbar-sticky { &.layout-topbar-sticky {
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
@ -37,6 +38,14 @@
} }
} }
.logo {
&:focus {
outline: 0 none;
transition: box-shadow .2s;
box-shadow: var(--focus-ring);
}
}
.app-theme { .app-theme {
background-color: var(--primary-color); background-color: var(--primary-color);
color: var(--primary-color-text); color: var(--primary-color-text);
@ -55,36 +64,33 @@
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100%;
margin-left: auto; margin-left: auto;
display: flex; display: flex;
> li { > li {
height: 70px; margin-right: .5rem;
line-height: 70px;
> a { > a {
font-weight: 500;
text-decoration: none; text-decoration: none;
color: var(--text-color); color: var(--text-color);
min-width: 120px; padding: .5rem 1.5rem;
font-size: 16px;
display: block; display: block;
text-align: center; text-align: center;
user-select: none; user-select: none;
line-height: 68px; border-radius: 10px;
border-bottom: 2px solid transparent;
transition: border-bottom-color .2s;
cursor: pointer; cursor: pointer;
transition: background-color .3s;
&:hover, &:focus {
border-bottom-color: var(--primary-color);
}
&:focus { &:focus {
z-index: 1; z-index: 1;
outline: 0 none; outline: 0 none;
transition: box-shadow .2s; transition: box-shadow .2s;
box-shadow: inset 0 0 0 0.2em $focusBorderColor; box-shadow: var(--focus-ring);
}
&:hover {
background-color: var(--surface-hover);
} }
} }
@ -94,9 +100,8 @@
> ul { > ul {
position: absolute; position: absolute;
transform-origin: top; transform-origin: top;
top: 70px; top: 40px;
right: 0; right: 0;
z-index: 2;
width: 275px; width: 275px;
max-height: 400px; max-height: 400px;
background-color: var(--surface-overlay); background-color: var(--surface-overlay);
@ -105,7 +110,7 @@
list-style-type: none; list-style-type: none;
padding: 1rem; padding: 1rem;
margin: 0; margin: 0;
border-radius: 3px; border-radius: 10px;
> li { > li {
line-height: 1; line-height: 1;
@ -132,8 +137,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
user-select: none; user-select: none;
border-radius: 3px; border-radius: 10px;
cursor: pointer; cursor: pointer;
width: 100%;
&:hover { &:hover {
background-color: var(--surface-hover); background-color: var(--surface-hover);