Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

uppy.io/examples - stop css from affecting uppy #266

Merged
merged 6 commits into from
Jul 22, 2024
Merged

uppy.io/examples - stop css from affecting uppy #266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4a8d658
uppy.io/examples - fix double-shadow in a search input, fix camera he…
lakesare Jul 16, 2024
de87ec2
uppy.io/examples - add unique classNames to *all* mentioned in css el…
lakesare Jul 16, 2024
be848bb
uppy.io/examples - add some margin-right to checkboxes
lakesare Jul 16, 2024
fe82803
uppy.io/examples - make font alright too
lakesare Jul 16, 2024
c6cdbfd
Run `corepack yarn run format`
lakesare Jul 16, 2024
d63f83d
Revert "uppy.io/examples - make font alright too"
lakesare Jul 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 40 additions & 47 deletions src/pages/examples.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 section {
.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;
Expand All @@ -23,21 +32,33 @@
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;
margin-right: 5px;
margin-left: 0;
}

.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;
Expand All @@ -46,32 +67,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) {
Expand All @@ -86,17 +84,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;
}
20 changes: 11 additions & 9 deletions src/pages/examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,10 +290,12 @@ function Page() {

return (
<Layout>
<main className={styles.main}>
<Heading as="h1">Examples</Heading>
<main className={styles['main']}>
<Heading className={styles['h1']} as="h1">
Examples
</Heading>

<div className={styles.header}>
<div className={styles['dashboard-docs-stackblitz']}>
<Heading as="h2">Dashboard</Heading>
<p>
<Link to="/docs/dashboard">Docs</Link> •{' '}
Expand All @@ -311,24 +313,24 @@ function Page() {
previews and upload progress, lets you edit metadata, and unites
acquire plugins, such as Google Drive and Webcam, under one roof.
</p>
<section>
<div className={styles.options}>
<section className={styles['options-and-uppy']}>
<div className={styles['options']}>
{options.map((section) => {
return (
<div key={section.heading}>
<Heading as="h3">{section.heading}</Heading>
<Heading className={styles['h3']} as="h3">
{section.heading}
</Heading>
<div
wrapper-for={section.heading}
className={styles['options-wrapper']}
className={styles['options-inner']}
>
{section.options.map(
({ label, value, type, disabled, title }) => (
<div key={label}>
<input
type="checkbox"
id={label}
className={styles['framework-input']}
name="framework"
value={type}
title={title}
checked={
Expand Down