/* ------------------------------------------------------------------------------------------------ De kassa op een handheld. Gevraagd door Martijn, 08-09-2026, na het testen op een Sunmi L3. Wat een handheld is, technisch gezien: de app opent gewoon /WebshopOrder/NewOrder in een webweergave -- zie DeviceNavigationService in de app-bron, waar handheld en kassa dezelfde weg nemen. Het is dus hetzelfde kassascherm als op een grote kassa, alleen op een scherm van 360 bij 800 in plaats van 1900 bij 1000. Het scherm van de L3 is 720 bij 1600 met puntdichtheid 320. Alles hieronder staat in een medialaag die pas aangaat onder de 600. Op een gewone kassa verandert er dus niets; dit bestand hoeft alleen maar toegevoegd te worden. Gemeten voor deze ronde, op 360 breed: - de pagina was 403 breed en schoof zijwaarts; - de kolom met producten was 382 breed en liep dus buiten beeld; - een producttegel was 63 bij 250, met een foto van 178 hoog. Vandaar de witte vlakken; - de bon stond op 784 van boven, ver onder de rand van het scherm. ------------------------------------------------------------------------------------------------ */ @media (max-width: 600px) { /* --- de kop en de tabbladen passen niet meer (KA7, 14-09-2026) ----------------------------- */ /* Gemeld door Martijn: "wij hebben een keukenprinter toegevoegd waardoor er een extra knop in de header is bijgekomen (bestellingen) en binnen orderbeheer ook nog 2 extra tabjes. Nu is de responsiveness niet meer correct in deze tabjes en de header." Gemeten op 390 breed, met drie knoppen in de kop: de laatste liep 41 px buiten beeld. Met de extra knop erbij is dat erger. En de drie tabbladen van orderbeheer persten zich in de breedte tot "Zoek bestelling" over twee regels brak, terwijl de andere twee op een regel stonden. Zijwaarts schuiven in plaats van persen. Dat is wat een telefoon doet met een rij die niet past, en het is het enige dat elke knop bereikbaar houdt -- wat je ook toevoegt. */ /* Waarom het überhaupt buiten beeld liep. De balk is een flexrij met links het klantlogo en rechts het menuknopje; het middenstuk mag zichzelf breed maken en kromp niet mee. Gemeten op 390 breed: het middenstuk begon op 77 en liep door tot 431 -- 41 px voorbij de rand. Een flexvak krimpt van zichzelf niet onder zijn inhoud, en dus schoof de laatste knop er gewoon uit. Het middenstuk moet dus wél krimpen, en wat er dan niet meer past schuift binnen de rij zelf. */ .header .header-center { flex: 1 1 auto; min-width: 0; } .header .header-center .top-menu { min-width: 0; max-width: 100%; } .header .top-menu > ul { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; /* Niet blijven hangen tussen twee knoppen in. */ scroll-snap-type: x proximity; /* Een schuifbalk kost hier hoogte en de kop is al krap; vegen werkt gewoon. */ scrollbar-width: none; } .header .top-menu > ul::-webkit-scrollbar { display: none; } .header .top-menu > ul > li { flex: 0 0 auto; scroll-snap-align: start; } /* En een tikje krapper, zodat de drie knoppen die er nu staan ook zónder vegen allemaal in beeld staan: 331 px aan knoppen in een vak van 307. De ruimte zit in de lucht naast de opschriften, niet in de opschriften zelf -- die blijven leesbaar en de knop blijft even hoog. Komt er een vierde knop bij, dan schuift het; dat is de vangnetregel hierboven. */ .header .header-center .top-menu ul { gap: 2px !important; } .header .header-center .top-menu li a { padding: 4px 4px !important; gap: 3px !important; } /* Hetzelfde voor de tabbladen. Bootstrap laat ze anders afbreken, en dan staat het ene woord onder het andere en lijkt het scherm stuk. */ .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .nav-tabs::-webkit-scrollbar { display: none; } .nav-tabs .nav-item { flex: 0 0 auto; } .nav-tabs .nav-link { white-space: nowrap; } /* De bestellijst zelf is breder dan het scherm -- gemeten 1148 px -- maar die stond al in een eigen schuifvak (.table-responsive) en trekt de pagina dus niet scheef. Nagemeten en zo gelaten: een tabel van een handheld een kaartenlijst maken is een ander gesprek, en niet wat er is gevraagd. */ /* --- niets schuift zijwaarts -------------------------------------------------------------- */ html, body { max-width: 100%; overflow-x: hidden; } .container.body, .main_container, #rightCol.right_col, .modal-xpanel-reservation, .container-fluid.px-0, .row.orderpage-height, .row.orderpage-height > .col-md-12 { max-width: 100vw; overflow-x: hidden; } /* De drie kolommen van het kassascherm -- categorieen, producten, bon -- staan op een breed scherm naast elkaar. Hier onder elkaar, elk over de volle breedte. */ .products-container, .row.orderpage-height > .col-md-12 > .col-md-4, .row.orderpage-height > .col-md-12 > .col-md-7 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* --- de producten: drie op een rij, en verder niets dan wat nodig is ------------------------ * * Op een breed scherm kiest een stukje javascript het aantal kolommen naar het aantal producten * in de categorie: drie, vier of vijf. Op een handheld past er maar een ding, en dat is drie. * Vandaar dat alle drie de klassen hier hetzelfde doen. */ .product-grid, .product-grid.kolommen-3, .product-grid.kolommen-4, .product-grid.kolommen-5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; padding: 6px !important; } /* De foto was 178 hoog bij een tegel van nog geen 110 breed. Dat is bijna vierkant kwijt aan beeld, en daaronder bleef ruimte over waar niets stond. Nu een strook die past bij de breedte van de tegel. */ .product-item .card__image { height: 68px !important; } .product-item .card_item { border-radius: 10px; } /* De naam mag twee regels; daarna afbreken. Zonder deze regels rekte de tegel mee met de langste naam en stonden er witte vlakken onder de korte namen. */ .product-item .card__footer { padding: 4px 6px !important; min-height: 0 !important; height: auto !important; gap: 2px; } /* De naam mag hoogstens twee regels. "Broodje Gerookte Zalm" liep over drie regels en dat maakt de rij eronder scheef. Gevraagd door Martijn, 08-09-2026: "3 rijen met productnaam is verboden, dus maak de tekst passend voor maximaal 2 rijen." Kleinere letter zodat de meeste namen in twee regels passen, en een harde grens erachter voor de namen die dat alsnog niet doen. */ .product-item .card__title, .product-item .card__title.item-title, .product-item p.card__title { font-size: 10px !important; /* Gewone tekst, niet vet. De naam stond dik gedrukt, en op een scherm vol tegels schreeuwt dan alles even hard. Het prijskaartje mag opvallen, de naam hoort gewoon leesbaar te zijn. Gevraagd door Martijn, 09-09-2026, meekijkend op de Sunmi L3. */ font-weight: 400 !important; line-height: 1.15 !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; max-height: 24px !important; } /* Een rij tegels is zo hoog als de hoogste tegel, en die hoogte kreeg elke tegel in die rij. Onder een korte naam bleef daardoor een wit vlak staan. Nu is elke tegel zo hoog als hij zelf nodig heeft. Gemeld door Martijn, 08-09-2026. */ .product-grid { align-items: start !important; } /* Het prijskaartje op de foto. Dat was 59 bij 22 op een tegel van 104 breed: meer dan de helft van de tegel. Gevraagd door Martijn, 08-09-2026: "Maak het prijslabel ook een stuk kleiner." */ .product-item .card__price, .product-item span.card__price { font-size: 9px !important; padding: 1px 5px !important; line-height: 1.3 !important; min-width: 0 !important; } .product-item .card__price .currencySymbol, .product-item .card__price .productPrice { font-size: 9px !important; } /* De zoekbalk gaat weg op een handheld. * * Gevraagd door Martijn, 08-09-2026. Hij was 362 breed op een scherm van 360 en stak er dus * net buiten, maar de reden om hem weg te halen is een andere: op een handheld typ je niet, * je tikt. Elke rij die je niet nodig hebt is een rij producten meer. * * Hij wordt niet met display weggehaald maar buiten beeld gezet. Een veld dat er niet is kan * geen letters ontvangen, en de streepjescodelezer van de handheld tikt zijn code juist in dat * veld. Zo blijft scannen werken terwijl er niets meer in beeld staat. */ .product-filter-wrapper { position: absolute !important; left: -10000px !important; top: 0 !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* --- de balk bovenaan ---------------------------------------------------------------------- */ /* Die was 66 hoog op een scherm van 800. Op een handheld is elke rij die je niet nodig hebt een rij producten minder. */ #topbar-menu.header { min-height: 0 !important; padding: 2px 6px !important; } .header-left img.klantlogo { max-height: 24px !important; height: 24px !important; width: auto !important; } /* Het Jimani-logo gaat weg op een handheld. Gevraagd door Martijn, 08-09-2026: op dit schermpje is de ruimte voor de knoppen die je nodig hebt -- Kassa en Zoek bestelling -- en niet voor een merknaam die er de hele dag bij staat. */ .header-right .logo, .header-right .logoJimani { display: none !important; } /* En die twee knoppen blijven staan, met hun opschrift erbij zodat je ziet waar je op drukt. */ .header-center, .header-center .top-menu, .header-center .top-menu ul { display: flex !important; align-items: center; gap: 4px; flex-wrap: nowrap; } .header-center .top-menu li { font-size: 12px !important; } .header-center .top-menu li a { padding: 4px 8px !important; } .header-center .top-menu li .menu-icons { width: 20px !important; height: 20px !important; } /* --- de categorienaam is de knop naar de categorieën ---------------------------------------- * * Gevraagd door Martijn, 08-09-2026: "laat de categorienaam staan (met icoon) wanneer je dan * daarop klikt, dan opent de categoriepagina. Dat is veel logischer dan een aparte knop." * * Op een grote kassa staat de lijst met categorieën links vast in beeld; hier is daar geen plek * voor. De lijst schuift over het scherm en gaat weer dicht zodra je kiest. Het openen en * sluiten doet js/jimani-handheld.js. */ .products-container .title_left { padding: 2px 8px !important; cursor: pointer; } .products-container .title_left h1, .products-container .title_left h2, .products-container .title_left h3 { font-size: 16px !important; margin: 0 !important; } /* Een pijltje erachter, zodat te zien is dat je erop kunt drukken. */ .products-container .title_left .product-title-toolbar > .d-flex:first-child::after { content: "\25BE"; margin-left: 6px; font-size: 14px; color: #6c757d; } /* Onder de 991 stond de lijst op display:none -- er was toch geen plek voor. Nu is er wel een plek: hij schuift over het scherm. */ #categorySideMenu.category-side-menu { display: flex !important; position: fixed !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 78vw !important; max-width: 280px !important; padding: 8px !important; transform: translateX(-100%); transition: transform .2s ease; z-index: 2000 !important; overflow-y: auto !important; align-items: stretch !important; } #categorySideMenu.category-side-menu.categorieen-open { transform: translateX(0); box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.35); } /* Het inklappijltje van de grote kassa heeft hier geen taak meer. */ #categorySideMenu .category-toggle { display: none !important; } #categorySideMenu .category-item { width: 100% !important; justify-content: flex-start !important; padding: 8px 6px !important; } #categorySideMenu .category-label { display: block !important; opacity: 1 !important; font-size: 14px !important; white-space: normal !important; } /* --- zo min mogelijk witruimte tussen balk, categorienaam en producten ---------------------- * * Gevraagd door Martijn, 08-09-2026: "haal de spacing weg (houd dit minimaal) tussen header, * categorie en producten, teveel witruimte". Elke rij die je terugwint is een rij producten. */ #rightCol.right_col { padding-top: 0 !important; } .modal-xpanel-reservation { margin: 0 !important; padding: 0 !important; } .row.orderpage-height > .col-md-12 { padding: 0 !important; } .products-container .row { margin: 0 !important; } #productsContainer { margin-top: 0 !important; padding-top: 0 !important; } } /* ------------------------------------------------------------------------------------------------ De bon op een handheld: een lade die van onderen omhoog komt. Gemeten voor deze ronde: de bon stond op 748 van boven op een scherm van 800, en de betaalknoppen op 1359. Je kon er alleen bij door binnen het middenblok naar beneden te schuiven, langs alle producten heen. Op een grote kassa staat de bon rechts vast in beeld; die plek is er hier niet. Nu staat er onderaan een balk met het totaal. Tik erop en de bon schuift omhoog over de producten, met de betaalknoppen erin. Tik op sluiten en hij gaat weer naar beneden. Het openen en sluiten doet js/jimani-handheld.js. ------------------------------------------------------------------------------------------------ */ @media (max-width: 600px) { .row.orderpage-height > .col-md-12 > .col-md-4 { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important; max-width: 100% !important; /* De volle hoogte van het scherm. Gevraagd door Martijn, 09-09-2026 (AC5): "Wanneer je een tafel opent op de blauwe regel, maak dan de popup de volledige hoogte van het scherm." Op 82 procent bleef er een strook producten boven de lade staan, en dan lees je een bon met de kaart er half doorheen. Twee regels: dvh is de hoogte die je echt ziet -- op Android krimpt en groeit die met de adresbalk mee -- en vh eronder voor het geval dvh niet wordt begrepen. */ height: 100vh !important; height: 100dvh !important; background: #fff; border-top-left-radius: 16px; border-top-right-radius: 16px; box-shadow: 0 -6px 24px rgba(16, 24, 40, 0.18); transform: translateY(100%); transition: transform .22s ease; z-index: 1500 !important; overflow-y: auto !important; padding: 8px !important; } body.bon-open .row.orderpage-height > .col-md-12 > .col-md-4 { transform: translateY(0); } /* De balk onderaan met het totaal. Hij staat er altijd, ook als de bon dicht is, zodat je in één oogopslag ziet wat er op de bon staat. */ .handheld-bonbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1400; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: #0d6efd; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 -2px 10px rgba(16, 24, 40, 0.18); } .handheld-bonbalk .handheld-bonbalk-aantal { font-weight: 500; opacity: 0.9; } .handheld-bonbalk .handheld-bonbalk-totaal { font-size: 16px; } /* Ruimte onder de producten, zodat de balk de laatste rij niet bedekt. */ .row.orderpage-height > .col-md-12 > .col-md-7 { padding-bottom: 52px !important; } /* Sluitknop in de lade zelf. */ /* Het kruisje om de bon weer weg te doen. * * Hier stond een grijs streepje bovenaan de lade, zoals een lade die je omlaag veegt. Op het * toestel las niemand dat als "hier ga je uit". Martijn, 09-09-2026: een kruisje, met vierkant * en rand, aan de rechterkant bij de kop Bestellingen. * * De maat is die van de andere knoppen in het systeem: 40 bij 40 met hoek 8. Het kruis is * getekend met twee streepjes en niet met een plaatje: een plaatje is een blauw vierkantje met * een wit kruis erin, en dat wordt onzichtbaar op een witte knop. Zelfde aanpak als de * terugknop in css/jimani-knoppen.css. */ .handheld-bonkop { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; } .handheld-bon-sluiten { position: relative; flex: 0 0 auto; margin-left: auto; width: 40px; height: 40px; padding: 0; border: 1px solid #d7dce5; border-radius: 8px; background: #fff; } .handheld-bon-sluiten::before, .handheld-bon-sluiten::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: #2b2f38; border-radius: 1px; } .handheld-bon-sluiten::before { transform: rotate(45deg); } .handheld-bon-sluiten::after { transform: rotate(-45deg); } body.bon-open .handheld-bonbalk { display: none; } } @media (max-width: 600px) { /* De betaalknoppen blijven onderin de lade staan. * * Gemeten 08-09-2026: met twee regels op de bon stonden Contant en Pin op 878, terwijl de lade * tot 800 loopt. Je moest dus eerst binnen de lade naar beneden schuiven om te kunnen afrekenen. * Nu plakken ze onderaan, hoe lang de bon ook is. */ body.bon-open #webshopPayRow.webshop-pay-row { position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 1600; background: #fff; padding: 6px 8px !important; margin: 0 !important; box-shadow: 0 -4px 14px rgba(16, 24, 40, 0.12); } /* Ruimte onderin de lade, zodat de laatste bonregel niet achter die knoppen verdwijnt. */ body.bon-open .row.orderpage-height > .col-md-12 > .col-md-4 { padding-bottom: 84px !important; } /* Niets in de lade steekt buiten het scherm. Gemeten: enkele blokken liepen door tot 369. */ .row.orderpage-height > .col-md-12 > .col-md-4 .row { margin-left: 0 !important; margin-right: 0 !important; } .row.orderpage-height > .col-md-12 > .col-md-4 [class*="col-"] { max-width: 100%; } /* De drie knoppen onder de bon -- opmerkingen, Diversen, Overig -- op één regel. * * Gemeld door Martijn, 08-09-2026: "Ik mis de overige knop in de rij met 2 knoppen, maak hier * dus 3 van (maak dit passend op 1 regel)." Er stonden er twee op de eerste regel en viel de * derde eronder, waardoor het leek alsof hij ontbrak. */ .kassa-knoppenrij, .bon-knoppenrij { display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; } .kassa-knoppenrij > *, .bon-knoppenrij > * { flex: 1 1 0 !important; min-width: 0 !important; font-size: 11px !important; padding: 6px 4px !important; white-space: nowrap; } } @media (max-width: 600px) { /* Twee smalle kolommen in de betaalrij liepen door tot 369 op een scherm van 360. */ .row.orderpage-height > .col-md-12 > .col-md-4 .col-md-1 { padding-left: 2px !important; padding-right: 2px !important; max-width: 100% !important; } } /* ------------------------------------------------------------------------------------------------ Vensters boven de lade. De bon schuift als lade over het scherm en staat daarmee hoog in de stapel. Een venster dat daarna opengaat -- de betaalpopup bijvoorbeeld -- kwam eronder terecht: je zag de kop nog net boven de bon uitsteken en verder niets. Dat is precies wat Martijn zag toen hij zei dat betalen op een handheld niet werkt. Gemeten 08-09-2026. Twee dingen: elk venster komt boven de lade, en de lade gaat vanzelf dicht zodra er een venster opengaat (dat laatste doet js/jimani-handheld.js). ------------------------------------------------------------------------------------------------ */ @media (max-width: 600px) { .modal { z-index: 2200 !important; } .modal-backdrop { z-index: 2100 !important; } /* De betaalpopup zelf: kop op één regel en niets buiten beeld. * * Gemeld door Martijn, 08-09-2026: "Betaal popup klopt ook niet, valt ook buiten beeld en is * gewoon veel te groot qua tekst. De header test moet veel kleiner (moet op 1 regel), de 4 * knoppen moeten kleiner en passend." * * Gemeten: de inhoud liep door tot 395 breed en 885 hoog op een scherm van 360 bij 800. */ /* Drie procent lucht links en rechts, zodat je ziet dat het een venster is en niet het scherm * zelf. Het liep van rand tot rand en dan is er geen verschil meer tussen wat eronder ligt en * wat erop staat. Gevraagd door Martijn, 10-09-2026, meekijkend op de Sunmi L3. */ #webshopPaymentModal .modal-dialog, #choosePaymentModal .modal-dialog { margin: 2vh 3% !important; max-width: 94% !important; width: 94% !important; height: 96vh !important; } #webshopPaymentModal .modal-content, #choosePaymentModal .modal-content { height: 100% !important; border-radius: 16px !important; overflow-y: auto !important; } #webshopPaymentModal .modal-title, #choosePaymentModal .modal-title, #webshopPaymentModal .wp-title, #webshopPaymentModal h4, #webshopPaymentModal h5 { font-size: 16px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin: 0 !important; } /* De twee kolommen van de betaalpopup -- de bon links, het te betalen bedrag rechts -- passen niet naast elkaar op 360. Onder elkaar dus. */ #webshopPaymentModal .wp-body, #webshopPaymentModal .wp-right { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding: 6px !important; } #webshopPaymentModal .wp-body { flex-wrap: wrap !important; } /* De vier knoppen onderin passend op één regel. */ #webshopPaymentModal .wp-quick-amounts { gap: 4px !important; margin: 0 0 8px 0 !important; } #webshopPaymentModal .wp-quick-amount-btn { flex: 1 1 0 !important; min-width: 0 !important; padding: 6px 4px !important; font-size: 12px !important; white-space: nowrap; } #webshopPaymentModal .webshop-payment-table { font-size: 12px !important; width: 100% !important; } #webshopPaymentModal table, #webshopPaymentModal tbody, #webshopPaymentModal tr, #webshopPaymentModal td { max-width: 100% !important; } } @media (max-width: 600px) { /* De voet van de betaalpopup: terugknop links, bevestigen rechts. Op 360 pasten die niet naast elkaar en liep de rij door tot 389. Nu twee helften die samen precies het scherm vullen, en hij blijft onderin staan zodat bevestigen altijd bereikbaar is. */ #webshopPaymentModal .wp-footer { position: sticky !important; bottom: 0; z-index: 2; background: #fff; display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; width: 100% !important; max-width: 100% !important; padding: 6px !important; margin: 0 !important; box-shadow: 0 -4px 12px rgba(16, 24, 40, 0.10); } #webshopPaymentModal .wp-footer-left, #webshopPaymentModal .wp-footer-right { flex: 1 1 0 !important; min-width: 0 !important; gap: 6px !important; } #webshopPaymentModal .wp-footer button { flex: 1 1 0 !important; min-width: 0 !important; font-size: 12px !important; padding: 8px 6px !important; white-space: nowrap; } #webshopPaymentModal .wp-footer button .system-icons { width: 16px !important; height: 16px !important; } /* Contant en Terug te geven staan naast elkaar; op 360 net te breed. */ #webshopPaymentModal .wp-contant-rij { gap: 6px !important; width: 100% !important; } #webshopPaymentModal .wp-contant-helft { flex: 1 1 0 !important; min-width: 0 !important; } #webshopPaymentModal .wp-contant-helft input { width: 100% !important; min-width: 0 !important; } } @media (max-width: 600px) { /* De rekening in de betaalpopup: elke regel op één regel. * * Gemeld door Martijn, 08-09-2026: "De rekening wanneer je op contant of pin klikt moet gewoon * veel kleiner, deze is nu lomp en lang." Elke bonregel besloeg twee regels omdat de naam * afbrak; met acht producten paste de rekening niet meer op het scherm. */ #webshopPaymentModal .webshop-payment-table td { padding: 2px 4px !important; font-size: 12px !important; line-height: 1.25 !important; vertical-align: middle; } /* de naam krimpt, de bedragen niet * * Eerst kreeg de naamkolom alle ruimte en vielen de bedragen buiten de tabel. Nu heeft de * naam hoogstens de helft en breekt hij af met puntjes; wat er rechts staat blijft heel. */ #webshopPaymentModal .webshop-payment-table { table-layout: fixed; } #webshopPaymentModal .webshop-payment-table .webshop-line-text { max-width: 50%; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #webshopPaymentModal .webshop-payment-table .webshop-currency-cell, #webshopPaymentModal .webshop-payment-table .webshop-value-cell { white-space: nowrap !important; width: 1%; } /* De voet ligt over de inhoud heen; daarom ruimte eronder in het venster zelf. */ #webshopPaymentModal .modal-content { padding-bottom: 96px !important; } /* De balk met het totaal hoort niet over een venster heen te staan. */ body.modal-open .handheld-bonbalk { display: none !important; } } @media (max-width: 600px) { /* De bedragkolommen een vaste maat. * * Met table-layout: fixed verdeelt de browser de breedte over de kolommen, en een kolom van 1% * wordt dan ook echt 1% -- de bedragen vielen weg. Nu staat er hoeveel ruimte ze krijgen. */ #webshopPaymentModal .webshop-payment-table .webshop-currency-cell { width: 22px !important; white-space: nowrap !important; } #webshopPaymentModal .webshop-payment-table .webshop-value-cell { width: 70px !important; white-space: nowrap !important; } /* De voet onderaan het scherm in plaats van onderaan zijn eigen blok. Sticky hing hem halverwege op, want zijn blok is korter dan het venster. */ #webshopPaymentModal .wp-footer { position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 2210; } } /* ------------------------------------------------------------------------------------------------ De bonregels op een handheld. Gemeld door Martijn, 08-09-2026: "Wanneer je de bestelgeschiedenis opent moet dit veel kleiner, haal de afbeelding weg en zet elke regel op 1 regel (in plaats van 2)" "Tussen elke regel hoort een streep, maar dit is nu niet kloppend." Gemeten: een bonregel was 115 hoog. Dat komt door twee dingen: het rijtje met naam, aantal en prijs is 36 hoog, en daaronder staat de knop Korting op een eigen regel van 38. Met de marges erbij pasten er nog geen zeven regels op het scherm. Nu: geen afbeelding, alles op een regel, en de knop Korting als klein knopje achteraan diezelfde regel. Tussen de regels een streep die overal even zwaar is. ------------------------------------------------------------------------------------------------ */ @media (max-width: 600px) { .receipt-item { padding: 4px 2px !important; margin: 0 !important; border-top: 0 !important; border-bottom: 1px solid #e4e7ec !important; border-radius: 0 !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; row-gap: 0 !important; } .receipt-item:last-child { border-bottom: 0 !important; } /* De afbeelding hoort niet op een handheld: hij is er toch te klein voor om iets te zeggen, en hij kost breedte die de naam beter kan gebruiken. */ .receipt-item .card__image_cart, .receipt-item img { display: none !important; } .receipt-item > .col-md-12 { padding: 0 !important; min-height: 0 !important; } .receipt-item p, .receipt-item .fs-15 { font-size: 12px !important; line-height: 1.2 !important; margin: 0 !important; } /* De knop Korting stond op een eigen regel en maakte elke bonregel twee keer zo hoog. */ .receipt-item .webshop-item-discount-list { width: auto !important; margin: 0 0 0 auto !important; padding: 0 !important; } .receipt-item .webshop-item-discount-btn { font-size: 10px !important; padding: 2px 8px !important; margin: 0 !important; line-height: 1.3 !important; } .receipt-item .product-quantity .btn { width: 26px !important; height: 26px !important; padding: 0 !important; } .receipt-item .receipt-item-quantity { width: 34px !important; height: 26px !important; padding: 0 !important; font-size: 12px !important; } .receipt-item .formatted-price-currency, .receipt-item .formatted-price-value { font-size: 12px !important; } .receipt-item .delete-item { width: 24px !important; height: 24px !important; } } @media (max-width: 600px) { /* Het rijtje met naam, aantal en prijs nam de volle breedte, waardoor de knop Korting eronder viel. Nu neemt het alleen de ruimte die het nodig heeft en past alles op een regel. */ .receipt-item > .col-md-12 { flex: 1 1 auto !important; width: auto !important; max-width: calc(100% - 76px) !important; } .receipt-item > .col-md-12 > .col-md-2:first-child { display: none !important; } .receipt-item > .col-md-12 > .col-md-3 { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; } } @media (max-width: 600px) { /* de naam eerst, de rest zo smal mogelijk * * Na het samenvouwen tot een regel was de naam van het product weg: de knoppen voor het * aantal, de prijs, het prullenbakje en de knop Korting namen samen de hele breedte. Nu * krijgen die alle vier een vaste, krappe maat en houdt de naam wat overblijft -- met * puntjes als hij niet past. */ .receipt-item > .col-md-12 > .col-md-3 { flex: 1 1 0 !important; min-width: 60px !important; max-width: none !important; overflow: hidden; } .receipt-item > .col-md-12 > .col-md-3 p { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .receipt-item > .col-md-12 > .col-md-4.product-quantity { flex: 0 0 auto !important; width: auto !important; max-width: none !important; } .receipt-item .product-quantity .btn { width: 24px !important; height: 24px !important; } .receipt-item .receipt-item-quantity { width: 28px !important; height: 24px !important; margin: 0 2px !important; } .receipt-item > .col-md-12 > .col-md-2 { flex: 0 0 auto !important; width: auto !important; max-width: none !important; gap: 2px; } .receipt-item > .col-md-12 > .col-md-1 { flex: 0 0 auto !important; width: auto !important; padding: 0 2px !important; } .receipt-item > .col-md-12 { max-width: calc(100% - 66px) !important; gap: 2px; } } @media (max-width: 600px) { /* De onderdelen van een bonregel botsten op elkaar: de knop Korting kwam over de prijs en het prullenbakje heen. Alles op een regel houden lukt alleen als elk onderdeel weet hoe smal het mag worden. Daarom hier per onderdeel een maat, en het euroteken eruit -- dat staat al bij het totaal onderaan en kost hier alleen breedte. */ .receipt-item > .col-md-12 { flex-wrap: nowrap !important; overflow: hidden !important; max-width: calc(100% - 52px) !important; } .receipt-item .formatted-price-currency, .receipt-item .currencySymbol { display: none !important; } .receipt-item .formatted-price-value { min-width: 42px !important; text-align: right !important; } .receipt-item .webshop-item-discount-btn { font-size: 9px !important; padding: 2px 5px !important; max-width: 48px !important; overflow: hidden; text-overflow: ellipsis; } .receipt-item > .col-md-12 > .col-md-3 { min-width: 74px !important; } } /* ------------------------------------------------------------------------------------------------ De bonregel als raster. Met alleen maar duwen en trekken aan de kolommen van het oude raamwerk bleef er telkens iets botsen: eerst viel de naam weg, daarna de prijs. Daarom hier één keer opschrijven hoe een bonregel op een handheld is opgebouwd: [ naam ................ ] [ - 1 + ] [ prijs ] [ x ] [ Korting ] De naam krijgt wat overblijft en breekt af met puntjes; de rest heeft een vaste maat. Alles staat op één regel, met een streep eronder. (08-09-2026) ------------------------------------------------------------------------------------------------ */ @media (max-width: 600px) { .receipt-item { display: grid !important; grid-template-columns: 1fr auto !important; align-items: center !important; column-gap: 4px !important; overflow: visible !important; } .receipt-item > .col-md-12 { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto auto !important; align-items: center !important; column-gap: 4px !important; width: auto !important; max-width: none !important; flex: none !important; overflow: visible !important; } /* De afbeelding staat er niet meer, dus die telt niet mee in het raster. */ .receipt-item > .col-md-12 > .col-md-2:first-child { display: none !important; } .receipt-item > .col-md-12 > .col-md-3, .receipt-item > .col-md-12 > .col-md-4, .receipt-item > .col-md-12 > .col-md-2, .receipt-item > .col-md-12 > .col-md-1 { width: auto !important; max-width: none !important; flex: none !important; min-width: 0 !important; padding: 0 !important; } .receipt-item > .col-md-12 > .col-md-3 { overflow: hidden !important; } .receipt-item > .webshop-item-discount-list { grid-column: 2 !important; margin: 0 !important; } } @media (max-width: 600px) { /* De knop Korting als klein teken. * * Het woord "Korting" nam een vijfde van de regel, en dat ging ten koste van de productnaam -- * die werd afgekapt tot "1 x B...". Op een handheld is een procentteken genoeg: de knop staat * op dezelfde plek en doet hetzelfde. (08-09-2026) */ .receipt-item .webshop-item-discount-btn { font-size: 0 !important; width: 28px !important; max-width: 28px !important; padding: 3px 0 !important; text-align: center; } .receipt-item .webshop-item-discount-btn::after { content: "%"; font-size: 13px; font-weight: 600; line-height: 1; } /* En de knoppen voor het aantal wat krapper, zodat de naam meer ruimte houdt. */ .receipt-item .product-quantity .btn { width: 22px !important; height: 22px !important; min-width: 22px !important; } .receipt-item .receipt-item-quantity { width: 26px !important; height: 22px !important; } } @media (max-width: 600px) { /* De knop had een min-width van 62 en een hoogte van 38 uit de gewone kassa-opmaak; daar kwam mijn maat niet doorheen. Nu staat het er expliciet bij. (08-09-2026) */ .receipt-item .webshop-item-discount-btn { min-width: 28px !important; height: 26px !important; } .receipt-item .receipt-item-quantity, .receipt-item .product-quantity input { min-width: 26px !important; width: 26px !important; } } @media (max-width: 600px) { /* Alleen de naam van het product, niet het "1 x" ervoor. * * Het aantal staat al in het vakje ernaast, dus het stond er twee keer -- en op 85 punten * breedte kostte dat vier tekens van de naam: "1 x Bro...". De regel bestaat uit een los stukje * tekst met daarachter de naam in vet; met een lettergrootte van nul valt het losse stukje weg * en blijft de naam staan. (08-09-2026) */ .receipt-item > .col-md-12 > .col-md-3 p { font-size: 0 !important; } .receipt-item > .col-md-12 > .col-md-3 p strong, .receipt-item > .col-md-12 > .col-md-3 p b, .receipt-item > .col-md-12 > .col-md-3 p span { font-size: 12px !important; } /* Nog wat ruimte terugwinnen voor de naam. */ .receipt-item .formatted-price-value { min-width: 38px !important; } .receipt-item .product-quantity input.form-control { width: 26px !important; min-width: 26px !important; padding: 0 !important; } } @media (max-width: 600px) { /* De drie knoppen onder de bon op één regel. * * Gemeld door Martijn, 08-09-2026: "Ik mis de overige knop in de rij met 2 knoppen, maak hier * dus 3 van (maak dit passend op 1 regel)." Hij ontbrak niet: opmerkingen en Diversen vulden de * regel en Overig viel eronder, buiten beeld. */ .webshop-receipt-action-row { display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; /* Iets lager: de knoppen plakten tegen de bonregels aan. Gevraagd door Martijn, * 09-09-2026, meekijkend op de Sunmi L3, en op 10-09-2026 nog een stukje verder omlaag. */ margin: 30px 0 0 0 !important; } .webshop-receipt-action-row > [class*="col-"] { flex: 1 1 0 !important; width: auto !important; max-width: none !important; padding: 0 !important; /* Zonder dit blijft elke kolom minstens zo breed als zijn eigen opschrift, en dan zijn de drie knoppen alsnog ongelijk: gemeten 103, 76 en 62 op 09-09-2026. */ min-width: 0 !important; /* Elk dertig procent van de breedte. Even breed waren ze al, maar ze kwamen samen niet verder dan de helft van het vak en stonden er klein bij. Gevraagd door Martijn, 09-09-2026: "ik wil ze dezelfde breedte hebben maar ieder 30% van het scherm." */ flex: 1 1 30% !important; max-width: 30% !important; } .webshop-receipt-action-row .action-pill-btn { width: 100% !important; /* Tien in plaats van elf: bij dertig procent breedte werd "opmerkingen" anders afgekapt tot "opmerkin...". Gemeten 09-09-2026. */ font-size: 10px !important; padding: 6px 2px !important; gap: 4px !important; white-space: nowrap; overflow: hidden; } .webshop-receipt-action-row .action-pill-btn i { font-size: 12px !important; } } /* ------------------------------------------------------------------------------------------------ De vensters Opmerking en Diversen op een handheld. Gemeld door Martijn, 08-09-2026: "Ook de diversen popup klopt niet, is uit proportie, velden staan niet netjes en toetsenbord problemen." Gemeten: de drie velden -- naam, aantal en prijs -- staan naast elkaar in drie kolommen. Op 360 punten breedte werd het opschrift "Naam van de diverse post" over vier regels gebroken, bleef er voor het veld zelf een hokje van twee tekens over, en liep "Prijs (niet verplicht)" met veld en al buiten beeld. Onder elkaar dus, elk over de volle breedte. ------------------------------------------------------------------------------------------------ */ @media (max-width: 600px) { .diverse-product-grid { grid-template-columns: 1fr !important; gap: 8px !important; } .diverse-product-grid > div { width: 100% !important; min-width: 0 !important; } .diverse-field-label { display: block !important; text-align: left !important; font-size: 12px !important; margin-bottom: 2px !important; white-space: normal !important; } .diverse-input, .diverse-price-input, .diverse-comment-textarea, #WebshoOrdersCommentsModal textarea, #WebshoOrdersDiverseModal input[type="text"], #WebshoOrdersDiverseModal select { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; font-size: 14px !important; } /* Het aantal blijft een rijtje van min, veld en plus, maar dan over de volle breedte. */ .diverse-qty-wrap { display: flex !important; justify-content: flex-start !important; gap: 8px !important; } .diverse-qty-input { width: 56px !important; text-align: center; } /* De twee vensters zelf, met ruimte onderaan zodat het toetsenbord van het toestel het invoerveld niet bedekt. Ze stonden over de volle breedte en raakten daarmee allebei de randen van het scherm. Martijn, 09-09-2026: "haal aan beide kanten van de popup 3% af, zodat het de zijkant niet raakt." Dat is dezelfde regel als voor de rest van de handheld: een scherm is honderd procent breed en we gebruiken er vierennegentig van. */ #WebshoOrdersDiverseModal .modal-dialog, #WebshoOrdersCommentsModal .modal-dialog { margin: 0 3vw !important; max-width: 94vw !important; width: 94vw !important; } /* Boven waren de hoeken rond en onder niet. Nu alle vier hetzelfde. */ #WebshoOrdersDiverseModal .modal-content, #WebshoOrdersCommentsModal .modal-content { border-radius: 12px !important; max-height: 100vh !important; overflow-y: auto !important; } } @media (max-width: 600px) { /* Het prijsvak zat om het veld heen en bleef op zijn eigen maat staan; het veld erbinnen was daardoor nog geen half scherm breed. (08-09-2026) */ .diverse-price-wrap { width: 100% !important; } } /* ------------------------------------------------------------------------------------------------ Tafel parkeren op een handheld. Gemeld door Martijn, 08-09-2026: "Tafel parkeren werkt niet, popup is out of screen, en werkt niet bij aanklikken. Maak dit scherm ook veel kleiner en pas dit aan." Het aantikken zelf werkt: een tik zet de tafel in het veld en sluit het venster (nagespeeld met tafel 190). Dat het niet reageerde kwam doordat het venster buiten beeld viel -- dat is met de vensteropmaak hierboven opgelost. Wat overblijft is de maat: een tafeltegel was 150 bij 150, dus er paste er één op een rij en je moest schuiven om bij de derde te komen. Nu drie op een rij, net als de producten. ------------------------------------------------------------------------------------------------ */ @media (max-width: 600px) { #parkingTableModal .modal-dialog { margin: 0 !important; max-width: 100% !important; width: 100% !important; } #parkingTableModal .modal-content { max-height: 100vh !important; overflow-y: auto !important; } /* De tegels staan in een rij die op een breed scherm netjes uitwaaiert; hier een raster van drie. De knop om een tafel bij te maken telt gewoon mee. */ #parkingTableModal .parking-table-btn, #parkingTableModal .unpaidParkingTable, #parkingTableModal .parking-new-table-btn { width: 100% !important; min-width: 0 !important; height: 84px !important; min-height: 0 !important; font-size: 13px !important; padding: 4px !important; } #parkingTableModal .parking-table-list, #parkingTableModal .modal-body > div:has(> .parking-table-btn), #parkingTableModal .parking-tables-wrap { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; } #parkingTableModal .modal-body { padding: 8px !important; } } /* ------------------------------------------------------------------------------------------------ De knoppen in de balk bovenaan. Gevraagd door Martijn, 08-09-2026: "Zorg wel dat zoek bestelling en kassa wel als knop zichtbaar is." In de balk stond alleen het plusje van Kassa, zonder opschrift. Zoek bestelling zat achter het menuknopje. Nu staan ze er allebei, met hun naam erbij; js/jimani-handheld.js neemt Zoek bestelling over uit het linkermenu. ------------------------------------------------------------------------------------------------ */ @media (max-width: 600px) { .header-center .top-menu ul { display: flex !important; align-items: center; gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none; } .header-center .top-menu li { display: flex !important; align-items: center; } .header-center .top-menu li a { display: flex !important; align-items: center; gap: 4px; padding: 4px 8px !important; font-size: 12px !important; white-space: nowrap; } /* Het opschrift stond op een handheld verstopt; juist daar wil je zien waar je op drukt. */ .header-center .top-menu li .nav-text, .header-center .top-menu li span { display: inline !important; font-size: 12px !important; } .header-center .top-menu li .menu-icons, .header-center .top-menu li img { width: 18px !important; height: 18px !important; margin: 0 !important; } /* De streepjescode van een bon: hij blijft bestaan voor de scanner, maar neemt geen breedte meer in. Zelfde reden als bij het zoekveld boven de producten. */ .bon-zoeken { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } } @media (max-width: 600px) { /* Staat het toetsenbord open, dan blijft het venster erboven. ------------------------------------------------------------------------------------------ Op een handheld vult een venster het hele scherm, en het toetsenbord komt eroverheen aan de onderkant. Van de vier rijen waren er dan nog twee te zien; de bovenste twee zaten achter het venster. Het toetsenbord geeft zijn hoogte door als --toetsenbord-hoogte, en daar stoppen we het venster nu. Gemeld door Martijn, 08-09-2026 (H9). */ body.jimani-toetsenbord-open .modal { bottom: var(--toetsenbord-hoogte, 0px); height: auto; } body.jimani-toetsenbord-open .modal-content { max-height: calc(100vh - var(--toetsenbord-hoogte, 0px)) !important; } } @media (max-width: 600px) { /* De twee vensters met een tekstvak dragen een eigen regel met een ID erin, en die won van de regel hierboven. Daarom staan ze hier nog een keer, met de hoogte van het toetsenbord eraf. En de dialoog erbinnen hangt aan de onderkant van zijn vak: zonder grens bleef die even hoog en stak hij er onderuit. (H9, 08-09-2026) */ body.jimani-toetsenbord-open #WebshoOrdersDiverseModal .modal-content, body.jimani-toetsenbord-open #WebshoOrdersCommentsModal .modal-content, body.jimani-toetsenbord-open .modal-dialog { max-height: calc(100vh - var(--toetsenbord-hoogte, 0px)) !important; } } /* ------------------------------------------------------------------------------------------------ Het betaalscherm op een handheld. Gemeld door Martijn op de Sunmi L3, 09-09-2026, punt voor punt terwijl hij meekeek: a. "Selecteer betaalmethode staat veel te groot, maak deze een stuk kleiner en passend op een regel, dezelfde regel als het kruisje." b. "Haal de tekst Kies hoe u voor de ... weg." c. "In het besteloverzicht staat het euroteken veel te veel naar links, laat dit aansluiten op dezelfde positie als het euroteken op totaal inclusief btw. Zorg dan dat alle teksten op een regel passen." d. "Er zit heel veel wit na de lichtblauwe regel, haal dit weg, en haal totaal exclusief btw en btw weg. Dit staat al op de bon, dus voor de handheld niet relevant." 9. "Het besteloverzicht heeft een vaste hoogte, dat moet niet. Maak het scherm even hoog als de laatste tekstregel." 10. "Openstaand bedrag staat veel te groot en mag helemaal weg, want dit staat dubbel." 11. "Het bedrag terug te geven staat links uitgelijnd, maar lijn dit rechts uit." 13. "In de footer staat een terugknop en restant via andere. Beide knoppen weg, alleen de knop Betaal nu." Deze regels gelden voor allebei de vensters: het kiesvenster (#choosePaymentModal) en het venster waarin je contant of anders afrekent (#webshopPaymentModal). Ze stonden alleen op het eerste, en juist het tweede is het venster waar Martijn naar keek -- vandaar dat hij op 09-09-2026 bij AC9 dezelfde punten nog een keer moest melden: "Hier eten" weg, en totaal exclusief btw, btw en totaal inclusief btw weg. Alles met !important: de opmaak van dit venster wordt door het venster zelf in de pagina gezet (een style-blok uit webshop.payment.popup.js) en komt dus na dit bestand. ------------------------------------------------------------------------------------------------ */ @media (max-width: 600px) { /* a. De kop op een regel, naast het kruisje. */ #choosePaymentModal .modal-header, #webshopPaymentModal .modal-header { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 8px; padding: 12px 14px !important; } #choosePaymentModal .payment-title, #webshopPaymentModal .payment-title { font-size: 18px !important; line-height: 1.2 !important; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* b. De uitleg eronder zegt niets wat de knoppen niet al zeggen. */ #choosePaymentModal .payment-subtitle, #webshopPaymentModal .payment-subtitle { display: none !important; } /* c. Het euroteken van een bestelregel komt op dezelfde plek als dat van Totaal incl. btw. * * De regels staan in een tabel met drie kolommen: tekst, euroteken, bedrag. Die twee laatste * kolommen waren zo breed als de tabel toeliet, waardoor het euroteken ver naar links stond. * Nu zijn ze precies zo breed als hun inhoud, en duwt de tekstkolom ze naar rechts -- net als in * de regel Totaal incl. btw, waar euroteken en bedrag naast elkaar rechts staan. */ .webshop-payment-table { width: 100% !important; table-layout: auto !important; } .webshop-payment-table .webshop-currency-cell, .webshop-payment-table .webshop-value-cell { width: 1% !important; white-space: nowrap !important; } .webshop-payment-table .webshop-currency-cell { padding-right: 4px !important; } /* En de omschrijving past op een regel; wat niet past wordt afgekapt. */ .webshop-payment-table .webshop-line-text { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 0; } /* d en 9. Geen wit tussen de lichtblauwe streep en het totaal, en geen vaste hoogte: het vak is * zo hoog als de laatste regel. */ #choosePaymentModal .wp-border, #webshopPaymentModal .wp-border { justify-content: flex-start !important; height: auto !important; min-height: 0 !important; } #choosePaymentModal .wp-left, #webshopPaymentModal .wp-left, #choosePaymentModal .wp-table-container, #webshopPaymentModal .wp-table-container { height: auto !important; min-height: 0 !important; flex: 0 0 auto !important; } /* d. Totaal exclusief btw en BTW gaan weg; die staan al op de bon. Alleen de regel met * webshop-total-row blijft staan. */ #choosePaymentModal .wp-border > div > .d-flex.justify-content-between, #webshopPaymentModal .wp-border > div > .d-flex.justify-content-between { display: none !important; } /* AC9. Het openstaande bedrag blijft, en past op een regel. * * Martijn, 09-09-2026: "Haal ook totaal incl. btw weg en laat het openstaand bedrag staan, maar * maak dit passend op 1 regel inclusief het bedrag." * * Eerder ging dit bedrag juist weg omdat het dubbel stond: er stond een regel lager Totaal incl. * btw met hetzelfde getal. Nu die regel weg is, is dit het enige bedrag dat er nog staat -- en * dan hoort het er te zijn. */ #choosePaymentModal .wp-payable-row, #webshopPaymentModal .wp-payable-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin: 0 0 10px !important; white-space: nowrap !important; } #choosePaymentModal .wp-payable-label, #webshopPaymentModal .wp-payable-label { font-size: 15px !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; } #choosePaymentModal .wp-payable-amount, #webshopPaymentModal .wp-payable-amount { font-size: 18px !important; white-space: nowrap !important; flex: 0 0 auto !important; } /* AC9. "Hier eten" onder de kop van het besteloverzicht zegt niets over het afrekenen. */ #choosePaymentModal .wp-order-header .text-muted, #webshopPaymentModal .wp-order-header .text-muted { display: none !important; } /* AC8. Het besteloverzicht net zo breed als de knop eronder. * * Martijn, 09-09-2026: "Wanneer je betalen klikt dan zie je onder selecteer betaalmethode de * bestellijst, alleen deze staat nu minder breed. Deze mag veel breder (dezelfde breedte als de * contante betaling knop)." Gemeten op 360 breed: de lijst was 178 en de knop eronder 348. * * Het vak stond op flex 1 1 40 procent uit de opmaak die het venster zelf meebrengt. Op een * scherm van 360 is veertig procent geen kolom maar een strook. */ /* En het vak eromheen hield aan weerskanten tweeenveertig punten vrij. Op een scherm van 360 is * dat vierentachtig punten die niemand ziet; de knop eronder houdt er zes aan. Gemeten: het * besteloverzicht was 276 breed en de knop Betaal nu 348. */ #choosePaymentModal .modal-content, #webshopPaymentModal .modal-content, #choosePaymentModal .wp-body, #webshopPaymentModal .wp-body { padding-left: 0 !important; padding-right: 0 !important; } /* Zes punten was te krap: alles plakte tegen de rand. Nu veertien, en met de drie procent * eromheen staat er genoeg lucht omheen. Gemeld door Martijn, 10-09-2026: "hier moet echt meer * spacing in zitten". */ #choosePaymentModal .x_content2, #webshopPaymentModal .x_content2, #choosePaymentModal .modal-body, #webshopPaymentModal .modal-body, #choosePaymentModal .modal-header, #webshopPaymentModal .modal-header, #choosePaymentModal .wp-body, #webshopPaymentModal .wp-body, #choosePaymentModal .modal-footer, #webshopPaymentModal .modal-footer { padding-left: 3% !important; padding-right: 3% !important; } /* De rand van het besteloverzicht houdt zijn eigen lucht van binnen; zijn buitenkant valt nu * precies samen met die van de knop eronder. */ #choosePaymentModal .wp-border, #webshopPaymentModal .wp-border { padding-left: 10px !important; padding-right: 10px !important; } #choosePaymentModal .wp-body, #webshopPaymentModal .wp-body { display: block !important; } #choosePaymentModal .wp-left, #webshopPaymentModal .wp-left, #choosePaymentModal .wp-right, #webshopPaymentModal .wp-right { width: 100% !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* 11. Terug te geven hoort rechts te staan, zoals elk bedrag. */ #choosePaymentModal .wp-terug-veld .webshop-amount-input, #webshopPaymentModal .wp-terug-veld .webshop-amount-input, #choosePaymentModal #webshopChangeAmount, #webshopPaymentModal #webshopChangeAmount { flex: 1 1 auto !important; justify-content: flex-end !important; text-align: right !important; padding-right: 10px !important; } /* 13. Alleen Betaal nu in de voet. De terugknop en Restant via andere betaalmethode gaan weg; * die laatste stond toch al uit. */ #choosePaymentModal .wp-footer-left, #webshopPaymentModal .wp-footer-left { display: none !important; } #choosePaymentModal .wp-footer-right, #webshopPaymentModal .wp-footer-right { width: 100% !important; max-width: none !important; flex: 1 1 100% !important; } } /* ------------------------------------------------------------------------------------------------ Nooit een schuifbalk opzij. Regel van Martijn, 09-09-2026: "Ik zie een horizontale scrollbar wanneer ik de order open, dit is verboden." En eerder die ochtend: "Er mag nooit een verticale scrollbar zichtbaar zijn." Gemeten op de Sunmi L3: het bonvak is 352 breed, maar het vak eromheen wilde 391 en de rij met de drie knoppen 371 op 294 beschikbaar. Twee oorzaken: - de drie kolommen mochten niet krimpen (flex 0 0 30%), dus bij weinig ruimte staken ze eruit; - het opschrift in een knop kon niet inkorten, want een tekst in een flexvak krimpt niet uit zichzelf. Beide zijn hieronder rechtgezet. Het afkappen op het vak eromheen staat er als vangnet: er hoort niets meer buiten te steken, en mocht dat ooit weer gebeuren dan zie je er in elk geval geen schuifbalk van. ------------------------------------------------------------------------------------------------ */ @media (max-width: 600px) { .row.orderpage-height > .col-md-12 > .col-md-4, .receipt.payment-container, .webshop-receipt-panel, .receipt-details { overflow-x: hidden !important; max-width: 100% !important; } /* Een tekst in een flexvak krimpt niet uit zichzelf: min-width staat op auto en dat is zo breed als het woord. Vandaar dat "opmerkingen" de rij breder maakte dan het vak. */ .webshop-receipt-action-row .action-pill-btn > * { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; } .webshop-receipt-action-row .action-pill-btn > i { flex: 0 0 auto !important; } } /* ------------------------------------------------------------------------------------------------ Het eigen toetsenbord hoort bovenop. Gemeld door Martijn, 09-09-2026: "Het toetsenbord doet het NERGENS. Het probleem zit dat het toetsenbord niet op de voorgrond staat, daardoor kan ik deze niet bedienen." Eerder die ochtend ook al voor het zoeken bij parkeertafels, opmerkingen en diversen. Gevonden: het toetsenbord staat op z-index 2000 (css/pos-toetsenbord.css) en hangt aan de body. Op een handheld zet dit bestand elk venster op 2200, zodat een venster boven de bonlade komt. Daarmee kwam elk venster ook boven het toetsenbord, en tikte je dus op het venster in plaats van op een toets. Het toetsenbord gaat daarom boven de vensters staan. Hoger dan de voet van het betaalvenster (2210) en hoger dan het venster zelf (2200). ------------------------------------------------------------------------------------------------ */ @media (max-width: 600px) { .jimani-toetsenbord { z-index: 2400 !important; } } /* ------------------------------------------------------------------------------------------------ De drie knoppen zo breed als het scherm toelaat. Gevraagd door Martijn, 09-09-2026: "maak iedere knop +40 breder." Dat past niet. Gemeten op de Sunmi L3: het scherm is 360 breed, de bonlade 352, het vak eromheen 334 en de rij zelf 294. Bij dertig procent is een knop 91 breed. Er veertig bij optellen maakt 131, en drie keer 131 plus de ruimte ertussen is 405 -- meer dan het scherm zelf. Wat wel kan: de rij de volle breedte van het vak geven, en de vierde lege kolom weghalen die er ongemerkt een kwart van opat. Daarmee gaat een knop van 83 naar 111 -- achtentwintig erbij. Dat is het maximum zonder dat er iets buiten beeld valt, en een schuifbalk opzij is verboden. ------------------------------------------------------------------------------------------------ */ @media (max-width: 600px) { /* Het vak eromheen hield twintig punten vrij aan weerszijden. Op een handheld is dat veertig punten die niemand ziet. Acht is genoeg om het niet tegen de rand te laten plakken. Hier stond eerst een negatieve marge op de rij zelf, om die ruimte terug te pakken. Dat werkte niet: de rij stak dan rechts buiten de lade en Overig viel half weg. Gemeten op de Sunmi L3, 09-09-2026. */ .receipt.payment-container { padding-left: 8px !important; padding-right: 8px !important; } /* Het bonvak vult de lade, zodat de knoppen onderaan blijven staan waar ze stonden. * * Gemeld door Martijn op de Sunmi L3, 09-09-2026: "Ja volledig scherm werkt, maar de 3 knoppen * moeten wel op dezelfde positie blijven als ze waren. Dus zet die naar beneden en zorg dat het * hele bestellingscherm dus langer wordt." * * Het vak stond op 100vh min 212 punten -- een maat die klopte toen de lade 82 procent van het * scherm was. Nu de lade het hele scherm vult bleef het vak op 516 staan in een lade van 728, en * hing er onder de knoppen een strook wit van tweehonderd punten. Het vak groeit nu mee met de * lade; de knoppenrij zakt daarmee vanzelf naar onderen. */ body.bon-open .receipt.payment-container { --webshop-receipt-panel-height: 100%; height: 100% !important; flex: 1 1 auto !important; } .webshop-receipt-action-row { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; gap: 4px !important; } .webshop-receipt-action-row > [class*="col-"] { flex: 1 1 33.333% !important; max-width: 33.333% !important; } /* En er stond een vierde, lege kolom in die rij: onzichtbaar, maar hij nam wel een kwart van de breedte in. Vandaar dat drie knoppen samen niet verder kwamen dan driekwart. Gemeten 09-09-2026: vier kolommen van 83 op een rij van 342. Op een breed scherm houdt hij de knoppen op hun plek, op een handheld is er geen ruimte voor niets. */ .webshop-receipt-action-row > .onzichtbaar-met-ruimte { display: none !important; } } /* ------------------------------------------------------------------------------------------------ Geen halve centimeter schuiven in een lege bestelling. Gemeld door Martijn, 09-09-2026: "Wanneer ik in een lege bestelling sta dan kan ik met mijn vinger scrollen voor een halve centimeter, dit hoort niet." Gemeten op 360 bij 728: het bonvak is 597 hoog en zijn inhoud 608 -- elf punten te veel. Dat zijn precies de twaalf punten die de knoppenrij er eerder deze ochtend bij kreeg toen die iets lager moest komen te staan. Die ruimte wordt hieronder onderaan het vak weer weggehaald: de knoppen blijven even ver van de bonregels af staan, maar het vak past weer. ------------------------------------------------------------------------------------------------ */ @media (max-width: 600px) { /* Het vak is 597 hoog: acht boven, vierhonderdvijf voor de bon en vierentachtig onderaan voor de betaalknoppen die vast in beeld staan. Het blok met de bon bleef op 516 staan in plaats van mee te krimpen naar 505, want de kolom eromheen was geen flexvak en dan doet flex-grow-1 en min-h-0 niets. Nu wel, en dan past het precies. */ body.bon-open .row.orderpage-height > .col-md-12 > .col-md-4 { display: flex !important; flex-direction: column !important; } body.bon-open .row.orderpage-height > .col-md-12 > .col-md-4 > .flex-grow-1 { flex: 1 1 auto !important; min-height: 0 !important; } } /* ------------------------------------------------------------------------------------------------ Eén kruisje op de kopregel van de bon. Gemeld door Martijn, 09-09-2026: "Wanneer ik op de handheld de bestelling open zie ik ineens drie iconen: een leeg vierkantje zonder icoon en twee kruisen. Haal de twee linker iconen weg en behoud alleen het kruisje dat donkergrijs zwart is." Gemeten op het toestel: het waren er twee knoppen, niet drie. Links de knop Tafel verlaten -- een smal vakje van dertien bij tweeendertig met een rood kruisje erin, wat er als een leeg vierkantje plus een kruis uitziet. Rechts het kruisje van 40 bij 40 dat de lade sluit. Let op: hiermee is Tafel verlaten op een handheld niet meer aan te tikken. Dat kan omdat opslaan je sinds vanochtend zelf terugbrengt naar het kassascherm; op een breed scherm blijft de knop gewoon staan. ------------------------------------------------------------------------------------------------ */ @media (max-width: 600px) { .webshop-order-header .webshop-order-verlaat-tafel { display: none !important; } } /* ------------------------------------------------------------------------------------------------ Een bonregel met een opmerking of met diversen eronder valt niet meer door elkaar. Gemeld door Martijn, 09-09-2026, met een foto van het toestel: "de middelste regel gaat qua layout heel veel mis, zoveel dat ik uberhaupt niet kan zien wat het is." Op die regel stond een product met een opmerking, en daaronder een diversenregel met een eigen opmerking. Alles liep door elkaar heen: naam, aantal, prijs en de diversen stonden naast elkaar op een strook van nog geen driehonderd punten breed. Hoe het in elkaar zit: een bonregel bestaat uit meerdere blokken onder elkaar -- de productregel, dan de supplementen, dan de diversen. Twee van de varianten in de opmaak zetten die blokken als bootstrap-kolommen neer, en die gaan op een smal scherm naast elkaar staan in plaats van eronder. Hieronder staan ze op een handheld gegarandeerd onder elkaar, elk over de volle breedte. Binnen zo'n blok blijft alles staan zoals het was: naam links, aantal en bedragen rechts. ------------------------------------------------------------------------------------------------ */ @media (max-width: 600px) { .webshop-receipt-panel .receipt-item, .webshop-receipt-panel .parentRow, #PreviousInvoiceList .receipt-item, #PreviousInvoiceList .parentRow { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .webshop-receipt-panel .receipt-item > *, .webshop-receipt-panel .parentRow > *, #PreviousInvoiceList .receipt-item > *, #PreviousInvoiceList .parentRow > * { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; } /* De opmerking hoort onder de naam en niet ernaast. */ .webshop-receipt-panel .commentsColumn, #PreviousInvoiceList .commentsColumn { width: 100% !important; max-width: 100% !important; } /* De lege kolommetjes die op een breed scherm de uitlijning verzorgen, nemen hier alleen ruimte in. Een diversenregel begon daardoor pas op een derde van de breedte. */ #PreviousInvoiceList .diverse-item-row > .col-md-2:empty, #PreviousInvoiceList .supplement-item > .col-md-2:empty, #PreviousInvoiceList .supplement-item > .col-md-1:empty { display: none !important; } } /* Het bestelnummer naast de kop, zolang er geen tafel is gekozen. Zie js/jimani-handheld.js. Geldt op de kassa en op de handheld, dus buiten de medialaag. */ .webshop-order-badge.bestelnummer-verborgen { display: none !important; } /* ------------------------------------------------------------------------------------------------ Het venster Instellingen op de handheld. Gevraagd door Martijn, 09-09-2026: achter het klantlogo een venster met de kop Instellingen, een kruisje rechtsboven, en drie knoppen -- bonprinter wisselen, kassalade of portemonnee wisselen, gebruiker wisselen. "Blauwe knoppen met icoon en naam en witte achtergrond, blauwe border." Het kruisje is hetzelfde als dat van de bonlade: veertig bij veertig met een rand, en met twee streepjes getekend in plaats van een plaatje. ------------------------------------------------------------------------------------------------ */ @media (max-width: 600px) { .handheld-instellingen-venster .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #e7e9ee; } .handheld-instellingen-venster .modal-title { font-size: 18px; font-weight: 700; margin: 0; color: #2b2f38; } .handheld-instellingen-venster .modal-body { display: flex; flex-direction: column; gap: 10px; padding: 16px; } /* Blauw op wit, met een blauwe rand. */ .handheld-instelknop { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 14px; border: 1px solid #2f80ff; border-radius: 8px; background: #fff; color: #2f80ff; font-size: 15px; font-weight: 600; text-align: left; } .handheld-instelknop i { font-size: 18px; width: 22px; text-align: center; flex: 0 0 auto; } .handheld-instelknop:active { background: #eef3fd; } } /* Het kruisje van een handheldvenster. Buiten de medialaag, want de vorm is overal dezelfde; alleen getoond waar het venster staat. */ .handheld-venster-sluiten { position: relative; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border: 1px solid #d7dce5; border-radius: 8px; background: #fff; } .handheld-venster-sluiten::before, .handheld-venster-sluiten::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: #2b2f38; border-radius: 1px; } .handheld-venster-sluiten::before { transform: rotate(45deg); } .handheld-venster-sluiten::after { transform: rotate(-45deg); } /* ------------------------------------------------------------------------------------------------ De keuzelijst in het venster Instellingen. Gevraagd door Martijn, 09-09-2026 (AB3 en AB4): bonprinter en kassalade wisselen vanaf het toestel zelf. De lijst staat in hetzelfde venster en niet in een tweede venster erover: op een scherm van 360 breed is dat een laag te veel, en er mag niets over de drie procent aan weerskanten vallen. ------------------------------------------------------------------------------------------------ */ .handheld-instelkeuze:empty { display: none; } .handheld-instelkeuze { margin-top: 14px; border-top: 1px solid #e3e6ec; padding-top: 12px; } .handheld-instelkop { font-size: 13px; color: #5b6472; margin-bottom: 8px; } .handheld-instelkeus { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 46px; margin-bottom: 8px; padding: 8px 12px; border: 1px solid #d7dde5; border-radius: 10px; background: #fff; color: #212529; font-size: 15px; text-align: left; } .handheld-instelkeus.gekozen { border-color: #0d3fd6; color: #0d3fd6; font-weight: 600; } .handheld-instelleeg { padding: 8px 2px; color: #8b8b95; font-size: 13px; } /* --- het bedrag op de betaalknop (10-09-2026) -------------------------------------------------- */ /* Op de handheld staat de knop "Betaal nu" onderaan, en daar hoorde het bedrag bij: je ziet de bonbalk niet meer als de bon openstaat. De knop heeft daar al een tweede regel voor -- die stond alleen leeg zolang er geen deelbetaling liep. Het vullen gebeurt in js/jimani-handheld.js; hier staat alleen dat de twee regels onder elkaar horen. Gemeld door Martijn, 10-09-2026: "ik zie in de betaal nu knop niet het bedrag. Dit moet worden toegevoegd op regel 2." */ @media (max-width: 600px) { #PayButton { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; line-height: 1.2; } #PayButton #totalPaymentAmountWithCurrencySymbol { display: block; font-size: 15px; font-weight: 600; opacity: .92; } } /* --- de betaalkeuze op de handheld (10-09-2026) ------------------------------------------------ */ /* Gemeld door Martijn, meekijkend op de Sunmi L3: "Haal bij handheld cadeaubon en betalingen op rekening weg. Haal ook de 2 headers weg, contant en betaal op andere manier. Maak nu alle vakjes iets minder breed, dus hou hier een 3% spacing aan binnen de popup, zodat de borders de rand niet raken." Alleen op een smal scherm. Op de kassa blijven de cadeaubon, het betalen op rekening en de twee kopjes gewoon staan: daar is ruimte genoeg en daar worden ze gebruikt. */ @media (max-width: 600px) { /* Twee manieren die op een handheld niet aan de beurt komen. */ /* Er zijn twee betaalkeuzevensters in het systeem: een met namen op de knoppen en een zonder. In dat tweede hebben de knoppen geen naam, alleen een pictogram -- vandaar dat ze ook op het pictogram worden gezocht. */ #choosePaymentModal #ChooseCoupon, #choosePaymentModal #ChoosePayOnAccount, #webshopPaymentModal #ChooseCoupon, #webshopPaymentModal #ChoosePayOnAccount, #choosePaymentModal .payment-option:has(.payment-icon.gift), #choosePaymentModal .payment-option:has(.payment-icon.invoice), #webshopPaymentModal .payment-option:has(.payment-icon.gift), #webshopPaymentModal .payment-option:has(.payment-icon.invoice) { display: none !important; } /* Met nog maar twee keuzes zeggen "1. Contant" en "2. Betaal op een andere manier" niets meer; ze kosten alleen ruimte op een scherm dat er weinig van heeft. */ #choosePaymentModal .section-title, #webshopPaymentModal .section-title { display: none !important; } /* De drie procent wordt een laag hoger geteld, op .wp-body. Telde elke laag zijn eigen drie procent, dan stond er negenentwintig pixels lucht in plaats van tien. */ #choosePaymentModal .payment-section, #choosePaymentModal .wp-left, #choosePaymentModal .wp-right, #webshopPaymentModal .payment-section, #webshopPaymentModal .wp-left, #webshopPaymentModal .wp-right { padding-left: 0 !important; padding-right: 0 !important; } #choosePaymentModal .payment-option, #webshopPaymentModal .payment-option { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } }