diff --git a/module/apps/ArtBrowser.mjs b/module/apps/ArtBrowser.mjs index dc4e500..bf9970d 100644 --- a/module/apps/ArtBrowser.mjs +++ b/module/apps/ArtBrowser.mjs @@ -16,6 +16,7 @@ export class ArtBrowser extends HandlebarsApplicationMixin(ApplicationV2) { classes: [ __ID__, `ArtBrowser`, + `data-browser`, ], position: {}, window: {}, @@ -56,6 +57,10 @@ export class ArtBrowser extends HandlebarsApplicationMixin(ApplicationV2) { this.#onSubmit = onSubmit; }; + get page() { + return this.#page; + }; + async setPage(page) { if (this.#page == page) { return }; this.#page = page; @@ -215,7 +220,6 @@ export class ArtBrowser extends HandlebarsApplicationMixin(ApplicationV2) { }; _prepareImagesContext(ctx) { - ctx.images = []; const allImages = Object.entries(deepClone(this.#imagesDB.data)); const images = []; diff --git a/styles/apps/ArtBrowser.css b/styles/apps/ArtBrowser.css index a148573..83a41b9 100644 --- a/styles/apps/ArtBrowser.css +++ b/styles/apps/ArtBrowser.css @@ -1,41 +1,9 @@ .image-tagger.ArtBrowser { - > .window-content { - display: grid; - grid-template-columns: 175px auto; - gap: 0; - } - - form { - --spacing: 12px; - border-right: var(--sidebar-separator); - margin-right: var(--spacing); - padding-right: var(--spacing); - } - - .image-list { - --size: 100px; - list-style-type: none; - display: grid; - grid-template-columns: repeat(4, var(--size)); - gap: 8px; - padding: 0; - margin: 0; - max-height: 450px; - overflow-y: auto; - } - .image { display: flex; flex-direction: column; gap: 8px; - border-radius: 4px; - overflow: hidden; position: relative; - transition: all 100ms ease-in-out; - - &:hover, &:has(input[type="checkbox"]:checked) { - background: var(--color-warm-3); - } img { width: 100%; @@ -59,14 +27,4 @@ position: absolute; } } - - .paginated { - display: flex; - flex-direction: column; - gap: 6px; /* Due to the grow element, this actually means 12px */ - } - - .page-nav { - justify-content: center; - } } diff --git a/styles/apps/data-browser.css b/styles/apps/data-browser.css new file mode 100644 index 0000000..e8b680e --- /dev/null +++ b/styles/apps/data-browser.css @@ -0,0 +1,58 @@ +.image-tagger.data-browser { + min-height: 350px; + min-width: 630px; + + > .window-content { + display: grid; + grid-template-columns: 175px auto; + gap: 0; + } + + .filters { + --spacing: 12px; + border-right: var(--sidebar-separator); + margin-right: var(--spacing); + padding-right: var(--spacing); + } + + .entry-list { + --size: 100px; + list-style-type: none; + gap: 8px; + padding: 0; + margin: 0; + max-height: 450px; + overflow-y: auto; + + &.grid { + display: grid; + grid-template-columns: repeat(4, var(--size)); + }; + + &.list { + display: flex; + flex-direction: column; + } + } + + .entry { + transition: all 100ms ease-in-out; + border-radius: 4px; + + &:hover, + &[data-selected="true"] + &:has(input[type="checkbox"]:checked) { + background: var(--color-warm-3); + } + } + + .paginated { + display: flex; + flex-direction: column; + gap: 6px; /* Due to the grow element, this actually means 12px */ + } + + .page-nav { + justify-content: center; + } +} diff --git a/styles/main.css b/styles/main.css index 6dfb3c3..985ddda 100644 --- a/styles/main.css +++ b/styles/main.css @@ -11,6 +11,7 @@ /* Apps */ @import url("./apps/common.css") layer(apps); +@import url("./apps/data-browser.css") layer(apps); @import url("./apps/ArtBrowser.css") layer(apps); @import url("./apps/ArtistApp.css") layer(apps); @import url("./apps/ArtSidebar.css") layer(apps); diff --git a/templates/ArtBrowser/image/grid.hbs b/templates/ArtBrowser/image/grid.hbs index 9289c9d..53aa7fe 100644 --- a/templates/ArtBrowser/image/grid.hbs +++ b/templates/ArtBrowser/image/grid.hbs @@ -1,5 +1,5 @@
  • {{#if images}} -