Contoh Coding POS Restaurant dengan Bootstrap, CSS, HTML, dan JavaScript

Membuat layout responsif dan touch friendly

POS restaurant sering digunakan pada tablet. Karena itu, responsif saja belum cukup: area tekan harus mudah disentuh, jarak antartombol cukup, dan panel pesanan mudah diakses.

@media (max-width: 900px) {
  .pos-shell {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas:
      "top top"
      "side catalog";
  }

  .order-panel {
    position: fixed;
    top: 76px;
    right: 0;
    bottom: 0;
    width: min(390px, 90vw);
    transform: translateX(100%);
    transition: .25s;
  }

  .order-panel.open {
    transform: none;
  }
}

@media (max-width: 620px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }

  .metric-grid,
  .table-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .table-scroll {
    overflow-x: auto;
  }
}

@media (pointer: coarse) {
  button,
  .product-card {
    min-height: 44px;
  }
}

Pada tablet, panel pesanan berubah menjadi panel geser dari kanan. Pada ponsel, kartu ringkasan dan meja menggunakan dua kolom. Tabel transaksi dan stok ditempatkan dalam kontainer yang dapat digeser horizontal agar kolom tidak dipaksa terlalu sempit.