From 40c2e937dc954e7e05def1cd1fc90cdef9eae14b Mon Sep 17 00:00:00 2001 From: Ilya Kreymer Date: Mon, 7 Dec 2020 22:37:08 -0800 Subject: [PATCH] ui improvements: - condense navbar, always show with breadcrumbs for collection title and current page - add update-title event to propagate replay page title for breadcrumb, also updates document.title - appmain: make app component more extensible, make coll-index also extensible with custom coll info component - condense index view headers - bump to 1.3.2 --- assets/main.scss | 9 +- package.json | 6 +- src/appmain.js | 194 ++++++++++----- src/chooser.js | 7 +- src/coll-index.js | 36 ++- src/coll.js | 87 +++---- src/misc.js | 3 +- src/pages.js | 2 +- src/replay.js | 8 +- sw.js | 12 +- ui.js | 594 ++++++++++++++++++++++++---------------------- webpack.config.js | 23 +- yarn.lock | 16 +- 13 files changed, 559 insertions(+), 438 deletions(-) diff --git a/assets/main.scss b/assets/main.scss index 7bc54b0..d916a2b 100644 --- a/assets/main.scss +++ b/assets/main.scss @@ -22,6 +22,7 @@ $light: $wr-light-green; $dark: $wr-dark-green; $navbar-breakpoint: 840px; +$navbar-height: 2.0rem; // Set placeholder contrast to ~4.5:1 for WCAG AA compliance $input-placeholder-color: #757575; @@ -44,10 +45,10 @@ a:focus { background-color: $dark !important; color: white !important; } -.button.is-warning:focus, .button.is-warning:hover, .button.is-warning:active { - background-color: $wr-dark-yellow !important; - color: black !important; -} +//.button.is-warning:focus, .button.is-warning:hover, .button.is-warning:active { +// background-color: $wr-dark-yellow !important; +// color: black !important; +//} .replay-bar .button { margin: 0 1px; diff --git a/package.json b/package.json index 2336705..369401d 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "replaywebpage", "productName": "ReplayWeb.page", - "version": "1.3.1", + "version": "1.3.2", "description": "Serverless Web Archive Replay", "repository": "https://github.com/webrecorder/replayweb.page", "homepage": "https://replayweb.page/", @@ -9,13 +9,13 @@ "license": "AGPL-3.0-or-later", "dependencies": { "@fortawesome/fontawesome-free": "^5.13.0", - "@webrecorder/wabac": "^2.3.1", + "@webrecorder/wabac": "^2.3.2", "bulma": "^0.9.0", "fetch-ndjson": "^1.1.0", "flexsearch": "^0.6.32", "ipfs-core": "^0.2.0", "keyword-mark-element": "^0.1.2", - "lit-element": "^2.3.1", + "lit-element": "^2.4.0", "marked": "^1.0.0", "mime-types": "^2.1.27", "minimist": "^1.2.5", diff --git a/src/appmain.js b/src/appmain.js index 86f80e9..9b1d114 100644 --- a/src/appmain.js +++ b/src/appmain.js @@ -9,24 +9,35 @@ import fasArrowRight from '@fortawesome/fontawesome-free/svgs/solid/arrow-right. // =========================================================================== -class App extends LitElement +class ReplayWebApp extends LitElement { - constructor() { super(); this.sourceUrl = null; - this.collInfo = null; + this.collTitle = null; this.showAbout = false; this.pageParams = {}; this.inited = false; this.navMenuShown = false; + this.collPageUrl = ""; + this.pageTitle = ""; + this.pageReplay = false; + registerSW(__SW_NAME__); this.safariKeyframes(); } + get appName() { + return "ReplayWeb.page"; + } + + get homeUrl() { + return "/"; + } + static get properties() { return { inited: { type: Boolean }, @@ -34,19 +45,39 @@ class App extends LitElement sourceUrl: { type: String }, navMenuShown: { type: Boolean }, showAbout: { type: Boolean }, - collInfo: { type: Object }, + collTitle: { type: String }, loadInfo: { type: Object }, embed: { type: String }, + collPageUrl: { type: String }, + pageTitle: { type: String }, + pageReplay: { type: Boolean }, } } static get styles() { - return wrapCss(css` + return wrapCss(ReplayWebApp.appStyles); + } + + static get appStyles() { + return css` #wrlogo { - max-height: 2.5rem; + max-height: 1.0rem; + } + .navbar { + height: 1.5rem; + } + .navbar-brand { + height: 1.5rem; + display: flex; + align-items: center; } .wr-logo-item { - padding-right: 8px; + padding: 0 8px 0 0; + } + .no-wrap { + white-space: nowrap; + overflow-x: hidden; + text-overflow: ellipsis; } .has-allcaps { font-variant-caps: small-caps; @@ -91,7 +122,7 @@ class App extends LitElement .logo-text { padding-left: 0px; - margin-left: 8px; + margin-left: 6px; } a.navbar-item.logo-text:hover { @@ -105,36 +136,41 @@ class App extends LitElement } } - `); + `; + } + + get mainLogo() { + return rwpLogo; + } + + renderNavBrand() { + return html` + + replay + web.page + Home + `; } renderNavBar() { - - } - - render() { - if (!this.inited) { - return html``; - } - - const showNavBar = !this.collInfo && (!this.embed || this.embed === "full"); - return html` - ${showNavBar ? html`

