Skip to content

Commit 7b3ed11

Browse files
ararcosararcos
committed
style: TT-370 Change in the code format
1 parent 54c8879 commit 7b3ed11

File tree

2 files changed

+95
-88
lines changed

2 files changed

+95
-88
lines changed

‎src/app/modules/shared/components/sidebar/sidebar.component.html‎

Lines changed: 40 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,50 @@
11
<div id="wrapper" class="d-flex bg-grayTW-lightest dark:bg-grayTW-darker dark:text-whiteTW">
2-
<div id="sidebar-wrapper" class="table-row border-r border-grayTW-lighter shadow-sm bg-whiteTW dark:bg-grayTW-dark dark:border-grayTW">
3-
<div class="table-cell">
4-
<div class="relative flex items-center border-b border-grayTW-lighter dark:border-grayTW sidebar-heading">
5-
<img src="assets/img/ioet-logo-without-letters.png" alt="ioet-logo" width="50" height="auto" style="padding-top: 0.5rem; padding-left: 1rem;" />
6-
<h1 class="pl-2 pt-2" style="font-family:spinnaker,sans-serif">ioet</h1>
7-
</div>
8-
<app-user></app-user>
9-
<div class="list-group list-group-flush bg-whiteTW dark:bg-grayTW-darker">
10-
<a *ngFor="let item of itemsSidebar" [routerLink]="item.route" routerLinkActive="" class="font-poppins relative pl-4 py-3 bg-whiteTW dark:bg-grayTW-dark dark:text-whiteTW" [ngClass]="{active: item.active}">
11-
<em class="{{ item.icon }}"></em>
12-
<h3 class="font-poppins text-base ml-4 pl-3 -mt-6 text-left">{{ item.text }}</h3>
13-
</a>
14-
<div id="btn-bottom" class="bg-whiteTW pt-2 pr-24 absolute bottom-1 dark:bg-grayTW-dark btn-dark-mode">
15-
<a class="flex pl-4 text-blackTW hover:text-grayTW dark:text-whiteTW" href="#">
16-
<em class="fas fa-sign-out-alt"></em>
17-
<span class="font-poppins pl-3 font-medium -mt-1 dark:text-whiteTW" (click)="logout()">Sign out</span>
18-
</a>
19-
<app-dark-mode id="btn-dark-mode" class="relative left-40"></app-dark-mode>
20-
</div>
21-
</div>
22-
</div>
23-
<div class="table-cell relative">
24-
<span class="absolute cursor-pointer inset-y-0 right-0 min-h-screen w-0.5 hover:z-0 hover:bg-primaryTW-light" (click)="toggleSideBar()"></span>
25-
<span class="group cursor-pointer absolute w-5 top-28 -right-3">
2+
<div id="sidebar-wrapper" class="table-row border-r border-grayTW-lighter shadow-sm bg-whiteTW dark:bg-grayTW-dark dark:border-grayTW">
3+
<div class="table-cell">
4+
<div class="relative flex items-center border-b border-grayTW-lighter dark:border-grayTW sidebar-heading">
5+
<img src="assets/img/ioet-logo-without-letters.png" alt="ioet-logo" width="50" height="auto" style="padding-top: 0.5rem; padding-left: 1rem;"/>
6+
<h1 class="pl-2 pt-2" style="font-family:spinnaker,sans-serif">ioet</h1>
7+
</div>
8+
<app-user></app-user>
9+
<div class="list-group list-group-flush bg-whiteTW dark:bg-grayTW-darker">
10+
<a
11+
*ngFor="let item of itemsSidebar"
12+
[routerLink]="item.route"
13+
routerLinkActive=""
14+
class="font-poppins relative pl-4 py-3 bg-whiteTW dark:bg-grayTW-dark dark:text-whiteTW"
15+
[ngClass]="{active: item.active}"
16+
>
17+
<em class="{{ item.icon }}"></em>
18+
<h3 class="font-poppins text-base ml-4 pl-3 -mt-6 text-left" >{{ item.text }}</h3>
19+
</a>
20+
<div id="btn-bottom" class="bg-whiteTW pt-2 pr-24 absolute bottom-1 dark:bg-grayTW-dark">
21+
<a class="flex pl-4 text-blackTW hover:text-grayTW dark:text-whiteTW" href="#">
22+
<em class="fas fa-sign-out-alt"></em>
23+
<span class="font-poppins pl-3 font-medium -mt-1 dark:text-whiteTW" (click)="logout()">Sign out</span>
24+
</a>
25+
<app-dark-mode id="btn-dark-mode" class="relative left-40"></app-dark-mode>
26+
</div>
27+
</div>
28+
</div>
29+
<div class="table-cell relative">
30+
<span class="absolute cursor-pointer inset-y-0 right-0 min-h-screen w-0.5 hover:z-0 hover:bg-primaryTW-light" (click)="toggleSideBar()"></span>
31+
<span class="group cursor-pointer absolute w-5 top-28 -right-3">
2632
<img src="assets/icons/left-chevron.svg" alt="left-chevron" id="hide-sidebar" (click)="toggleSideBar()" width="20" height="20" class="bg-whiteTW rounded-full hover:bg-opacity-50 hover:bg-primaryTW-light sm:hidden md:block lg:block"/>
2733
<div class="opacity-0 w-12 bg-blackTW text-whiteTW text-center text-xs rounded-lg py-2 absolute z-10 group-hover:opacity-100 bottom-full left-1/4 ml-4 -mb-6 px-1 pointer-events-none">Hide</div>
2834
</span>
29-
<span class="group cursor-pointer absolute top-28 -right-5">
35+
<span class="group cursor-pointer absolute top-28 -right-5">
3036
<img src="assets/icons/right-chevron.svg" alt="right-chevron" id="show-sidebar" (click)="toggleSideBar()" width="20" height="20" class="bg-whiteTW rounded-full hover:bg-opacity-50 hover:bg-primaryTW-light sm:block md:hidden lg:hidden"/>
3137
<div class="opacity-0 w-12 bg-blackTW text-whiteTW text-center text-xs rounded-lg py-2 absolute z-10 group-hover:opacity-100 bottom-full left-1/4 ml-4 -mb-6 px-1 pointer-events-none">Show</div>
3238
</span>
39+
</div>
40+
</div>
41+
<div id="page-content-wrapper">
42+
<div class="container-fluid px-0 full-height">
43+
<div class="content_app h-100">
44+
<div class="m-1 p-5 rounded-md bg-whiteTW dark:bg-grayTW-dark">
45+
<router-outlet></router-outlet>
3346
</div>
47+
</div>
3448
</div>
35-
<div id="page-content-wrapper">
36-
<div class="container-fluid px-0 full-height">
37-
<div class="content_app h-100">
38-
<div class="m-1 p-5 rounded-md bg-whiteTW dark:bg-grayTW-dark">
39-
<router-outlet></router-outlet>
40-
</div>
41-
</div>
42-
</div>
43-
</div>
49+
</div>
4450
</div>

