Improved filter display on mobile

TomNCatz · Sep 7, 2023 · dd3da2e · dd3da2e
1 parent 436ee3e
commit dd3da2e
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 11 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
     "id": "obsidian-gallery-tagged",
     "name": "Tagged Gallery",
-    "version": "0.7.0",
+    "version": "0.7.1",
     "minAppVersion": "1.3.0",
     "description": "Main Gallery to tag / filter / add notes to images. Display blocks to embed images inside notes. Display block to an image information",
     "author": "Tom",

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/view.ts b/src/view.ts
@@ -119,14 +119,17 @@ export class GalleryView extends ItemView
       });
 
       // Filter Exclusive or inclusive
-      const exclusiveFilterEl = this.filterEl.createEl('input', {
-        cls: 'ob-gallery-filter-input',
+      const exclusiveFilterDiv = this.filterEl.createDiv({
+        cls: 'ob-gallery-filter-input'
+      })
+      const exclusiveFilterEl = exclusiveFilterDiv.createEl('input', {
+        cls: 'ob-gallery-filter-checkbox-input',
         type: 'checkbox'
       })
       exclusiveFilterEl.name = 'exclusive'
       exclusiveFilterEl.id = 'exclusive'
 
-      const exclusiveFilterLabelEl = this.filterEl.createEl('label');
+      const exclusiveFilterLabelEl = exclusiveFilterDiv.createEl('label');
       exclusiveFilterLabelEl.textContent = "Exclusive";
       exclusiveFilterLabelEl.htmlFor = "exclusive"
       exclusiveFilterLabelEl.style.paddingLeft = "20px"
@@ -137,14 +140,17 @@ export class GalleryView extends ItemView
       });
 
       // Should display order be reversed
-      const sortReverseEl = this.filterEl.createEl('input', {
-        cls: 'ob-gallery-filter-input',
+      const sortReverseDiv = this.filterEl.createDiv({
+        cls: 'ob-gallery-filter-input'
+      })
+      const sortReverseEl = sortReverseDiv.createEl('input', {
+        cls: 'ob-gallery-filter-checkbox-input',
         type: 'checkbox'
       })
       sortReverseEl.name = 'sortReverse'
       sortReverseEl.id = 'sortReverse'
 
-      const sortReverseLabelEl = this.filterEl.createEl('label');
+      const sortReverseLabelEl = sortReverseDiv.createEl('label');
       sortReverseLabelEl.textContent = "Reverse Sort";
       sortReverseLabelEl.htmlFor = "sortReverse"
       sortReverseLabelEl.style.paddingLeft = "20px"

diff --git a/styles.css b/styles.css
@@ -16,7 +16,7 @@
 }
 
 .ob-gallery-filter {
-    height: 70px;
+    height: 100px;
     width: 100%;
     position: relative;
     border: none;
@@ -25,11 +25,16 @@
     padding: 20px;
 }
 
+.ob-gallery-filter-checkbox-input{
+
+}
+
 .ob-gallery-filter-input {
-    width: 20%;
+    width: 23% !important;
     left: 20px;
     position: static;
     margin-right: 20px;
+    display: inline-block;
 }
 
 .ob-gallery-image-focus {