rustio-admin 0.21.1

Django Admin, but for Rust. A small, focused admin framework.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

/* ============================================================
 * rustio-admin / layout / responsive
 *
 * Mobile-first breakpoints — must be imported AFTER all layout
 * and component files so its rules win the cascade.
 *
 *   < 768px   → sidebar collapses off-canvas behind a hamburger
 *   ≥ 768px   → sidebar pinned, sticky to viewport
 *   ≥ 1280px  → wider sidebar, more main padding, 3-col checkboxes
 *
 * Print rules live in print/print.css.
 * ============================================================ */

/* Tables overflow horizontally on narrow screens. The rule was
 * previously applied unconditionally, which produced a horizontal
 * scrollbar at the bottom of every list card on desktop even when
 * the table fitted the content area (the always-on `overflow-x:
 * auto` overrides `.rio-list { overflow: hidden }` from tables.css
 * because this file loads last). Scoped to the mobile breakpoint
 * where it is actually load-bearing — at ≥ 768 px the list card
 * keeps its `overflow: hidden` and the table fits the content
 * area without a vestigial scroll track. */
@media (max-width: 767.98px) {
  .rio-list, .rio-card { overflow-x: auto; }
}

/* Mobile: sidebar collapsed off-canvas behind a hamburger. The
 * `flex: 0 0 var(--rio-sidebar-w)` from layout/sidebar.css is
 * overridden here so the fixed-position drawer doesn't reserve
 * track in the flex row. */
.rio-sidebar {
  display: none;
  flex: 0 0 auto;
  position: fixed;
  /* Logical inset so the drawer slides in from the start edge —
   * left in LTR, right in RTL — instead of always anchoring to
   * physical left. The block edges stay direction-neutral. */
  top: var(--rio-topbar-h);
  inset-inline-start: 0;
  bottom: 0;
  /* Below the topbar layer. The off-canvas drawer already starts
   * at `top: --rio-topbar-h`, so the topbar stays uncovered even
   * with the drawer open. */
  z-index: var(--rio-z-sidebar);
  width: 80vw;
  max-width: 320px;
  border-inline-end: 1px solid var(--rio-border);
  box-shadow: var(--rio-shadow-lg);
  overflow-y: auto;
}
.rio-shell[data-sidebar="open"] .rio-sidebar { display: block; }
.rio-sidebar-toggle { display: inline-flex; }

/* Tablet: sidebar pinned in the flex row, sticky to the viewport just
 * below the topbar. `align-self: flex-start` opts out of the row's
 * stretch so the element keeps a viewport-height box; `overflow-y:
 * auto` lets long sidebar content scroll independently when the
 * navigation outgrows the screen. */
@media (min-width: 768px) {
  .rio-sidebar {
    display: block;
    flex: 0 0 var(--rio-sidebar-w);
    align-self: flex-start;
    position: sticky;
    top: var(--rio-topbar-h);
    height: calc(100vh - var(--rio-topbar-h));
    overflow-y: auto;
    width: auto;
    max-width: none;
    box-shadow: none;
    /* `position: sticky` opens its own stacking context, so the
     * sidebar needs an explicit layer below the topbar — otherwise
     * its later source order lets it paint over the topbar on
     * scroll. This is the desktop counterpart to the off-canvas
     * `z-index` set in the mobile block above. */
    z-index: var(--rio-z-sidebar);
  }
  .rio-sidebar-toggle { display: none; }
  .rio-checkbox-list { grid-template-columns: 1fr 1fr; }
}

/* Desktop: wider sidebar, more padding. Main content caps at ~1280px
 * so a 4K monitor doesn't stretch a table row across the user's whole
 * field of view — the eye loses the cell on the way back. */
@media (min-width: 1280px) {
  :root { --rio-sidebar-w: 260px; }
  .rio-main {
    padding: var(--rio-s6) var(--rio-s7);
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
  }
  .rio-checkbox-list { grid-template-columns: 1fr 1fr 1fr; }
}