Oliver/ODOO4projects.com
Public Access
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(freelancer-directory): the OCA Member Profile badge moves onto the card frame, top right

Browse Source 
The badge was an inline-block inside .dev-head, below the name. It is now
absolutely positioned in the card's top-right corner, inset 0.85rem from both
edges (inside the 1rem radius, nothing clipped), with .dev-card as its
positioning context.

The badge keeps its DOM home with the name (h3 then a), so a screen reader
still reads the freelancer's name first; only the paint position moved. No
markup change in either renderer — the build-time HTML and the runtime
liveCard() path both already emit the badge inside .dev-id, so the CSS change
covers them identically (verified: byte-identical geometry at 375 and 1280).

No overlap at any width: .dev-card:has(.dev-oca-badge) reserves the badge's
band by padding the header down, so the name keeps the card's full width and
wraps freely instead of running under the badge. A horizontal reserve was
measured and rejected — at 375 px it left the name column 42 px. Longest live
name (Oliver - The OC Guy) and a deliberately long name both clear by 0 px of
overlap; .dev-name gains overflow-wrap: anywhere so a name with no space in it
cannot push the card open.

Untouched: the OCA_link predicate, the data-oca attribute and the OCA filter
(1 of 2 when set to OCA member), the label, href, target and rel.
This commit is contained in:
webmaster committed 2026-11-03 13:49:50 +00:00
1 parent d440d3fa15
commit 570085cb04
1 file changed
+17 -4
Download Patch File Download Diff File Expand all files Collapse all files
odoo-community-developers/index.html
+17 -4
View File
@@ -336,6 +336,7 @@
display: flex;
flex-direction: column;
gap: 0.7rem;
position: relative; /* the OCA badge is anchored to the frame, not to the flow */
}
.dev-card > :last-child {
margin-bottom: 0;
@@ -373,6 +374,7 @@
font-size: 1.3rem;
color: var(--midnight);
margin: 0;
overflow-wrap: anywhere; /* a name with no space in it cannot push the card open */
}
.dev-focus {
margin: 0.15rem 0 0;
@@ -685,11 +687,13 @@
}
/* The OCA Member Profile badge — a link built from a link the freelancer
supplied. It sits with the name, not in the links row. Never colour alone:
it is a filled pill and its own words are the link text. */
supplied. It sits on the card's frame, top right, inset from the corner;
it stays in the DOM with the name (the name is read first). Never colour
alone: it is a filled pill and its own words are the link text. */
.dev-oca-badge {
display: inline-block;
margin-top: 0.3rem;
position: absolute;
top: 0.85rem;
right: 0.85rem;
font-size: 0.72rem;
line-height: 1.4;
padding: 0.15rem 0.6rem;
@@ -699,6 +703,15 @@
color: var(--midnight);
font-weight: 600;
}
/* Reserve the badge's band for the badge: the header starts below it, so the
name keeps the card's full width, wraps freely, and can never reach the
badge. A horizontal reserve was measured and rejected — at 375 px the card
leaves the name column 171 px, and the badge's 135 px would cut it to 42 px.
Without :has() there is no reserve; the badge then sits in the band above
the name's first line and still does not collide. */
.dev-card:has(.dev-oca-badge) {
padding-top: 3.15rem;
}
.dev-oca-badge:hover {
background: rgba(201, 162, 39, 0.32);
color: var(--midnight);