basham

CSS Media Queries: Best Practices

• Media queries have many features, but min-width is the most practical one, the one you should assume to use most of the time.
• Only use em within media query definitions, never pixels.
• Until there's wider rem support within media query, rem should be avoided in media query definitions as well.
• Assuming mobile is 320px and the body font size is 16px, then the breakpoint indicating mobile width in profile orientation would be 20em (320/16).
• Choose breakpoint values to serve the content, not to serve device deminsions.
• Never use media queries to define styles for the smallest viewport size.
• Use media queries to “enhance” or add or alter styles when the browser has a wider (or taller) vi

basham

Kiosk System &

  Room device

    # On enter or check in: Refresh QR code.
    Idle
      check in with username -> Enter username
      scan QR code -> Check authentication?

    Enter username

basham

Kiosk Admin
  check in records -> Check in records
  kiosks -> Kiosks
    
  Check in records

    # Filter by (and group by?):
    # Campus, Care Unit, Kiosk, Service,
    # Date (today, custom), Date range (this week, this semester, custom),
    # Status (checked in, checked out), Student,

basham

import { useEffect, useReducer, useRef } from 'react';

export class Controller {
	#host;

	constructor (host) {
		this.#host = host;
		host?.addController(this);
	}