From 525f4847c833ee79f6652bf16a5d968e260fc320 Mon Sep 17 00:00:00 2001 From: Fons van der Plas Date: Tue, 5 Apr 2022 16:06:42 +0200 Subject: [PATCH 01/49] hello --- frontend/components/welcome/Featured.js | 88 +++++++++++++++++++++++++ frontend/components/welcome/Welcome.js | 2 + frontend/featured_sources.json | 3 + 3 files changed, 93 insertions(+) create mode 100644 frontend/components/welcome/Featured.js create mode 100644 frontend/featured_sources.json diff --git a/frontend/components/welcome/Featured.js b/frontend/components/welcome/Featured.js new file mode 100644 index 0000000000..b84e7c58c9 --- /dev/null +++ b/frontend/components/welcome/Featured.js @@ -0,0 +1,88 @@ +import _ from "../../imports/lodash.js" +import { html, Component, useEffect, useState, useMemo } from "../../imports/Preact.js" + +const run = (f) => f() + +/** + * @typedef SourceManifestEntry + * @type {{ + * id: String, + * hash: String, + * html_path: String, + * statefile_path: String, + * notebookfile_path: String, + * frontmatter: Record, + * }} + */ + +/** + * @typedef SourceManifest + * @type {{ + * notebooks: Record, + * collections: Array, + * pluto_version: String, + * julia_version: String, + * format_version: String, + * source_url: String, + * }} + */ + +export const Featured = () => { + const [sources, set_sources] = useState(/** @type{Array} */ (null)) + + const [source_data, set_source_data] = useState(/** @type{Array} */ ([])) + + useEffect(() => { + run(async () => { + const data = await (await fetch("featured_sources.json")).json() + + set_sources(data.sources) + }) + }, []) + + useEffect(() => { + if (sources != null) { + const promises = sources.map(async (src) => { + const data = await (await fetch(src)).json() + + if (data.format_version !== "1") { + throw new Error(`Invalid format version: ${data.format_version}`) + } + + set_source_data((old) => [ + ...old, + { + ...data, + source_url: src, + }, + ]) + }) + } + }, [sources]) + + return html` +
+

Featured

+
+ ${source_data != null + ? source_data.map( + (data) => html` +
+

${data.source_url}

+
+ ${Object.entries(data.notebooks).map( + ([id, entry]) => html` +
+ ${entry.frontmatter.title} +
+ ` + )} +
+
+ ` + ) + : null} +
+
+ ` +} diff --git a/frontend/components/welcome/Welcome.js b/frontend/components/welcome/Welcome.js index 61a1983731..e5080356e1 100644 --- a/frontend/components/welcome/Welcome.js +++ b/frontend/components/welcome/Welcome.js @@ -6,6 +6,7 @@ import { create_pluto_connection } from "../../common/PlutoConnection.js" import { new_update_message } from "../../common/NewUpdateMessage.js" import { Open } from "./Open.js" import { Recent } from "./Recent.js" +import { Featured } from "./Featured.js" // This is imported asynchronously - uncomment for development // import environment from "../../common/Environment.js" @@ -75,5 +76,6 @@ export const Welcome = () => { <${Open} client=${client_ref.current} connected=${connected} CustomPicker=${CustomPicker} show_samples=${show_samples} />
<${Recent} client=${client_ref.current} connected=${connected} remote_notebooks=${remote_notebooks} CustomRecent=${CustomRecent} /> + <${Featured} /> ` } diff --git a/frontend/featured_sources.json b/frontend/featured_sources.json new file mode 100644 index 0000000000..3f5f3fa446 --- /dev/null +++ b/frontend/featured_sources.json @@ -0,0 +1,3 @@ +{ + "sources": ["https://cdn.jsdelivr.net/gh/JuliaPluto/featured@d20e3fb/pluto_export.json"] +} \ No newline at end of file From cbfeb718eceac6ef35286f3c00c4c378e29ae8d8 Mon Sep 17 00:00:00 2001 From: Fons van der Plas Date: Tue, 5 Apr 2022 21:20:17 +0200 Subject: [PATCH 02/49] =?UTF-8?q?CSS=20=F0=9F=92=95=F0=9F=92=95?= =?UTF-8?q?=F0=9F=92=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/components/welcome/Featured.js | 37 +++--- frontend/components/welcome/FeaturedCard.js | 78 +++++++++++ frontend/components/welcome/Welcome.js | 2 +- frontend/dark_color.css | 1 + frontend/featured_sources.json | 2 +- frontend/index.css | 139 +++++++++++++++++++- frontend/light_color.css | 1 + 7 files changed, 233 insertions(+), 27 deletions(-) create mode 100644 frontend/components/welcome/FeaturedCard.js diff --git a/frontend/components/welcome/Featured.js b/frontend/components/welcome/Featured.js index b84e7c58c9..46bf09b406 100644 --- a/frontend/components/welcome/Featured.js +++ b/frontend/components/welcome/Featured.js @@ -1,5 +1,6 @@ import _ from "../../imports/lodash.js" import { html, Component, useEffect, useState, useMemo } from "../../imports/Preact.js" +import { FeaturedCard } from "./FeaturedCard.js" const run = (f) => f() @@ -61,28 +62,22 @@ export const Featured = () => { }, [sources]) return html` -
-

Featured

-
- ${source_data != null - ? source_data.map( - (data) => html` -
-

${data.source_url}

-
- ${Object.entries(data.notebooks).map( - ([id, entry]) => html` -
- ${entry.frontmatter.title} -
- ` - )} -
+

Featured

+
+ ${source_data != null + ? source_data.map( + (data) => html` +
+

${data.source_url}

+
+ ${Object.entries(data.notebooks).map( + ([id, entry]) => html` <${FeaturedCard} entry=${entry} source_url=${data.source_url} /> ` + )}
- ` - ) - : null} -
+
+ ` + ) + : null}
` } diff --git a/frontend/components/welcome/FeaturedCard.js b/frontend/components/welcome/FeaturedCard.js new file mode 100644 index 0000000000..34a7f2253d --- /dev/null +++ b/frontend/components/welcome/FeaturedCard.js @@ -0,0 +1,78 @@ +import _ from "../../imports/lodash.js" +import { html, Component, useEffect, useState, useMemo } from "../../imports/Preact.js" + +const transparent_svg = "data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E" + +const str_to_degree = (s) => ([...s].reduce((a, b) => a + b.charCodeAt(0), 0) * 79) % 360 + +/** + * @param {{ + * entry: import("./Featured.js").SourceManifestEntry, + * source_url: String, + * }} props + */ +export const FeaturedCard = ({ entry, source_url }) => { + const u = (x) => (x == null ? null : new URL(x, source_url).href) + const ue = (x) => (x == null ? null : encodeURIComponent(u(x))) + + const href = `editor.html?statefile=${ue(entry.statefile_path)}¬ebookfile=${ue(entry.notebookfile_path)}&disable_ui=true` + + const author = author_info(entry.frontmatter.author) + + const [img_src, set_img_src] = useState(transparent_svg) + + useEffect(() => { + if (entry.frontmatter.image != null) { + const url = u(entry.frontmatter.image) + fetch(url, { mode: "no-cors" }) + .then((r) => r.blob()) + .then((blob) => { + console.log(blob) + set_img_src(URL.createObjectURL(blob)) + }) + // .catch(() => {}) + } + }, [entry.frontmatter.image]) + + return html` + + +
+ ${author?.name == null + ? null + : html` + ${author.name} + + `} +
+

