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

move tabs below location bar

Browse Source 
pages: move sidebar below search bar, hide if no lists
use 'min-height: 0' to finally fix flexbox layout on all tabs!
This commit is contained in:
Ilya Kreymer
2020-08-04 23:12:44 -07:00
parent bb20379336
commit 6b343e7e65
4 changed files with 191 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/coll.js
+29 -33
View File
@@ -7,6 +7,7 @@ import fasBook from '@fortawesome/fontawesome-free/svgs/solid/book.svg';
import farListAlt from '@fortawesome/fontawesome-free/svgs/regular/list-alt.svg'; import farListAlt from '@fortawesome/fontawesome-free/svgs/regular/list-alt.svg';
import farResources from '@fortawesome/fontawesome-free/svgs/regular/file-code.svg'; import farResources from '@fortawesome/fontawesome-free/svgs/regular/file-code.svg';
import farPages from '@fortawesome/fontawesome-free/svgs/regular/file-image.svg';
import farPlayCircle from '@fortawesome/fontawesome-free/svgs/regular/play-circle.svg'; import farPlayCircle from '@fortawesome/fontawesome-free/svgs/regular/play-circle.svg';
@@ -238,31 +239,29 @@ class Coll extends LitElement
font-weight: bold; font-weight: bold;
} }
.tab-label {
display: inline;
}
@media screen and (max-width: ${!IS_APP ? css`1053px` : css`1163px`}) {
.tab-label { .tab-label {
display: none; display: none;
} }
@media screen and (min-width: ${!IS_APP ? css`1054px` : css`1164px`}) { .main.tabs span.icon {
.tab-label { margin: 0px;
display: inline;
} }
} }
.main.tabs { .main.tabs {
position: absolute;
top: 0px;
left: 50%;
min-height: 41px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 35;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-bottom: 0px;
} }
.main.tabs li { .main.tabs li {
line-height: 1.5; line-height: 1.5;
padding-top: 0.5em; padding: 8px 0 6px 0;
} }
@media screen and (max-width: 319px) { @media screen and (max-width: 319px) {
@@ -270,10 +269,6 @@ class Coll extends LitElement
padding-right: 4px; padding-right: 4px;
padding-left: 4px; padding-left: 4px;
} }
.tabs span.icon {
margin: 0px !important;
}
} }
#contents { #contents {
@@ -362,8 +357,22 @@ class Coll extends LitElement
} else if (this.collInfo) { } else if (this.collInfo) {
return html` return html`
<nav id="contents" class="is-light"> <nav id="contents" class="is-light">
${!this.embed || this.embed === "full" ? html` ${this.renderLocationBar()}
<div class="main tabs has-background-info is-centered"> ${this.renderTabHeader()}
${this.renderCollTabs()}
</nav>`;
} else {
return html``;
}
}
renderTabHeader() {
if (this.tabData.view === "replay" || (this.embed && this.embed !== "full")) {
return "";
}
return html`
<div class="main tabs is-centered">
<ul> <ul>
${this.hasStory ? html` ${this.hasStory ? html`
<li class="${this.tabData.view === 'story' ? 'is-active' : ''}"> <li class="${this.tabData.view === 'story' ? 'is-active' : ''}">
@@ -375,7 +384,7 @@ class Coll extends LitElement
<li class="${this.tabData.view === 'pages' ? 'is-active' : ''}"> <li class="${this.tabData.view === 'pages' ? 'is-active' : ''}">
<a @click="${this.onTabClick}" href="#pages" class="is-size-6"> <a @click="${this.onTabClick}" href="#pages" class="is-size-6">
<span class="icon"><fa-icon .svg="${farListAlt}"></fa-icon></span> <span class="icon"><fa-icon .svg="${farPages}"></fa-icon></span>
<span class="tab-label" title="Pages">Pages</span> <span class="tab-label" title="Pages">Pages</span>
</a> </a>
</li> </li>
@@ -386,21 +395,8 @@ class Coll extends LitElement
<span class="tab-label" title="URL Resources">Page Resources</span> <span class="tab-label" title="URL Resources">Page Resources</span>
</a> </a>
</li> </li>
<li class="${this.tabData.view === 'replay' ? 'is-active' : ''}">
<a @click="${this.onTabClick}" href="#replay" class="is-size-6">
<span class="icon"><fa-icon .svg="${farPlayCircle}"></fa-icon></span>
<span class="tab-label" title="Replay">Replay</span>
</a>
</li>
</ul> </ul>
</div>` : ``} </div>`;
${this.renderLocationBar()}
${this.renderCollTabs()}
</nav>`;
} else {
return html``;
}
} }
renderLocationBar() { renderLocationBar() {
@@ -586,7 +582,7 @@ class Coll extends LitElement
} }
onGoPages() { onGoPages() {
this.navigateTo(RWP_SCHEME + "view=pages"); this.updateTabData({view: "pages"});
} }
onReAuthed(event) { onReAuthed(event) {
src/pages.js
+74 -51
View File
@@ -33,6 +33,8 @@ class Pages extends LitElement
this.changeNeeded = false; this.changeNeeded = false;
this.selectedPages = new Set(); this.selectedPages = new Set();
this.menuActive = false;
} }
static get sortKeys() { static get sortKeys() {
@@ -62,7 +64,9 @@ class Pages extends LitElement
editable: { type: Boolean }, editable: { type: Boolean },
selectedPages: { type: Set }, selectedPages: { type: Set },
allSelected: { type: Boolean } allSelected: { type: Boolean },
menuActive: {type: Boolean },
} }
} }
@@ -166,23 +170,23 @@ class Pages extends LitElement
.columns { .columns {
width: 100%; width: 100%;
justify-self: stretch; justify-self: stretch;
margin-left: 0; margin: 1.0em 0 0 0;
min-height: 0px;
} }
.column.main-content { .column.main-content {
margin: 12px 0px 0px 0px; min-height: 0px;
padding: 0 0.75em 0 0.75em;
max-height: calc(100% - 0.75em);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(100% - 1.2em); padding: 0px;
margin-top: 0.5em;
margin-left: 0.75em;
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.columns { .columns {
max-height: 100%; max-height: 100%;
height: 100%; height: 100%;
margin-top: 0.75em;
} }
.column.sidebar { .column.sidebar {
@@ -226,16 +230,15 @@ class Pages extends LitElement
flex-direction: column; flex-direction: column;
flex: auto; flex: auto;
height: 100%; height: 100%;
margin-bottom: 1.0em;
} }
.selected { .selected {
background-color: ghostwhite; background-color: ghostwhite;
} }
.panel-block:last-child {
border-bottom: 1px solid rgb(237, 237, 237);
}
.panel-block { .panel-block {
border-left: 1px solid rgb(237, 237, 237); border: 1px solid rgb(237, 237, 237);
border-right: 1px solid rgb(237, 237, 237); padding: 0.75em 1.25em;
} }
.status.level { .status.level {
width: 100%; width: 100%;
@@ -247,8 +250,14 @@ class Pages extends LitElement
flex: auto; flex: auto;
height: 100%; height: 100%;
} }
.light-blue {
background-color: #97e7ff; .search-bar {
width: 100%;
display: flex;
flex-direction: row;
}
.flex-auto {
flex: auto;
} }
`); `);
} }
@@ -262,46 +271,45 @@ class Pages extends LitElement
const currList = this.currList; const currList = this.currList;
return html` return html`
<div class="columns"> <div class="search-bar notification is-marginless">
<div class="column sidebar is-one-fifth"> <div class="field flex-auto">
<aside class="menu">
<ul class="menu-list">
<li>
<a href="#list-0" data-list="0" class="${currList === 0 ? 'is-active' : ''}"
@click=${this.onSelectList}>All Pages</a>
${this.collInfo.lists.length ? html`
<p class="menu-label">Page Lists</p>
<ul class="menu-list">${this.collInfo.lists.map(list => html`
<li>
<a @click=${this.onSelectList} href="#list-${list.id}"
data-list="${list.id}"
class="${currList === list.id ? 'is-active' : ''}">${list.title}</a>
</li>`)}
</ul>` : ``}
</li>
</ul>
</aside>
</div>
<div class="column main-content">
${this.renderPages()}
</div>
</div>`
}
renderPages() {
const name = this.currList === 0 ? "All Pages" : this.collInfo.lists[this.currList - 1].title;
return html`
<nav class="panel">
<div class="panel-heading light-blue">${this.collInfo.title} - ${name}</div>
<div class="panel-block">
<div class="control has-icons-left ${this.loading ? 'is-loading' : ''}"> <div class="control has-icons-left ${this.loading ? 'is-loading' : ''}">
<input type="text" class="input" @input="${this.onChangeQuery}" .value="${this.query}" type="text" <input type="text" class="input" @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}"/></span> <span class="icon is-left"><fa-icon .svg="${fasSearch}"/></span>
</div> </div>
</div> </div>
<div class="panel-block"> </div>
${this.renderPageHeader()}
<div class="columns">
${this.collInfo.lists.length ? html`
<div class="column sidebar is-one-fifth">
<aside class="menu">
<p class="menu-label">Filter By List:</p>
<ul class="menu-list">
<li>
<a href="#list-0" data-list="0" class="${currList === 0 ? 'is-active' : ''}"
@click=${this.onSelectList}>All Pages</a>
<ul class="menu-list">${this.collInfo.lists.map(list => html`
<li>
<a @click=${this.onSelectList} href="#list-${list.id}"
data-list="${list.id}"
class="${currList === list.id ? 'is-active' : ''}">${list.title}</a>
</li>`)}
</ul>
</li>
</ul>
</aside>
</div>` : ``}
<div class="column main-content">
${this.renderPages()}
</div>
</div>`;
}
renderPageHeader() {
return html`
<div class="panel-block page-header">
<div class="status level is-mobile"> <div class="status level is-mobile">
<div class="level-left"> <div class="level-left">
${this.editable ? html` ${this.editable ? html`
@@ -357,18 +365,33 @@ class Pages extends LitElement
</wr-sorter>` : ``} </wr-sorter>` : ``}
</div> </div>
</div> </div>
</div> </div>`;
}
renderPages() {
//const name = this.currList === 0 ? "All Pages" : this.collInfo.lists[this.currList - 1].title;
return html`
<div class="scroller" @scroll="${this.onScroll}"> <div class="scroller" @scroll="${this.onScroll}">
${this.sortedPages.map((p) => html` ${this.sortedPages.map((p) => html`
<div class="panel-block ${this.selectedPages.has(p.id) ? 'selected' : ''}"> <div class="content ${this.selectedPages.has(p.id) ? 'selected' : ''}">
<wr-page-entry .editable="${this.editable}" .selected="${this.selectedPages.has(p.id)}" @sel-page="${this.onSelectToggle}" @delete-page="${this.onDeletePage}" replayPrefix="${this.collInfo.replayPrefix}" query="${this.query}" .page="${p}"> <wr-page-entry .editable="${this.editable}" .selected="${this.selectedPages.has(p.id)}" @sel-page="${this.onSelectToggle}" @delete-page="${this.onDeletePage}" replayPrefix="${this.collInfo.replayPrefix}" query="${this.query}" .page="${p}">
</wr-page-entry> </wr-page-entry>
</div>`)} </div>`)}
</div> </div>
</nav>
`; `;
} }
onMenu(event) {
event.stopPropagation();
this.menuActive = !this.menuActive;
if (this.menuActive) {
document.addEventListener("click", () => {
this.menuActive = false;
}, {once: true});
}
}
onSelectToggle(event) { onSelectToggle(event) {
const {page, selected} = event.detail; const {page, selected} = event.detail;
if (selected) { if (selected) {
src/story.js
+15 -12
View File
@@ -83,6 +83,11 @@ class Story extends LitElement
static get styles() { static get styles() {
return wrapCss(css` return wrapCss(css`
:host { :host {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
@@ -90,17 +95,16 @@ class Story extends LitElement
.columns { .columns {
width: 100%; width: 100%;
justify-self: stretch; justify-self: stretch;
margin-left: 0; margin: 1.0em 0 0 0;
min-height: 0;
} }
.column.main-content { .column.main-content {
margin: 12px 0px 0px 0px; min-height: 0;
padding: 0px;
max-height: calc(100% - 0.75em);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: min-content; padding: 0px;
padding-left: 0.75em; margin-left: 0.75em;
} }
.column.main-content.main-scroll { .column.main-content.main-scroll {
@@ -111,11 +115,12 @@ class Story extends LitElement
ul.menu-list a.is-active { ul.menu-list a.is-active {
background-color: #55be6f; background-color: #55be6f;
} }
ol {
margin-left: 30px;
}
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.columns { .columns {
max-height: 100%;
height: 100%;
margin-top: 0.75em; margin-top: 0.75em;
} }
@@ -128,8 +133,6 @@ class Story extends LitElement
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
.columns { .columns {
position: relative; position: relative;
max-height: 100%;
height: 100%;
} }
.column.sidebar { .column.sidebar {
@@ -165,7 +168,7 @@ class Story extends LitElement
<aside class="menu"> <aside class="menu">
<ul class="menu-list"> <ul class="menu-list">
<li> <li>
<a href="#list-0" data-list="0" class="${currListNum === 0 ? 'is-active' : ''}" <a href="#list-0" data-list="0" class="${currListNum === 0 ? 'is-active' : ''} menu-label is-size-4"
@click=${this.onClickScroll}>${this.collInfo.title}</a> @click=${this.onClickScroll}>${this.collInfo.title}</a>
<ul class="menu-list">${this.collInfo.lists.map(list => html` <ul class="menu-list">${this.collInfo.lists.map(list => html`
<li> <li>
@@ -197,7 +200,7 @@ class Story extends LitElement
<hr/> <hr/>
<h3>${list.title}</h3> <h3>${list.title}</h3>
<p>${list.desc}</p> <p>${list.desc}</p>
<ol style="margin-left: 30px"> <ol>
${this.curatedPageMap[list.id] ? this.curatedPageMap[list.id].map((p) => this.renderCPage(p)) : html``} ${this.curatedPageMap[list.id] ? this.curatedPageMap[list.id].map((p) => this.renderCPage(p)) : html``}
</ol> </ol>
</div> </div>
src/url-resources.js
+9 -2
View File
@@ -197,15 +197,16 @@ class URLResources extends LitElement
static get styles() { static get styles() {
return wrapCss(css` return wrapCss(css`
:host { :host {
width: 100%;
height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%;
} }
.notification { .notification {
width: 100%; width: 100%;
} }
.main-scroll { .main-scroll {
height: calc(100vh - 180px); /*height: calc(100vh - 180px);*/
flex-grow: 1; flex-grow: 1;
width: 100vw; width: 100vw;
} }
@@ -214,6 +215,12 @@ class URLResources extends LitElement
word-wrap: break-word; word-wrap: break-word;
text-overflow: ellipsis; text-overflow: ellipsis;
height: 100%; height: 100%;
display: flex;
flex-direction: column;
min-height: 0;
}
thead {
display: table;
} }
tr > th { tr > th {
cursor: pointer; cursor: pointer;