tea/browsertrix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adds documentation link and version copy button to footer (#920)

Browse Source 
* Updates footer

- Adds documentation link
- Adds label to GitHub link, moves outside of the version code
- Adds copy button to version code for quick access when filing bug reports :)

* Comments out invisible div

* Improves responsiveness on mobile
This commit is contained in:
Henry Wilkinson 2023-06-12 20:51:21 -04:00 committed by GitHub
parent ec3404c798
commit 71e9984e65
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 38 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/index.ts
View File

@ -470,31 +470,55 @@ export class App extends LiteElement {
private renderFooter() {
return html`
<footer
class="w-full max-w-screen-lg mx-auto p-1 md:p-3 box-border flex justify-end"
class="w-full max-w-screen-lg mx-auto p-3 box-border flex flex-col gap-4 md:flex-row justify-between"
>
<div>
<!-- <div> -->
<!-- TODO re-enable when translations are added -->
<!-- <btrix-locale-picker></btrix-locale-picker> -->
<!-- </div> -->
<div class="flex items-center justify-center">
<a
class="text-neutral-400"
class="text-neutral-400 flex items-center gap-2 hover:text-primary"
href="https://github.com/webrecorder/browsertrix-cloud"
target="_blank"
rel="noopener"
>
${this.version
? html`
<span class="inline-block align-middle text-mono text-xs">
${this.version}
</span>
`
: ""}
<sl-icon
name="github"
class="inline-block align-middle ml-1"
class="inline-block align-middle text-base"
></sl-icon>
Source Code
</a>
</div>
<div>
<!-- TODO re-enable when translations are added -->
<!-- <btrix-locale-picker></btrix-locale-picker> -->
<div class="flex items-center justify-center">
<a
class="text-neutral-400 flex items-center gap-2 hover:text-primary"
href="https://docs.browsertrix.cloud"
target="_blank"
rel="noopener"
>
<sl-icon
name="book-half"
class="inline-block align-middle text-base"
></sl-icon>
Documentation
</a>
</div>
<div class="flex items-center justify-center">
${this.version
? html`
<btrix-copy-button
class="text-neutral-400"
.getValue=${() => this.version}
content=${msg("Copy Version Code")}
></btrix-copy-button>
<span
class="inline-block align-middle font-monostyle text-xs text-neutral-400"
>
${this.version}
</span>
`
: ""}
</div>
</footer>
`;