Skip to content

Commit

Permalink
Cleanup padding and rounded corners
Browse files Browse the repository at this point in the history
  • Loading branch information
@yuvipanda
yuvipanda committed Dec 15, 2024
1 parent 7276451 commit 3c895d9
Show file tree
Hide file tree
Showing 4 changed files with 152 additions and 152 deletions.
4 changes: 3 additions & 1 deletion binderhub/static/js/components/BuilderLauncher.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,7 @@ function ImageLogs({
* @prop {(l: boolean) => void} setIsLaunching
* @prop {PROGRESS_STATES} progressState
* @prop {(p: PROGRESS_STATES) => void} setProgressState
* @prop {string?} className
*
* @param {BuildLauncherProps} props
* @returns
Expand All @@ -197,6 +198,7 @@ export function BuilderLauncher({
setIsLaunching,
progressState,
setProgressState,
className,
}) {
const [term, setTerm] = useState(null);
const [fitAddon, setFitAddon] = useState(null);
Expand All @@ -221,7 +223,7 @@ export function BuilderLauncher({
setup();
}, [isLaunching]);
return (
<div className="bg-custom-dark p-4 pt-2">
<div className={className}>
<Progress progressState={progressState} />
<ImageLogs
setTerm={setTerm}
Expand Down
297 changes: 146 additions & 151 deletions binderhub/static/js/components/LinkGenerator.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@ export function LinkGenerator({
setUrlPath,
isLaunching,
setIsLaunching,
className,
}) {
const [badgeType, setBadgeType] = useState("md"); // Options are md and rst
const [badgeVisible, setBadgeVisible] = useState(false);
Expand Down Expand Up @@ -175,178 +176,172 @@ export function LinkGenerator({
}

return (
<>
<form className="d-flex flex-column gap-3 p-4 pb-0 rounded bg-custom-dark">
<h4>Build and launch a repository</h4>
<fieldset>
<legend className="form-label">{selectedProvider.repo.label}</legend>
<form className={`d-flex flex-column gap-3 ${className}`}>
<h4>Build and launch a repository</h4>
<fieldset>
<legend className="form-label">{selectedProvider.repo.label}</legend>
<div className="input-group">
<ProviderSelector
providers={providers}
selectedProvider={selectedProvider}
setSelectedProvider={setSelectedProvider}
/>
<input
className="form-control border border-2 border-start-0"
type="text"
name="repository"
placeholder={selectedProvider.repo.placeholder}
disabled={isLaunching}
aria-label="Enter repository URL"
onChange={(e) => {
let repo = e.target.value;
if (selectedProvider.detect && selectedProvider.detect.regex) {
// repo value *must* be detected by this regex, or it is not valid yet
const re = new RegExp(selectedProvider.detect.regex);
const results = re.exec(repo);
if (results !== null && results.groups && results.groups.repo) {
setRepo(results.groups.repo);
}
} else {
setRepo(e.target.value);
}
}}
/>
</div>
</fieldset>

<div className="row align-items-end">
<div className="col-5">
<label htmlFor="ref" className="form-label">
Git ref (branch, tag, or commit)
</label>
<div className="input-group">
<ProviderSelector
providers={providers}
selectedProvider={selectedProvider}
setSelectedProvider={setSelectedProvider}
/>
<input
className="form-control border border-2 border-start-0"
className="form-control border border-2"
type="text"
name="repository"
placeholder={selectedProvider.repo.placeholder}
disabled={isLaunching}
aria-label="Enter repository URL"
id="ref"
name="ref"
disabled={!selectedProvider.ref.enabled || isLaunching}
placeholder={
(selectedProvider.ref.enabled &&
selectedProvider.ref.default) ||
""
}
onChange={(e) => {
let repo = e.target.value;
if (selectedProvider.detect && selectedProvider.detect.regex) {
// repo value *must* be detected by this regex, or it is not valid yet
const re = new RegExp(selectedProvider.detect.regex);
const results = re.exec(repo);
if (
results !== null &&
results.groups &&
results.groups.repo
) {
setRepo(results.groups.repo);
}
} else {
setRepo(e.target.value);
}
setReference(e.target.value);
}}
/>
</div>
</fieldset>
</div>
<div className="col-5">
<UrlSelector setUrlPath={setUrlPath} />
</div>
<div className="col-2">
<button
className="btn btn-primary col-2 w-100"
disabled={isLaunching}
onClick={() => setIsLaunching(true)}
>
{isLaunching ? "launching..." : "launch"}
</button>
</div>
</div>

<div className="row align-items-end">
<div className="col-5">
<label htmlFor="ref" className="form-label">
Git ref (branch, tag, or commit)
</label>
<div className="input-group">
<input
className="form-control border border-2"
type="text"
id="ref"
name="ref"
disabled={!selectedProvider.ref.enabled || isLaunching}
placeholder={
(selectedProvider.ref.enabled &&
selectedProvider.ref.default) ||
""
}
onChange={(e) => {
setReference(e.target.value);
}}
/>
</div>
</div>
<div className="col-5">
<UrlSelector setUrlPath={setUrlPath} />
</div>
<div className="col-2">
<button
className="btn btn-primary col-2 w-100"
disabled={isLaunching}
onClick={() => setIsLaunching(true)}
>
{isLaunching ? "launching..." : "launch"}
</button>
<div>
<div className="input-group">
<div
className="form-control font-monospace border border-2 border-end-0"
data-testid="launch-url"
>
{launchUrl ||
"Fill in the fields to see a URL for sharing your Binder."}
</div>
<button
className="btn border border-2 border-start-0"
type="button"
id="copy-url"
onClick={() => copy(launchUrl)}
disabled={launchUrl === ""}
>
<i className="bi bi-copy"></i>
</button>
</div>
</div>

<div>
<div className="input-group">
<div className="card">
<div className="card-header d-flex align-items-baseline">
<span className="flex-fill">Badges for your README</span>
<button
className="btn btn-link"
type="button"
aria-controls="badge-container"
aria-expanded={badgeVisible}
onClick={() => {
setBadgeVisible(!badgeVisible);
}}
>
{badgeVisible ? "hide" : "show"}
</button>
</div>
<div
className={`card-body ${badgeVisible ? "" : "d-none"}`}
id="badge-container"
>
<div className="d-flex align-items-baseline">
<div
className="form-control font-monospace border border-2 border-end-0"
data-testid="launch-url"
className="btn-group"
role="group"
aria-label="Basic radio toggle button group"
>
{launchUrl ||
"Fill in the fields to see a URL for sharing your Binder."}
<input
type="radio"
className="btn-check"
name="btn-badge"
id="btn-badge-md"
defaultChecked={true}
autoComplete="off"
onClick={() => setBadgeType("md")}
></input>
<label
title="markdown"
className="btn btn-outline-secondary font-monospace"
htmlFor="btn-badge-md"
>
md
</label>

<input
type="radio"
className="btn-check"
name="btn-badge"
id="btn-badge-rst"
autoComplete="off"
onClick={() => setBadgeType("rst")}
></input>
<label
title="reStructuredText"
className="btn btn-outline-secondary font-monospace"
htmlFor="btn-badge-rst"
>
rST
</label>
</div>
<pre className="flex-fill font-monospace px-1">
{badgeMarkup ||
"Fill in the fields to see a badge markup for your README."}
</pre>
<button
className="btn border border-2 border-start-0"
className="btn btn-outline-secondary"
type="button"
id="copy-url"
onClick={() => copy(launchUrl)}
disabled={launchUrl === ""}
onClick={() => copy(badgeMarkup)}
disabled={badgeMarkup === ""}
>
<i className="bi bi-copy"></i>
</button>
</div>
</div>

<div className="card">
<div className="card-header d-flex align-items-baseline">
<span className="flex-fill">Badges for your README</span>
<button
className="btn btn-link"
type="button"
aria-controls="badge-container"
aria-expanded={badgeVisible}
onClick={() => {
setBadgeVisible(!badgeVisible);
}}
>
{badgeVisible ? "hide" : "show"}
</button>
</div>
<div
className={`card-body ${badgeVisible ? "" : "d-none"}`}
id="badge-container"
>
<div className="d-flex align-items-baseline">
<div
className="btn-group"
role="group"
aria-label="Basic radio toggle button group"
>
<input
type="radio"
className="btn-check"
name="btn-badge"
id="btn-badge-md"
defaultChecked={true}
autoComplete="off"
onClick={() => setBadgeType("md")}
></input>
<label
title="markdown"
className="btn btn-outline-secondary font-monospace"
htmlFor="btn-badge-md"
>
md
</label>

<input
type="radio"
className="btn-check"
name="btn-badge"
id="btn-badge-rst"
autoComplete="off"
onClick={() => setBadgeType("rst")}
></input>
<label
title="reStructuredText"
className="btn btn-outline-secondary font-monospace"
htmlFor="btn-badge-rst"
>
rST
</label>
</div>
<pre className="flex-fill font-monospace px-1">
{badgeMarkup ||
"Fill in the fields to see a badge markup for your README."}
</pre>
<button
className="btn btn-outline-secondary"
type="button"
id="copy-url"
onClick={() => copy(badgeMarkup)}
disabled={badgeMarkup === ""}
>
<i className="bi bi-copy"></i>
</button>
</div>
</div>
</div>
</form>
</>
</div>
</form>
);
}
2 changes: 2 additions & 0 deletions binderhub/static/js/pages/HomePage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ export function HomePage({ providers, publicBaseUrl, baseUrl }) {
</p>
</div>
<LinkGenerator
className="bg-custom-dark p-4 pb-0 rounded-top"
publicBaseUrl={publicBaseUrl}
providers={providers}
selectedProvider={selectedProvider}
Expand All @@ -74,6 +75,7 @@ export function HomePage({ providers, publicBaseUrl, baseUrl }) {
setIsLaunching={setIsLaunching}
/>
<BuilderLauncher
className="bg-custom-dark p-4 pt-2 rounded-bottom"
baseUrl={baseUrl}
spec={spec}
isLaunching={isLaunching}
Expand Down
1 change: 1 addition & 0 deletions binderhub/static/js/pages/LoadingPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export function LoadingPage({ baseUrl, buildToken, provider }) {
<>
<LoadingIndicator progressState={progressState} />
<BuilderLauncher
className="bg-custom-dark p-4 rounded"
baseUrl={baseUrl}
spec={spec}
buildToken={buildToken}
Expand Down

0 comments on commit 3c895d9

Please sign in to comment.