8a8e862098
Split the verified renderer, layout engine, Grid support, native boundary, tests, examples, and paired documentation into the independent Ebox repository. Keep ETAF and application concerns outside this package.
66 lines
3.7 KiB
Plaintext
66 lines
3.7 KiB
Plaintext
(column
|
|
:margin-left 1 :margin-top 1 :padding (1 2 1 2) :bgcolor "linen"
|
|
(box :content "Ebox Responsive Layout\nDrag the preview window: sections stretch to the current viewport, cards reflow, and text wraps without changing the window layout."
|
|
:padding (1 (18)) :border "#334155" :text-align center
|
|
:color "#000" :bgcolor "ghost white")
|
|
(spacer :height 1)
|
|
|
|
(box :content "No explicit viewport width here\nThis page mostly omits :width. The Playground binds the current preview width while rendering, so auto width behaves like a responsive container."
|
|
:padding (0 (16)) :border "#0F766E"
|
|
:bgcolor "#F0FDFA" :color "#134E4A" :wrap-mode word)
|
|
(spacer :height 1)
|
|
|
|
(box :content "Adaptive toolbar\nButtons below keep stable sizes. The row packs as many as fit and then wraps."
|
|
:padding (0 (16)) :border "#EA580C" :border-bottom-p nil
|
|
:bgcolor "#FFF7ED" :color "#431407" :wrap-mode word)
|
|
(flex :flex-flow (row wrap) :column-gap (8) :row-gap 1
|
|
:padding (1 (8)) :border "#FDBA74" :bgcolor "#FFFBF5"
|
|
(box :content "Render" :width (96) :padding (0 (8))
|
|
:border "#EA580C" :bgcolor "#FED7AA" :color "#111827"
|
|
:text-align center)
|
|
(box :content "Save" :width (88) :padding (0 (8))
|
|
:border "#D97706" :bgcolor "#FEF3C7" :color "#111827"
|
|
:text-align center)
|
|
(box :content "Format" :width (96) :padding (0 (8))
|
|
:border "#16A34A" :bgcolor "#DCFCE7" :color "#14532D"
|
|
:text-align center)
|
|
(box :content "Sample" :width (104) :padding (0 (8))
|
|
:border "#0284C7" :bgcolor "#E0F2FE" :color "#0C4A6E"
|
|
:text-align center)
|
|
(box :content "Write" :width (88) :padding (0 (8))
|
|
:border "#9333EA" :bgcolor "#F3E8FF" :color "#3B0764"
|
|
:text-align center))
|
|
(spacer :height 1)
|
|
|
|
(box :content "Responsive cards\nEach card starts from a flex-basis, grows when space is available, and wraps to new rows when the preview becomes narrow."
|
|
:padding (0 (16)) :border "#2563EB" :border-bottom-p nil
|
|
:bgcolor "#EFF6FF" :color "#1E3A8A" :wrap-mode word)
|
|
(flex :flex-flow (row wrap) :column-gap (12) :row-gap 1
|
|
:padding (1 (8)) :border "#93C5FD" :bgcolor "#F8FBFF"
|
|
:justify-content center
|
|
(item :flex (1 1 (210))
|
|
(box :content "Overview\nThe row uses the current preview width automatically."
|
|
:min-width (180) :max-width (280)
|
|
:padding (0 (10)) ;; :border "#2563EB"
|
|
:bgcolor "#DBEAFE" :color "#111827" :wrap-mode word))
|
|
(item :flex (1 1 (210))
|
|
(box :content "Editor\nDrag slowly or quickly; resize rendering is debounced."
|
|
:min-width (180) :max-width (300)
|
|
:padding (0 (10)) ;; :border "#4F46E5"
|
|
:bgcolor "#E0E7FF" :color "#111827" :wrap-mode word))
|
|
(item :flex (1 1 (210))
|
|
(box :content "Preview\nThe preview buffer rerenders after the viewport settles."
|
|
:min-width (180) :max-width (320)
|
|
:padding (0 (10)) ;; :border "#7C3AED"
|
|
:bgcolor "#EDE9FE" :color "#111827" :wrap-mode word))
|
|
(item :flex (1 1 (210))
|
|
(box :content "Flow\nCards keep readable widths instead of overflowing."
|
|
:min-width (180) :max-width (280)
|
|
:padding (0 (10)) ;; :border "#0891B2"
|
|
:bgcolor "#CFFAFE" :color "#164E63" :wrap-mode word)))
|
|
(spacer :height 1)
|
|
|
|
(box :content "What to watch\nNarrow preview: cards stack and text wraps. Wide preview: cards share a row and expand up to max-width. The source/preview split is preserved."
|
|
:padding (0 (16)) :border "#475569"
|
|
:bgcolor "#F8FAFC" :color "#0F172A" :wrap-mode word))
|