From 4eff33933e17d227c3af7bf7472fdfae28ce5a0a Mon Sep 17 00:00:00 2001 From: Robin Scholtes Date: Tue, 18 Apr 2023 20:23:44 +1200 Subject: [PATCH] [#181] add todo file, add split CSS files --- src/web/stylesheets/components/_list.css | 13 + src/web/stylesheets/components/_operation.css | 39 +- src/web/stylesheets/components/_recipe.css | 9 + .../components/io/_file-details.css | 75 ++++ .../components/io/_highlighting.css | 21 + src/web/stylesheets/components/io/_icons.css | 35 ++ .../components/io/_search-results.css | 32 ++ .../stylesheets/components/io/_status-bar.css | 114 +++++ src/web/stylesheets/components/io/_tabs.css | 112 +++++ src/web/stylesheets/index.css | 7 + src/web/stylesheets/layout/_io.css | 409 +----------------- src/web/stylesheets/layout/_recipe.css | 8 +- src/web/stylesheets/layout/_structure.css | 28 +- src/web/todo.txt | 28 ++ 14 files changed, 473 insertions(+), 457 deletions(-) diff --git a/src/web/stylesheets/components/_list.css b/src/web/stylesheets/components/_list.css index 45f5a4d1..d9cd3bd5 100755 --- a/src/web/stylesheets/components/_list.css +++ b/src/web/stylesheets/components/_list.css @@ -41,3 +41,16 @@ border-radius: 0 !important; border: none; } + +#search-results, +#categories { + position: absolute; + top: 40px; /* the height of the input[type="search"] with pos relative */ + left: 0; + right: 0; + height: auto; + max-height: 60vh; + overflow: scroll; + border-bottom: 1px solid var(--primary-border-colour); + z-index: 20; /* to dropdown on top of all the other elements */ +} diff --git a/src/web/stylesheets/components/_operation.css b/src/web/stylesheets/components/_operation.css index 25722bfe..3c772691 100755 --- a/src/web/stylesheets/components/_operation.css +++ b/src/web/stylesheets/components/_operation.css @@ -321,21 +321,9 @@ input.toggle-string { background-color: var(--disabled-border-colour) !important; } -/* ================ experimentation ================ */ - -#search-results, -#categories { - position: absolute; - top: 40px; /* the height of the search input */ - left: 0; - right: 0; - height: auto; - max-height: 60vh; - overflow: scroll; - border-bottom: 1px solid var(--primary-border-colour); - - z-index: 20; - display: inline-block; +/* Mobile UI for the dropdown operations search */ +.dropdown-operations { + position: relative; } #reset-operations.hidden, @@ -344,24 +332,11 @@ input.toggle-string { z-index: -10; display: none; } +/* end mobile UI for the dropdown operations search */ + + + -.foo, -#recipe { - position: relative; -} -#rec-list { - position: absolute; - top: 48px; /* the height of recipe title */ - left: 0; - right: 0; - height: 100%; -} -#controls { - position: absolute; - bottom: 0; - left: 0; - right: 0; -} diff --git a/src/web/stylesheets/components/_recipe.css b/src/web/stylesheets/components/_recipe.css index e69de29b..a90b92a0 100644 --- a/src/web/stylesheets/components/_recipe.css +++ b/src/web/stylesheets/components/_recipe.css @@ -0,0 +1,9 @@ +#recipe { + position: relative; +} + +#rec-list .operation { + color: var(--rec-list-operation-font-colour); + background-color: var(--rec-list-operation-bg-colour); + border-color: var(--rec-list-operation-border-colour); +} diff --git a/src/web/stylesheets/components/io/_file-details.css b/src/web/stylesheets/components/io/_file-details.css index e69de29b..0f18546c 100644 --- a/src/web/stylesheets/components/io/_file-details.css +++ b/src/web/stylesheets/components/io/_file-details.css @@ -0,0 +1,75 @@ +/* File details panel */ + +.cm-file-details { + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + overflow-y: auto; + padding-bottom: 21px; + height: 100%; +} + +.file-details-toggle-shown, +.file-details-toggle-hidden { + width: 8px; + height: 40px; + border: 1px solid var(--secondary-border-colour); + position: absolute; + top: calc(50% - 20px); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + background-color: var(--secondary-border-colour); + color: var(--subtext-font-colour); + z-index: 1; +} + +.file-details-toggle-shown { + left: 0; + border-left: none; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; +} + +.file-details-toggle-hidden { + left: -8px; + border-right: none; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; +} + +.file-details-toggle-shown:hover, +.file-details-toggle-hidden:hover { + background-color: var(--primary-border-colour); + border-color: var(--primary-border-colour); + color: var(--primary-font-colour); +} + +.file-details-heading { + font-weight: bold; + margin: 10px 0 10px 0; +} + +.file-details-data { + text-align: left; + margin: 10px 2px; +} + +.file-details-data td { + padding: 0 3px; + max-width: 130px; + min-width: 60px; + overflow: hidden; + vertical-align: top; + word-break: break-all; +} + +.file-details-error { + color: #f00; +} + +.file-details-thumbnail { + max-width: 180px; +} diff --git a/src/web/stylesheets/components/io/_highlighting.css b/src/web/stylesheets/components/io/_highlighting.css index e69de29b..fa296dbf 100644 --- a/src/web/stylesheets/components/io/_highlighting.css +++ b/src/web/stylesheets/components/io/_highlighting.css @@ -0,0 +1,21 @@ +/* Highlighting */ +.ͼ2.cm-focused .cm-selectionBackground { + background-color: var(--hl5); +} + +.ͼ2 .cm-selectionBackground { + background-color: var(--hl1); +} + +.ͼ1 .cm-selectionMatch { + background-color: var(--hl2); +} + +.ͼ1.cm-focused .cm-cursor.cm-cursor-primary { + border-color: var(--primary-font-colour); +} + +.ͼ1 .cm-cursor.cm-cursor-primary { + display: block; + border-color: var(--subtext-font-colour); +} diff --git a/src/web/stylesheets/components/io/_icons.css b/src/web/stylesheets/components/io/_icons.css index e69de29b..9b009495 100644 --- a/src/web/stylesheets/components/io/_icons.css +++ b/src/web/stylesheets/components/io/_icons.css @@ -0,0 +1,35 @@ +#stale-indicator { + opacity: 1; + visibility: visible; + transition: margin 0s, opacity 0.3s; + margin-left: 5px; + cursor: help; +} + +#stale-indicator i { + vertical-align: middle; + margin-bottom: 5px; +} + +#magic { + opacity: 1; + visibility: visible; + transition: margin 0s 0.3s, opacity 0.3s 0.3s, visibility 0.3s 0.3s; + margin-left: 5px; + margin-bottom: 5px; +} + +#magic.hidden, +#stale-indicator.hidden { + visibility: hidden; + transition: opacity 0.3s, margin 0.3s 0.3s, visibility 0.3s; + opacity: 0; +} + +#magic.hidden { + margin-left: -32px; +} + +#magic svg path { + fill: var(--primary-font-colour); +} diff --git a/src/web/stylesheets/components/io/_search-results.css b/src/web/stylesheets/components/io/_search-results.css index e69de29b..fe54a257 100644 --- a/src/web/stylesheets/components/io/_search-results.css +++ b/src/web/stylesheets/components/io/_search-results.css @@ -0,0 +1,32 @@ +#input-search-results, +#output-search-results { + list-style: none; + width: 75%; + min-width: 200px; + margin-left: auto; + margin-right: auto; +} + +#input-search-results li, +#output-search-results li { + padding: 10px 5px; + text-align: center; + width: 100%; + color: var(--op-list-operation-font-colour); + background-color: var(--op-list-operation-bg-colour); + border-bottom: 2px solid var(--op-list-operation-border-colour); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +#input-search-results li:first-of-type, +#output-search-results li:first-of-type { + border-top: 2px solid var(--op-list-operation-border-colour); +} + +#input-search-results li:hover, +#output-search-results li:hover { + cursor: pointer; + filter: brightness(98%); +} diff --git a/src/web/stylesheets/components/io/_status-bar.css b/src/web/stylesheets/components/io/_status-bar.css index e69de29b..ea0bad12 100644 --- a/src/web/stylesheets/components/io/_status-bar.css +++ b/src/web/stylesheets/components/io/_status-bar.css @@ -0,0 +1,114 @@ +/* Status bar */ + +.cm-panel input::placeholder { + font-size: 12px !important; +} + +.ͼ2 .cm-panels, +.ͼ2 .cm-side-panels { + background-color: var(--secondary-background-colour); + /*border-color: var(--primary-border-colour);*/ + color: var(--primary-font-colour); + border-bottom: 1px solid var(--primary-border-colour); +} + +.cm-status-bar { + font-family: var(--fixed-width-font-family); + font-weight: normal; + font-size: 8pt; + /*0 5px for desktop*/ + margin: 5px 15px; + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; +} + +.cm-status-bar i { + font-size: 12pt; + vertical-align: middle; + margin-left: 8px; +} +.cm-status-bar>div>span:first-child i { + margin-left: 0; +} + +.cm-status-bar .disabled { + background-color: unset !important; + cursor: not-allowed; +} + +/* Dropup Button */ +.cm-status-bar-select-btn { + border: none; + cursor: pointer; +} + +/* The container
- needed to position the dropup content */ +.cm-status-bar-select { + position: relative; + display: inline-block; +} + +/* Dropup content (Hidden by Default) */ +.cm-status-bar-select-content { + display: none; + position: absolute; + bottom: 20px; + right: 0; + background-color: #f1f1f1; + min-width: 200px; + box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2); + z-index: 1; +} + +/* Links inside the dropup */ +.cm-status-bar-select-content a { + color: black; + padding: 2px 5px; + text-decoration: none; + display: block; +} + +/* Change color of dropup links on hover */ +.cm-status-bar-select-content a:hover { + background-color: #ddd +} + +/* Change the background color of the dropup button when the dropup content is shown */ +.cm-status-bar-select:hover .cm-status-bar-select-btn { + background-color: #f1f1f1; +} + +/* The search field */ +.cm-status-bar-filter-input { + box-sizing: border-box; + font-size: 12px; + padding-left: 10px !important; + border: none; +} + +.cm-status-bar-filter-search { + border-top: 1px solid #ddd; +} + +/* Show the dropup menu */ +.cm-status-bar-select .show { + display: block; +} + +.cm-status-bar-select-scroll { + overflow-y: auto; + max-height: 300px; +} + +.chr-enc-value { + max-width: 150px; + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + vertical-align: middle; +} + + diff --git a/src/web/stylesheets/components/io/_tabs.css b/src/web/stylesheets/components/io/_tabs.css index e69de29b..fcb3abc6 100644 --- a/src/web/stylesheets/components/io/_tabs.css +++ b/src/web/stylesheets/components/io/_tabs.css @@ -0,0 +1,112 @@ +#input-tabs-wrapper #input-tabs, +#output-tabs-wrapper #output-tabs { + list-style: none; + background-color: var(--title-background-colour); + padding: 0; + margin: 0; + overflow-x: auto; + overflow-y: hidden; + display: flex; + flex-direction: row; + border-bottom: 1px solid var(--primary-border-colour); + border-left: 1px solid var(--primary-border-colour); + height: var(--tab-height); + clear: none; +} + +#input-tabs li, +#output-tabs li { + display: flex; + flex-direction: row; + width: 100%; + min-width: 120px; + float: left; + padding: 0px; + text-align: center; + border-right: 1px solid var(--primary-border-colour); + height: var(--tab-height); + vertical-align: middle; +} + +#input-tabs li:hover, +#output-tabs li:hover { + cursor: pointer; + background-color: var(--primary-background-colour); +} + +.active-input-tab, +.active-output-tab { + font-weight: bold; + background-color: var(--primary-background-colour); +} + +.input-tab-content+.btn-close-tab { + display: block; + margin-top: auto; + margin-bottom: auto; + margin-right: 2px; +} + +.input-tab-content+.btn-close-tab i { + font-size: 0.8em; +} + +.input-tab-buttons, +.output-tab-buttons { + width: 25px; + text-align: center; + margin: 0; + height: var(--tab-height); + line-height: var(--tab-height); + font-weight: bold; + background-color: var(--title-background-colour); + border-bottom: 1px solid var(--primary-border-colour); +} + +.input-tab-buttons:hover, +.output-tab-buttons:hover { + cursor: pointer; + background-color: var(--primary-background-colour); +} + +#btn-next-input-tab, +#btn-input-tab-dropdown, +#btn-next-output-tab, +#btn-output-tab-dropdown { + float: right; +} + +#btn-previous-input-tab, +#btn-previous-output-tab { + float: left; +} + +#btn-close-all-tabs { + color: var(--breakpoint-font-colour) !important; +} + +.input-tab-content, +.output-tab-content { + width: 100%; + max-width: 100%; + padding: 10px 5px; + height: var(--tab-height); + vertical-align: middle; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.btn-close-tab { + height: var(--tab-height); + vertical-align: middle; + width: fit-content; +} + +.tabs-left > li:first-child { + box-shadow: 15px 0 15px -15px var(--primary-border-colour) inset; +} + +.tabs-right > li:last-child { + box-shadow: -15px 0 15px -15px var(--primary-border-colour) inset; +} diff --git a/src/web/stylesheets/index.css b/src/web/stylesheets/index.css index 960c7006..9049f407 100755 --- a/src/web/stylesheets/index.css +++ b/src/web/stylesheets/index.css @@ -25,6 +25,13 @@ @import "./components/_list.css"; @import "./components/_operation.css"; @import "./components/_pane.css"; +@import "./components/_recipe.css"; +@import "./components/io/_search-results.css"; +@import "./components/io/_tabs.css"; +@import "./components/io/_icons.css"; +@import "./components/io/_highlighting.css"; +@import "./components/io/_status-bar.css"; +@import "./components/io/_file-details.css"; /* Layout */ @import "./layout/_banner.css"; diff --git a/src/web/stylesheets/layout/_io.css b/src/web/stylesheets/layout/_io.css index 0805b2a4..6044e570 100755 --- a/src/web/stylesheets/layout/_io.css +++ b/src/web/stylesheets/layout/_io.css @@ -17,6 +17,17 @@ user-select: auto; } +/* To vertically align the title nicely in the center */ +label[for="input-text"], +label[for="output-text"] { + line-height: revert; +} + +#input .cm-scroller, +#output .cm-scroller { + overflow-y: scroll; +} + #input .cm-scroller:hover, #output .cm-scroller:hover { cursor: pointer; @@ -29,6 +40,7 @@ height: 100%; user-select: auto; } + #output-text.html-output .cm-line .cm-widgetBuffer, #output-text.html-output .cm-line>br { display: none; @@ -44,120 +56,6 @@ color: var(--fixed-width-font-colour); } -#input-tabs-wrapper #input-tabs, -#output-tabs-wrapper #output-tabs { - list-style: none; - background-color: var(--title-background-colour); - padding: 0; - margin: 0; - overflow-x: auto; - overflow-y: hidden; - display: flex; - flex-direction: row; - border-bottom: 1px solid var(--primary-border-colour); - border-left: 1px solid var(--primary-border-colour); - height: var(--tab-height); - clear: none; -} - -#input-tabs li, -#output-tabs li { - display: flex; - flex-direction: row; - width: 100%; - min-width: 120px; - float: left; - padding: 0px; - text-align: center; - border-right: 1px solid var(--primary-border-colour); - height: var(--tab-height); - vertical-align: middle; -} - -#input-tabs li:hover, -#output-tabs li:hover { - cursor: pointer; - background-color: var(--primary-background-colour); -} - -.active-input-tab, -.active-output-tab { - font-weight: bold; - background-color: var(--primary-background-colour); -} - -.input-tab-content+.btn-close-tab { - display: block; - margin-top: auto; - margin-bottom: auto; - margin-right: 2px; -} - -.input-tab-content+.btn-close-tab i { - font-size: 0.8em; -} - -.input-tab-buttons, -.output-tab-buttons { - width: 25px; - text-align: center; - margin: 0; - height: var(--tab-height); - line-height: var(--tab-height); - font-weight: bold; - background-color: var(--title-background-colour); - border-bottom: 1px solid var(--primary-border-colour); -} - -.input-tab-buttons:hover, -.output-tab-buttons:hover { - cursor: pointer; - background-color: var(--primary-background-colour); -} - - -#btn-next-input-tab, -#btn-input-tab-dropdown, -#btn-next-output-tab, -#btn-output-tab-dropdown { - float: right; -} - -#btn-previous-input-tab, -#btn-previous-output-tab { - float: left; -} - -#btn-close-all-tabs { - color: var(--breakpoint-font-colour) !important; -} - -.input-tab-content, -.output-tab-content { - width: 100%; - max-width: 100%; - padding: 10px 5px; - height: var(--tab-height); - vertical-align: middle; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -.btn-close-tab { - height: var(--tab-height); - vertical-align: middle; - width: fit-content; -} - -.tabs-left > li:first-child { - box-shadow: 15px 0px 15px -15px var(--primary-border-colour) inset; -} - -.tabs-right > li:last-child { - box-shadow: -15px 0px 15px -15px var(--primary-border-colour) inset; -} - #input-wrapper, #output-wrapper { height: calc(100% - var(--title-height)); @@ -223,42 +121,6 @@ border: 5px dashed var(--drop-file-border-colour) !important; } -#stale-indicator { - opacity: 1; - visibility: visible; - transition: margin 0s, opacity 0.3s; - margin-left: 5px; - cursor: help; -} - -#stale-indicator i { - vertical-align: middle; - margin-bottom: 5px; -} - -#magic { - opacity: 1; - visibility: visible; - transition: margin 0s 0.3s, opacity 0.3s 0.3s, visibility 0.3s 0.3s; - margin-left: 5px; - margin-bottom: 5px; -} - -#magic.hidden, -#stale-indicator.hidden { - visibility: hidden; - transition: opacity 0.3s, margin 0.3s 0.3s, visibility 0.3s; - opacity: 0; -} - -#magic.hidden { - margin-left: -32px; -} - -#magic svg path { - fill: var(--primary-font-colour); -} - .pulse { box-shadow: 0 0 0 0 rgba(90, 153, 212, .3); animation: pulse 1.5s 1; @@ -343,250 +205,3 @@ padding: 10px; text-align: center; } - - -#input-search-results, -#output-search-results { - list-style: none; - width: 75%; - min-width: 200px; - margin-left: auto; - margin-right: auto; -} - -#input-search-results li, -#output-search-results li { - padding: 10px 5px; - text-align: center; - width: 100%; - color: var(--op-list-operation-font-colour); - background-color: var(--op-list-operation-bg-colour); - border-bottom: 2px solid var(--op-list-operation-border-colour); - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -#input-search-results li:first-of-type, -#output-search-results li:first-of-type { - border-top: 2px solid var(--op-list-operation-border-colour); -} - -#input-search-results li:hover, -#output-search-results li:hover { - cursor: pointer; - filter: brightness(98%); -} - -/* Highlighting */ -.ͼ2.cm-focused .cm-selectionBackground { - background-color: var(--hl5); -} - -.ͼ2 .cm-selectionBackground { - background-color: var(--hl1); -} - -.ͼ1 .cm-selectionMatch { - background-color: var(--hl2); -} - -.ͼ1.cm-focused .cm-cursor.cm-cursor-primary { - border-color: var(--primary-font-colour); -} - -.ͼ1 .cm-cursor.cm-cursor-primary { - display: block; - border-color: var(--subtext-font-colour); -} - - -/* Status bar */ - -.cm-panel input::placeholder { - font-size: 12px !important; -} - -.ͼ2 .cm-panels, -.ͼ2 .cm-side-panels { - background-color: var(--secondary-background-colour); - /*border-color: var(--primary-border-colour);*/ - color: var(--primary-font-colour); - border-bottom: 1px solid var(--primary-border-colour); -} - -.cm-status-bar { - font-family: var(--fixed-width-font-family); - font-weight: normal; - font-size: 8pt; - /*0 5px for desktop*/ - margin: 5px 15px; - display: flex; - flex-flow: row nowrap; - justify-content: space-between; - align-items: center; -} - -.cm-status-bar i { - font-size: 12pt; - vertical-align: middle; - margin-left: 8px; -} -.cm-status-bar>div>span:first-child i { - margin-left: 0; -} - -.cm-status-bar .disabled { - background-color: unset !important; - cursor: not-allowed; -} - -/* Dropup Button */ -.cm-status-bar-select-btn { - border: none; - cursor: pointer; -} - -/* The container
- needed to position the dropup content */ -.cm-status-bar-select { - position: relative; - display: inline-block; -} - -/* Dropup content (Hidden by Default) */ -.cm-status-bar-select-content { - display: none; - position: absolute; - bottom: 20px; - right: 0; - background-color: #f1f1f1; - min-width: 200px; - box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2); - z-index: 1; -} - -/* Links inside the dropup */ -.cm-status-bar-select-content a { - color: black; - padding: 2px 5px; - text-decoration: none; - display: block; -} - -/* Change color of dropup links on hover */ -.cm-status-bar-select-content a:hover { - background-color: #ddd -} - -/* Change the background color of the dropup button when the dropup content is shown */ -.cm-status-bar-select:hover .cm-status-bar-select-btn { - background-color: #f1f1f1; -} - -/* The search field */ -.cm-status-bar-filter-input { - box-sizing: border-box; - font-size: 12px; - padding-left: 10px !important; - border: none; -} - -.cm-status-bar-filter-search { - border-top: 1px solid #ddd; -} - -/* Show the dropup menu */ -.cm-status-bar-select .show { - display: block; -} - -.cm-status-bar-select-scroll { - overflow-y: auto; - max-height: 300px; -} - -.chr-enc-value { - max-width: 150px; - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - vertical-align: middle; -} - - -/* File details panel */ - -.cm-file-details { - text-align: center; - display: flex; - flex-direction: column; - align-items: center; - overflow-y: auto; - padding-bottom: 21px; - height: 100%; -} - -.file-details-toggle-shown, -.file-details-toggle-hidden { - width: 8px; - height: 40px; - border: 1px solid var(--secondary-border-colour); - position: absolute; - top: calc(50% - 20px); - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - background-color: var(--secondary-border-colour); - color: var(--subtext-font-colour); - z-index: 1; -} - -.file-details-toggle-shown { - left: 0; - border-left: none; - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; -} - -.file-details-toggle-hidden { - left: -8px; - border-right: none; - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; -} - -.file-details-toggle-shown:hover, -.file-details-toggle-hidden:hover { - background-color: var(--primary-border-colour); - border-color: var(--primary-border-colour); - color: var(--primary-font-colour); -} - -.file-details-heading { - font-weight: bold; - margin: 10px 0 10px 0; -} - -.file-details-data { - text-align: left; - margin: 10px 2px; -} - -.file-details-data td { - padding: 0 3px; - max-width: 130px; - min-width: 60px; - overflow: hidden; - vertical-align: top; - word-break: break-all; -} - -.file-details-error { - color: #f00; -} - -.file-details-thumbnail { - max-width: 180px; -} diff --git a/src/web/stylesheets/layout/_recipe.css b/src/web/stylesheets/layout/_recipe.css index 339da074..8f251058 100755 --- a/src/web/stylesheets/layout/_recipe.css +++ b/src/web/stylesheets/layout/_recipe.css @@ -7,11 +7,5 @@ */ #rec-list { - overflow: auto; -} - -#rec-list .operation { - color: var(--rec-list-operation-font-colour); - background-color: var(--rec-list-operation-bg-colour); - border-color: var(--rec-list-operation-border-colour); + overflow-y: scroll; } diff --git a/src/web/stylesheets/layout/_structure.css b/src/web/stylesheets/layout/_structure.css index 75d79c89..8e86a098 100755 --- a/src/web/stylesheets/layout/_structure.css +++ b/src/web/stylesheets/layout/_structure.css @@ -18,34 +18,19 @@ body { left: 0; } -/*@TODO: test with keyboard popping up because that messes with the viewheight probably*/ -/*@TODO: make sure the panels are nicely divided / flex-grow to make up the full height of workspace-wrapper*/ - #workspace-wrapper { - /* The workspaces' available height minus the top banner and control element at the bottom */ height: calc( 100vh - calc( var(--banner-height) + var(--controls-height)) ); margin-top: var(--banner-height); } -#operations { - height: auto; -} - #recipe { - height: 15vh; + height: 20vh; } -#input, -#output { +#input, #output { height: 25vh; } -#input .cm-scroller, -#output .cm-scroller { - height: 100%; - overflow-y: scroll; -} - #operations .title, #recipe .title, #input .title, @@ -54,10 +39,11 @@ body { justify-content: space-between; } -/* To vertically align the title nicely in the center */ -label[for="input-text"], -label[for="output-text"] { - line-height: revert; +#controls { + position: absolute; + bottom: 0; + left: 0; + right: 0; } @media only screen and ( min-width: 768px ) { diff --git a/src/web/todo.txt b/src/web/todo.txt index e69de29b..6fea8eed 100644 --- a/src/web/todo.txt +++ b/src/web/todo.txt @@ -0,0 +1,28 @@ +temporary file to list todos to keep oversight + +desktop UI: +- restore desktop UI + +mobile UI: +- initial favourites icon in operations should be hidden until the dropdown is opened +- bootstrap native 'x' in input[type="search"] should clear input value and + then display categories rather than close the entire dropdown +- test with keyboard popping up because that messes with the viewheights on mobile probably +- make sure panels in workspace-wrapper grow and add up to 100% + +general ui: +- fix up key events so UI can be navigated comfortably with keys ( inc. visual focus feedback ) + +js: +- core/Recipe.mjs: +- core/lib/Magic.js: + // @TODO: return import to original? ( it breaks dev though ) +- waiters/OperationsWaiter.mjs: + // @TODO: isVisible is pretty generic so probably move it ( to manager? ) +- App.mjs: + // @TODO: in setup, add a window resize listener for responsive functions + +misc: +- write / complete UI tests +- delete this file when done :) +