WEB-(356)-Fix general tab changes #2721
Conversation
WalkthroughLayout and styling updates across office view and general tab templates and SCSS: introduces compact/condensed classes, section dividers, moved edit button to bottom container, replaces External ID display with component, and adds responsive utility styles and scrollbar/button refinements. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (4)
🧰 Additional context used📓 Path-based instructions (1)src/app/**⚙️ CodeRabbit configuration file
Files:
🔇 Additional comments (11)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/app/organization/offices/view-office/general-tab/general-tab.component.scss (1)
20-24: Unused .compact-button class—consider removing or clarifying intent.The
.compact-buttonclass is defined (with padding, font-size, line-height) but does not appear to be used in general-tab.component.html. The Edit button instead uses the.edit-buttonclass. Either apply this class where appropriate or remove it to avoid dead code.src/app/organization/offices/view-office/view-office.component.scss (1)
15-19: Avoid !important flags in box-shadow and border-radius overrides.Lines 18–19 use
!importantonborder-radiusandbox-shadowto override Material Design card styles. This can complicate future styling changes and maintenance. Consider using CSS specificity (e.g.,.office-card.office-card { border-radius: 8px; }) or ensuring these styles are applied in the correct cascade order without!important.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/app/organization/offices/view-office/general-tab/general-tab.component.html(2 hunks)src/app/organization/offices/view-office/general-tab/general-tab.component.scss(2 hunks)src/app/organization/offices/view-office/view-office.component.html(2 hunks)src/app/organization/offices/view-office/view-office.component.scss(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
src/app/**
⚙️ CodeRabbit configuration file
src/app/**: For Angular code: verify component separation, trackBy on *ngFor,
strict type safety, and clean observable patterns.
Files:
src/app/organization/offices/view-office/view-office.component.scsssrc/app/organization/offices/view-office/general-tab/general-tab.component.htmlsrc/app/organization/offices/view-office/view-office.component.htmlsrc/app/organization/offices/view-office/general-tab/general-tab.component.scss
🔇 Additional comments (18)
src/app/organization/offices/view-office/view-office.component.html (2)
1-1: Verify that extra-small and narrow-container classes produce intended max-width.Both
narrow-container(max-width: 600px) andextra-small(max-width: 500px) constrain width on the same container. Confirm that the narrower constraint (500px) is the intended final width for this view.
11-11: CSS class additions align with compact-tab styling.The
compact-tabclass is applied consistently to both the General tab link and datatable tab links. Verify that this class is defined in view-office.component.scss (it is present at line 63-66) and achieves the intended compact appearance.Also applies to: 23-23
src/app/organization/offices/view-office/general-tab/general-tab.component.scss (8)
2-5: Updated tab-container spacing aligns with compact layout.The changes to padding (0.5rem), margin (1% auto), max-width (600px), and width (90%) establish a narrower, centered container—consistent with the compact design direction.
26-37: Well-structured .compact-details with nested responsive typography.The class appropriately reduces font sizes and padding for a denser layout. Nesting of
.leftand.rightis clear, and the.mat-body-strongoverride ensures typography consistency. Good practice.
39-44: Bottom-button-container flexbox layout is clean.Flexbox centering (justify-content: center) with top margin (2rem) and padding (1rem 0) creates appropriate visual spacing for the Edit button placement.
46-58: Edit-button hover effects are polished, but verify Material Design alignment.The button styling includes modern micro-interactions (translateY transform on hover, dynamic box-shadow). Confirm that the custom styles do not conflict with Material Design button base styles or create unexpected behavior when combined with
[mat-raised-button].
65-70: Section-divider styling is semantic and appropriate.Using
<hr>with transparent black border (rgb(0 0 0 / 10%)) provides subtle visual separation. Good choice over decorative divs.
72-77: Compact-view container maintains width constraints consistent with narrow-container.Max-width of 450px aligns with the extra-small constraint (500px from view-office.component.scss), creating a cohesive narrow-layout strategy across the component hierarchy.
79-89: Condensed class appropriately reduces typography and spacing.Font-size reduction (0.85rem) and padding reduction (0.2rem) in flex utilities, along with smaller section dividers (4px margin), support a compact, dense information display.
91-99: Small-buttons wrapper with nested edit-button override is logical.This follows a good naming convention and allows buttons within this container to inherit compact sizing without modifying the global
.edit-buttondefinition.src/app/organization/offices/view-office/general-tab/general-tab.component.html (4)
1-2: Container and layout classes correctly apply compact styling.The combination of
tab-container,mat-typography,compact-viewon the root container andlayout-row-wrap,responsive-column,compact-details,condensedon the layout wrapper establishes the intended compact, responsive structure.
7-7: Section dividers improve information hierarchy.The
<hr class="section-divider" />elements between Parent Office, Opened On, Name Decorated, and External Id visually separate information blocks and are styled consistently with the new SCSS definition (line 65–70 of general-tab.component.scss).Also applies to: 13-13, 19-19
22-27: Conditional external-identifier rendering is well-implemented.The component correctly uses
*ngIf="officeData.externalId"to conditionally render themifosx-external-identifiercomponent and falls back to an "Unassigned" message when the external ID is not present. Verify that themifosx-external-identifiercomponent is imported and available in the module.
30-36: Edit button repositioned to bottom-button-container with proper permission gating.Moving the Edit button to a dedicated bottom container improves visual hierarchy. The
*mifosxHasPermission="'UPDATE_OFFICE'"guard correctly restricts button visibility. Icon spacing updated fromm-r-10tom-r-5aligns with the compact aesthetic.src/app/organization/offices/view-office/view-office.component.scss (4)
2-12: Action-button styling introduces polished hover interactions.The width (85%), margin (0.2rem auto), padding (0.3rem), border-radius (3px), and smooth transition (all 0.3s ease) are appropriate. The hover effect (translateY, box-shadow) is consistent with the edit-button styling in general-tab.component.scss and provides good visual feedback.
21-40: Navigation-tabs styling with custom scrollbar is well-implemented.The scrollbar styling (lines 26–33) provides a thin, modern appearance with webkit support. The
.mat-tab-labeloverrides (lines 35–40) reduce min-width (80px), adjust padding (0 0.5rem), set height (36px), and shrink font-size (0.85rem)—all supporting the compact tab aesthetic without breaking Material tab layout.
43-46: Responsive media query at 768px adjusts card width appropriately.The media query reduces
.office-cardwidth to 85% on smaller viewports, complementing the general-tab.component.scss compact-view responsive design and ensuring consistent narrow-layout behavior across screen sizes.
49-74: New utility classes (container, narrow-container, extra-small, compact-tab, card-content, tab-panel) are well-organized and consistent.These classes establish a cohesive layout vocabulary for the view-office feature:
narrow-container(max-width: 600px) andextra-small(max-width: 500px) provide width constraints.compact-tab(min-width: auto, padding: 0 12px) adjusts tab sizing.card-contentandtab-paneladd padding refinements.- All sizing and spacing values align with the compact design direction across related components.
remove the dupicate line of code
shubhamkumar9199
force-pushed
the
fix-general-tab-changes
branch
from
9efe2cc to
f293e9f
Compare
|
We need to maintain consistency if you’re changing this layout, make sure to update all other pages that follow the same format like “General” tab. |
@gkbishnoi07 Yes, I know that. That’s why I’m not changing the color and am keeping the button positioned in the same place. However, the size needs to be different because each page has different content — only the box size varies. |
3 participants
Description
Enhanced the CSS for the button to improve spacing, padding, and alignment
#{Issue Number}
WEB-(356)
Screenshots, if any
before:
after:
Checklist
Please make sure these boxes are checked before submitting your pull request - thanks!
[ X ] If you have multiple commits please combine them into one commit by squashing them.
[ X ] Read and understood the contribution guidelines at
web-app/.github/CONTRIBUTING.md.Summary by CodeRabbit