Skip to content

WEB-(356)-improve the css of general-tab #2716

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

WEB-(356)-improve the css of general-tab #2716

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 13 additions & 10 deletions src/app/organization/offices/view-office/general-tab/general-tab.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,22 @@
<div class="tab-container mat-typography">
<div class="layout-align-end action-button m-b-20">
<span *mifosxHasPermission="'UPDATE_OFFICE'">
<button mat-raised-button color="primary" [routerLink]="['../edit']">
<fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
</button>
</span>
</div>

<div class="layout-row-wrap responsive-column">
<div class="tab-container mat-typography compact-view">
<div class="layout-row-wrap responsive-column compact-details condensed">
<div class="flex-45 mat-body-strong left">{{ 'labels.inputs.Parent Office' | translate }}</div>
<div class="flex-50 right">
{{ officeData.parentName ? officeData.parentName : 'N/A' }}
</div>
<hr class="section-divider" />

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

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

<div class="flex-45 mat-body-strong left">{{ 'labels.inputs.External Id' | translate }}</div>
<div class="flex-50 right" *ngIf="officeData.externalId">
Expand All @@ -31,4 +26,12 @@
{{ 'labels.inputs.Unassigned' | translate }}
</div>
</div>

<div class="bottom-button-container small-buttons">
<span *mifosxHasPermission="'UPDATE_OFFICE'">
<button mat-raised-button color="primary" [routerLink]="['../edit']" class="edit-button">
<fa-icon icon="edit" class="m-r-5"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
</button>
</span>
</div>
</div>
100 changes: 98 additions & 2 deletions src/app/organization/offices/view-office/general-tab/general-tab.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
.tab-container {
padding: 1%;
margin: 1%;
padding: 0.5rem;
margin: 1% auto;
max-width: 600px;
width: 90%;

.delete-button {
margin-left: 1%;
Expand All @@ -14,3 +16,97 @@
.table-data {
margin-top: 3px;
}

.compact-button {
padding: 0.25rem 0.75rem;
font-size: 0.9rem;
line-height: 1.75;
}

.compact-details {
font-size: 0.9rem;

.left,
.right {
padding: 0.25rem 0;
}

.mat-body-strong {
font-size: 0.9rem;
}
}

.m-b-10 {
margin-bottom: 10px;
}

.m-r-5 {
margin-right: 5px;
}
Comment on lines +39 to +45
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Consider centralizing margin utility classes.

The generic margin utilities .m-b-10 and .m-r-5 are defined within this component-scoped SCSS file. If these are used across multiple components or if a global utility system already exists, consider:

  1. Moving these to a shared utilities file (e.g., src/styles/utilities.scss or similar)
  2. Checking if a Tailwind CSS or Bootstrap utility system already provides these

This will improve maintainability and prevent duplicate utility definitions across the codebase.

Run the following script to check if these utilities exist elsewhere:

🏁 Script executed:

#!/bin/bash
# Search for duplicate margin utility definitions

echo "=== Searching for .m-r-5 definition ==="
rg -nA2 '\.m-r-5\s*\{' --type scss

echo "=== Searching for .m-b-10 definition ==="
rg -nA2 '\.m-b-10\s*\{' --type scss

echo "=== Checking for global utilities file ==="
fd -e scss -e css | grep -iE 'utilities|common|global|variables' | head -10

Length of output: 508

Now I'll run a corrected script to search for the margin utilities in the codebase.


---

🏁 Script executed:

```shell
#!/bin/bash
# Search for margin utility definitions using corrected approach

echo "=== Searching for .m-r-5 definitions (glob pattern) ==="
rg -nA2 '\.m-r-5\s*\{' -g '*.scss' -g '*.css'

echo ""
echo "=== Searching for .m-b-10 definitions (glob pattern) ==="
rg -nA2 '\.m-b-10\s*\{' -g '*.scss' -g '*.css'

echo ""
echo "=== Searching for margin utility pattern m-[rblt]-[0-9] ==="
rg -nA1 '\.m-[rblt]-\d+\s*\{' -g '*.scss' -g '*.css' | head -20

echo ""
echo "=== Checking if general-tab.component.scss has margins ==="
rg -n 'margin-(right|bottom):' src/app/organization/offices/view-office/general-tab/general-tab.component.scss

echo ""
echo "=== Checking theme variables file ==="
cat src/theme/_variables.scss 2>/dev/null | head -50 || echo "File not found or cannot be read"

Length of output: 2189

Now I'll verify how global utilities are loaded in this component and whether there are other style imports.

🏁 Script executed:

#!/bin/bash
# Verify component style configuration and global utility import

echo "=== Full general-tab.component.scss content ==="
cat src/app/organization/offices/view-office/general-tab/general-tab.component.scss

echo ""
echo "=== Checking general-tab.component.ts for styleUrls ==="
rg -n 'styleUrls|styles:' src/app/organization/offices/view-office/general-tab/general-tab.component.ts -A3 -B1

echo ""
echo "=== Checking if global styles are imported in angular.json or main.ts ==="
grep -r '_margin\.scss' src/ 2>/dev/null | head -5

echo ""
echo "=== Checking styles.scss for global utility imports ==="
cat src/styles.scss 2>/dev/null | grep -E '@import.*margin|@include' | head -10

Length of output: 1902

Remove duplicate margin utilities from component SCSS.

The utilities .m-b-10 and .m-r-5 (lines 39-45) are duplicated. They already exist in src/assets/styles/_margin.scss with identical definitions. Remove these lines and either:

  • Import the global utilities file: @import 'src/assets/styles/margin';
  • Or ensure global styles are accessible to this component

This eliminates code duplication and aligns with the established utility system.

🤖 Prompt for AI Agents 
In
src/app/organization/offices/view-office/general-tab/general-tab.component.scss
around lines 39 to 45, the `.m-b-10` and `.m-r-5` margin utility rules are
duplicates of the global utilities in src/assets/styles/_margin.scss; remove
these two rule blocks from this component stylesheet and either add an import of
the shared utilities (e.g., import the global margin utilities file from
src/assets/styles/margin) at the top of this component SCSS or ensure the global
styles are included via the project/global style pipeline so the component uses
the single source of truth for margin utilities.


.bottom-button-container {
display: flex;
justify-content: center;
margin-top: 2rem;
padding: 1rem 0;
}

.edit-button {
min-width: 120px;
padding: 0.5rem 1.5rem;
font-size: 1rem;
border-radius: 4px;
box-shadow: 0 3px 5px rgb(0 0 0 / 20%);
transition: all 0.3s ease;

&:hover {
box-shadow: 0 4px 8px rgb(0 0 0 / 30%);
transform: translateY(-2px);
}
}

.layout-row-wrap {
margin: 0 auto;
padding: 0.5rem;
}

.section-divider {
width: 100%;
border: 0;
border-top: 1px solid rgb(0 0 0 / 10%);
margin: 8px 0;
}

.compact-view {
padding: 0.3rem;
margin: 0 auto;
max-width: 450px;
width: 90%;
}

.condensed {
.flex-45,
.flex-50 {
padding: 0.2rem 0;
font-size: 0.85rem;
}

.section-divider {
margin: 4px 0;
}
}

.small-buttons {
margin-top: 1rem;

.edit-button {
min-width: 100px;
padding: 0.35rem 1rem;
font-size: 0.9rem;
}
}

.tab-container.compact-view {
max-width: 450px;
width: 90%;
}
8 changes: 5 additions & 3 deletions src/app/organization/offices/view-office/view-office.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
<div class="container">
<div class="container narrow-container extra-small">
<mat-card class="office-card">
<mat-card-content>
<mat-card-content class="card-content">
<nav mat-tab-nav-bar class="navigation-tabs" [tabPanel]="tabPanel">
<a
mat-tab-link
[routerLink]="['./general']"
routerLinkActive
#general="routerLinkActive"
[active]="general.isActive"
class="compact-tab"
>
{{ 'labels.inputs.General' | translate }}
</a>
Expand All @@ -19,13 +20,14 @@
routerLinkActive
#datatable="routerLinkActive"
[active]="datatable.isActive"
class="compact-tab"
>
{{ officeDatatable.registeredTableName }}
</a>
</span>
</nav>

<mat-tab-nav-panel #tabPanel>
<mat-tab-nav-panel #tabPanel class="tab-panel">
<router-outlet></router-outlet>
</mat-tab-nav-panel>
</mat-card-content>
Expand Down
69 changes: 65 additions & 4 deletions src/app/organization/offices/view-office/view-office.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,74 @@
.action-button {
width: 95%;
width: 85%;
margin: 0.2rem auto;
padding: 0.3rem;
border-radius: 3px;
transition: all 0.3s ease;

&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
}
}

.office-card {
margin: 0 auto;
width: 90%;
padding: 0;
width: 100%;
margin: 0.75rem auto;
padding: 0.5rem;
border-radius: 8px !important;
box-shadow: 0 2px 8px rgb(0 0 0 / 10%) !important;

.navigation-tabs {
overflow: auto;
padding: 0.2rem 0;
scrollbar-width: thin;

&::-webkit-scrollbar {
height: 4px;
}

&::-webkit-scrollbar-thumb {
background-color: rgb(0 0 0 / 20%);
border-radius: 4px;
}

.mat-tab-label {
min-width: 80px;
padding: 0 0.5rem;
height: 36px;
font-size: 0.85rem;
}
}

@media (width <= 768px) {
width: 85%;
padding: 0.4rem;
}
}

.container {
padding: 0.5rem;
}

.narrow-container {
max-width: 600px;
margin: 0 auto;
padding: 0.75rem;
}

.extra-small {
max-width: 500px;
}

.compact-tab {
min-width: auto;
padding: 0 12px;
}

.card-content {
padding: 0.5rem;
}

.tab-panel {
padding: 0.5rem 0;
}