diff --git a/src/coll.js b/src/coll.js index 8a9f3b6..b98c276 100644 --- a/src/coll.js +++ b/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` `; } else { @@ -403,6 +366,39 @@ class Coll extends LitElement } } + renderTabHeader() { + if (this.tabData.view === "replay" || (this.embed && this.embed !== "full")) { + return ""; + } + + return html` +
+ +
`; + } + 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) { diff --git a/src/pages.js b/src/pages.js index 374975e..9e33343 100644 --- a/src/pages.js +++ b/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; - 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,113 +271,127 @@ class Pages extends LitElement const currList = this.currList; return html` -
-
- -
-
- ${this.renderPages()} -
-
` - } - - renderPages() { - const name = this.currList === 0 ? "All Pages" : this.collInfo.lists[this.currList - 1].title; - - return html` - `; } + 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) { diff --git a/src/story.js b/src/story.js index fe74f57..2ebfc33 100644 --- a/src/story.js +++ b/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; - 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