diff --git a/web/site-flow.js b/web/site-flow.js index 532468a..7305d1b 100644 --- a/web/site-flow.js +++ b/web/site-flow.js @@ -184,3 +184,29 @@ $('bPagar').addEventListener('click',()=>{ else alert('O pedido online está indisponível no momento. Tente novamente em instantes.'); }); pintaEntrega(); + +// Dúvidas: every question stays in the row of links; one answer is open at a +// time, below the row, and its own link closes it again. +(function(){ + const req=$('req'); if(!req) return; + const itens=[...req.querySelectorAll('details')]; + const barra=document.createElement('div'); barra.className='reqLinks'; + const botoes=itens.map(d=>{ + const b=document.createElement('button'); + b.type='button'; b.textContent=d.querySelector('summary').textContent.trim(); + b.addEventListener('click',()=>{ + const abrir=!d.open; + itens.forEach(x=>{ x.open=false; }); + d.open=abrir; + }); + return b; + }); + const pinta=()=>botoes.forEach((b,i)=>{ + b.setAttribute('aria-expanded',String(itens[i].open)); + b.classList.toggle('on',itens[i].open); + }); + itens.forEach(d=>d.addEventListener('toggle',pinta)); + barra.append(...botoes); + req.querySelector('.reqcab').after(barra); + pinta(); +})(); diff --git a/web/site-v2.css b/web/site-v2.css index a3ac1c8..681079f 100644 --- a/web/site-v2.css +++ b/web/site-v2.css @@ -210,9 +210,14 @@ section+section{border-top:0} .req{position:static;padding:8px 0 0;border:0;border-radius:0;background:none;box-shadow:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px} .reqcab{margin:0;font-size:13px;font-weight:400;color:var(--fraco)} .req details,.req details:first-of-type{border:0} +.reqLinks{display:contents} +.reqLinks button{padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:500;color:var(--laranja-escuro);cursor:pointer} +.reqLinks button:hover{text-decoration:underline} +.reqLinks button.on{font-weight:700;color:var(--preto);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--laranja)} +/* The links above open and close the answers; a closed one is not shown. */ +.req details:not([open]){display:none} .req summary{display:inline;padding:0;font-size:13px;font-weight:500;color:var(--laranja-escuro)} .req summary::before{display:none} -.req summary:hover{text-decoration:underline} .req details[open]{order:1;flex-basis:100%;padding:14px 16px 4px;border-radius:12px;background:var(--cinza)} .req details[open] summary{display:block;margin-bottom:6px;font-size:14px;font-weight:700;color:var(--preto);text-decoration:none} .req li{font-size:13px}