2.0 UX Changes (#295)
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
+86
-141
@@ -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>`
|
||||
: ""}
|
||||
|
||||
Reference in New Issue
Block a user