From c004d65fc626a5bfbc69c486b417f5f734f0a7e0 Mon Sep 17 00:00:00 2001 From: James Kerr Date: Mon, 29 Jan 2024 11:03:17 -0800 Subject: [PATCH] Long Pool Names --- apps/zui/src/components/forms.module.css | 212 +++++++++--------- apps/zui/src/css/_global.scss | 10 + apps/zui/src/css/_utilities.scss | 4 + apps/zui/src/views/pool-page/details.tsx | 3 +- apps/zui/src/views/pool-page/index.module.css | 27 --- apps/zui/src/views/pool-page/index.tsx | 23 +- 6 files changed, 126 insertions(+), 153 deletions(-) delete mode 100644 apps/zui/src/views/pool-page/index.module.css diff --git a/apps/zui/src/components/forms.module.css b/apps/zui/src/components/forms.module.css index 03edf44a8a..9e4e5b344c 100644 --- a/apps/zui/src/components/forms.module.css +++ b/apps/zui/src/components/forms.module.css @@ -1,188 +1,190 @@ .form label { - display: block; - font-weight: bold; - padding-left: var(--form-border-radius); + display: block; + font-weight: bold; + padding-left: var(--form-border-radius); } .form input, .form textarea, .form select { - display: block; - width: 100%; - height: var(--form-height); - border-radius: var(--form-border-radius); - background: var(--form-bg-color); - border: var(--form-border); - line-height: var(--form-line-height); - padding: var(--form-padding); + display: block; + width: 100%; + max-width: 100%; + overflow: hidden; + height: var(--form-height); + border-radius: var(--form-border-radius); + background: var(--form-bg-color); + border: var(--form-border); + line-height: var(--form-line-height); + padding: var(--form-padding); } .form input:focus-visible { - outline: none; - border-color: var(--primary-color); + outline: none; + border-color: var(--primary-color); } .form input:disabled { - background: var(--border-color); - background: transparent; - border-color: transparent; - color: currentColor; + background: var(--border-color); + background: transparent; + border-color: transparent; + color: currentColor; } .form fieldset { - border: none; - margin-left: 6px; - border-left: 1px solid var(--border-color); - padding: 18px; - display: grid; - gap: var(--form-field-gap); + border: none; + margin-left: 6px; + border-left: 1px solid var(--border-color); + padding: 18px; + display: grid; + gap: var(--form-field-gap); } .form .fields { - display: flex; - flex-direction: column; - gap: var(--form-field-gap); + display: flex; + flex-direction: column; + gap: var(--form-field-gap); } .form .horizontalFields { - flex-direction: column; - gap: var(--form-field-gap); - display: flex; + flex-direction: column; + gap: var(--form-field-gap); + display: flex; } -.form .horizontalFields>* { - display: flex; - justify-content: space-between; - width: 100%; +.form .horizontalFields > * { + display: flex; + justify-content: space-between; + width: 100%; } -.form .horizontalFields>*>*:not(label) { - max-width: 50%; +.form .horizontalFields > * > *:not(label) { + max-width: 50%; } .form select { - appearance: none; - background-image: url(/select-input-arrow.svg); - background-repeat: no-repeat; - background-size: 1.2em 1.2em; - background-position: calc(100% - 10px) center; + appearance: none; + background-image: url(/select-input-arrow.svg); + background-repeat: no-repeat; + background-size: 1.2em 1.2em; + background-position: calc(100% - 10px) center; } .form .cancel { - text-decoration: underline; - cursor: pointer; + text-decoration: underline; + cursor: pointer; } .form .submit { - height: var(--form-height); - border-radius: var(--form-border-radius); - background: var(--form-bg-color); - line-height: var(--form-line-height); - padding: var(--form-padding); - background: var(--primary-color); - border: 1px solid var(--primary-color-dark); - color: white; - font-weight: 500; - min-width: 80px; - user-select: none; + height: var(--form-height); + border-radius: var(--form-border-radius); + background: var(--form-bg-color); + line-height: var(--form-line-height); + padding: var(--form-padding); + background: var(--primary-color); + border: 1px solid var(--primary-color-dark); + color: white; + font-weight: 500; + min-width: 80px; + user-select: none; } .form .submit:hover:not(:disabled) { - background: var(--primary-color-dark); + background: var(--primary-color-dark); } .form .submit:active:not(:disabled) { - box-shadow: none; - transform: translateY(1px); + box-shadow: none; + transform: translateY(1px); } .form .button:active:not(:disabled) { - background: var(--primary-color-darker); + background: var(--primary-color-darker); } .form .button { - height: var(--form-height); - border-radius: var(--form-border-radius); - background: var(--form-bg-color); - line-height: var(--form-line-height); - padding: var(--form-padding); - border: 1px solid var(--border-color); - box-shadow: 0 3px 4px -4px var(--bg-color-less); - font-weight: 500; - min-width: 80px; - user-select: none; + height: var(--form-height); + border-radius: var(--form-border-radius); + background: var(--form-bg-color); + line-height: var(--form-line-height); + padding: var(--form-padding); + border: 1px solid var(--border-color); + box-shadow: 0 3px 4px -4px var(--bg-color-less); + font-weight: 500; + min-width: 80px; + user-select: none; } .form .button:hover:not(:disabled) { - background: var(--form-bg-color-dark); + background: var(--form-bg-color-dark); } .form .button:active:not(:disabled) { - background: var(--form-bg-color-darker); + background: var(--form-bg-color-darker); } .form .button:active:not(:disabled) { - box-shadow: none; - transform: translateY(1px); + box-shadow: none; + transform: translateY(1px); } .form .button:disabled, .form .submit:disabled { - opacity: 0.4; - cursor: no-drop + opacity: 0.4; + cursor: no-drop; } -.form input[type=checkbox] { - appearance: none; - margin: 0; - width: 1.15em; - height: 1.15em; - border-radius: 0.15em; +.form input[type="checkbox"] { + appearance: none; + margin: 0; + width: 1.15em; + height: 1.15em; + border-radius: 0.15em; } .form .actionLabel { - display: flex; - align-items: center; - justify-content: space-between; - padding-right: var(--form-border-radius); + display: flex; + align-items: center; + justify-content: space-between; + padding-right: var(--form-border-radius); } .form .actionLabel a { - text-decoration: underline; - cursor: pointer; - color: var(--fg-color-less); + text-decoration: underline; + cursor: pointer; + color: var(--fg-color-less); } .form .radioInput { - display: grid; - grid-template-columns: 1.1em auto; - align-items: center; - padding-top: 0; - padding: var(--form-padding); - height: 1.6em; + display: grid; + grid-template-columns: 1.1em auto; + align-items: center; + padding-top: 0; + padding: var(--form-padding); + height: 1.6em; } .form .radioInput label { - font-weight: 400; + font-weight: 400; } .form .submission { - display: flex; - justify-content: space-between; - margin-top: calc(var(--form-field-gap) * 3) + display: flex; + justify-content: space-between; + margin-top: calc(var(--form-field-gap) * 3); } .form .error { - background: #fde2d8; - color: #a81f07; - border-radius: 6px; - padding: 20px; - display: flex; - flex-direction: column; - gap: 10px; + background: #fde2d8; + color: #a81f07; + border-radius: 6px; + padding: 20px; + display: flex; + flex-direction: column; + gap: 10px; } .form input[readonly] { - border: none; - padding: 0 var(--form-border-radius); + border: none; + padding: 0 var(--form-border-radius); } diff --git a/apps/zui/src/css/_global.scss b/apps/zui/src/css/_global.scss index 1d17a9345e..e87eeefb53 100644 --- a/apps/zui/src/css/_global.scss +++ b/apps/zui/src/css/_global.scss @@ -2,6 +2,7 @@ *::before, *::after { box-sizing: border-box; + overflow-wrap: break-word; } * { @@ -80,6 +81,7 @@ button { height: 0.75rem; } + *::-webkit-scrollbar-track { background-color: var(--emphasis-bg-less); } @@ -93,3 +95,11 @@ button { *::-webkit-scrollbar-corner { background-color: var(--emphasis-bg-less); } + +dt { + font-weight: bold; +} + +dd { + font-family: var(--mono-font); +} diff --git a/apps/zui/src/css/_utilities.scss b/apps/zui/src/css/_utilities.scss index d1a92db92c..dfd80adc07 100644 --- a/apps/zui/src/css/_utilities.scss +++ b/apps/zui/src/css/_utilities.scss @@ -69,3 +69,7 @@ .border\:bottom { border-bottom: 1px solid var(--border-color); } + +.min-height\:full { + min-height: 100%; +} diff --git a/apps/zui/src/views/pool-page/details.tsx b/apps/zui/src/views/pool-page/details.tsx index 98beca48c1..14ffab9715 100644 --- a/apps/zui/src/views/pool-page/details.tsx +++ b/apps/zui/src/views/pool-page/details.tsx @@ -1,13 +1,14 @@ import React from "react" import {Pool} from "src/app/core/pools/pool" import styles from "./details.module.css" +import classNames from "classnames" export function Details({pool}: {pool: Pool}) { const keys = pool.keys.map((k) => (k ? k.join(".") : "null")) return (

Pool Details

-
+
ID
{pool.id}
diff --git a/apps/zui/src/views/pool-page/index.module.css b/apps/zui/src/views/pool-page/index.module.css deleted file mode 100644 index efcc25b982..0000000000 --- a/apps/zui/src/views/pool-page/index.module.css +++ /dev/null @@ -1,27 +0,0 @@ -.page { - --page-padding: 32px; - --page-max-width: 990px; - width: 100%; - height: 100%; - overflow-y: auto; -} - -.wrap { - margin-left: auto; - margin-right: auto; - max-width: var(--page-max-width); -} - -.header { - position: sticky; - top: 0; - border-bottom: 1px solid var(--border-color); - background-color: var(--bg-color); -} - -.headerContent { - display: flex; - justify-content: space-between; - align-items: center; - padding: var(--page-padding); -} diff --git a/apps/zui/src/views/pool-page/index.tsx b/apps/zui/src/views/pool-page/index.tsx index cf62b4b853..6eca43e8ad 100644 --- a/apps/zui/src/views/pool-page/index.tsx +++ b/apps/zui/src/views/pool-page/index.tsx @@ -12,8 +12,6 @@ import {NotFound} from "./404" import {ButtonMenu} from "src/components/button-menu" import {RecentLoads} from "./recent-loads" import {Details} from "./details" -import styles from "./index.module.css" -import classNames from "classnames" const Toolbar = styled.div` display: flex; @@ -30,21 +28,6 @@ const Subtitle = styled.p` margin: 0; ` -const Body = styled.section` - height: 100%; - h4 { - margin-bottom: 6px; - opacity: 0.6; - } - dt { - font-weight: bold; - } - dd { - margin-bottom: 6px; - font-family: var(--mono-font); - } -` - export function InitPool({children}) { const dispatch = useDispatch() const poolId = usePoolId() @@ -68,7 +51,7 @@ export const Show = () => { const menu = poolToolbarMenu(pool) const isEmpty = pool.empty() return ( -
+
@@ -82,10 +65,10 @@ export const Show = () => {
- +
- +
) }