Skip to content

Commit 28c8f7b

Browse files
shubhamkumar9199shubhamkumar9199
authored
improve the css of general-tab (#2721)
remove the dupicate line of code
1 parent 6eecb45 commit 28c8f7b

File tree

4 files changed

+173
-19
lines changed

4 files changed

+173
-19
lines changed

‎src/app/organization/offices/view-office/general-tab/general-tab.component.html‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,22 @@
1-
<div class="tab-container mat-typography">
2-
<div class="layout-align-end action-button m-b-20">
3-
<span *mifosxHasPermission="'UPDATE_OFFICE'">
4-
<button mat-raised-button color="primary" [routerLink]="['../edit']">
5-
<fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
6-
</button>
7-
</span>
8-
</div>
9-
10-
<div class="layout-row-wrap responsive-column">
1+
<div class="tab-container mat-typography compact-view">
2+
<div class="layout-row-wrap responsive-column compact-details condensed">
113
<div class="flex-45 mat-body-strong left">{{ 'labels.inputs.Parent Office' | translate }}</div>
124
<div class="flex-50 right">
135
{{ officeData.parentName ? officeData.parentName : 'N/A' }}
146
</div>
7+
<hr class="section-divider" />
158

169
<div class="flex-45 mat-body-strong left">{{ 'labels.inputs.Opened On' | translate }}</div>
1710
<div class="flex-50 right">
1811
{{ officeData.openingDate ? (officeData.openingDate | dateFormat) : 'Unassigned' }}
1912
</div>
13+
<hr class="section-divider" />
2014

2115
<div class="flex-45 mat-body-strong left">{{ 'labels.inputs.Name Decorated' | translate }}</div>
2216
<div class="flex-50 right">
2317
{{ officeData.nameDecorated ? officeData.nameDecorated : 'Unassigned' }}
2418
</div>
19+
<hr class="section-divider" />
2520

2621
<div class="flex-45 mat-body-strong left">{{ 'labels.inputs.External Id' | translate }}</div>
2722
<div class="flex-50 right" *ngIf="officeData.externalId">
@@ -31,4 +26,12 @@
3126
{{ 'labels.inputs.Unassigned' | translate }}
3227
</div>
3328
</div>
29+
30+
<div class="bottom-button-container small-buttons">
31+
<span *mifosxHasPermission="'UPDATE_OFFICE'">
32+
<button mat-raised-button color="primary" [routerLink]="['../edit']" class="edit-button">
33+
<fa-icon icon="edit" class="m-r-5"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
34+
</button>
35+
</span>
36+
</div>
3437
</div>

‎src/app/organization/offices/view-office/general-tab/general-tab.component.scss‎

Lines changed: 90 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
.tab-container {
2-
padding: 1%;
3-
margin: 1%;
2+
padding: 0.5rem;
3+
margin: 1% auto;
4+
max-width: 600px;
5+
width: 90%;
46

57
.delete-button {
68
margin-left: 1%;
@@ -14,3 +16,89 @@
1416
.table-data {
1517
margin-top: 3px;
1618
}
19+
20+
.compact-button {
21+
padding: 0.25rem 0.75rem;
22+
font-size: 0.9rem;
23+
line-height: 1.75;
24+
}
25+
26+
.compact-details {
27+
font-size: 0.9rem;
28+
29+
.left,
30+
.right {
31+
padding: 0.25rem 0;
32+
}
33+
34+
.mat-body-strong {
35+
font-size: 0.9rem;
36+
}
37+
}
38+
39+
.bottom-button-container {
40+
display: flex;
41+
justify-content: center;
42+
margin-top: 2rem;
43+
padding: 1rem 0;
44+
}
45+
46+
.edit-button {
47+
min-width: 120px;
48+
padding: 0.5rem 1.5rem;
49+
font-size: 1rem;
50+
border-radius: 4px;
51+
box-shadow: 0 3px 5px rgb(0 0 0 / 20%);
52+
transition: all 0.3s ease;
53+
54+
&:hover {
55+
box-shadow: 0 4px 8px rgb(0 0 0 / 30%);
56+
transform: translateY(-2px);
57+
}
58+
}
59+
60+
.layout-row-wrap {
61+
margin: 0 auto;
62+
padding: 0.5rem;
63+
}
64+
65+
.section-divider {
66+
width: 100%;
67+
border: 0;
68+
border-top: 1px solid rgb(0 0 0 / 10%);
69+
margin: 8px 0;
70+
}
71+
72+
.compact-view {
73+
padding: 0.3rem;
74+
margin: 0 auto;
75+
max-width: 450px;
76+
width: 90%;
77+
}
78+
79+
.condensed {
80+
.flex-45,
81+
.flex-50 {
82+
padding: 0.2rem 0;
83+
font-size: 0.85rem;
84+
}
85+
86+
.section-divider {
87+
margin: 4px 0;
88+
}
89+
}
90+
91+
.small-buttons {
92+
margin-top: 1rem;
93+
94+
.edit-button {
95+
min-width: 100px;
96+
padding: 0.35rem 1rem;
97+
font-size: 0.9rem;
98+
}
99+
}
100+
101+
.tab-container.compact-view {
102+
max-width: 450px;
103+
width: 90%;
104+
}

‎src/app/organization/offices/view-office/view-office.component.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1-
<div class="container">
1+
<div class="container narrow-container extra-small">
22
<mat-card class="office-card">
3-
<mat-card-content>
3+
<mat-card-content class="card-content">
44
<nav mat-tab-nav-bar class="navigation-tabs" [tabPanel]="tabPanel">
55
<a
66
mat-tab-link
77
[routerLink]="['./general']"
88
routerLinkActive
99
#general="routerLinkActive"
1010
[active]="general.isActive"
11+
class="compact-tab"
1112
>
1213
{{ 'labels.inputs.General' | translate }}
1314
</a>
@@ -19,13 +20,14 @@
1920
routerLinkActive
2021
#datatable="routerLinkActive"
2122
[active]="datatable.isActive"
23+
class="compact-tab"
2224
>
2325
{{ officeDatatable.registeredTableName }}
2426
</a>
2527
</span>
2628
</nav>
2729

28-
<mat-tab-nav-panel #tabPanel>
30+
<mat-tab-nav-panel #tabPanel class="tab-panel">
2931
<router-outlet></router-outlet>
3032
</mat-tab-nav-panel>
3133
</mat-card-content>

‎src/app/organization/offices/view-office/view-office.component.scss‎

Lines changed: 65 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,74 @@
11
.action-button {
2-
width: 95%;
2+
width: 85%;
3+
margin: 0.2rem auto;
4+
padding: 0.3rem;
5+
border-radius: 3px;
6+
transition: all 0.3s ease;
7+
8+
&:hover {
9+
transform: translateY(-2px);
10+
box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
11+
}
312
}
413

514
.office-card {
6-
margin: 0 auto;
7-
width: 90%;
8-
padding: 0;
15+
width: 100%;
16+
margin: 0.75rem auto;
17+
padding: 0.5rem;
18+
border-radius: 8px !important;
19+
box-shadow: 0 2px 8px rgb(0 0 0 / 10%) !important;
920

1021
.navigation-tabs {
1122
overflow: auto;
23+
padding: 0.2rem 0;
24+
scrollbar-width: thin;
25+
26+
&::-webkit-scrollbar {
27+
height: 4px;
28+
}
29+
30+
&::-webkit-scrollbar-thumb {
31+
background-color: rgb(0 0 0 / 20%);
32+
border-radius: 4px;
33+
}
34+
35+
.mat-tab-label {
36+
min-width: 80px;
37+
padding: 0 0.5rem;
38+
height: 36px;
39+
font-size: 0.85rem;
40+
}
1241
}
42+
43+
@media (width <= 768px) {
44+
width: 85%;
45+
padding: 0.4rem;
46+
}
47+
}
48+
49+
.container {
50+
padding: 0.5rem;
51+
}
52+
53+
.narrow-container {
54+
max-width: 600px;
55+
margin: 0 auto;
56+
padding: 0.75rem;
57+
}
58+
59+
.extra-small {
60+
max-width: 500px;
61+
}
62+
63+
.compact-tab {
64+
min-width: auto;
65+
padding: 0 12px;
66+
}
67+
68+
.card-content {
69+
padding: 0.5rem;
70+
}
71+
72+
.tab-panel {
73+
padding: 0.5rem 0;
1374
}

0 commit comments

Comments
 (0)