admin/Odoo-Modules
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(fusion_clock): portal white-border + responsive timesheet entries

Browse Source 
- White border on every portal page: the .fclk-app full-bleed relied on exact
  negative margins to cancel the portal layout's container padding; when it
  didn't match, the white page chrome showed through. Match the PAGE background
  to the app (light #f3f4f6 / dark #0f1117, via body:has(.fclk-app)) so the
  gutter is invisible, and clip horizontal overflow.
- Timesheets not responsive: the 6-column table crammed/wrapped on phones.
  Replaced the table with stacked cards (date + net up top, in -> out, then
  break / location / Correct) that read cleanly at any width. Correction-link
  data attributes preserved; the xpath-inherited .fclk-nav-bar untouched.

Live on entech 19.0.3.12.2 (both rules verified in the served frontend bundle).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-05-30 22:20:56 -04:00
parent 11108dfea3
commit a479052b72
3 changed files with 135 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
fusion_clock/static/src/css/portal_clock.css
View File

@@ -83,6 +83,27 @@ body:has(.fclk-app) .o_footer {
display: none !important;
}
/* Full-bleed: never let the portal layout's white chrome show as a border
around the dark app. Match the PAGE background to the app's background in
both themes (so the wrapper's container padding reads as an invisible
gutter) and clip horizontal overflow from the .fclk-app full-bleed margins. */
html:has(.fclk-app),
body:has(.fclk-app) {
background: #f3f4f6;
overflow-x: hidden;
}
@media (prefers-color-scheme: dark) {
html:has(.fclk-app),
body:has(.fclk-app) {
background: #0f1117;
}
}
html.o_dark:has(.fclk-app),
html.o_dark body:has(.fclk-app),
body:has(.fclk-app.fclk-dark) {
background: #0f1117;
}
.fclk-container {
max-width: 480px;
margin: 0 auto;
@@ -1201,6 +1222,83 @@ html.o_dark .fclk-wizard-overlay {
border-radius: 4px;
}
/* Responsive timesheet entries — stacked cards instead of a cramped table.
Reads cleanly at any phone/tablet width; no horizontal overflow. */
.fclk-ts-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.fclk-ts-card {
background: var(--fclk-card);
border: 1px solid var(--fclk-card-border);
border-radius: 12px;
padding: 14px 16px;
}
.fclk-ts-card-top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
}
.fclk-ts-card-date {
color: var(--fclk-text);
font-size: 14px;
font-weight: 700;
}
.fclk-ts-card-date span {
color: var(--fclk-text-dim);
font-weight: 400;
margin-left: 6px;
}
.fclk-ts-card-net {
color: var(--fclk-green);
font-weight: 700;
font-size: 15px;
white-space: nowrap;
}
.fclk-ts-card-times {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
color: var(--fclk-text);
font-size: 14px;
}
.fclk-ts-arrow {
color: var(--fclk-text-dim);
}
.fclk-ts-k {
color: var(--fclk-text-dim);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.4px;
margin-right: 4px;
}
.fclk-ts-card-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
color: var(--fclk-text-muted);
font-size: 12px;
}
.fclk-ts-dot {
color: var(--fclk-text-dim);
}
.fclk-ts-correct {
margin-left: auto;
color: var(--fclk-text-muted);
font-size: 12px;
text-decoration: none;
}
.fclk-ts-correct:hover {
color: var(--fclk-green);
text-decoration: underline;
}
/* ---- Reports Page ---- */
.fclk-reports-container {
max-width: 600px;