B45 · החלפת תצוגה בין גריד לרשימה

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}
.ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:var(--r, 14px)}
.ph-a{background:linear-gradient(160deg,#3b5bdb,#748ffc)}
.ph-b{background:linear-gradient(160deg,#5f3dc4,#9775fa)}
.ph-c{background:linear-gradient(160deg,#0b7285,#3bc9db)}
.ph-d{background:linear-gradient(160deg,#2b8a3e,#69db7c)}
.ph-e{background:linear-gradient(160deg,#e8590c,#ffa94d)}
.ph-f{background:linear-gradient(160deg,#c92a2a,#ff8787)}
.ph-l{background:rgba(16,18,43,.72);color:#fff;padding:.18em .7em;border-radius:999px;line-height:1.3;font-size:max(.78em,12px)}

/* B45 · החלפת תצוגה בין גריד לרשימה */
.gl{max-width:min(1080px,94vw);margin-inline:auto}
.gl-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:clamp(18px,2.4vw,30px)}
.gl-top h3{margin:0;font-size:clamp(22px,2.8vw,38px)}
.gl-switch{display:inline-flex;background:var(--bg, #f7f7fa);border:1px solid var(--line, #e4e4ee);border-radius:999px;padding:4px}
.gl-switch button{border:0;background:none;font:inherit;font-size:14px;padding:9px 18px;border-radius:999px;cursor:pointer;color:var(--muted, #6a6d85)}
.gl-switch button.on{background:var(--ink, #16182b);color:var(--bg, #f7f7fa)}
.gl-list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap, clamp(16px, 1.6vw, 36px))}
.gl-item{background:var(--card, #fff);border:1px solid var(--line, #e4e4ee);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.gl-img{aspect-ratio:16/10;font-size:24px}
.gl-txt{padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.gl-txt h4{margin:0;font-size:17px}
.gl-txt p{margin:0;font-size:14px;color:var(--muted, #6a6d85);line-height:1.6}
.gl-tag{font-size:12px;color:var(--accent, #4a3aff);font-weight:600}
/* מצב רשימה: אותו DOM, פריסה אחרת. Flip מודד את ההפרש ומנפיש אותו */
.gl-list.rows{grid-template-columns:1fr;gap:14px}
.gl-list.rows .gl-item{flex-direction:row;align-items:stretch}
.gl-list.rows .gl-img{aspect-ratio:auto;width:clamp(120px,22%,240px);flex:none}
.gl-list.rows .gl-txt{justify-content:center;flex:1}
@media(max-width:860px){.gl-list{grid-template-columns:1fr 1fr}.gl-list.rows .gl-img{width:34%}}
@media(max-width:560px){.gl-list{grid-template-columns:1fr}}

HTML

<div class="stage tight"><div class="gl">
  <div class="gl-top">
    <h3>עבודות אחרונות</h3>
    <div class="gl-switch"><button class="on" data-v="grid">גריד</button><button data-v="rows">רשימה</button></div>
  </div>
  <div class="gl-list">
    <article class="gl-item"><div class="ph gl-img ph-a"><span class="ph-l">1</span></div><div class="gl-txt"><span class="gl-tag">אתר תדמית</span><h4>משרד עורכי דין</h4><p>אתר חדש עם מנוע תוכן ומערכת פניות.</p></div></article>
    <article class="gl-item"><div class="ph gl-img ph-c"><span class="ph-l">2</span></div><div class="gl-txt"><span class="gl-tag">חנות</span><h4>מותג קוסמטיקה</h4><p>חנות עם מועדון לקוחות וסליקה.</p></div></article>
    <article class="gl-item"><div class="ph gl-img ph-d"><span class="ph-l">3</span></div><div class="gl-txt"><span class="gl-tag">דף נחיתה</span><h4>קורס דיגיטלי</h4><p>דף מכירה עם וידאו והרשמה מהירה.</p></div></article>
    <article class="gl-item"><div class="ph gl-img ph-e"><span class="ph-l">4</span></div><div class="gl-txt"><span class="gl-tag">מערכת</span><h4>פורטל לקוחות</h4><p>ממשק ניהול עם דוחות והרשאות.</p></div></article>
    <article class="gl-item"><div class="ph gl-img ph-b"><span class="ph-l">5</span></div><div class="gl-txt"><span class="gl-tag">אתר תדמית</span><h4>קליניקה פרטית</h4><p>אתר עם יומן תורים ואזור מטופלים.</p></div></article>
    <article class="gl-item"><div class="ph gl-img ph-f"><span class="ph-l">6</span></div><div class="gl-txt"><span class="gl-tag">חנות</span><h4>יבואן ריהוט</h4><p>קטלוג עם סינון לפי חדר וסגנון.</p></div></article>
  </div>
</div></div>

JS

gsap.registerPlugin(Flip);

(function(){
  const list=document.querySelector(".gl-list");
  const btns=[...document.querySelectorAll(".gl-switch button")];
  const reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
  btns.forEach(b=>b.addEventListener("click",()=>{
    if(b.classList.contains("on"))return;
    btns.forEach(x=>x.classList.toggle("on",x===b));
    // 1. מודדים איפה הכל נמצא עכשיו, כולל הילדים שזזים בתוך הכרטיס
    const state=Flip.getState(".gl-item, .gl-img, .gl-txt");
    // 2. משנים פריסה בקלאס אחד
    list.classList.toggle("rows",b.dataset.v==="rows");
    if(reduce)return;
    // 3. Flip משווה מצב חדש למצב ישן ומנפיש את ההפרש
    Flip.from(state,{duration:.55,nested:true,ease:"power2.inOut",absolute:true});
  }));
})();