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

minor ui tweaks, switch to info icon

Browse Source
This commit is contained in:
Ilya Kreymer
2020-05-12 14:07:02 -07:00
parent 7294c05d2c
commit 822d459859
2 changed files with 32 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/frontend.js
Vendored
+20 -14
View File
File diff suppressed because one or more lines are too long
src/frontend.js
+12 -6
View File
@@ -15,7 +15,7 @@ import allCssRaw from '../scss/main.scss';
//import fasArrowLeft from '@fortawesome/fontawesome-free/svgs/solid/arrow-left.svg'; //import fasArrowLeft from '@fortawesome/fontawesome-free/svgs/solid/arrow-left.svg';
//import fasInfo from '@fortawesome/fontawesome-free/svgs/solid/info-circle.svg'; //import fasInfo from '@fortawesome/fontawesome-free/svgs/solid/info-circle.svg';
import fasArchiveIcon from '@fortawesome/fontawesome-free/svgs/solid/box-open.svg'; import fasArchiveIcon from '@fortawesome/fontawesome-free/svgs/solid/info-circle.svg';
import fasRefresh from '@fortawesome/fontawesome-free/svgs/solid/redo-alt.svg'; import fasRefresh from '@fortawesome/fontawesome-free/svgs/solid/redo-alt.svg';
import fasHelp from '@fortawesome/fontawesome-free/svgs/solid/question-circle.svg'; import fasHelp from '@fortawesome/fontawesome-free/svgs/solid/question-circle.svg';
import farListAlt from '@fortawesome/fontawesome-free/svgs/solid/list-alt.svg'; import farListAlt from '@fortawesome/fontawesome-free/svgs/solid/list-alt.svg';
@@ -85,6 +85,9 @@ class AppMain extends LitElement
.navbar { .navbar {
padding: 0 0.5em; padding: 0 0.5em;
} }
.info-menu {
padding: 0 1.0em;
}
`); `);
} }
@@ -108,13 +111,16 @@ class AppMain extends LitElement
<div class="navbar-start"> <div class="navbar-start">
${this.sourceUrl && this.collInfo ? html` ${this.sourceUrl && this.collInfo ? html`
<div class="navbar-item has-dropdown is-hoverable"> <div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link is-arrowless"><fa-icon size="1.5em" .svg="${fasArchiveIcon}"></fa-icon></a> <a class="info-menu navbar-link is-arrowless"><fa-icon size="1.2em" .svg="${fasArchiveIcon}"></fa-icon></a>
<div class="navbar-dropdown"> <div class="navbar-dropdown">
<div class="navbar-item"><i>Currently Loaded Archive</i></div> <div class="navbar-item"><i>About this Archive</i></div>
<hr class="navbar-divider"> <hr class="navbar-divider">
<div class="navbar-item"> <div class="navbar-item">
Source:&nbsp;<b>${this.sourceUrl}</b> Source:&nbsp;<b>${this.sourceUrl}</b>
</div> </div>
<div class="navbar-item">
Filename:&nbsp;<b>${this.collInfo.filename}</b>
</div>
<div class="navbar-item"> <div class="navbar-item">
Total Size:&nbsp;<b>${prettyBytes(Number(this.collInfo.size || 0))}</b> Total Size:&nbsp;<b>${prettyBytes(Number(this.collInfo.size || 0))}</b>
</div> </div>
@@ -865,14 +871,14 @@ class WrColl extends LitElement
} }
} }
@media screen and (min-width: 660px) { @media screen and (min-width: 680px) {
.main.tabs { .main.tabs {
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 50%; left: 50%;
-webkit-transform: translateX(-50%); -webkit-transform: translateX(-50%);
transform: translateX(-50%); transform: translateX(-50%);
z-index: 50; z-index: 35;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
@@ -1381,7 +1387,7 @@ class WrResources extends LitElement
width: 100%; width: 100%;
} }
.main-scroll { .main-scroll {
height: calc(100vh - 220px); height: calc(100vh - 180px);
flex-grow: 1; flex-grow: 1;
width: 100vw; width: 100vw;
} }