Skip to content

Refactor product selection UI and improve visual design #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SARx613 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Refactor product selection UI and improve visual design #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 93 additions & 33 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,68 +66,103 @@ body{
justify-content:space-between;
gap:10px;
}
.info-card__text{max-width:150px;}
.info-card__title{margin:0;font-weight:600;font-size:16px;line-height:1.2;color:#191b1d;}
.info-card__sub{margin:6px 0 0;font-size:12px;font-weight:400;color:var(--muted);}
.info-card__text{max-width:160px;}
.info-card__title{margin:0;font-weight:600;font-size:14px;line-height:1.25;color:var(--ink2);letter-spacing:-.02rem;}
.info-card__sub{margin:4px 0 0;font-size:12px;font-weight:500;color:var(--ink2);letter-spacing:-.02rem;}
.chip-btn{
border:1px solid var(--chip-border);
background:#fff;
border-radius:13px;
padding:18px 30px;
padding:12px 22px;
font-family:inherit;
font-size:15px;
font-size:14px;
font-weight:500;
color:#191b1d;
color:var(--ink2);
cursor:pointer;
white-space:nowrap;
letter-spacing:-.02rem;
transition:background .18s ease;
}
.chip-btn:active{background:#f4f4f4;}

/* ---------- product list ---------- */
.product-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
.product-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.product{
background:var(--card);
border:1px solid #eaeaea;
border-radius:15px;
padding:14px 16px;
padding:10px 16px 10px 10px;
display:flex;
align-items:center;
gap:14px;
gap:12px;
cursor:pointer;
transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
animation:itemIn .45s cubic-bezier(.22,1,.36,1) both;
overflow:hidden;
}
@keyframes itemIn{0%{opacity:0;transform:translateY(14px) scale(.97);}100%{opacity:1;transform:translateY(0) scale(1);}}
.product:active{transform:scale(.99);}
.product.is-selected{
border-color:#1b1d1f;
border-width:1.5px;
}
.product__icon{
width:40px;height:44px;

/* product image */
.product__img-wrap{
width:64px;height:64px;flex:0 0 64px;
border-radius:10px;
overflow:hidden;
background:#f0f0f0;
}
.product__img{width:100%;height:100%;object-fit:cover;display:block;}

/* product icon fallback (SVG) */
.product__icon-wrap{
width:64px;height:64px;flex:0 0 64px;
border-radius:10px;
background:#f6f6f6;
display:flex;align-items:center;justify-content:center;
flex:0 0 auto;
}
.product__img{width:42px;height:44px;object-fit:contain;display:block;}
.product.is-selected .product__icon{animation:pickPop .45s cubic-bezier(.34,1.56,.64,1);}
.product.is-selected .product__img-wrap,
.product.is-selected .product__icon-wrap{animation:pickPop .45s cubic-bezier(.34,1.56,.64,1);}
@keyframes pickPop{
0%{transform:scale(1) rotate(0);}
35%{transform:scale(1.22) rotate(-8deg);}
70%{transform:scale(.95) rotate(4deg);}
100%{transform:scale(1) rotate(0);}
}
.product__name{flex:1;font-weight:600;font-size:16px;color:#191b1d;}

.checkbox{
width:23px;height:23px;flex:0 0 auto;
/* product info */
.product__info{flex:1;min-width:0;}
.product__name{
margin:0;
font-weight:800;
font-size:16px;
color:var(--ink2);
letter-spacing:-.02rem;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

/* product radio */
.product__radio{flex:0 0 auto;}
.product__radio input[type="checkbox"]{
position:absolute;opacity:0;width:0;height:0;pointer-events:none;
}
.product__radio span{
display:block;
width:24px;height:24px;
border-radius:50%;
border:2px solid #d2d6db;
border-radius:7px;
display:flex;align-items:center;justify-content:center;
background:#fff;
transition:background .2s ease, border-color .2s ease;
transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.product.is-selected .product__radio span{
background:var(--ink2);
border-color:var(--ink2);
box-shadow:0 0 0 2px rgba(10,17,18,.12);
}
.checkbox__tick{opacity:0;transform:scale(.3);transition:opacity .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1);}
.product.is-selected .checkbox{background:#16262c;border-color:#16262c;}
.product.is-selected .checkbox__tick{opacity:1;transform:scale(1);}

/* ---------- action bar ---------- */
.action-bar{
Expand All @@ -136,17 +171,23 @@ body{
background:#f0f0f0;
border-top:1px solid #e2e2e2;
}
.action-bar__count{font-weight:600;font-size:15px;color:#26292c;min-width:78px;}
.action-bar__count{
font-weight:700;font-size:18px;
color:var(--ink2);
min-width:100px;
letter-spacing:-.02rem;
}
.confirm-btn{
flex:1;
border:none;
border-radius:24px;
padding:14px 18px;
font-family:inherit;
font-size:16px;
font-weight:600;
color:#9aa0a6;
background:#d9dadc;
font-size:18px;
font-weight:500;
letter-spacing:-.02rem;
color:rgba(10,17,18,.45);
background:#dde0e5;
cursor:not-allowed;
transition:background .3s ease, color .3s ease, transform .15s ease;
}
Expand All @@ -159,16 +200,35 @@ body{

/* ---------- bottom nav ---------- */
.bottom-nav{
display:flex;justify-content:space-around;align-items:center;
padding:11px 8px calc(11px + env(safe-area-inset-bottom));
display:flex;align-items:stretch;
padding-bottom:env(safe-area-inset-bottom);
background:#fff;
border-top:1px solid #eee;
min-height:60px;
}
.nav-inner{
display:flex;
justify-content:space-around;
align-items:center;
width:100%;
padding:8px 0;
}
.nav-item{
background:none;border:none;padding:6px 14px;cursor:pointer;
color:#1b1d1f;display:flex;align-items:center;justify-content:center;
background:none;border:none;
padding:4px 12px;
cursor:pointer;
display:flex;align-items:center;justify-content:center;
flex:1;
}
.nav-icon-wrap{
color:#1b1d1f;
display:flex;align-items:center;justify-content:center;
padding:4px;
border-radius:10px;
transition:background .15s ease;
}
.nav-item--active{color:var(--green);}
.nav-item:active .nav-icon-wrap{background:#f0f0f0;}
.nav-icon-wrap--active{color:var(--green);}

/* ================= RETIRO ================= */
.screen--retiro{background:var(--orange);letter-spacing:-.02rem;}
Expand Down
50 changes: 38 additions & 12 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<meta name="theme-color" content="#f7f7f7" />
<title>skipit · Mis productos</title>
<link rel="icon" type="image/svg+xml" href="https://assets.skipit.com.ar/skipit_logo.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
Expand Down Expand Up @@ -37,18 +38,43 @@ <h1 class="page-title">Mis productos</h1>
</div>

<nav class="bottom-nav">
<button class="nav-item" aria-label="Tienda">
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M3 9l1.5-5h15L21 9M4 9h16v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M9 20v-5h6v5" fill="none" stroke="currentColor" stroke-width="1.7"/></svg>
</button>
<button class="nav-item" aria-label="Carrito">
<svg viewBox="0 0 24 24" width="24" height="24"><circle cx="9" cy="20" r="1.4" fill="currentColor"/><circle cx="18" cy="20" r="1.4" fill="currentColor"/><path d="M2 3h2.2l2.3 12.2a1 1 0 0 0 1 .8h9.8a1 1 0 0 0 1-.8L20 7H6" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<button class="nav-item nav-item--active" aria-label="Retiros">
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M5 8h14l-1 11a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 8z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M9 8V6a3 3 0 0 1 6 0v2" fill="none" stroke="currentColor" stroke-width="1.7"/></svg>
</button>
<button class="nav-item" aria-label="Perfil">
<svg viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="8" r="3.4" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="M5 20c0-3.6 3.1-6 7-6s7 2.4 7 6" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
</button>
<div class="nav-inner">
<button class="nav-item" aria-label="Inicio">
<div class="nav-icon-wrap">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 21V16C15 15.7348 14.8946 15.4804 14.7071 15.2929C14.5196 15.1054 14.2652 15 14 15H10C9.73478 15 9.48043 15.1054 9.29289 15.2929C9.10536 15.4804 9 15.7348 9 16V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.7749 10.31C17.5665 10.1104 17.289 9.99904 17.0004 9.99904C16.7118 9.99904 16.4344 10.1104 16.2259 10.31C15.7609 10.7535 15.143 11.001 14.5004 11.001C13.8578 11.001 13.2399 10.7535 12.7749 10.31C12.5665 10.1107 12.2893 9.99952 12.0009 9.99952C11.7126 9.99952 11.4353 10.1107 11.2269 10.31C10.7619 10.7538 10.1438 11.0014 9.50093 11.0014C8.8581 11.0014 8.23997 10.7538 7.77493 10.31C7.56647 10.1104 7.28902 9.99904 7.00043 9.99904C6.71184 9.99904 6.43439 10.1104 6.22593 10.31C5.77677 10.7386 5.1842 10.9848 4.56356 11.0005C3.94291 11.0163 3.33859 10.8006 2.86823 10.3954C2.39787 9.99015 2.09513 9.42439 2.01891 8.80824C1.9427 8.19209 2.09848 7.56962 2.45593 7.062L5.34493 2.878C5.52824 2.60751 5.77502 2.38605 6.06371 2.233C6.35239 2.07994 6.67418 1.99994 7.00093 2H17.0009C17.3267 1.99988 17.6476 2.07934 17.9357 2.23149C18.2238 2.38364 18.4703 2.60386 18.6539 2.873L21.5489 7.065C21.9065 7.57303 22.062 8.19597 21.9854 8.81244C21.9087 9.42891 21.6052 9.99475 21.1341 10.3997C20.663 10.8046 20.058 11.0197 19.437 11.0029C18.816 10.9861 18.2235 10.7388 17.7749 10.309" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4 10.9492V18.9992C4 19.5297 4.21071 20.0384 4.58579 20.4134C4.96086 20.7885 5.46957 20.9992 6 20.9992H18C18.5304 20.9992 19.0391 20.7885 19.4142 20.4134C19.7893 20.0384 20 19.5297 20 18.9992V10.9492" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</button>
<button class="nav-item" aria-label="Carrito">
<div class="nav-icon-wrap">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 22C8.55228 22 9 21.5523 9 21C9 20.4477 8.55228 20 8 20C7.44772 20 7 20.4477 7 21C7 21.5523 7.44772 22 8 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19 22C19.5523 22 20 21.5523 20 21C20 20.4477 19.5523 20 19 20C18.4477 20 18 20.4477 18 21C18 21.5523 18.4477 22 19 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2.05078 2.05078H4.05078L6.71078 14.4708C6.80836 14.9256 7.06145 15.3323 7.42649 15.6206C7.79153 15.909 8.24569 16.0611 8.71078 16.0508H18.4908C18.946 16.05 19.3873 15.8941 19.7418 15.6086C20.0964 15.3232 20.3429 14.9253 20.4408 14.4808L22.0908 7.05078H5.12078" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</button>
<button class="nav-item" aria-label="Mis Productos">
<div class="nav-icon-wrap nav-icon-wrap--active">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 10C16 11.0609 15.5786 12.0783 14.8284 12.8284C14.0783 13.5786 13.0609 14 12 14C10.9391 14 9.92172 13.5786 9.17157 12.8284C8.42143 12.0783 8 11.0609 8 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.10156 6.03516H20.8956" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.4 5.467C3.14036 5.81319 3 6.23426 3 6.667V20C3 20.5304 3.21071 21.0391 3.58579 21.4142C3.96086 21.7893 4.46957 22 5 22H19C19.5304 22 20.0391 21.7893 20.4142 21.4142C20.7893 21.0391 21 20.5304 21 20V6.667C21 6.23426 20.8596 5.81319 20.6 5.467L18.6 2.8C18.4137 2.55161 18.1721 2.35 17.8944 2.21115C17.6167 2.07229 17.3105 2 17 2H7C6.68951 2 6.38328 2.07229 6.10557 2.21115C5.82786 2.35 5.58629 2.55161 5.4 2.8L3.4 5.467Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</button>
<button class="nav-item" aria-label="Perfil">
<div class="nav-icon-wrap">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</button>
</div>
</nav>
</section>

Expand Down
64 changes: 46 additions & 18 deletions js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
tick();
setInterval(tick, 1000);

/* ---------- product icons (SVG) ---------- */
/* ---------- product icon fallbacks (SVG) ---------- */
var ICONS = {
beer:
'<svg viewBox="0 0 40 56" width="32" height="44" aria-hidden="true">' +
Expand All @@ -31,12 +31,11 @@
'<circle cx="41" cy="28" r="4.8" fill="#9bd23f" stroke="#74a82c" stroke-width="1"/></svg>'
};

/* ---------- product datasets (Todos toggles between them) ----------
A product can use an SVG icon (icon: "...") or a real image (img: "URL"). */
/* ---------- product datasets ---------- */
var SETS = [
[
{ name: "Pinta ingreso", icon: "beer" },
{ name: "Pinta ingreso", icon: "beer" }
{ name: "Pinta ingreso", img: "https://assets.skipit.com.ar/60/cropped_1768234365786.webp" },
{ name: "Pinta ingreso", img: "https://assets.skipit.com.ar/60/cropped_1768234365786.webp" }
],
[
{ name: "Trago ingreso", img: "images/trago-gintonic.jpeg" }
Expand All @@ -58,26 +57,56 @@
var li = document.createElement("li");
li.className = "product";
li.style.animationDelay = (i * 0.07) + "s";
var iconHtml = item.img
? '<img class="product__img" src="' + item.img + '" alt="" />'
: ICONS[item.icon];

var mediaHtml;
if (item.img) {
mediaHtml =
'<div class="product__img-wrap">' +
'<img class="product__img" src="' + item.img + '" alt="' + item.name + '" loading="lazy" />' +
'</div>';
} else {
mediaHtml =
'<div class="product__icon-wrap">' + ICONS[item.icon] + '</div>';
}

li.innerHTML =
'<span class="product__icon">' + iconHtml + "</span>" +
'<span class="product__name">' + item.name + "</span>" +
'<span class="checkbox" role="checkbox" aria-checked="false" tabindex="0">' +
'<svg class="checkbox__tick" viewBox="0 0 24 24" width="16" height="16"><path d="M5 12.5l4.2 4.2L19 7" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>' +
"</span>";
mediaHtml +
'<div class="product__info">' +
'<p class="product__name" translate="no">' + item.name + '</p>' +
'</div>' +
'<div class="product__radio">' +
'<input type="checkbox" tabindex="-1" />' +
'<span></span>' +
'</div>';

var radioInput = li.querySelector('.product__radio input');

function toggle() {
var box = li.querySelector(".checkbox");
var sel = li.classList.toggle("is-selected");
box.setAttribute("aria-checked", sel ? "true" : "false");
radioInput.checked = sel;
refresh();
}
li.addEventListener("click", toggle);
li.querySelector(".checkbox").addEventListener("keydown", function (e) {
li.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggle(); }
});
li.setAttribute("tabindex", "0");
li.setAttribute("role", "checkbox");
li.setAttribute("aria-checked", "false");

var origToggle = toggle;
toggle = function () {
var sel = li.classList.toggle("is-selected");
radioInput.checked = sel;
li.setAttribute("aria-checked", sel ? "true" : "false");
refresh();
};
li.removeEventListener("click", origToggle);
li.addEventListener("click", toggle);
li.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggle(); }
});

return li;
}

Expand Down Expand Up @@ -110,7 +139,7 @@
});
}

/* ---------- confirm -> build Retiro ticket from selection ---------- */
/* ---------- confirm -> build Retiro ticket ---------- */
var retiroItems = document.getElementById("retiro-items");
var retiroTotal = document.getElementById("retiro-total");

Expand Down Expand Up @@ -140,7 +169,6 @@
knob.style.transition = anim ? "left .25s ease" : "none";
fill.style.transition = anim ? "width .25s ease" : "none";
knob.style.left = (6 + x) + "px";
// No dark fill at rest; it appears and trails the knob as soon as you slide.
fill.style.width = (x <= 0 ? 0 : 6 + x + knob.offsetWidth / 2) + "px";
}

Expand Down