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!

src/coll.js

@@ -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';
 
 
@@ -239,30 +240,28 @@ class Coll extends LitElement
     }
 
     .tab-label {
-      display: none;
+      display: inline;
     }
 
-    @media screen and (min-width: ${!IS_APP ? css`1054px` : css`1164px`}) {
+    @media screen and (max-width: ${!IS_APP ? css`1053px` : css`1163px`}) {
       .tab-label {
-        display: inline;
+        display: none;
+      }
+
+      .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,40 +357,8 @@ 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">
-          <ul>
-            ${this.hasStory ? html`
-            <li class="${this.tabData.view === 'story' ? 'is-active' : ''}">
-              <a @click="${this.onTabClick}" href="#story" class="is-size-6">
-                <span class="icon"><fa-icon .svg="${fasBook}"></fa-icon></span>
-                <span class="tab-label" title="Story">Story</span>
-              </a>
-            </li>` : ``}
-
-            <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="tab-label" title="Pages">Pages</span>
-              </a>
-            </li>
-
-            <li class="${this.tabData.view === 'resources' ? 'is-active' : ''}">
-              <a @click="${this.onTabClick}" href="#resources" class="is-size-6">
-                <span class="icon"><fa-icon .svg="${farResources}"></fa-icon></span>
-                <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.renderTabHeader()}
         ${this.renderCollTabs()}
       </nav>`;
     } else {
@@ -403,6 +366,39 @@ class Coll extends LitElement
     }
   }
 
+  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' : ''}">
+            <a @click="${this.onTabClick}" href="#story" class="is-size-6">
+              <span class="icon"><fa-icon .svg="${fasBook}"></fa-icon></span>
+              <span class="tab-label" title="Story">Story</span>
+            </a>
+          </li>` : ``}
+
+          <li class="${this.tabData.view === 'pages' ? 'is-active' : ''}">
+            <a @click="${this.onTabClick}" href="#pages" class="is-size-6">
+              <span class="icon"><fa-icon .svg="${farPages}"></fa-icon></span>
+              <span class="tab-label" title="Pages">Pages</span>
+            </a>
+          </li>
+
+          <li class="${this.tabData.view === 'resources' ? 'is-active' : ''}">
+            <a @click="${this.onTabClick}" href="#resources" class="is-size-6">
+              <span class="icon"><fa-icon .svg="${farResources}"></fa-icon></span>
+              <span class="tab-label" title="URL Resources">Page Resources</span>
+            </a>
+          </li>
+        </ul>
+      </div>`;
+  }
+
   renderLocationBar() {
     const dateStr = tsToDate(this.ts).toLocaleString();
 
@@ -586,7 +582,7 @@ class Coll extends LitElement
   }
 
   onGoPages() {
-    this.navigateTo(RWP_SCHEME + "view=pages");
+    this.updateTabData({view: "pages"});
   }
 
   onReAuthed(event) {

src/pages.js

@@ -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;
+        min-height: 0px;
-        padding: 0 0.75em 0 0.75em;
-        max-height: calc(100% - 0.75em);
         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: 1px solid rgb(237, 237, 237);
-        border-right: 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,113 +271,127 @@ class Pages extends LitElement
     const currList = this.currList;
 
     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' : ''}">
           <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>
-        <div class="status level is-mobile">
+    ${this.renderPageHeader()}
-          <div class="level-left">
+    <div class="columns">
-            ${this.editable ? html`
+      ${this.collInfo.lists.length ? html`
-            <div class="check-select level-item">
+      <div class="column sidebar is-one-fifth">
-              <label class="checkbox">
+        <aside class="menu">
-              <input @change=${this.onSelectAll} type="checkbox" .checked="${this.allSelected}">
+          <p class="menu-label">Filter By List:</p>
-              </label>
+          <ul class="menu-list">
-            </div>` : ``}
+            <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>`;
+  }
 
-            <span class="num-results level-item">${this.formatResults()}</span>
+  renderPageHeader() {
+    return html`
+    <div class="panel-block page-header">
+      <div class="status level is-mobile">
+        <div class="level-left">
+          ${this.editable ? html`
+          <div class="check-select level-item">
+            <label class="checkbox">
+            <input @change=${this.onSelectAll} type="checkbox" .checked="${this.allSelected}">
+            </label>
+          </div>` : ``}
 
