From 4a8d658368d6262d840a8209d935f752fe3a52e6 Mon Sep 17 00:00:00 2001 From: Evgenia Karunus Date: Tue, 16 Jul 2024 23:43:24 +0500 Subject: [PATCH 1/6] uppy.io/examples - fix double-shadow in a search input, fix camera headings --- src/pages/examples.module.css | 6 +++--- src/pages/examples.tsx | 12 ++++++------ 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/pages/examples.module.css b/src/pages/examples.module.css index 0ca4bab35..d4c00ef14 100644 --- a/src/pages/examples.module.css +++ b/src/pages/examples.module.css @@ -4,16 +4,16 @@ padding: 0 1rem; } -.main h1 { +.main .h1 { font-size: 3rem; } -.main h3 { +.main .h3 { font-size: 1rem; font-family: var(--ifm-font-family-base); } -.main section { +.main .options-and-uppy { position: relative; border-radius: 5px; margin-bottom: 1rem; diff --git a/src/pages/examples.tsx b/src/pages/examples.tsx index 300d70d6f..b1d33b04f 100644 --- a/src/pages/examples.tsx +++ b/src/pages/examples.tsx @@ -290,10 +290,10 @@ function Page() { return ( -
- Examples +
+ Examples -
+
Dashboard

Docs •{' '} @@ -311,12 +311,12 @@ function Page() { previews and upload progress, lets you edit metadata, and unites acquire plugins, such as Google Drive and Webcam, under one roof.

-
-
+
+
{options.map((section) => { return (
- {section.heading} + {section.heading}
Date: Wed, 17 Jul 2024 00:17:25 +0500 Subject: [PATCH 2/6] uppy.io/examples - add unique classNames to *all* mentioned in css elements --- src/pages/examples.module.css | 85 ++++++++++++++++------------------- src/pages/examples.tsx | 6 +-- 2 files changed, 40 insertions(+), 51 deletions(-) diff --git a/src/pages/examples.module.css b/src/pages/examples.module.css index d4c00ef14..75917a405 100644 --- a/src/pages/examples.module.css +++ b/src/pages/examples.module.css @@ -3,17 +3,26 @@ margin: 4rem auto; padding: 0 1rem; } - -.main .h1 { +.h1 { font-size: 3rem; } - -.main .h3 { +.h3 { font-size: 1rem; font-family: var(--ifm-font-family-base); } -.main .options-and-uppy { +.dashboard-docs-stackblitz { + display: flex; + align-items: baseline; + gap: 1rem; + margin-top: 2rem; +} +.dashboard-docs-stackblitz h2, +.dashboard-docs-stackblitz p { + margin-bottom: 0.5rem; +} + +.options-and-uppy { position: relative; border-radius: 5px; margin-bottom: 1rem; @@ -23,21 +32,31 @@ rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px; } - -.main input[type='checkbox'] { +.options { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1rem; + min-height: 500px; + max-width: 30rem; + border-radius: 5px; + padding: 1rem; +} +.options input[type='checkbox'] { accent-color: #f37; } - -.main input[type='checkbox']:not(:checked, :disabled):hover + label { +.options-inner > div { + display: flexl; + align-items: center; + margin: 0.25rem 0; +} +.options input[type='checkbox']:not(:checked, :disabled):hover + label { color: black; } - -.main input[type='checkbox']:disabled:hover, -.main input[type='checkbox']:disabled:hover + label { +.options input[type='checkbox']:disabled:hover, +.options input[type='checkbox']:disabled:hover + label { cursor: not-allowed; } - -.main select { +.options select { grid-column: 1 / 3; background: white; padding: 0.2rem 1rem; @@ -46,32 +65,9 @@ border-radius: 5px; } -.header { - display: flex; - align-items: baseline; - gap: 1rem; - margin-top: 2rem; -} - -.header h2, -.header p { - margin-bottom: 0.5rem; -} - -.options { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 1rem; - min-height: 500px; - max-width: 30rem; - border-radius: 5px; - padding: 1rem; -} - -.options-wrapper > div { - display: flexl; - align-items: center; - margin: 0.25rem 0; +.dashboard-inner { + position: relative; + z-index: 1; } @media screen and (min-width: 60rem) { @@ -86,17 +82,12 @@ .options > div:first-of-type { grid-column: 1 / 3; } - .options-wrapper[wrapper-for='Remote sources'] { + .options-inner[wrapper-for='Remote sources'] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } - .main > section { + .options-and-uppy { display: grid; grid-template-columns: minmax(20rem, 1fr) 2fr; } } - -.dashboard-inner { - position: relative; - z-index: 1; -} diff --git a/src/pages/examples.tsx b/src/pages/examples.tsx index b1d33b04f..f02e6716a 100644 --- a/src/pages/examples.tsx +++ b/src/pages/examples.tsx @@ -293,7 +293,7 @@ function Page() {
Examples -
+
Dashboard

Docs •{' '} @@ -319,7 +319,7 @@ function Page() { {section.heading}

{section.options.map( ({ label, value, type, disabled, title }) => ( @@ -327,8 +327,6 @@ function Page() { Date: Wed, 17 Jul 2024 00:23:15 +0500 Subject: [PATCH 3/6] uppy.io/examples - add some margin-right to checkboxes --- src/pages/examples.module.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/examples.module.css b/src/pages/examples.module.css index 75917a405..2dd9b4680 100644 --- a/src/pages/examples.module.css +++ b/src/pages/examples.module.css @@ -43,6 +43,8 @@ } .options input[type='checkbox'] { accent-color: #f37; + margin-right: 5px; + margin-left: 0; } .options-inner > div { display: flexl; From fe82803cc5016bfbcaa78719c27487c55ddf5ce9 Mon Sep 17 00:00:00 2001 From: Evgenia Karunus Date: Wed, 17 Jul 2024 00:32:11 +0500 Subject: [PATCH 4/6] uppy.io/examples - make font alright too --- src/pages/examples.module.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/pages/examples.module.css b/src/pages/examples.module.css index 2dd9b4680..a40bc8879 100644 --- a/src/pages/examples.module.css +++ b/src/pages/examples.module.css @@ -72,6 +72,11 @@ z-index: 1; } +.dashboard-inner :is(h1, h2, h3, h4, h5, h6) { + /* This is a copypaste from Uppy; here we're making sure docusaurus styles don't override Uppy's styles */ + font-family: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Segoe UI Symbol,Segoe UI Emoji,Apple Color Emoji,Roboto,Helvetica,Arial,sans-serif; +} + @media screen and (min-width: 60rem) { .main { padding: 0; From c6cdbfdd3b4b3a7e2916e73f9d368da5d1fe5ce5 Mon Sep 17 00:00:00 2001 From: Evgenia Karunus Date: Wed, 17 Jul 2024 00:52:03 +0500 Subject: [PATCH 5/6] Run `corepack yarn run format` --- src/pages/examples.module.css | 13 ++++++++++++- src/pages/examples.tsx | 8 ++++++-- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/pages/examples.module.css b/src/pages/examples.module.css index a40bc8879..66b6b1d18 100644 --- a/src/pages/examples.module.css +++ b/src/pages/examples.module.css @@ -74,7 +74,18 @@ .dashboard-inner :is(h1, h2, h3, h4, h5, h6) { /* This is a copypaste from Uppy; here we're making sure docusaurus styles don't override Uppy's styles */ - font-family: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Segoe UI Symbol,Segoe UI Emoji,Apple Color Emoji,Roboto,Helvetica,Arial,sans-serif; + font-family: + -apple-system, + system-ui, + BlinkMacSystemFont, + Segoe UI, + Segoe UI Symbol, + Segoe UI Emoji, + Apple Color Emoji, + Roboto, + Helvetica, + Arial, + sans-serif; } @media screen and (min-width: 60rem) { diff --git a/src/pages/examples.tsx b/src/pages/examples.tsx index f02e6716a..5ef91d690 100644 --- a/src/pages/examples.tsx +++ b/src/pages/examples.tsx @@ -291,7 +291,9 @@ function Page() { return (
- Examples + + Examples +
Dashboard @@ -316,7 +318,9 @@ function Page() { {options.map((section) => { return (
- {section.heading} + + {section.heading} +
Date: Thu, 18 Jul 2024 00:14:19 +0500 Subject: [PATCH 6/6] Revert "uppy.io/examples - make font alright too" --- src/pages/examples.module.css | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/src/pages/examples.module.css b/src/pages/examples.module.css index 66b6b1d18..2dd9b4680 100644 --- a/src/pages/examples.module.css +++ b/src/pages/examples.module.css @@ -72,22 +72,6 @@ z-index: 1; } -.dashboard-inner :is(h1, h2, h3, h4, h5, h6) { - /* This is a copypaste from Uppy; here we're making sure docusaurus styles don't override Uppy's styles */ - font-family: - -apple-system, - system-ui, - BlinkMacSystemFont, - Segoe UI, - Segoe UI Symbol, - Segoe UI Emoji, - Apple Color Emoji, - Roboto, - Helvetica, - Arial, - sans-serif; -} - @media screen and (min-width: 60rem) { .main { padding: 0;