Skip to content

Commit

Permalink
reponsive ui for dashboard, placeholder for active steps, improved la…
Browse files Browse the repository at this point in the history 
…yout for mobile, desktop
  • Loading branch information
@lpandath @rekt-hard
lpandath authored and rekt-hard committed Sep 23, 2024
1 parent 7e7a2cc commit 2c4e7f8
Show file tree
Hide file tree
Showing 20 changed files with 550 additions and 229 deletions.
243 changes: 135 additions & 108 deletions apps/damap-frontend/src/app/components/layout/layout.component.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.mat-sidenav-container {
background-color: var(--background-body);
min-height: calc(100% - 50px);
overflow: clip;
}
Expand Down Expand Up @@ -37,15 +38,11 @@
margin-left: 90px;
}

@media (max-width: 1200px) {
.mat-sidenav.collapsed .bottom-section {
bottom: 70px !important;
}
}

.sidenav-btn {
display: block;
margin: 10px 25px;
.info-box {
padding: 16px;
border: 1px solid #ccc;
border-radius: 8px;
margin: 0px 20px;
}

.mat-sidenav.collapsed .bottom-section {
Expand All @@ -57,20 +54,37 @@
background: transparent;
}

.footer-desktop {
font-size: small;
display: flex;
justify-content: flex-end;
position: sticky;
.footer-icon {
display: none;
justify-content: center;
align-items: center;
background-color: var(--user-navbar-color);
color: var(--primary-lightest);
padding: 0.5rem 0 1rem;
position: absolute;
bottom: 0;
width: 100%;
}

.footer-mobile {
font-size: small;
#mainHeaderLogo svg {
width: 100%;
height: auto;
overflow: hidden;
vertical-align: middle;
}

#mainHeaderLogo {
top: 5px;
display: flex;
justify-content: flex-end;
position: sticky;
bottom: 0;
align-items: center;
justify-content: end;
width: 100px;
padding-right: 15px;
}

.sidenav-btn {
display: block;
margin: 10px 25px;
}

.mat-sidenav {
Expand All @@ -79,9 +93,7 @@
flex-direction: column;
justify-content: space-between;
overflow-y: auto;
height: 100%;
-ms-overflow-style: none;
box-shadow: 3px 0 6px rgba(255, 255, 255, 0.2);
}

.mat-nav-list {
Expand All @@ -94,7 +106,7 @@
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0.5rem 0;
padding: 1rem;
}

.mat-divider {
Expand All @@ -103,8 +115,7 @@

.footer {
background-color: var(--user-navbar-color);
color: white;
font-size: small;
color: var(--primary-lightest);
padding: 1rem 1rem;
z-index: 10;
display: flex;
Expand All @@ -122,21 +133,8 @@
}

.footer a {
color: white;
color: var(--primary-lightest);
text-decoration: none;
padding: 0 0.5rem;
}

.footer-icon {
display: none;
justify-content: center;
align-items: center;
background-color: var(--user-navbar-color);
color: white;
padding: 0.5rem 0 1rem;
position: absolute;
bottom: 0;
width: 100%;
}

.version-text {
Expand Down Expand Up @@ -177,7 +175,6 @@ mat-nav-list {
display: flex;
flex-direction: column;
justify-content: flex-end;
position: absolute;
bottom: 130px;
width: 100%;
}
Expand Down Expand Up @@ -209,8 +206,7 @@ mat-nav-list {
display: flex;
align-items: center;
text-align: left;
font-size: 2rem;
font-weight: 500;
margin: 0;
}

.languageElement-desktop {
Expand Down Expand Up @@ -240,7 +236,7 @@ mat-nav-list {
}

.logo A {
margin-left: 30px;
margin-left: 20px;
transition:
color 0.3s ease,
background 0.3s ease;
Expand All @@ -257,7 +253,7 @@ mat-nav-list {
align-items: center;
padding: 8px 10px;
background-color: var(--user-navbar-color);
color: var(--neutral-color-medium-light) !important;
color: var(--neutral-color-medium-light);
}

#user > div {
Expand All @@ -268,9 +264,17 @@ mat-nav-list {
transform: scale(1);
}

.toolbar {
background-color: var(--background-body);
}

#mainHeader {
height: 70px;
overflow: visible;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 20px;
height: 100%;
margin: 0px 10px;
}

#mainHeader #mainHeaderLogo A {
Expand All @@ -279,90 +283,113 @@ mat-nav-list {
display: block;
}

svg {
overflow: hidden;
vertical-align: middle;
.mm-navbars-top .languageElement A {
line-height: 70px;
height: 70px;
}

#mainHeader .mainHeaderRight {
margin-left: auto;
display: flex;
align-content: flex-end;
.mainHeaderLeft {
background-color: var(--secondary-container);
padding: 5px;
}

.mainHeaderNav {
display: flex;
min-width: 50px;
margin-right: 20px;
font-size: 1.2rem;
.mat-icon {
transform: scale(1.4);
}

.nav-item-desktop {
padding: 0 15px;
text-decoration: none;
color: var(--primary);
text-transform: uppercase;
line-height: 70px;
font-family: FFDINWebPro, sans-serif;
font-weight: 700;
display: block;
.active {
background-color: var(--surface-container-low);
padding-left: 22px;
font-weight: 400;
}

.mm-navbars-top .languageElement A {
line-height: 70px;
height: 70px;
.flex-row-container {
display: flex;
align-items: center;
gap: 10px;
}

@media (max-width: 800px) {
#mainHeader #mainHeaderLogo A {
position: relative;
margin-top: 0;
}

.sidenav-btn {
display: block;
margin: 10px 25px;
}

.mat-sidenav.collapsed .bottom-section {
bottom: 70px !important;
}

.mat-sidenav .logout-container {
justify-content: flex-end !important;
}
.info-icon-background {
position: relative;
width: 40px;
height: 40px;
background-color: var(--surface-container-low);
border-radius: 50%;
}

.logout-container {
justify-content: center;
}
.page-info-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#mainHeader #mainHeaderLogo {
top: 5px;
position: relative;
display: flex;
.example-button-container button {
align-items: center;
justify-content: end;
width: 100px;
padding-right: 15px;
justify-content: center;
}

#mainHeaderLogo A svg {
.info-box-container {
flex-wrap: wrap;
width: 100%;
height: auto;
font-weight: 300;
color: var(--user-navbar-color);
}

.mainHeaderLeft {
background-color: var(--secondary-container);
padding: 5px;
.header-container {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
width: 100%;
text-align: left;
}

.mat-icon {
transform: scale(1.4);
.header-title {
text-align: left;
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
}

.active {
background-color: var(--surface-container-low);
padding-left: 22px;
font-weight: 400;
.paragraph-section {
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
text-align: left;
font-weight: 300;
line-height: 1.2;
color: var(--neutral-color-medium-light);
}

@media (max-width: 800px) {
.header-container {
grid-template-columns: 1fr !important;
grid-template-rows: auto auto;
justify-items: center;
}
.logo-header {
order: -1;
justify-self: center;
margin-bottom: 10px;
}

.header-title {
order: 1;
text-align: center;
margin-bottom: 20px;
width: 100%;
}

.paragraph-section {
text-align: center;
}

.toolbar {
margin-top: 0 !important;
}

#mainHeader {
grid-template-columns: 1fr;
justify-items: center;
}
}
Loading

0 comments on commit 2c4e7f8

Please sign in to comment.