diff --git a/assets/fonts/Inconsolata.ttf b/assets/fonts/Inconsolata.ttf new file mode 100644 index 0000000..34848ca Binary files /dev/null and b/assets/fonts/Inconsolata.ttf differ diff --git a/assets/fonts/Jost.ttf b/assets/fonts/Jost.ttf new file mode 100644 index 0000000..e758df3 Binary files /dev/null and b/assets/fonts/Jost.ttf differ diff --git a/assets/scss/default_theme/_variables.scss b/assets/scss/default_theme/_variables.scss new file mode 100644 index 0000000..874f271 --- /dev/null +++ b/assets/scss/default_theme/_variables.scss @@ -0,0 +1,33 @@ +@use "sass:color"; +@use "sass:math"; + +$-color-white: hsl(30 5% 90%); +$-color-dark: color.adjust($-color-white, $lightness: -60%); +$-color-light: hsl(190 80% 30%); +$-ff-serif: "Inconsolata", monospace; +$-ff-sans: "Jost", sans-serif; +$-fs-900: math.div(100rem, 16); + +@forward "base" with ( + $color-white: $-color-white, + $color-dark: $-color-dark, + $color-light: $-color-light, + $ff-serif: $-ff-serif, + $ff-sans: $-ff-sans, + $fs-900: $-fs-900 +); + +@font-face { + font-family: "Inconsolata"; + src: url("/fonts/Inconsolata.ttf"); + + font-display: swap; + font-variation-settings: "wdth" 85; +} + +@font-face { + font-family: "Jost"; + src: url("/fonts/Jost.ttf"); + + font-display: swap; +} diff --git a/assets/scss/default_theme/base.scss b/assets/scss/default_theme/base.scss new file mode 100644 index 0000000..4c9b0c4 --- /dev/null +++ b/assets/scss/default_theme/base.scss @@ -0,0 +1,214 @@ +// +// +// Do Not Change This File! +// +// +@use "sass:math"; +/* ----------------- */ +/* Custom Properties */ +/* ----------------- */ +/* + This values are to be overridden + after being injected into + the global scope. +*/ + + /* colors */ + +$color-dark: hsl(0 0% 0%) !default; /* Black */ +$color-light: hsl(0 0% 50%) !default; /* Gray */ +$color-white: hsl(0 0% 100%) !default;/* White */ + + /* font */ + + /* Sizes divided by 16 so values given in px */ +$fs-900: math.div(125rem, 16) !default; +$fs-800: math.div(75rem, 16) !default; +$fs-700: math.div(56rem, 16) !default; +$fs-600: math.div(32rem, 16) !default; +$fs-500: math.div(28rem, 16) !default; +$fs-400: math.div(24rem, 16) !default; +$fs-300: math.div(18rem, 16) !default; +$fs-200: math.div(16rem, 16) !default; + +$ff-serif: serif !default; +$ff-sans-cond: sans-serif !default; +$ff-sans: sans-serif !default; + +/* --------------- */ +/* Utility Classes */ +/* --------------- */ + +/* Layouts */ + +.container { + padding-inline: clamp(0.5rem, 4rem, 5rem); + margin-inline: auto; + max-width: 80rem; +} + +.flex { + display: flex; + gap: 2rem; +} + +.column { + justify-content: center; + align-items: center; + flex-direction: column; + align-content: center; +} + +.row { + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-content: baseline; + max-width: 100%; +} + +.two-columns { + display: grid; + /* Will shrink to one column, never exceed two! + * The `max` in `minmax` asks that the columns + * be no smaller */ + grid-template-columns: repeat(auto-fit, minmax(max(30rem, 40%), 1fr)); + column-gap: 1rem; + justify-content: space-evenly; +} + +.lock-bottom { + position: fixed; + bottom: 0%; +} + +/* Other */ + +.hr::after { /* Add fake hr after header */ + content: ''; + + position: absolute; + display: block; + clear: both; + width: 100%; + height: 0.15rem; + + background-color: black; +} + +/* Color Classes */ + +.bg-dark { background-color: $color-dark; } +.bg-light { background-color: $color-light; } +.bg-white { background-color: $color-white; } + +.text-dark { color: $color-dark; } +.text-light { color: $color-light; } +.text-white { color: $color-white; } + +/* Font Classes */ + +.fs-900 { font-size: $fs-900; } +.fs-800 { font-size: $fs-800; } +.fs-700 { font-size: $fs-700; } +.fs-600 { font-size: $fs-600; } +.fs-500 { font-size: $fs-500; } +.fs-400 { font-size: $fs-400; } +.fs-300 { font-size: $fs-300; } +.fs-200 { font-size: $fs-200; } + +.ff-serif { font-family: $ff-serif; } +.ff-sans-cond { font-family: $ff-sans-cond; } +.ff-sans { font-family: $ff-sans; } + +.uppercase { text-transform: uppercase; } +.lowercase { text-transform: lowercase; } + +/* Semantic Tags and Their Classes */ + +header { + margin-bottom: 3vh; +} + +section:not(:last-of-type) { + margin-bottom: 3vh; +} + +footer { + margin-top: 3vh; +} + +/* ----- */ +/* Reset */ +/* ----- */ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +body, h1, h2, h3, h4, h5, h6, p { + margin: 0; +} + +h1, h2, h3, h4, h5, h6, p { + font-weight: 400; +} + +h1, h2, h3 { + line-height: 1.1; +} + +body { + font-family: $ff-sans; + font-size: $fs-400; + color: $color-dark; + background-color: $color-white; + line-height: 1.5; + min-height: 100vh; +} + +main { + margin-left: 1vw; + margin-top: 1vh; + * { + z-index: 2; + } +} + +footer { + z-index: 2; +} + +img, picture { + max-width: 100%; + display: block; +} + +input, button, textarea, select { + font: inherit; +} + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behaviour: auto !important; + } +} + +/* -------------------- */ +/* Non-Reusable Classes */ +/* -------------------- */ +/* meant for these pages + * only, not to be used + * in practice */ + +.colors--block { + padding: 3rem 1rem 1rem; + border: 1px solid black; +} diff --git a/assets/scss/default_theme/components/_index.scss b/assets/scss/default_theme/components/_index.scss new file mode 100644 index 0000000..bea7850 --- /dev/null +++ b/assets/scss/default_theme/components/_index.scss @@ -0,0 +1,5 @@ +@forward "main_window"; +@forward "plate_container"; +@forward "plates"; +@forward "tree"; +@forward "transfer_menu"; diff --git a/assets/scss/default_theme/components/_main_window.scss b/assets/scss/default_theme/components/_main_window.scss new file mode 100644 index 0000000..b9b887c --- /dev/null +++ b/assets/scss/default_theme/components/_main_window.scss @@ -0,0 +1,20 @@ +div.main_container { + height: 95vh; + width: 98vw; + margin-top: 2.5vh; + margin-left: 1vw; + + display: grid; + grid-template-columns: [left] minmax(min-content, 1fr) [right] 2fr; + grid-template-rows: [upper] 2fr [lower] 1fr; + + column-gap: 1vw; + row-gap: 1vh; +} + +.dialog { + padding: 1em; +} +.dialog::backdrop { + background: rgba(0,125,255,0.3); +} diff --git a/assets/scss/default_theme/components/_plate_container.scss b/assets/scss/default_theme/components/_plate_container.scss new file mode 100644 index 0000000..0458708 --- /dev/null +++ b/assets/scss/default_theme/components/_plate_container.scss @@ -0,0 +1,18 @@ +@use "sass:color"; +@use "../variables" as *; + +div.plate_container { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + + border: 2px solid $color-dark; + grid-column: right / right; + grid-row: upper / 3; + + h2 { + margin-bottom: 1%; + text-align: center; + } +} diff --git a/assets/scss/default_theme/components/_plates.scss b/assets/scss/default_theme/components/_plates.scss new file mode 100644 index 0000000..e91cf79 --- /dev/null +++ b/assets/scss/default_theme/components/_plates.scss @@ -0,0 +1,52 @@ +div.source_plate, div.dest_plate { + padding: 3px 3px 3px 3px; +} + +div.source_plate { + border: 2px solid blue; +} +div.dest_plate { + border: 2px solid red; +} + +table, tr, td { + user-select: none; /* Prevents dragging issue */ + border-spacing: 0px; +} +td.plate_cell { + height: 2.3vmin; + background: none; +} + +div.plate_cell_inner { + aspect-ratio: 1 / 1; + height: 90%; + border-radius: 50%; + border: 2px solid black; +} +td.plate_cell:hover div.plate_cell_inner { + background: black !important; +} +td.plate_cell.in_transfer div.plate_cell_inner::after { + content: ""; + width: 100%; + height: 100%; + display: block; + border-radius: 50%; + background-image: repeating-linear-gradient( + 45deg, + rgba(0,0,0,0.8), + rgba(0,0,0,0.8) 2px, + transparent 2px, + transparent 4px + ); +} + +div.source_plate td.current_select div.plate_cell_inner { + background-image: linear-gradient(lightblue, lightblue); +} +div.dest_plate td.current_select div.plate_cell_inner { + background: lightcoral; +} + + diff --git a/assets/scss/default_theme/components/_transfer_menu.scss b/assets/scss/default_theme/components/_transfer_menu.scss new file mode 100644 index 0000000..b34c4f6 --- /dev/null +++ b/assets/scss/default_theme/components/_transfer_menu.scss @@ -0,0 +1,61 @@ +@use "sass:color"; +@use "../variables" as *; + +div.transfer_menu { + position: relative; + width: 100%; + height: 100%; + + grid-column: left / left; + grid-row: lower / lower; + + border: 2px solid $color-dark; + + form { + padding-top: 3%; + padding-bottom: 1%; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + + label { + display: inline; + * { display: inline; } + } + } + + padding-left: 0.5rem; + + input:invalid { + background-color: #faa; + } + + div#controls { + align-self: flex-end; + input { + padding: 2px 3px 2px 3px; + margin-left: 0; + } + } +} + +input { + text-align: center; + margin-left: 0.5em; + margin-right: 0.5em; + margin-top: 1%; + margin-bottom: 1%; + line-height: 1em; + padding: 0; + + &[type="text"] { + width: 4em; + } + &[name="name"] { + width: 6em; // Override above + } + &[type="number"] { + width: 2em; + } +} diff --git a/assets/scss/default_theme/components/_tree.scss b/assets/scss/default_theme/components/_tree.scss new file mode 100644 index 0000000..7ef8833 --- /dev/null +++ b/assets/scss/default_theme/components/_tree.scss @@ -0,0 +1,55 @@ +@use "sass:color"; +@use "../variables" as *; + +$selection-border-width: 2px; + +div.tree { + position: relative; + + grid-column: left / left; + grid-row: upper / upper; + width: 100%; + height: 100%; + border: 2px solid $color-dark; + + h3 { + margin-left: 0.5rem; + } + + div#controls { + position: absolute; + bottom: 2%; + right: 2%; + } +} + +div.tree ul { + width: 80%; + margin-left: 10%; + padding: 0; + + display: flex; + flex-direction: column; + align-items: stretch; + + overflow: scroll; +} + +div.tree li { + display: inline; + margin-left: 0; + margin-bottom: 0.4rem; + border: 2px solid transparent; + + user-select: none; + list-style: none; + line-height: 1em; + + &:hover { + background: color.change($color-light, $alpha: 0.08); + border: $selection-border-width solid color.change($color-light, $alpha:0.3); + } + &.selected { + background: color.change($color-light, $alpha: 0.2); + } +} diff --git a/assets/scss/default_theme/main.scss b/assets/scss/default_theme/main.scss new file mode 100644 index 0000000..6e05a5d --- /dev/null +++ b/assets/scss/default_theme/main.scss @@ -0,0 +1,10 @@ +// Global Variables +@use "variables" as *; +@use "components"; + +.fs-900 { font-size: $fs-900; font-weight: 400;} +.fs-800 { font-size: $fs-800; font-weight: 300;} +.fs-700 { font-size: $fs-700; font-weight: 250;} +.fs-600 { font-size: $fs-600; font-weight: 300;} +.fs-500 { font-size: $fs-500; font-weight: 200;} +.fs-400 { font-size: $fs-400; font-weight: 200;} diff --git a/assets/scss/index.scss b/assets/scss/index.scss new file mode 100644 index 0000000..cf86353 --- /dev/null +++ b/assets/scss/index.scss @@ -0,0 +1,2 @@ +@use "default_theme/main"; +@use "default_theme/variables" as *; diff --git a/index.html b/index.html index db6c305..7c93c7a 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,8 @@ - - - - Yew App + + + Plate Tool diff --git a/src/components/transfer_menu.rs b/src/components/transfer_menu.rs index 6d447b2..c8fc567 100644 --- a/src/components/transfer_menu.rs +++ b/src/components/transfer_menu.rs @@ -221,25 +221,25 @@ pub fn TransferMenu() -> Html {
- +
- +
- +
- {"Source Interleave "} +

{"Source Interleave "}

Html { value={ct_state.transfer.transfer_region.interleave_source.1.to_string()}/>
- {"Destination Interleave "} +

{"Destination Interleave "}

Html { onchange={on_dest_interleave_y_change} value={ct_state.transfer.transfer_region.interleave_dest.1.to_string()}/>
+
+
} diff --git a/src/components/tree.rs b/src/components/tree.rs index b7882c5..35e7c08 100644 --- a/src/components/tree.rs +++ b/src/components/tree.rs @@ -186,8 +186,8 @@ pub fn Tree(props: &TreeProps) -> Html { } - // Temporary -
+ +