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

feat(freelancer-directory): Best Practices — 12 items in two independent columns

Browse Source 
Adds the twelfth item ("Look at a similar job they have already done") and
splits the accordion into two independent columns of six.

- Two independent columns (.bp-list > .bp-col, each its own grid, parent
  align-items:start) so opening an item grows only its own column and cannot
  shove the other. A single grid would re-size rows and make both columns
  jump on every click.
- DOM / reading order is 1–6 (left column) then 7–12 (right column) — a
  decision, not an accident.
- Exclusivity still one-open-at-a-time via the shared <details name> plus the
  inline JS fallback; re-proved, including the strip-the-name test.
- <=720 px collapses to a single column, no horizontal overflow.
This commit is contained in:
webmaster committed 2026-11-03 15:51:18 +00:00
1 parent 17f171d3d9
commit 092f1e44a2
1 file changed
+34 -4
Download Patch File Download Diff File Expand all files Collapse all files
odoo-community-developers/index.html
+34 -4
View File
@@ -960,9 +960,11 @@
}
/* ---- Best Practices accordion (page-scoped, additive). Reuses the house FAQ card
and "+/-" marker; items are full-width, single column. Exclusivity comes from the
native <details name> attribute, with a small JS fallback in the page script. All
items are CLOSED on load — nothing carries `open`. ---- */
and "+/-" marker. TWO INDEPENDENT COLUMNS of six (see .bp-list/.bp-col): each
column is its own grid, so opening an item grows only its own column and the
other column does not move. Exclusivity comes from the native <details name>
attribute, with a small JS fallback in the page script. All items are CLOSED on
load — nothing carries `open`. ---- */
.bp-lede {
max-width: 760px;
margin: 0 0 1.5rem;
@@ -970,10 +972,26 @@
line-height: 1.7;
color: var(--ink-soft);
}
/* Parent grid: two columns pinned to the top (align-items:start), so an open item
in one column cannot push the other column down. DOM order is 1–6 then 7–12. */
.bp-list {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
column-gap: 2rem;
row-gap: 0.75rem;
max-width: 1100px;
}
.bp-col {
display: grid;
gap: 0.75rem;
max-width: 900px;
align-content: start;
}
/* 375 px and everything narrow: one column, no horizontal overflow. */
@media (max-width: 720px) {
.bp-list {
grid-template-columns: 1fr;
}
}
.bp-item {
background: var(--ivory);
@@ -1217,6 +1235,7 @@
<h2 class="section-title">Best Practices</h2>
<p class="bp-lede">Hiring a freelancer goes better when a handful of things are settled before the work starts. These are not rules we impose, and they are not a verdict on anyone listed here — they are simply the points where this kind of work most often goes wrong.</p>
<div class="bp-list">
<div class="bp-col">
<details class="bp-item" name="best-practices">
<summary id="bp1"><span class="bp-q">Agree the shape of the work first — workpackage or hours</span></summary>
@@ -1260,6 +1279,9 @@
</div>
</details>
</div>
<div class="bp-col">
<details class="bp-item" name="best-practices">
<summary id="bp7"><span class="bp-q">Prefer a proven third-party module — check the OCA first</span></summary>
<div class="bp-a" role="region" aria-labelledby="bp7">
@@ -1295,6 +1317,14 @@
</div>
</details>
<details class="bp-item" name="best-practices">
<summary id="bp12"><span class="bp-q">Look at a similar job they have already done</span></summary>
<div class="bp-a" role="region" aria-labelledby="bp12">
<p>Ask for one piece of work close to yours and look at it before you commit — a module, a migration, a report. Someone who can show you something near your problem is easier to trust than someone who can only describe it. If they cannot share a client's work, ask them to talk you through a job like yours instead.</p>
</div>
</details>
</div>
</div>
</div>
</section>