-            ${this.editable ? html`
+          <span class="num-results level-item">${this.formatResults()}</span>
-            <div class="level-item dropdown is-hoverable">
+
-              <div class="dropdown-trigger">
+          ${this.editable ? html`
-                <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu">
+          <div class="level-item dropdown is-hoverable">
-                  <span>Download</span>
+            <div class="dropdown-trigger">
-                  <span class="icon is-small">
+              <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu">
-                    <fa-icon .svg="${fasAngleDown}"/>
+                <span>Download</span>
-                  </span>
+                <span class="icon is-small">
-                </button>
+                  <fa-icon .svg="${fasAngleDown}"/>
-              </div>
+                </span>
-              <div class="dropdown-menu" id="dropdown-menu" role="menu">
+              </button>
-                <div class="dropdown-content">
+            </div>
-                  <a @click="${(e) => this.onDownload(e, "wacz", true)}" class="dropdown-item">
+            <div class="dropdown-menu" id="dropdown-menu" role="menu">
-                    Download Selected as WACZ (Web Archive Collection)
+              <div class="dropdown-content">
-                  </a>
+                <a @click="${(e) => this.onDownload(e, "wacz", true)}" class="dropdown-item">
-                  <a @click="${(e) => this.onDownload(e, "warc", true)}" class="dropdown-item">
+                  Download Selected as WACZ (Web Archive Collection)
-                    Download Selected as WARC Only
+                </a>
-                  </a>
+                <a @click="${(e) => this.onDownload(e, "warc", true)}" class="dropdown-item">
-                  <hr class="dropdown-divider">
+                  Download Selected as WARC Only
-                  <a @click="${(e) => this.onDownload(e, "wacz", false)}" class="dropdown-item">
+                </a>
-                    Download All as WACZ (Web Archive Collection)
+                <hr class="dropdown-divider">
-                  </a>
+                <a @click="${(e) => this.onDownload(e, "wacz", false)}" class="dropdown-item">
-                  <a @click="${(e) => this.onDownload(e, "warc", false)}" class="dropdown-item">
+                  Download All as WACZ (Web Archive Collection)
-                    Download All as WARC Only
+                </a>
-                  </a>
+                <a @click="${(e) => this.onDownload(e, "warc", false)}" class="dropdown-item">
-                </div>
+                  Download All as WARC Only
+                </a>
               </div>
             </div>
-            ` : ``}
-
           </div>
+          ` : ``}
 
-          ${this.currList === 0 ? html`
+        </div>
-          <div class="level-right">
+
-            <wr-sorter id="pages"
+        ${this.currList === 0 ? html`
-            defaultKey="ts"
+        <div class="level-right">
-            ?defaultDesc="true"
+          <wr-sorter id="pages"
-            .sortKeys="${Pages.sortKeys}"
+          defaultKey="ts"
-            .data="${this.filteredPages}"
+          ?defaultDesc="true"
-            @sort-changed="${(e) => this.sortedPages = e.detail.sortedData}"
+          .sortKeys="${Pages.sortKeys}"
-            class="${this.filteredPages.length ? '' : 'is-hidden'} level-item">
+          .data="${this.filteredPages}"
-            </wr-sorter>` : ``}
+          @sort-changed="${(e) => this.sortedPages = e.detail.sortedData}"
-          </div>
+          class="${this.filteredPages.length ? '' : 'is-hidden'} level-item">
+          </wr-sorter>` : ``}
         </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) {

src/story.js

@@ -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;
+      min-height: 0;
-      padding: 0px;
-      max-height: calc(100% - 0.75em);
       display: flex;
       flex-direction: column;
-      height: min-content;
+      padding: 0px;
-      padding-left: 0.75em;
+      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>

src/url-resources.js

@@ -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;