Skipped

- ` : ''} + ` : html``} + +

Skipped

`; + } - ${this.sourceUrl ? html` + renderNavEnd() { + return html` + +  User Docs + + + About + ` + } + renderColl() { + return html` this.showAbout = true}> - ` : html` + @about-show=${(e) => this.showAbout = true}>`; + } - + renderHomeIndex() { + return html` + ${!IS_APP ? html`

Explore and Replay Interactive Archived Webpages Directly in your Browser. (See Examples)

` : ``} - - `} + `; + } - ${this.showAbout ? this.renderAbout() : ``} + render() { + if (!this.inited) { + return html``; + } + + return html` + ${!this.embed || this.embed === "full" ? this.renderNavBar() : ''} + + ${this.sourceUrl ? this.renderColl() : this.renderHomeIndex()} + + ${this.showAbout ? this.renderAbout() : ``} `; } @@ -208,7 +260,7 @@ class App extends LitElement updated(changedProperties) { if (changedProperties.has("sourceUrl")) { - this.collInfo = null; + this.collTitle = null; } } @@ -328,13 +380,16 @@ class App extends LitElement // just redirect right away? this.pageParams.set("source", event.detail.sourceUrl); + const url = new URL(window.location.href); + url.search = this.pageParams.toString(); + this.collPageUrl = url.toString(); + if (!event.detail.isFile) { window.location.search = this.pageParams.toString(); return; } else { - const url = new URL(window.location.href); - url.search = this.pageParams.toString(); - window.history.pushState({}, "", url.toString()); + + window.history.pushState({}, "", this.collPageUrl); } this.sourceUrl = event.detail.sourceUrl; @@ -344,7 +399,7 @@ class App extends LitElement onCollLoaded(event) { this.loadInfo = null; if (event.detail.collInfo) { - this.collInfo = event.detail.collInfo; + this.collTitle = event.detail.collInfo.title; } if (event.detail.alreadyLoaded) { @@ -360,6 +415,15 @@ class App extends LitElement } } + onTitle(event) { + if (event.detail.title) { + this.pageTitle = event.detail.title; + this.pageReplay = event.detail.replayTitle; + + document.title = (event.detail.replayTitle ? "Archive of " : "") + this.pageTitle + " | ReplayWeb.page"; + } + } + safariKeyframes() { // Safari requires keyframes at the document level, add spinner keyframes here const css = ` @@ -442,6 +506,6 @@ class App extends LitElement } } -customElements.define("replay-app-main", App); +customElements.define("replay-app-main", ReplayWebApp); -export { App }; +export { ReplayWebApp }; diff --git a/src/chooser.js b/src/chooser.js index d5583da..c90604b 100644 --- a/src/chooser.js +++ b/src/chooser.js @@ -108,7 +108,7 @@ class Chooser extends LitElement min-width: 0; } .extra-padding { - padding: 2em; + padding: 1.5em; } .less-padding { padding-top: 1.0em; @@ -119,6 +119,7 @@ class Chooser extends LitElement } .panel-heading { background-color: #cff3ff; + font-size: 0.85rem; } form { flex-grow: 1; @@ -154,9 +155,9 @@ class Chooser extends LitElement return html`
-

Load Web Archive

+

Load Web Archive

-
+