Oliver/NGO
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: article CTA panel scrolls with content, appears below last paragraph

Browse Source
This commit is contained in:
oliver
2026-05-05 15:00:18 -03:00
parent c6d3e2516e
commit 5afda4e953
1 changed files with 52 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+52 -52
View File
@@ -2085,10 +2085,8 @@
/* ── Article CTA panel ─────────────────────────────────────────── */ /* ── Article CTA panel ─────────────────────────────────────────── */
#article-cta-panel { #article-cta-panel {
position: absolute; width: 260px;
bottom: 28px; margin: 2.5rem 0 0 auto;
right: 28px;
width: 234px;
background: #fdf6ee; background: #fdf6ee;
border: 1px solid rgba(93, 64, 55, 0.22); border: 1px solid rgba(93, 64, 55, 0.22);
border-top: 3px solid var(--gold); border-top: 3px solid var(--gold);
@@ -2097,7 +2095,6 @@
0 8px 32px rgba(62, 39, 35, 0.18), 0 8px 32px rgba(62, 39, 35, 0.18),
0 2px 8px rgba(0, 0, 0, 0.08); 0 2px 8px rgba(0, 0, 0, 0.08);
padding: 18px 16px 16px; padding: 18px 16px 16px;
z-index: 10;
} }
.article-cta-heading { .article-cta-heading {
@@ -2175,7 +2172,7 @@
.article-cta-loc-menu { .article-cta-loc-menu {
display: none; display: none;
position: absolute; position: absolute;
bottom: calc(100% + 4px); top: calc(100% + 4px);
left: 0; left: 0;
right: 0; right: 0;
background: #fdf6ee; background: #fdf6ee;
@@ -2261,7 +2258,7 @@
font-size: 0.95rem; font-size: 0.95rem;
column-width: 280px; column-width: 280px;
} }
#article-cta-panel { display: none; } #article-cta-panel { width: 100%; margin-top: 2rem; }
} }
#modal-confirm .confirm-title { #modal-confirm .confirm-title {
@@ -2626,51 +2623,53 @@
<h2 id="article-title"></h2> <h2 id="article-title"></h2>
<div class="article-date" id="article-date"></div> <div class="article-date" id="article-date"></div>
</div> </div>
<div class="article-body" id="article-body"></div> <div class="article-body" id="article-body">
<div id="article-content"></div>
<div id="article-cta-panel"> <div id="article-cta-panel">
<div id="article-cta-form-wrap"> <div id="article-cta-form-wrap">
<p class="article-cta-heading">Try ODOO Free &mdash; 4&nbsp;Weeks</p> <p class="article-cta-heading">Try ODOO Free &mdash; 4&nbsp;Weeks</p>
<p class="article-cta-sub">No credit card required</p> <p class="article-cta-sub">No credit card required</p>
<form id="article-cta-form" novalidate> <form id="article-cta-form" novalidate>
<input <input
type="email" type="email"
id="article-cta-email" id="article-cta-email"
name="email" name="email"
class="article-cta-field" class="article-cta-field"
placeholder="your@email.com" placeholder="your@email.com"
required required
/> />
<div class="article-cta-loc-wrap" id="article-cta-loc-wrap"> <div class="article-cta-loc-wrap" id="article-cta-loc-wrap">
<button <button
type="button" type="button"
class="article-cta-loc-btn" class="article-cta-loc-btn"
id="article-cta-loc-btn" id="article-cta-loc-btn"
aria-haspopup="listbox" aria-haspopup="listbox"
aria-expanded="false" aria-expanded="false"
>Select server location</button> >Select server location</button>
<div <div
class="article-cta-loc-menu" class="article-cta-loc-menu"
id="article-cta-loc-menu" id="article-cta-loc-menu"
role="listbox" role="listbox"
> >
<button type="button" class="article-cta-loc-opt" data-value="Boston, US">&#127482;&#127480; Boston</button> <button type="button" class="article-cta-loc-opt" data-value="Boston, US">&#127482;&#127480; Boston</button>
<button type="button" class="article-cta-loc-opt" data-value="Manchester, UK">&#127468;&#127463; Manchester</button> <button type="button" class="article-cta-loc-opt" data-value="Manchester, UK">&#127468;&#127463; Manchester</button>
<button type="button" class="article-cta-loc-opt" data-value="Mumbai, IN">&#127470;&#127475; Mumbai</button> <button type="button" class="article-cta-loc-opt" data-value="Mumbai, IN">&#127470;&#127475; Mumbai</button>
<button type="button" class="article-cta-loc-opt" data-value="Sao Paulo, BR">&#127463;&#127479; S&atilde;o Paulo</button> <button type="button" class="article-cta-loc-opt" data-value="Sao Paulo, BR">&#127463;&#127479; S&atilde;o Paulo</button>
<button type="button" class="article-cta-loc-opt" data-value="Meppel, NL">&#127475;&#127473; Meppel</button> <button type="button" class="article-cta-loc-opt" data-value="Meppel, NL">&#127475;&#127473; Meppel</button>
<button type="button" class="article-cta-loc-opt" data-value="Sydney, AU">&#127462;&#127482; Sydney</button> <button type="button" class="article-cta-loc-opt" data-value="Sydney, AU">&#127462;&#127482; Sydney</button>
</div>
<input type="hidden" id="article-cta-location" name="server_location" value="" />
</div> </div>
<input type="hidden" id="article-cta-location" name="server_location" value="" /> <input type="hidden" name="product" value="odoo_19" />
</div> <input type="hidden" name="plan" value="NGO Free Trial" />
<input type="hidden" name="product" value="odoo_19" /> <button type="submit" class="article-cta-submit">Start Free Trial &#8594;</button>
<input type="hidden" name="plan" value="NGO Free Trial" /> </form>
<button type="submit" class="article-cta-submit">Start Free Trial &#8594;</button> </div>
</form> <div id="article-cta-confirm" style="display:none">
</div> <p class="article-cta-confirm-title">Thank you! &#127881;</p>
<div id="article-cta-confirm" style="display:none"> <p class="article-cta-confirm-sub">We&rsquo;ve received your request. A specialist will be in touch within one business day.</p>
<p class="article-cta-confirm-title">Thank you! &#127881;</p> </div>
<p class="article-cta-confirm-sub">We&rsquo;ve received your request. A specialist will be in touch within one business day.</p>
</div> </div>
</div> </div>
@@ -3535,7 +3534,8 @@
var articleTitle = document.getElementById('article-title'); var articleTitle = document.getElementById('article-title');
var articleArea = document.getElementById('article-area'); var articleArea = document.getElementById('article-area');
var articleDate = document.getElementById('article-date'); var articleDate = document.getElementById('article-date');
var articleBody = document.getElementById('article-body'); var articleBody = document.getElementById('article-body');
var articleContent = document.getElementById('article-content');
function openArticle(index) { function openArticle(index) {
var post = allPosts[index]; var post = allPosts[index];
@@ -3543,7 +3543,7 @@
articleArea.textContent = post.area || ''; articleArea.textContent = post.area || '';
articleTitle.textContent = post.title || ''; articleTitle.textContent = post.title || '';
articleDate.textContent = formatDate(post.date); articleDate.textContent = formatDate(post.date);
articleBody.innerHTML = post.content || ''; articleContent.innerHTML = post.content || '';
articleBody.scrollTop = 0; articleBody.scrollTop = 0;
articleOverlay.classList.add('is-open'); articleOverlay.classList.add('is-open');
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';