${entry.frontmatter.title}

+

${entry.frontmatter.description}

+ + ` +} + +const author_info = (x) => { + if (x instanceof Array) { + return author_info(x[0]) + } else if (x == null) { + return null + } else if (x instanceof String) { + return { + name: x, + profile_url: null, + } + } else if (x instanceof Object) { + let { name, image, url } = x + + if (image == null && url != null) { + image = url + ".png" + } + + return { + name, + url, + image, + } + } +} diff --git a/frontend/components/welcome/Welcome.js b/frontend/components/welcome/Welcome.js index e5080356e1..17f275d271 100644 --- a/frontend/components/welcome/Welcome.js +++ b/frontend/components/welcome/Welcome.js @@ -73,9 +73,9 @@ export const Welcome = () => { const { show_samples, CustomRecent, CustomPicker } = extended_components return html` + <${Featured} /> <${Open} client=${client_ref.current} connected=${connected} CustomPicker=${CustomPicker} show_samples=${show_samples} />
<${Recent} client=${client_ref.current} connected=${connected} remote_notebooks=${remote_notebooks} CustomRecent=${CustomRecent} /> - <${Featured} /> ` } diff --git a/frontend/dark_color.css b/frontend/dark_color.css index 51cbe22b99..8f65794369 100644 --- a/frontend/dark_color.css +++ b/frontend/dark_color.css @@ -184,6 +184,7 @@ /* Landing colors */ --index-text-color: rgb(199, 199, 199); --index-clickable-text-color: rgb(235, 235, 235); + --index-card-bg: #313131; /* docs binding */ --docs-binding-bg: #323431; diff --git a/frontend/featured_sources.json b/frontend/featured_sources.json index 3f5f3fa446..28690d8e76 100644 --- a/frontend/featured_sources.json +++ b/frontend/featured_sources.json @@ -1,3 +1,3 @@ { - "sources": ["https://cdn.jsdelivr.net/gh/JuliaPluto/featured@d20e3fb/pluto_export.json"] + "sources": ["https://cdn.jsdelivr.net/gh/JuliaPluto/featured@7fa12b2/pluto_export.json"] } \ No newline at end of file diff --git a/frontend/index.css b/frontend/index.css index be60eb9b71..2bc2fefc68 100644 --- a/frontend/index.css +++ b/frontend/index.css @@ -15,7 +15,7 @@ /* position: absolute; */ /* left: 0; */ /* right: 0; */ - margin-top: 34vh; + margin-top: 14vh; /* bottom: 0; */ /* margin: auto; */ display: block; @@ -44,7 +44,7 @@ body.error #title { font-size: 1.4em; } -#title img { +#title h1 img { height: 1.2em; margin-bottom: -0.27em; /* margin-right: -1.5em; */ @@ -61,8 +61,8 @@ body { } main { - width: 15em; - margin: 0 auto; + max-width: 53rem; + margin: 20vh auto; margin-top: 20vh; text-align: left; font-family: "Roboto Mono", monospace; @@ -234,6 +234,8 @@ body.nosessions ul#new ~ * { #recent { margin-bottom: 8em; + max-height: 11.700000000000003em; + overflow-y: scroll; } #recent > li.recent { @@ -302,3 +304,132 @@ body.loading loading-bar { right: 0vw; } } + +:root { + --card-width: 16rem; +} + +featured-card { + --card-border-radius: 10px; + --card-border-width: 3px; + --card-color: attr(data-color); + display: block; + /* width: var(--card-width); */ + border: var(--card-border-width) solid var(--card-color); + border-radius: var(--card-border-radius); + margin: 10px; + padding-bottom: 0.3rem; + box-shadow: 1px 3px 12px 3px #00000021; + font-family: system-ui; + position: relative; + word-break: break-word; + hyphens: auto; + background: var(--index-card-bg); +} + +.featured-source-notebooks { + display: grid; + /* grid-auto-columns: 50px; */ + place-items: center; + align-items: start; + grid-template-columns: repeat(auto-fit, minmax(var(--card-width),1fr)); + gap: 1rem; + justify-items: stretch; +} + +featured-card .banner img { + --zz: calc(var(--card-border-radius) - var(--card-border-width)); + width: 100%; + height: 8rem; + object-fit: cover; + /* background-color: hsl(16deg 100% 66%); */ + background: var(--card-color); + border-radius: var(--zz) var(--zz) 0 0; +} + +featured-card .author img { + --size: 1.6em; + margin: 0.4em 0.4em; + margin-bottom: -0.4em; + width: var(--size); + height: var(--size); + object-fit: cover; + border-radius: 100%; + background: #b6b6b6; + display: inline-block; + overflow: hidden; +} + +featured-card a { + text-decoration: none; + /* font-weight: 800; */ +} + +featured-card a.banner { + display: flex; + +} + +featured-card .author { + color: #737373; + font-weight: 600; +} + +featured-card h3 a { + padding: 0.6em; + padding-bottom: 0; + -webkit-line-clamp: 2; + display: inline-block; + display: -webkit-inline-box; + -webkit-box-orient: vertical; + overflow: hidden; +} + +featured-card p { + margin: 0.6rem 0.8rem; + /* padding-top: 0; */ + /* margin-block: 0; */ + color: #838383; + -webkit-line-clamp: 4; + display: inline-block; + display: -webkit-inline-box; + -webkit-box-orient: vertical; + overflow: hidden; +} + +featured-card h3 { + margin: 0.6rem 0rem 0rem 0rem; +} + + +featured-card.big { + grid-column-end: span 2; + grid-row-end: span 2; + /* width: 2000px; */ +} + + +featured-card.big .banner img { + height: 16rem; +} + + + +featured-card.special::before { + content: "New!"; + font-size: 1.4rem; + font-weight: 700; + text-transform: uppercase; + font-style: italic; + display: block; + background: #fcf492; + color: #833bc6; + text-shadow: 0 0 1px #ff6767; + position: absolute; + transform: translateY(calc(-100% - -15px)) rotate(-5deg); + padding: 2px 19px; + left: -9px; + /* right: 51px; */ + /* border: 2px solid #ffca62; */ + pointer-events: none; +} \ No newline at end of file diff --git a/frontend/light_color.css b/frontend/light_color.css index fa33f154a7..ea70bdb7c1 100644 --- a/frontend/light_color.css +++ b/frontend/light_color.css @@ -188,6 +188,7 @@ --index-text-color: hsl(0, 0, 60); --index-clickable-text-color: hsl(0, 0, 30); --docs-binding-bg: #8383830a; + --index-card-bg: white; /* HTML in codemirror! */ --cm-html-color: #48b685; From 1326c003155648da77524b0d21934981c943b007 Mon Sep 17 00:00:00 2001 From: Fons van der Plas Date: Wed, 6 Apr 2022 18:24:36 +0200 Subject: [PATCH 03/49] featured sources integrity --- frontend/components/welcome/Featured.js | 8 ++++---- frontend/featured_sources.json | 5 ++++- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/frontend/components/welcome/Featured.js b/frontend/components/welcome/Featured.js index 46bf09b406..ee6dcea748 100644 --- a/frontend/components/welcome/Featured.js +++ b/frontend/components/welcome/Featured.js @@ -29,7 +29,7 @@ const run = (f) => f() */ export const Featured = () => { - const [sources, set_sources] = useState(/** @type{Array} */ (null)) + const [sources, set_sources] = useState(/** @type{Array<{url: String, integrity: String?}>} */ (null)) const [source_data, set_source_data] = useState(/** @type{Array} */ ([])) @@ -43,8 +43,8 @@ export const Featured = () => { useEffect(() => { if (sources != null) { - const promises = sources.map(async (src) => { - const data = await (await fetch(src)).json() + const promises = sources.map(async ({ url, integrity }) => { + const data = await (await fetch(new Request(url, { integrity }))).json() if (data.format_version !== "1") { throw new Error(`Invalid format version: ${data.format_version}`) @@ -54,7 +54,7 @@ export const Featured = () => { ...old, { ...data, - source_url: src, + source_url: url, }, ]) }) diff --git a/frontend/featured_sources.json b/frontend/featured_sources.json index 28690d8e76..3803642173 100644 --- a/frontend/featured_sources.json +++ b/frontend/featured_sources.json @@ -1,3 +1,6 @@ { - "sources": ["https://cdn.jsdelivr.net/gh/JuliaPluto/featured@7fa12b2/pluto_export.json"] + "sources": [{ + "url": "https://cdn.jsdelivr.net/gh/JuliaPluto/featured@7fa12b2/pluto_export.json", + "integrity": "sha256-P9KCJ+a4tDoNCdCkiqo2Q50zjQNydzuRwJ87zMv3X3U=" + }] } \ No newline at end of file From fcffb1af7cb603fd883353653de47ebcfaebe243 Mon Sep 17 00:00:00 2001 From: Fons van der Plas Date: Wed, 6 Apr 2022 18:24:50 +0200 Subject: [PATCH 04/49] launch param: pluto_server_url --- frontend/components/Editor.js | 7 ++++++- frontend/editor.js | 2 ++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/frontend/components/Editor.js b/frontend/components/Editor.js index a13b3b1aef..72598d0027 100644 --- a/frontend/components/Editor.js +++ b/frontend/components/Editor.js @@ -173,6 +173,7 @@ const first_true_key = (obj) => { * preamble_html: string?, * isolated_cell_ids: string[]?, * binder_url: string?, + * pluto_server_url: string?, * slider_server_url: string?, * recording_url: string?, * recording_audio_url: string?, @@ -1123,7 +1124,11 @@ patch: ${JSON.stringify( binder_phase: this.state.offer_binder ? BinderPhase.wait_for_user : null, }) // view stats on https://stats.plutojl.org/ - count_stat(`article-view`) + if (this.state.pluto_server_url != null) { + count_stat(`article-view`) + } else { + count_stat(`article-view`) + } } else { this.connect() } diff --git a/frontend/editor.js b/frontend/editor.js index af33d23d93..cb61106c96 100644 --- a/frontend/editor.js +++ b/frontend/editor.js @@ -45,6 +45,8 @@ const launch_params = { //@ts-ignore binder_url: url_params.get("binder_url") ?? window.pluto_binder_url, //@ts-ignore + pluto_server_url: url_params.get("pluto_server_url") ?? window.pluto_pluto_server_url, + //@ts-ignore slider_server_url: url_params.get("slider_server_url") ?? window.pluto_slider_server_url, //@ts-ignore recording_url: url_params.get("recording_url") ?? window.pluto_recording_url, From cc03e63371df0b83e4457257a36e3c2bc320b878 Mon Sep 17 00:00:00 2001 From: Fons van der Plas Date: Wed, 6 Apr 2022 19:43:10 +0200 Subject: [PATCH 05/49] RunLocal button --- frontend/common/RunLocal.js | 57 +++++++++++++++++++++ frontend/components/BinderButton.js | 14 +++++ frontend/components/Editor.js | 3 +- frontend/components/welcome/FeaturedCard.js | 2 +- 4 files changed, 74 insertions(+), 2 deletions(-) create mode 100644 frontend/common/RunLocal.js diff --git a/frontend/common/RunLocal.js b/frontend/common/RunLocal.js new file mode 100644 index 0000000000..6a60434e4c --- /dev/null +++ b/frontend/common/RunLocal.js @@ -0,0 +1,57 @@ +import immer from "../imports/immer.js" +import { BackendLaunchPhase } from "./Binder.js" +import { timeout_promise } from "./PlutoConnection.js" + +/** + * + * @param {{ + * launch_params: import("../components/Editor.js").LaunchParameters, + * setStatePromise: any, + * connect: () => Promise, + * }} props + */ +export const start_local = async ({ setStatePromise, connect, launch_params }) => { + try { + await setStatePromise( + immer((state) => { + state.binder_phase = BackendLaunchPhase.created + state.disable_ui = false + }) + ) + + const with_token = (x) => String(x) + const binder_session_url = new URL(launch_params.pluto_server_url, window.location.href) + + let open_response + + open_response = await fetch(with_token(new URL("notebookupload", binder_session_url)), { + method: "POST", + body: await (await fetch(launch_params.notebookfile)).arrayBuffer(), + }) + + const new_notebook_id = await open_response.text() + const edit_url = new URL("edit", binder_session_url) + edit_url.searchParams.set("id", new_notebook_id) + console.info("notebook_id:", new_notebook_id) + + window.history.replaceState({}, "", edit_url) + + await setStatePromise( + immer((state) => { + state.notebook.notebook_id = new_notebook_id + state.binder_phase = BackendLaunchPhase.notebook_running + }) + ) + console.log("Connecting WebSocket") + + const connect_promise = connect() + await timeout_promise(connect_promise, 20_000).catch((e) => { + console.error("Failed to establish connection within 20 seconds. Navigating to the edit URL directly.", e) + + window.parent.location.href = with_token(edit_url) + }) + } catch (err) { + console.error("Failed to initialize binder!", err) + alert("Something went wrong! 😮\n\nWe failed to initialize the binder connection. Please try again with a different browser, or come back later.") + } +} diff --git a/frontend/components/BinderButton.js b/frontend/components/BinderButton.js index 5c725120ef..42291239b7 100644 --- a/frontend/components/BinderButton.js +++ b/frontend/components/BinderButton.js @@ -2,6 +2,20 @@ import { BinderPhase } from "../common/Binder.js" import { html, useEffect, useState, useRef } from "../imports/Preact.js" export const BinderButton = ({ binder_phase, start_binder, notebookfile }) => { +export const RunLocalButton = ({ show, start_local }) => { + return html`
+ +
` +} + const [popupOpen, setPopupOpen] = useState(false) const [showCopyPopup, setShowCopyPopup] = useState(false) const notebookfile_ref = useRef("") diff --git a/frontend/components/Editor.js b/frontend/components/Editor.js index 72598d0027..edf28f0bae 100644 --- a/frontend/components/Editor.js +++ b/frontend/components/Editor.js @@ -25,13 +25,14 @@ import { has_ctrl_or_cmd_pressed, ctrl_or_cmd_name, is_mac_keyboard, in_textarea import { PlutoContext, PlutoBondsContext, PlutoJSInitializingContext, SetWithEmptyCallback } from "../common/PlutoContext.js" import { start_binder, BinderPhase, count_stat } from "../common/Binder.js" import { setup_mathjax } from "../common/SetupMathJax.js" -import { BinderButton } from "./BinderButton.js" +import { BinderButton, RunLocalButton } from "./BinderButton.js" import { slider_server_actions, nothing_actions } from "../common/SliderServerClient.js" import { ProgressBar } from "./ProgressBar.js" import { IsolatedCell } from "./Cell.js" import { RawHTMLContainer } from "./CellOutput.js" import { RecordingPlaybackUI, RecordingUI } from "./RecordingUI.js" import { HijackExternalLinksToOpenInNewTab } from "./HackySideStuff/HijackExternalLinksToOpenInNewTab.js" +import { start_local } from "../common/RunLocal.js" // This is imported asynchronously - uncomment for development // import environment from "../common/Environment.js" diff --git a/frontend/components/welcome/FeaturedCard.js b/frontend/components/welcome/FeaturedCard.js index 34a7f2253d..37778a7198 100644 --- a/frontend/components/welcome/FeaturedCard.js +++ b/frontend/components/welcome/FeaturedCard.js @@ -15,7 +15,7 @@ export const FeaturedCard = ({ entry, source_url }) => { const u = (x) => (x == null ? null : new URL(x, source_url).href) const ue = (x) => (x == null ? null : encodeURIComponent(u(x))) - const href = `editor.html?statefile=${ue(entry.statefile_path)}¬ebookfile=${ue(entry.notebookfile_path)}&disable_ui=true` + const href = `editor.html?statefile=${ue(entry.statefile_path)}¬ebookfile=${ue(entry.notebookfile_path)}&disable_ui=true&pluto_server_url=.` const author = author_info(entry.frontmatter.author) From 31d9900dd680ff8812e09663bebba6de1a9cbe5f Mon Sep 17 00:00:00 2001 From: Fons van der Plas Date: Wed, 6 Apr 2022 19:53:01 +0200 Subject: [PATCH 06/49] Update RunLocal.js --- frontend/common/RunLocal.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/common/RunLocal.js b/frontend/common/RunLocal.js index 6a60434e4c..c0da923bc7 100644 --- a/frontend/common/RunLocal.js +++ b/frontend/common/RunLocal.js @@ -14,7 +14,7 @@ export const start_local = async ({ setStatePromise, connect, launch_params }) = try { await setStatePromise( immer((state) => { - state.binder_phase = BackendLaunchPhase.created + state.backend_launch_phase = BackendLaunchPhase.created state.disable_ui = false }) ) @@ -39,7 +39,7 @@ export const start_local = async ({ setStatePromise, connect, launch_params }) = await setStatePromise( immer((state) => { state.notebook.notebook_id = new_notebook_id - state.binder_phase = BackendLaunchPhase.notebook_running + state.backend_launch_phase = BackendLaunchPhase.notebook_running }) ) console.log("Connecting WebSocket") From 99919d3a3d6eea5ff27db2df88cce661825dca32 Mon Sep 17 00:00:00 2001 From: Fons van der Plas Date: Wed, 6 Apr 2022 19:57:01 +0200 Subject: [PATCH 07/49] Update Editor.js --- frontend/components/Editor.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/frontend/components/Editor.js b/frontend/components/Editor.js index 8709af3391..ba7115b747 100644 --- a/frontend/components/Editor.js +++ b/frontend/components/Editor.js @@ -227,7 +227,10 @@ export class Editor extends Component { disable_ui: launch_params.disable_ui, static_preview: launch_params.statefile != null, - backend_launch_phase: launch_params.notebookfile != null && launch_params.binder_url != null ? BackendLaunchPhase.wait_for_user : null, + backend_launch_phase: + launch_params.notebookfile != null && (launch_params.binder_url != null || launch_params.pluto_server_url != null) + ? BackendLaunchPhase.wait_for_user + : null, binder_session_url: null, binder_session_token: null, connected: false, @@ -1232,6 +1235,7 @@ patch: ${JSON.stringify( >` const wfu = this.state.backend_launch_phase === BackendLaunchPhase.wait_for_user + const offer_local = wfu && launch_params.pluto_server_url != null const offer_binder = wfu && launch_params.binder_url != null return html` @@ -1334,7 +1338,16 @@ patch: ${JSON.stringify( /> ${ - offer_binder + offer_local + ? html`<${RunLocalButton} + start_local=${() => + start_local({ + setStatePromise: this.setStatePromise, + connect: this.connect, + launch_params: launch_params, + })} + />` + : offer_binder ? html`<${BinderButton} offer_binder=${offer_binder} start_binder=${() => From bc129095f17e8f8b26356a6023b4f0a0efc1c040 Mon Sep 17 00:00:00 2001 From: Fons van der Plas Date: Mon, 11 Apr 2022 14:58:00 +0200 Subject: [PATCH 08/49] asdf --- frontend/components/welcome/Welcome.js | 2 +- frontend/editor.css | 2 +- frontend/img/favicon_unsaturated_bg.svg | 18 ++++++ frontend/index.css | 14 ++-- frontend/index.html | 20 ++++-- frontend/welcome.css | 85 +++++++++++++++++++++++++ 6 files changed, 125 insertions(+), 16 deletions(-) create mode 100755 frontend/img/favicon_unsaturated_bg.svg create mode 100644 frontend/welcome.css diff --git a/frontend/components/welcome/Welcome.js b/frontend/components/welcome/Welcome.js index 17f275d271..e5080356e1 100644 --- a/frontend/components/welcome/Welcome.js +++ b/frontend/components/welcome/Welcome.js @@ -73,9 +73,9 @@ export const Welcome = () => { const { show_samples, CustomRecent, CustomPicker } = extended_components return html` - <${Featured} /> <${Open} client=${client_ref.current} connected=${connected} CustomPicker=${CustomPicker} show_samples=${show_samples} />
<${Recent} client=${client_ref.current} connected=${connected} remote_notebooks=${remote_notebooks} CustomRecent=${CustomRecent} /> + <${Featured} /> ` } diff --git a/frontend/editor.css b/frontend/editor.css index f467a10027..e780a5b379 100644 --- a/frontend/editor.css +++ b/frontend/editor.css @@ -2161,7 +2161,7 @@ footer a { footer input { margin: 0px; border: 2px solid var(--footer-input-border-color); - background: transparent; + background: var(--white); font-family: inherit; font-size: inherit; border-radius: 3px 0 0 3px; diff --git a/frontend/img/favicon_unsaturated_bg.svg b/frontend/img/favicon_unsaturated_bg.svg new file mode 100755 index 0000000000..1adc29e099 --- /dev/null +++ b/frontend/img/favicon_unsaturated_bg.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/frontend/index.css b/frontend/index.css index 2bc2fefc68..b3dc8b42e7 100644 --- a/frontend/index.css +++ b/frontend/index.css @@ -60,7 +60,7 @@ body { background: var(--main-bg-color); } -main { +body.error main { max-width: 53rem; margin: 20vh auto; margin-top: 20vh; @@ -325,6 +325,7 @@ featured-card { word-break: break-word; hyphens: auto; background: var(--index-card-bg); + max-width: 280px; } .featured-source-notebooks { @@ -332,9 +333,9 @@ featured-card { /* grid-auto-columns: 50px; */ place-items: center; align-items: start; - grid-template-columns: repeat(auto-fit, minmax(var(--card-width),1fr)); + grid-template-columns: repeat(auto-fit, minmax(var(--card-width), 1fr)); gap: 1rem; - justify-items: stretch; + justify-items: center; } featured-card .banner img { @@ -367,7 +368,6 @@ featured-card a { featured-card a.banner { display: flex; - } featured-card .author { @@ -401,20 +401,16 @@ featured-card h3 { margin: 0.6rem 0rem 0rem 0rem; } - featured-card.big { grid-column-end: span 2; grid-row-end: span 2; /* width: 2000px; */ } - featured-card.big .banner img { height: 16rem; } - - featured-card.special::before { content: "New!"; font-size: 1.4rem; @@ -432,4 +428,4 @@ featured-card.special::before { /* right: 51px; */ /* border: 2px solid #ffca62; */ pointer-events: none; -} \ No newline at end of file +} diff --git a/frontend/index.html b/frontend/index.html index a032146059..78814552d1 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -20,19 +20,25 @@ + - + - + + -
-

welcome to

+
+
+

welcome to

+
+
+

New session:

    @@ -44,7 +50,11 @@

    welcome to

-
+ + \ No newline at end of file diff --git a/frontend/welcome.css b/frontend/welcome.css new file mode 100644 index 0000000000..1f5707fd56 --- /dev/null +++ b/frontend/welcome.css @@ -0,0 +1,85 @@ +@import url("https://cdn.jsdelivr.net/npm/inter-ui@3.19.3/inter-latin.css"); + +:root { + --pluto-cell-spacing: 17px; + /* use the value "contextual" to enable contextual ligatures `document.documentElement.style.setProperty('--pluto-operator-ligatures', 'contextual');` + for julia mono see here: https://cormullion.github.io/pages/2020-07-26-JuliaMono/#contextual_and_stylistic_alternates_and_ligatures */ + --pluto-operator-ligatures: none; + --julia-mono-font-stack: JuliaMono, Menlo, "Roboto Mono", "Lucida Sans Typewriter", "Source Code Pro", monospace; + --sans-serif-font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + --lato-ui-font-stack: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Helvetica, Arial, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", system-ui, sans-serif; + --inter-ui-font-stack: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Helvetica, Arial, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", system-ui, sans-serif; + + color-scheme: light dark; +} + +html { + font-family: var(--inter-ui-font-stack); +} + +main { + display: block; + max-width: 1200px; + padding: 1rem; + margin: 0 auto; +} +/* font-size: 1.7em; */ + +header { + background: #434343; +} +header h1 { + font-weight: 500; + + /* font-style: italic; */ + text-align: center; + color: white; +} + +section#mywork { + --c1: rgba(0, 0, 0, 0.2); + --c2: rgba(0, 0, 0, 0.1); + /* background-color: #434343; */ + --grad-stops: transparent 9%, var(--c1) 10%, var(--c1) 12%, transparent 13%, + /* transparent 29%, + var(--c2) 30%, + var(--c2) 31%, + transparent 32%, + transparent 49%, + var(--c2) 50%, + var(--c2) 51%, + transparent 52%, + transparent 69%, + var(--c2) 70%, + var(--c2) 71%, + transparent 72%, + transparent 89%, + var(--c2) 90%, + var(--c2) 91%, + transparent 92%, */ + transparent; + background-size: 40px 40px; + background-position: 20px 20px; + background-image: linear-gradient(0deg, var(--grad-stops)), linear-gradient(90deg, var(--grad-stops)); +} + +.pluto-logo { + font-style: normal; + font-weight: 800; + color: inherit; + /* padding: 0.3em; */ + display: inline-flex; + flex-direction: row; + padding: 0.5em; + align-items: center; + gap: 0.5ch; + font-family: var(--inter-ui-font-stack); + transform: translateY(0.23em); +} + +.pluto-logo img { + height: 1.2em; + width: 1.2em; +} From 233568e381fd46cb16a4ccbf508409e7f5dc9d0a Mon Sep 17 00:00:00 2001 From: Fons van der Plas Date: Thu, 14 Apr 2022 12:35:28 +0200 Subject: [PATCH 09/49] asdf --- frontend/components/welcome/Open.js | 29 +++++++++++--------------- frontend/components/welcome/Recent.js | 3 ++- frontend/components/welcome/Welcome.js | 4 ++-- frontend/index.css | 9 ++------ frontend/index.html | 14 ++++--------- 5 files changed, 22 insertions(+), 37 deletions(-) diff --git a/frontend/components/welcome/Open.js b/frontend/components/welcome/Open.js index bb9abdd9e8..e015a24939 100644 --- a/frontend/components/welcome/Open.js +++ b/frontend/components/welcome/Open.js @@ -32,23 +32,18 @@ export const Open = ({ client, connected, CustomPicker, show_samples }) => { placeholder: "Enter path or URL...", } - return html`

New session:

- <${PasteHandler} /> -
    - ${show_samples && html`
  • Open a sample notebook
    • `} -
  • Create a new notebook
    • -
  • - ${picker.text}: - <${FilePicker} - key=${picker.placeholder} - client=${client} - value="" - on_submit=${on_open_path} - button_label="Open" - placeholder=${picker.placeholder} - /> -
    • -
` + return html`<${PasteHandler} /> +
+ ${picker.text}: + <${FilePicker} + key=${picker.placeholder} + client=${client} + value="" + on_submit=${on_open_path} + button_label="Open" + placeholder=${picker.placeholder} + /> +
` } // /open will execute a script from your hard drive, so we include a token in the URL to prevent a mean person from getting a bad file on your computer _using another hypothetical intrusion_, and executing it using Pluto diff --git a/frontend/components/welcome/Recent.js b/frontend/components/welcome/Recent.js index 97cfd9e456..cf9ca46f44 100644 --- a/frontend/components/welcome/Recent.js +++ b/frontend/components/welcome/Recent.js @@ -199,8 +199,9 @@ export const Recent = ({ client, connected, remote_notebooks, CustomRecent }) => if (CustomRecent == null) { return html` -

Recent sessions:

+

My work:

` diff --git a/frontend/components/welcome/Welcome.js b/frontend/components/welcome/Welcome.js index 17f275d271..6a0978127e 100644 --- a/frontend/components/welcome/Welcome.js +++ b/frontend/components/welcome/Welcome.js @@ -73,9 +73,9 @@ export const Welcome = () => { const { show_samples, CustomRecent, CustomPicker } = extended_components return html` - <${Featured} /> + <${Recent} client=${client_ref.current} connected=${connected} remote_notebooks=${remote_notebooks} CustomRecent=${CustomRecent} /> <${Open} client=${client_ref.current} connected=${connected} CustomPicker=${CustomPicker} show_samples=${show_samples} />
- <${Recent} client=${client_ref.current} connected=${connected} remote_notebooks=${remote_notebooks} CustomRecent=${CustomRecent} /> + <${Featured} /> ` } diff --git a/frontend/index.css b/frontend/index.css index 2bc2fefc68..de7a28aa24 100644 --- a/frontend/index.css +++ b/frontend/index.css @@ -332,7 +332,7 @@ featured-card { /* grid-auto-columns: 50px; */ place-items: center; align-items: start; - grid-template-columns: repeat(auto-fit, minmax(var(--card-width),1fr)); + grid-template-columns: repeat(auto-fit, minmax(var(--card-width), 1fr)); gap: 1rem; justify-items: stretch; } @@ -367,7 +367,6 @@ featured-card a { featured-card a.banner { display: flex; - } featured-card .author { @@ -401,20 +400,16 @@ featured-card h3 { margin: 0.6rem 0rem 0rem 0rem; } - featured-card.big { grid-column-end: span 2; grid-row-end: span 2; /* width: 2000px; */ } - featured-card.big .banner img { height: 16rem; } - - featured-card.special::before { content: "New!"; font-size: 1.4rem; @@ -432,4 +427,4 @@ featured-card.special::before { /* right: 51px; */ /* border: 2px solid #ffca62; */ pointer-events: none; -} \ No newline at end of file +} diff --git a/frontend/index.html b/frontend/index.html index a032146059..0c1089267b 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -32,17 +32,11 @@
-

welcome to

-

New session:

- +
+ Open from file: +

Loading...

+
From 16bff3715fa262481c34ccac49b32721019f341d Mon Sep 17 00:00:00 2001 From: Fons van der Plas Date: Thu, 14 Apr 2022 13:48:29 +0200 Subject: [PATCH 10/49] safd --- frontend/components/welcome/Featured.js | 2 +- frontend/components/welcome/Open.js | 4 +-- frontend/components/welcome/Recent.js | 2 +- frontend/components/welcome/Welcome.js | 19 +++++++++++--- frontend/index.css | 20 +++++++++----- frontend/index.html | 30 +++++++++++---------- frontend/index.js | 2 +- frontend/welcome.css | 35 +++++++++++++++++++++---- 8 files changed, 79 insertions(+), 35 deletions(-) diff --git a/frontend/components/welcome/Featured.js b/frontend/components/welcome/Featured.js index ee6dcea748..52326f1b8d 100644 --- a/frontend/components/welcome/Featured.js +++ b/frontend/components/welcome/Featured.js @@ -68,7 +68,7 @@ export const Featured = () => { ? source_data.map( (data) => html`
-

${data.source_url}

+

${data.description ?? "Blasdfjklhaksdjfh kajsdhf kajdsfh kjhasd fkjshdfkjshdf kwehfwuhefiwfk m dfsa dsfbm s dbf"}

${Object.entries(data.notebooks).map( ([id, entry]) => html` <${FeaturedCard} entry=${entry} source_url=${data.source_url} /> ` diff --git a/frontend/components/welcome/Open.js b/frontend/components/welcome/Open.js index e015a24939..b9da730d18 100644 --- a/frontend/components/welcome/Open.js +++ b/frontend/components/welcome/Open.js @@ -28,13 +28,13 @@ export const Open = ({ client, connected, CustomPicker, show_samples }) => { } const picker = CustomPicker ?? { - text: "Open from file", + text: "Open a notebook", placeholder: "Enter path or URL...", } return html`<${PasteHandler} /> +

${picker.text}

- ${picker.text}: <${FilePicker} key=${picker.placeholder} client=${client} diff --git a/frontend/components/welcome/Recent.js b/frontend/components/welcome/Recent.js index cf9ca46f44..19a5318904 100644 --- a/frontend/components/welcome/Recent.js +++ b/frontend/components/welcome/Recent.js @@ -199,7 +199,7 @@ export const Recent = ({ client, connected, remote_notebooks, CustomRecent }) => if (CustomRecent == null) { return html` -

My work:

+

My work

  • Create a new notebook
    • ${recents} diff --git a/frontend/components/welcome/Welcome.js b/frontend/components/welcome/Welcome.js index 6a0978127e..fb41678685 100644 --- a/frontend/components/welcome/Welcome.js +++ b/frontend/components/welcome/Welcome.js @@ -73,9 +73,20 @@ export const Welcome = () => { const { show_samples, CustomRecent, CustomPicker } = extended_components return html` - <${Recent} client=${client_ref.current} connected=${connected} remote_notebooks=${remote_notebooks} CustomRecent=${CustomRecent} /> - <${Open} client=${client_ref.current} connected=${connected} CustomPicker=${CustomPicker} show_samples=${show_samples} /> -
    - <${Featured} /> +
    +
    + <${Recent} client=${client_ref.current} connected=${connected} remote_notebooks=${remote_notebooks} CustomRecent=${CustomRecent} /> +
    +
    +
    +
    + <${Open} client=${client_ref.current} connected=${connected} CustomPicker=${CustomPicker} show_samples=${show_samples} /> +
    +
    + ` } diff --git a/frontend/index.css b/frontend/index.css index b3dc8b42e7..474779911b 100644 --- a/frontend/index.css +++ b/frontend/index.css @@ -7,9 +7,14 @@ @import url("light_color.css"); @import url("dark_color.css"); +@import url("https://cdn.jsdelivr.net/npm/open-props@1.3.16/open-props.min.css"); + * { box-sizing: border-box; } +html { + font-size: 17px; +} #title { /* position: absolute; */ @@ -109,7 +114,8 @@ a { pluto-filepicker { display: flex; flex-direction: row; - margin-top: 0.3rem; + /* margin-top: 0.3rem; */ + background: var(--white); } pluto-filepicker .cm-editor { @@ -233,7 +239,7 @@ body.nosessions ul#new ~ * { } #recent { - margin-bottom: 8em; + /* margin-bottom: 8em; */ max-height: 11.700000000000003em; overflow-y: scroll; } @@ -257,10 +263,10 @@ body.nosessions ul#new ~ * { #recent button > span::after { display: block; content: " "; - background-size: 17px 17px; - height: 17px; - width: 17px; - margin-bottom: -3px; + background-size: 1rem 1rem; + height: 1rem; + width: 1rem; + margin-bottom: -0.17rem; } #recent li.running button > span::after { @@ -319,7 +325,7 @@ featured-card { border-radius: var(--card-border-radius); margin: 10px; padding-bottom: 0.3rem; - box-shadow: 1px 3px 12px 3px #00000021; + box-shadow: 0px 2px 6px 0px #00000014; font-family: system-ui; position: relative; word-break: break-word; diff --git a/frontend/index.html b/frontend/index.html index ce8624455d..357b91b164 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -23,7 +23,7 @@ - + @@ -35,21 +35,23 @@
    -

    welcome to

    +

    -
    -
    -
    - Open from file: -

    Loading...

    -
    -
    -
    - +
    +
    +
    +
    + Open from file: +

    Loading...

    +
    +
    +
    + +
    \ No newline at end of file diff --git a/frontend/index.js b/frontend/index.js index 15efdd148a..4ba142026d 100644 --- a/frontend/index.js +++ b/frontend/index.js @@ -3,4 +3,4 @@ import "./common/NodejsCompatibilityPolyfill.js" import { Welcome } from "./components/welcome/Welcome.js" -render(html`<${Welcome} />`, document.querySelector("main")) +render(html`<${Welcome} />`, document.querySelector("#app")) diff --git a/frontend/welcome.css b/frontend/welcome.css index 1f5707fd56..5c7b1921c1 100644 --- a/frontend/welcome.css +++ b/frontend/welcome.css @@ -17,7 +17,7 @@ html { font-family: var(--inter-ui-font-stack); -} +font-size: 17px;} main { display: block; @@ -28,14 +28,16 @@ main { /* font-size: 1.7em; */ header { - background: #434343; + background-color: antiquewhite;/* background-image: linear-gradient(to top, white, #fff0), var(--noise-4); */ + /* filter: var(--noise-filter-1); */ + background-size: cover; } header h1 { font-weight: 500; /* font-style: italic; */ text-align: center; - color: white; + /* color: white; */ } section#mywork { @@ -62,8 +64,8 @@ section#mywork { transparent; background-size: 40px 40px; background-position: 20px 20px; - background-image: linear-gradient(0deg, var(--grad-stops)), linear-gradient(90deg, var(--grad-stops)); -} + /* background-image: linear-gradient(0deg, var(--grad-stops)), linear-gradient(90deg, var(--grad-stops)); */ +background: #f5f5f6;} .pluto-logo { font-style: normal; @@ -83,3 +85,26 @@ section#mywork { height: 1.2em; width: 1.2em; } + +#new { + background: #fbfbfb; + box-shadow: -2px 4px 9px 0px #00000012;padding: 1.3rem; + border-radius: 0.6rem; + margin: 1rem; +/* border: 0.3rem solid #d6e0d8; */} + +section { + display: grid; /* place-items: center; */ /* margin: 0rem 0rem; */ +} + +section > div { + margin: 1rem 1rem; +} + +.pluto-logo { + background: white; + border-radius: 0.4em; +} + + +section#open {background: #f5f5f6;} \ No newline at end of file From ee6622a7ea7b1a58b30e7d79c5ee1f1e3ff9465a Mon Sep 17 00:00:00 2001 From: Fons van der Plas Date: Thu, 14 Apr 2022 13:54:24 +0200 Subject: [PATCH 11/49] asdf --- frontend/index.html | 24 +++++++++++++++++------- frontend/welcome.css | 22 +++++++++++++++------- 2 files changed, 32 insertions(+), 14 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 357b91b164..b2d2c51f4b 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -40,16 +40,26 @@

+
+ +
+
+

Loading...

+
diff --git a/frontend/welcome.css b/frontend/welcome.css index 5c7b1921c1..8cd34ee4b7 100644 --- a/frontend/welcome.css +++ b/frontend/welcome.css @@ -17,7 +17,8 @@ html { font-family: var(--inter-ui-font-stack); -font-size: 17px;} + font-size: 17px; +} main { display: block; @@ -28,7 +29,7 @@ main { /* font-size: 1.7em; */ header { - background-color: antiquewhite;/* background-image: linear-gradient(to top, white, #fff0), var(--noise-4); */ + background-color: antiquewhite; /* background-image: linear-gradient(to top, white, #fff0), var(--noise-4); */ /* filter: var(--noise-filter-1); */ background-size: cover; } @@ -65,7 +66,8 @@ section#mywork { background-size: 40px 40px; background-position: 20px 20px; /* background-image: linear-gradient(0deg, var(--grad-stops)), linear-gradient(90deg, var(--grad-stops)); */ -background: #f5f5f6;} + background: #f5f5f6; +} .pluto-logo { font-style: normal; @@ -88,10 +90,15 @@ background: #f5f5f6;} #new { background: #fbfbfb; - box-shadow: -2px 4px 9px 0px #00000012;padding: 1.3rem; + box-shadow: -2px 4px 9px 0px #00000012; + padding: 1.3rem; border-radius: 0.6rem; margin: 1rem; -/* border: 0.3rem solid #d6e0d8; */} + /* border: 0.3rem solid #d6e0d8; */ + display: flex; + flex-direction: column; + align-content: stretch; +} section { display: grid; /* place-items: center; */ /* margin: 0rem 0rem; */ @@ -106,5 +113,6 @@ section > div { border-radius: 0.4em; } - -section#open {background: #f5f5f6;} \ No newline at end of file +section#open { + background: #f5f5f6; +} From 931a72cf1ed39381f6398276ee4f224e4330c80f Mon Sep 17 00:00:00 2001 From: Fons van der Plas Date: Thu, 14 Apr 2022 19:08:01 +0200 Subject: [PATCH 12/49] mooie kleurjtes mooiere kleurtjes Co-Authored-By: merlijnkersten <50485980+merlijnkersten@users.noreply.github.com> --- frontend/components/welcome/Recent.js | 8 +- frontend/index.css | 30 ++++--- frontend/index.html | 16 ++-- frontend/welcome.css | 124 ++++++++++++++++++++------ 4 files changed, 129 insertions(+), 49 deletions(-) diff --git a/frontend/components/welcome/Recent.js b/frontend/components/welcome/Recent.js index 19a5318904..8802f1a199 100644 --- a/frontend/components/welcome/Recent.js +++ b/frontend/components/welcome/Recent.js @@ -179,7 +179,7 @@ export const Recent = ({ client, connected, remote_notebooks, CustomRecent }) => })} > return html`

My work

 ` diff --git a/frontend/index.css b/frontend/index.css index 474779911b..9e7e40e852 100644 --- a/frontend/index.css +++ b/frontend/index.css @@ -87,13 +87,14 @@ p { } ul { - padding-left: 0.5em; + padding-left: 0; list-style: none; } li { white-space: nowrap; - margin-bottom: 0.9em; + padding: 0.4em; + border-bottom: 1px solid #ededed; } a { @@ -239,9 +240,12 @@ body.nosessions ul#new ~ * { } #recent { - /* margin-bottom: 8em; */ - max-height: 11.700000000000003em; + background: white; /* margin-bottom: 8em; */ + max-height: 16em; overflow-y: scroll; + border-radius: 0.4rem; + box-shadow: -2px 4px 9px 0px #00000012; + border: 0.2rem solid #d5d5d5; } #recent > li.recent { @@ -260,28 +264,30 @@ body.nosessions ul#new ~ * { color: var(--ui-button-color); } -#recent button > span::after { - display: block; +span.ionicon::after { + display: inline-block; content: " "; background-size: 1rem 1rem; height: 1rem; width: 1rem; margin-bottom: -0.17rem; + filter: var(--image-filters); } #recent li.running button > span::after { background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/close-circle.svg"); - filter: var(--image-filters); } #recent li.recent button > span::after { background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/caret-forward-circle-outline.svg"); - filter: var(--image-filters); } #recent li.transitioning button > span::after { background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/ellipsis-horizontal-outline.svg"); - filter: var(--image-filters); +} + +#recent li.new span::after { + background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/add-outline.svg"); } loading-bar { @@ -312,7 +318,7 @@ body.loading loading-bar { } :root { - --card-width: 16rem; + --card-width: 14rem; } featured-card { @@ -326,7 +332,7 @@ featured-card { margin: 10px; padding-bottom: 0.3rem; box-shadow: 0px 2px 6px 0px #00000014; - font-family: system-ui; + font-family: var(--inter-ui-font-stack); position: relative; word-break: break-word; hyphens: auto; @@ -340,7 +346,7 @@ featured-card { place-items: center; align-items: start; grid-template-columns: repeat(auto-fit, minmax(var(--card-width), 1fr)); - gap: 1rem; + gap: 0rem; justify-items: center; } diff --git a/frontend/index.html b/frontend/index.html index b2d2c51f4b..f9b92458cf 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,7 +3,7 @@ - âš¡ Pluto.jl âš¡ + Pluto.jl