Merge pull request #5780 from deepaksinghgusain227/layout-shifting

Fixed Layout  shifting admin panel
This commit is contained in:
Devansh 2022-02-10 14:30:55 +05:30 committed by GitHub
commit 0d40d79ff8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 117 additions and 102 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,4 @@
{
"/js/admin.js": "/js/admin.js?id=94da304c8b02ad3ba649",
"/css/admin.css": "/css/admin.css?id=df6b15e0f1deaef7b05c"
"/css/admin.css": "/css/admin.css?id=16744efa5e8848504030"
}

View File

@ -820,7 +820,6 @@ body {
}
.content-container {
padding-left: 0px;
position: absolute;
margin-top: 60px;
top: 0px;

View File

@ -11,25 +11,28 @@ $toggleColor: #3c41ff;
max-height: $toggleSize + $toggleMargin;
overflow: visible;
outline: none;
&.is-active {
.nav-toggle {
&:before, &:after {
&:before,
&:after {
box-shadow: none;
}
}
.nav-items,.nav-top {
.nav-items,
.nav-top {
transform: translate(0, 0);
}
.overlay{
.overlay {
display: block;
}
}
.overlay{
background-color: rgba(0,0,0,0.8);
.overlay {
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
@ -38,9 +41,9 @@ $toggleColor: #3c41ff;
display: none;
z-index: 1;
}
.nav-toggle {
background-image: url(./../images/hamburger.svg);
background-image: url(./../images/hamburger.svg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
@ -49,7 +52,7 @@ $toggleColor: #3c41ff;
height: $toggleSize;
margin: $toggleMargin;
z-index: 1;
&:hover {
cursor: pointer;
}
@ -86,7 +89,7 @@ $toggleColor: #3c41ff;
transform: rotate(-45deg);
}
}
.nav-top {
position: fixed;
top: 0;
@ -103,41 +106,41 @@ $toggleColor: #3c41ff;
display: grid;
grid-template-columns: 1fr;
align-content: start;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
text-decoration: none;
.pro-info{
.pro-info {
width: 100%;
padding: 15px;
position: absolute;
.profile-info-icon{
position:absolute;
display:inline-block;
.profile-info-icon {
position: absolute;
display: inline-block;
background: #3c41ff;
height: 30px;
width: 30px;
text-align: center;
border-radius: 50%;
> span{
display:block;
margin:6px;
>span {
display: block;
margin: 6px;
font-size: 18px;
color: #fff;
}
}
.profile-info-desc{
display:inline-block;
.profile-info-desc {
display: inline-block;
margin-left: 40px;
.name{
.name {
font-size: 18px;
color: #000;
}
.role{
.role {
font-size: 10px;
color: #000;
}
@ -145,8 +148,8 @@ $toggleColor: #3c41ff;
}
}
.nav-items{
.nav-items {
position: fixed;
top: 60px;
left: 0;
@ -163,7 +166,7 @@ $toggleColor: #3c41ff;
grid-template-columns: 1fr;
align-content: start;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
overflow-y: scroll ;
overflow-y: scroll;
text-decoration: none;
&::-webkit-scrollbar {
@ -175,131 +178,143 @@ $toggleColor: #3c41ff;
font-size: 16px;
text-transform: capitalize;
text-decoration: none;
a{
color:#000;
display: block;
padding: 5px;
.arrow-icon{
position: absolute;
right: 0;
}
a {
color: #000;
display: block;
padding: 5px;
.arrow-icon {
position: absolute;
right: 0;
}
}
ul{
display: none;
.navbar-child{
text-transform: capitalize;
padding: 15px;
&.active,&:hover {
background-color: #e6e6e6;
}
}
}
ul {
display: none;
.display-block{
display: block !important;
}
.navbar-child {
text-transform: capitalize;
padding: 15px;
&.active {
background-color: #e6e6e6;
> a{
background-color: #ddd;
&.active,
&:hover {
background-color: #e6e6e6;
}
}
}
&:hover {
> a{
background-color: #ddd;
}
}
.display-block {
display: block !important;
}
&.active {
background-color: #e6e6e6;
>a {
background-color: #ddd;
}
}
&:hover {
>a {
background-color: #ddd;
}
}
}
}
}
}
.rtl{
.nav-container{
.rtl {
.nav-container {
.close{
left:13px;
.close {
left: 13px;
right: auto !important;
}
&.is-active {
.nav-toggle {
&:before, &:after {
&:before,
&:after {
box-shadow: none;
}
}
.nav-items,.nav-top {
.nav-items,
.nav-top {
transform: translate(0, 0);
}
.overlay{
.overlay {
display: block;
}
}
.nav-top{
.nav-top {
right: 0;
left: 100%;
transform: translate(calc(100% + 50px), 0);
.pro-info{
.profile-info-desc{
.pro-info {
.profile-info-desc {
margin-left: 0px;
margin-right: 40px;
}
}
}
.nav-items{
.nav-items {
right: 0;
left: 100%;
transform: translate(calc(100% + 50px), 0);
a{
.arrow-icon{
position: absolute;
right: auto;
left: 20px;
}
a {
.arrow-icon {
position: absolute;
right: auto;
left: 20px;
}
}
}
}
}
@media only screen and (max-width: 768px){
.nav-container {
display: inline-block;
}
@media only screen and (max-width: 768px) {
.nav-container {
display: inline-block;
}
.destop-logo {
display: none;
}
.destop-logo {
display: none;
}
.content-container{
padding-left: 0px !important;
}
.content-container {
padding-left: 0px !important;
}
.padding-container-navbar-not-expand {
padding-left: 0 !important;
.padding-container-navbar-not-expand {
padding-left: 0 !important;
}
.padding-container-navbar-expand {
padding-left: 0 !important;
padding-left: 0 !important;
}
.rtl {
.padding-container-navbar-not-expand {
padding-right: 0 !important;
}
.content-container {
padding-left: 0px !important;
padding-right: 0px !important;
}
.padding-container-navbar-expand {
padding-right: 0 !important;
}
.padding-container-navbar-not-expand {
padding-right: 0 !important;
}
.padding-container-navbar-expand {
padding-right: 0 !important;
}
}
}

View File

@ -37,6 +37,7 @@
.content-container {
padding-left: 0px;
padding-right: 56px;
.content .page-header {
.page-title {

View File

@ -43,7 +43,7 @@
{!! view_render_event('bagisto.admin.layout.nav-left.after') !!}
<div :class="isMenuOpen ? 'content-container padding-container-navbar-expand' : 'content-container padding-container-navbar-not-expand'">
<div class="content-container" :class="isMenuOpen ? 'padding-container-navbar-expand' : 'padding-container-navbar-not-expand'">
{!! view_render_event('bagisto.admin.layout.content.before') !!}