archivalo-oss/replayweb.page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2.0 UX Changes (#295)

Browse Source 
Partially addresses #237
- Unhides the load button on smaller screen sizes
  - There's no way to actually load new web archives when this is hidden
- Minor text updates
  - Renames MIME Type to Media Type
  - Punctuation fixes
- Reorder main application controls (#237)
  - Group navigation related controls together on the left side
  - Move full screen to the right side
  - Enable navigation controls on mobile
- Renames URLs tab to Resources - now that we have more space (because we moved the archived item info
to a dialog), we can make these titles visible when space is available to do so!
  - This is now in-line with the docs (both current and new!)
This commit is contained in:
Henry Wilkinson
2024-04-07 14:52:15 -07:00
committed by GitHub
parent 88ca04e52e
commit ef6c748170
4 changed files with 91 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/chooser.ts
+1 -4
View File
@@ -295,10 +295,7 @@ export class Chooser extends LitElement {
/>
</p>
<div class="control">
<button
type="submit"
class="button is-hidden-mobile is-primary"
>
<button type="submit" class="button is-primary">
${this.newFullImport ? "Import" : "Load"}
</button>
</div>
src/item.ts
+86 -141
View File
@@ -1054,11 +1054,7 @@ class Item extends LitElement {
title="Pages"
></fa-icon
></span>
<span
class="tab-label ${isSidebar ? "is-hidden" : ""}"
title="Pages"
>Pages</span
>
<span class="tab-label" title="Pages">Pages</span>
</a>
</li>
@@ -1076,12 +1072,10 @@ class Item extends LitElement {
><fa-icon
.svg="${farResources}"
aria-hidden="true"
title="URLs"
title="Resources"
></fa-icon
></span>
<span class="tab-label ${isSidebar ? "is-hidden" : ""}" title="URLs"
>URLs</span
>
<span class="tab-label" title="Resources">Resources</span>
</a>
</li>
@@ -1127,86 +1121,6 @@ class Item extends LitElement {
>
<nav class="replay-bar" aria-label="replay">
<div class="field has-addons">
<a
href="#"
role="button"
class="button narrow is-borderless is-hidden-touch"
id="fullscreen"
@click="${this.onFullscreenToggle}"
@keyup="${clickOnSpacebarPress}"
title="${this.isFullscreen ? "Exit Full Screen" : "Full Screen"}"
aria-label="${this.isFullscreen ? "Exit Fullscreen" : "Fullscreen"}"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${this.isFullscreen ? fasUnfullscreen : fasFullscreen}"
></fa-icon>
</span>
</a>
<a
href="#"
role="button"
class="button narrow is-borderless is-hidden-mobile"
@click="${this.onGoBack}"
@keyup="${clickOnSpacebarPress}"
title="Back"
aria-label="Back"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${fasLeft}"
></fa-icon>
</span>
</a>
<a
href="#"
role="button"
class="button narrow is-borderless is-hidden-mobile"
@click="${this.onGoForward}"
@keyup="${clickOnSpacebarPress}"
title="Forward"
aria-label="Forward"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${fasRight}"
></fa-icon>
</span>
</a>
<a
href="#"
role="button"
class="button narrow is-borderless ${this.isLoading
? "is-loading"
: "is-hidden-mobile"}"
id="refresh"
@click="${this.onRefresh}"
@keyup="${clickOnSpacebarPress}"
title="Reload"
aria-label="Reload"
>
<span class="icon is-small">
${!this.isLoading
? html`
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${fasRefresh}"
></fa-icon>
`
: ""}
</span>
</a>
${this.browsable
? html` <a
href="#"
@@ -1231,6 +1145,67 @@ class Item extends LitElement {
</span>
</a>`
: ""}
<a
href="#"
role="button"
class="button narrow is-borderless"
@click="${this.onGoBack}"
@keyup="${clickOnSpacebarPress}"
title="Back"
aria-label="Back"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${fasLeft}"
></fa-icon>
</span>
</a>
<a
href="#"
role="button"
class="button narrow is-borderless"
@click="${this.onGoForward}"
@keyup="${clickOnSpacebarPress}"
title="Forward"
aria-label="Forward"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${fasRight}"
></fa-icon>
</span>
</a>
<a
href="#"
role="button"
class="button narrow is-borderless ${this.isLoading
? "is-loading"
: ""}"
id="refresh"
@click="${this.onRefresh}"
@keyup="${clickOnSpacebarPress}"
title="Reload"
aria-label="Reload"
>
<span class="icon is-small">
${!this.isLoading
? html`
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${fasRefresh}"
></fa-icon>
`
: ""}
</span>
</a>
${this.renderExtraToolbar()}
<form @submit="${this.onSubmit}">
<div
@@ -1258,6 +1233,27 @@ class Item extends LitElement {
class="dropdown is-right ${this.menuActive ? "is-active" : ""}"
@click="${() => (this.menuActive = false)}"
>
<a
href="#"
role="button"
class="button narrow is-borderless is-hidden-touch"
id="fullscreen"
@click="${this.onFullscreenToggle}"
@keyup="${clickOnSpacebarPress}"
title="${this.isFullscreen ? "Exit Full Screen" : "Full Screen"}"
aria-label="${this.isFullscreen
? "Exit Fullscreen"
: "Fullscreen"}"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${this.isFullscreen ? fasUnfullscreen : fasFullscreen}"
></fa-icon>
</span>
</a>
<div class="dropdown-trigger">
<button
class="button is-borderless"
@@ -1298,57 +1294,6 @@ class Item extends LitElement {
</span>
<span>Full Screen</span>
</a>
<a
href="#"
role="button"
class="dropdown-item is-hidden-tablet"
@click="${this.onGoBack}"
@keyup="${clickOnSpacebarPress}"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${fasLeft}"
></fa-icon>
</span>
<span>Back</span>
</a>
<a
href="#"
role="button"
class="dropdown-item is-hidden-tablet"
@click="${this.onGoForward}"
@keyup="${clickOnSpacebarPress}"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${fasRight}"
></fa-icon>
</span>
<span>Forward</span>
</a>
<a
href="#"
role="button"
class="dropdown-item is-hidden-tablet"
@click="${this.onRefresh}"
@keyup="${clickOnSpacebarPress}"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${fasRefresh}"
></fa-icon>
</span>
<span>Reload</span>
</a>
${this.browsable
? html` <a
href="#"
@@ -1413,7 +1358,7 @@ class Item extends LitElement {
: html``}
${dateStr
? html` <hr class="dropdown-divider is-hidden-desktop" />
<div class="dropdown-item info is-hidden-desktop">
<div class="dropdown-item info is-hidden-tablet">
<span class="menu-head">Capture Date</span>${dateStr}
</div>`
: ""}
src/pages.ts
+1 -1
View File
@@ -612,7 +612,7 @@ class Pages extends LitElement {
@input="${this.onChangeQuery}"
.value="${this.query}"
type="text"
placeholder="Search by Page URL, Title or Text"
placeholder="Search by Page URL, Title, or Text"
/>
<span class="icon is-left"
><fa-icon .svg="${fasSearch}" aria-hidden="true"></fa-icon
src/url-resources.ts
+3 -3
View File
@@ -63,7 +63,7 @@ class URLResources extends LitElement {
},
{
key: "mime",
name: "Mime Type",
name: "Media Type",
},
{
key: "status",
@@ -504,7 +504,7 @@ class URLResources extends LitElement {
? "desc"
: "asc"
: ""}"
>Mime Type</a
>Media Type</a
>
</th>
<th scope="col" class="column col-status is-1 is-hidden-mobile">
@@ -552,7 +552,7 @@ class URLResources extends LitElement {
${new Date(result.date).toLocaleString()}
</td>
<td class="column col-mime is-3">
<p class="minihead is-hidden-tablet">Mime Type</p>
<p class="minihead is-hidden-tablet">Media Type</p>
${result.mime}
</td>
<td class="column col-status is-1">