move tabs below location bar
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
+29
-33
@@ -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 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';
|
||||
|
||||
|
||||
@@ -238,31 +239,29 @@ class Coll extends LitElement
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tab-label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@media screen and (max-width: ${!IS_APP ? css`1053px` : css`1163px`}) {
|
||||
.tab-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: ${!IS_APP ? css`1054px` : css`1164px`}) {
|
||||
.tab-label {
|
||||
display: inline;
|
||||
.main.tabs span.icon {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.main.tabs {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
min-height: 41px;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
z-index: 35;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.main.tabs li {
|
||||
line-height: 1.5;
|
||||
padding-top: 0.5em;
|
||||
padding: 8px 0 6px 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 319px) {
|
||||
@@ -270,10 +269,6 @@ class Coll extends LitElement
|
||||
padding-right: 4px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.tabs span.icon {
|
||||
margin: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
#contents {
|
||||
@@ -362,8 +357,22 @@ class Coll extends LitElement
|
||||
} else if (this.collInfo) {
|
||||
return html`
|
||||
<nav id="contents" class="is-light">
|
||||
${!this.embed || this.embed === "full" ? html`
|
||||
<div class="main tabs has-background-info is-centered">
|
||||
${this.renderLocationBar()}
|
||||
${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>
|
||||
${this.hasStory ? html`
|
||||
<li class="${this.tabData.view === 'story' ? 'is-active' : ''}">
|
||||
@@ -375,7 +384,7 @@ class Coll extends LitElement
|
||||
|
||||
<li class="${this.tabData.view === 'pages' ? 'is-active' : ''}">
|
||||
<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>
|
||||
</a>
|
||||
</li>
|
||||
@@ -386,21 +395,8 @@ class Coll extends LitElement
|
||||
<span class="tab-label" title="URL Resources">Page Resources</span>
|
||||
</a>
|
||||
</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>
|
||||
</div>` : ``}
|
||||
${this.renderLocationBar()}
|
||||
${this.renderCollTabs()}
|
||||
</nav>`;
|
||||
} else {
|
||||
return html``;
|
||||
}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
renderLocationBar() {
|
||||
@@ -586,7 +582,7 @@ class Coll extends LitElement
|
||||
}
|
||||
|
||||
onGoPages() {
|
||||
this.navigateTo(RWP_SCHEME + "view=pages");
|
||||
this.updateTabData({view: "pages"});
|
||||
}
|
||||
|
||||
onReAuthed(event) {
|
||||
|
||||
+74
-51
@@ -33,6 +33,8 @@ class Pages extends LitElement
|
||||
this.changeNeeded = false;
|
||||
|
||||
this.selectedPages = new Set();
|
||||
|
||||
this.menuActive = false;
|
||||
}
|
||||
|
||||
static get sortKeys() {
|
||||
@@ -62,7 +64,9 @@ class Pages extends LitElement
|
||||
editable: { type: Boolean },
|
||||
|
||||
selectedPages: { type: Set },
|
||||
allSelected: { type: Boolean }
|
||||
allSelected: { type: Boolean },
|
||||
|
||||
menuActive: {type: Boolean },
|
||||
}
|
||||
}
|
||||
|
||||
@@ -166,23 +170,23 @@ class Pages extends LitElement
|
||||
.columns {
|
||||
width: 100%;
|
||||
justify-self: stretch;
|
||||
margin-left: 0;
|
||||
margin: 1.0em 0 0 0;
|
||||
min-height: 0px;
|
||||
}
|
||||
|
||||
.column.main-content {
|
||||
margin: 12px 0px 0px 0px;
|
||||
padding: 0 0.75em 0 0.75em;
|
||||
max-height: calc(100% - 0.75em);
|
||||
min-height: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 1.2em);
|
||||
padding: 0px;
|
||||
margin-top: 0.5em;
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.columns {
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
.column.sidebar {
|
||||
@@ -226,16 +230,15 @@ class Pages extends LitElement
|
||||
flex-direction: column;
|
||||
flex: auto;
|
||||
height: 100%;
|
||||
margin-bottom: 1.0em;
|
||||
}
|
||||
.selected {
|
||||
background-color: ghostwhite;
|
||||
}
|
||||
.panel-block:last-child {
|
||||
border-bottom: 1px solid rgb(237, 237, 237);
|
||||
}
|
||||
|
||||
.panel-block {
|
||||
border-left: 1px solid rgb(237, 237, 237);
|
||||
border-right: 1px solid rgb(237, 237, 237);
|
||||
border: 1px solid rgb(237, 237, 237);
|
||||
padding: 0.75em 1.25em;
|
||||
}
|
||||
.status.level {
|
||||
width: 100%;
|
||||
@@ -247,8 +250,14 @@ class Pages extends LitElement
|
||||
flex: auto;
|
||||
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;
|
||||
|
||||
return html`
|
||||
<div class="columns">
|
||||
<div class="column sidebar is-one-fifth">
|
||||
<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="search-bar notification is-marginless">
|
||||
<div class="field flex-auto">
|
||||
<div class="control has-icons-left ${this.loading ? 'is-loading' : ''}">
|
||||
<input type="text" class="input" @input="${this.onChangeQuery}" .value="${this.query}" type="text"
|
||||
placeholder="Search by Page URL, Title or Text">
|
||||
<span class="icon is-left"><fa-icon .svg="${fasSearch}"/></span>
|
||||
</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="level-left">
|
||||
${this.editable ? html`
|
||||
@@ -357,18 +365,33 @@ class Pages extends LitElement
|
||||
</wr-sorter>` : ``}
|
||||
</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}">
|
||||
${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>
|
||||
</div>`)}
|
||||
</div>
|
||||
</nav>
|
||||
`;
|
||||
}
|
||||
|
||||
onMenu(event) {
|
||||
event.stopPropagation();
|
||||
this.menuActive = !this.menuActive;
|
||||
|
||||
if (this.menuActive) {
|
||||
document.addEventListener("click", () => {
|
||||
this.menuActive = false;
|
||||
}, {once: true});
|
||||
}
|
||||
}
|
||||
|
||||
onSelectToggle(event) {
|
||||
const {page, selected} = event.detail;
|
||||
if (selected) {
|
||||
|
||||
+15
-12
@@ -83,6 +83,11 @@ class Story extends LitElement
|
||||
static get styles() {
|
||||
return wrapCss(css`
|
||||
:host {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -90,17 +95,16 @@ class Story extends LitElement
|
||||
.columns {
|
||||
width: 100%;
|
||||
justify-self: stretch;
|
||||
margin-left: 0;
|
||||
margin: 1.0em 0 0 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.column.main-content {
|
||||
margin: 12px 0px 0px 0px;
|
||||
padding: 0px;
|
||||
max-height: calc(100% - 0.75em);
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: min-content;
|
||||
padding-left: 0.75em;
|
||||
padding: 0px;
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
|
||||
.column.main-content.main-scroll {
|
||||
@@ -111,11 +115,12 @@ class Story extends LitElement
|
||||
ul.menu-list a.is-active {
|
||||
background-color: #55be6f;
|
||||
}
|
||||
ol {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.columns {
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
@@ -128,8 +133,6 @@ class Story extends LitElement
|
||||
@media screen and (max-width: 767px) {
|
||||
.columns {
|
||||
position: relative;
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.column.sidebar {
|
||||
@@ -165,7 +168,7 @@ class Story extends LitElement
|
||||
<aside class="menu">
|
||||
<ul class="menu-list">
|
||||
<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>
|
||||
<ul class="menu-list">${this.collInfo.lists.map(list => html`
|
||||
<li>
|
||||
@@ -197,7 +200,7 @@ class Story extends LitElement
|
||||
<hr/>
|
||||
<h3>${list.title}</h3>
|
||||
<p>${list.desc}</p>
|
||||
<ol style="margin-left: 30px">
|
||||
<ol>
|
||||
${this.curatedPageMap[list.id] ? this.curatedPageMap[list.id].map((p) => this.renderCPage(p)) : html``}
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
@@ -197,15 +197,16 @@ class URLResources extends LitElement
|
||||
static get styles() {
|
||||
return wrapCss(css`
|
||||
:host {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.notification {
|
||||
width: 100%;
|
||||
}
|
||||
.main-scroll {
|
||||
height: calc(100vh - 180px);
|
||||
/*height: calc(100vh - 180px);*/
|
||||
flex-grow: 1;
|
||||
width: 100vw;
|
||||
}
|
||||
@@ -214,6 +215,12 @@ class URLResources extends LitElement
|
||||
word-wrap: break-word;
|
||||
text-overflow: ellipsis;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
thead {
|
||||
display: table;
|
||||
}
|
||||
tr > th {
|
||||
cursor: pointer;
|
||||
|
||||
Reference in New Issue
Block a user