‎src/app/modules/shared/components/sidebar/sidebar.component.scss‎

Lines changed: 55 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,87 @@
11
@import '../../../../../styles/colors.scss';
2+
23
body {
3-
overflow-x: hidden;
4+
overflow-x: hidden;
45
}
56

67
#sidebar-wrapper {
7-
min-height: 100vh;
8-
margin-left: -15rem;
9-
-webkit-transition: margin 0.25s ease-out;
10-
-moz-transition: margin 0.25s ease-out;
11-
-o-transition: margin 0.25s ease-out;
12-
transition: margin 0.25s ease-out;
8+
min-height: 100vh;
9+
margin-left: -15rem;
10+
-webkit-transition: margin 0.25s ease-out;
11+
-moz-transition: margin 0.25s ease-out;
12+
-o-transition: margin 0.25s ease-out;
13+
transition: margin 0.25s ease-out;
1314
}
1415

1516
#sidebar-wrapper .sidebar-heading {
16-
padding: 0.875rem 1.25rem;
17-
font-size: 1.2rem;
17+
padding: 0.875rem 1.25rem;
18+
font-size: 1.2rem;
1819
}
1920

2021
#sidebar-wrapper .list-group {
21-
width: 15rem;
22+
width: 15rem;
2223
}
2324

2425
#page-content-wrapper {
25-
min-width: 100vw;
26+
min-width: 100vw;
2627
}
2728

2829
#wrapper.toggled #sidebar-wrapper {
29-
margin-left: 0;
30-
}
31-
32-
#btn-dark-mode {
33-
top: -2rem;
34-
}
35-
36-
#btn-bottom {
37-
height: 4%;
30+
margin-left: 0;
3831
}
3932

4033
@media (min-width: 769px) {
41-
#sidebar-wrapper {
42-
margin-left: 0;
43-
}
44-
#page-content-wrapper {
45-
min-width: 0;
46-
width: 100%;
47-
}
48-
#wrapper.toggled #sidebar-wrapper {
49-
margin-left: -15rem;
50-
}
51-
#hide-sidebar {
52-
display: block;
53-
}
54-
#show-sidebar {
55-
display: none;
56-
}
34+
#sidebar-wrapper {
35+
margin-left: 0;
36+
}
37+
#page-content-wrapper {
38+
min-width: 0;
39+
width: 100%;
40+
}
41+
#wrapper.toggled #sidebar-wrapper {
42+
margin-left: -15rem;
43+
}
44+
#hide-sidebar {
45+
display: block;
46+
}
47+
#show-sidebar {
48+
display: none;
49+
}
5750
}
5851

5952
@media (max-width: 768px) {
60-
#hide-sidebar {
61-
display: none;
62-
}
63-
#show-sidebar {
64-
display: block;
65-
}
53+
#hide-sidebar {
54+
display: none;
55+
}
56+
#show-sidebar {
57+
display: block;
58+
}
6659
}
6760

6861
.content_app {
69-
padding: 2rem 3rem 5rem 3rem;
70-
overflow-y: scroll;
62+
padding: 2rem 3rem 5rem 3rem;
63+
overflow-y: scroll;
7164
}
7265

7366
.active {
74-
color: $primary;
75-
font-weight: bold;
76-
border-color: $primary;
77-
background-color: transparent;
67+
color: $primary;
68+
font-weight: bold;
69+
border-color: $primary;
70+
background-color: transparent;
7871
}
7972

8073
.full-height {
81-
height: 100%;
82-
height: -moz-calc(100vh - 1vh);
83-
height: -webkit-calc(100vh - 1vh);
84-
height: -o-calc(100vh - 1vh);
85-
height: calc(100vh - 1vh);
86-
}
74+
height: 100%;
75+
height: -moz-calc(100vh - 1vh);
76+
height: -webkit-calc(100vh - 1vh);
77+
height: -o-calc(100vh - 1vh);
78+
height: calc(100vh - 1vh);
79+
}
80+
81+
#btn-dark-mode {
82+
top: -2rem;
83+
}
84+
85+
#btn-bottom {
86+
height: 4%;
87+
}

0 commit comments

Comments
 (0)