Skip to content

The digital menu offers no way in #586

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

Merged
sridharkalaibala merged 1 commit into from
Sep 12, 2026
Merged

The digital menu offers no way in #586

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
67 changes: 3 additions & 64 deletions menu/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1203,44 +1203,6 @@

/* ---- the way in ------------------------------------------------ */

/*
A menu that can be ordered from says so, once, at the bottom of the
screen. Not on every card: this is a menu, and a button beside every
dish turns it into a shop. One bar, in ink, only when the shop is
actually taking orders, and it carries the table or room the code was
printed for so the customer does not have to say where they are.
*/
.order-cta {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
padding: 10px var(--pad) max(10px, env(safe-area-inset-bottom));
background: var(--bg);
border-top: 1px solid var(--line);
}

.order-cta a {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
max-width: 900px;
min-height: 48px;
margin: 0 auto;
border-radius: 12px;
background: var(--accent);
color: var(--bg);
font-weight: 600;
text-decoration: none;
}

/* Room for the bar, so the last dish is not under it. */
body.can-order {
padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

/* ---- motion ---------------------------------------------------- */

/*
Expand All @@ -1258,8 +1220,7 @@
.sheet-close,
.search-back,
.search-mic,
.search-clear,
.order-cta a {
.search-clear {
transition:
transform 0.12s ease,
background-color 0.15s ease,
Expand All @@ -1272,8 +1233,7 @@
.result:active,
.goes:active,
.more-in-section:active,
.sheet-close:active,
.order-cta a:active {
.sheet-close:active {
transform: scale(0.98);
}

Expand Down Expand Up @@ -1358,8 +1318,7 @@
/*
A laptop gets a laptop's layout, not a phone page stretched across
it: the shop across the top, the sections down the left where they
stay put, the dishes in the middle, and the way in as a card in the
corner rather than a bar across the bottom.
stay put, the dishes in the middle, and nothing else.
*/
.cats-rail {
display: none;
Expand Down Expand Up @@ -1484,21 +1443,6 @@
.section > h2 {
scroll-margin-top: 80px;
}

.order-cta {
left: auto;
right: 24px;
bottom: 24px;
width: 320px;
padding: 12px;
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 8px 24px rgba(17, 24, 39, 0.14);
}

body.can-order {
padding-bottom: 96px;
}
}
</style>
</head>
Expand Down Expand Up @@ -1677,11 +1621,6 @@ <h1 id="shop-name" class="shop-name">Menu</h1>

<p class="foot" id="foot" hidden></p>

<!-- Shown only when the shop is taking orders right now. -->
<div id="order-cta" class="order-cta" hidden>
<a id="order-link" href="/order/">Order now</a>
</div>

<dialog id="sheet" class="sheet" aria-labelledby="sheet-title">
<div class="sheet-handle" aria-hidden="true"></div>
<!--
Expand Down
35 changes: 0 additions & 35 deletions menu/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -551,8 +551,6 @@
el("filter-veg").hidden = true;
}

offerOrdering(data.channel || {});

/*
* The shop's own words about being closed, paused or menu-only. Shown
* on a menu too, because someone reading it at 11pm wants to know when
Expand Down Expand Up @@ -643,39 +641,6 @@
watchSections();
}

/**
* The way in, when there is one.
*
* A menu is read-only by design, and this is the one thing on it that
* leads anywhere: a single bar at the bottom, only while the shop is
* actually taking orders. It keeps the table or room the printed code
* named, so a customer who scanned at table five lands on the ordering
* page already at table five.
*/
function offerOrdering(channel) {
var bar = el("order-cta");
var link = el("order-link");
if (!bar || !link) return;

var taking = channel.accepting === true && channel.mode !== "menu";
bar.hidden = !taking;
document.body.classList.toggle("can-order", taking);
if (!taking) return;

var point = readUrl();
var href = "/order/";
if (point.store) {
href += encodeURIComponent(point.store);
if (point.table) {
href += "/table/" + encodeURIComponent(point.table);
} else if (point.venue) {
href += "/venue/" + encodeURIComponent(point.venue);
if (point.unit) href += "/" + encodeURIComponent(point.unit);
}
}
link.setAttribute("href", href);
}

function showState(title, detail) {
var box = el("state");
box.innerHTML = "<strong></strong><span></span>";
Expand Down
43 changes: 10 additions & 33 deletions tests/menu-render.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -654,41 +654,18 @@ test('a symbol sits against the number; a code keeps its space', async () => {
assert.strictEqual(document.querySelector('.dish-price').textContent, 'Rs 280');
});

test('a shop that is taking orders offers the way in, from the same table', async () => {
test('the menu offers no way in: it is for reading, whatever the shop is doing', async () => {
/* Owner: "why menu have order now button. dont include that." Ordering has
its own page and its own printed codes; a menu that grows a button
stops being a menu. */
const open = { ...REPLY, channel: { state: 'open', accepting: true, mode: 'order', message: '' } };
const { document } = await render('/menu/AZ100/table/5', open);
const bar = document.getElementById('order-cta');
assert.strictEqual(bar.hidden, false, 'a shop taking orders offered no way to order');
assert.strictEqual(
document.getElementById('order-link').getAttribute('href'),
'/order/AZ100/table/5',
'the customer would have to say which table they are at a second time'
);
assert.ok(document.body.classList.contains('can-order'), 'the page left no room for the bar');
});

test('a room keeps its room on the way in', async () => {
const open = { ...REPLY, channel: { state: 'open', accepting: true, mode: 'order', message: '' } };
const { document } = await render('/menu/AZ100/venue/RC/123', open);
assert.strictEqual(
document.getElementById('order-link').getAttribute('href'),
'/order/AZ100/venue/RC/123'
);
});

test('a menu-only shop, or a shut one, offers nothing to tap', async () => {
for (const channel of [
{ state: 'menu_only', accepting: false, mode: 'menu', message: 'This menu is for viewing only.' },
{ state: 'closed', accepting: false, mode: 'order', message: 'Opens at 6' },
]) {
const { document } = await render('/menu/AZ100', { ...REPLY, channel });
assert.strictEqual(
document.getElementById('order-cta').hidden,
true,
`${channel.state} still offered ordering`
);
assert.ok(!document.body.classList.contains('can-order'));
}
assert.strictEqual(document.getElementById('order-cta'), null, 'the bar is back');
assert.strictEqual(document.querySelector('a[href^="/order"]'), null, 'the menu links to the ordering page');
assert.ok(!document.body.classList.contains('can-order'));
assert.ok(!/Order now/.test(document.body.textContent));
const html = fs.readFileSync(path.join(ROOT, 'index.html'), 'utf8');
assert.ok(!/order-cta|can-order/.test(html), 'the bar still has styles or markup');
});

test('a non-vegetarian dish says so in its facts', async () => {
Expand Down
Loading