Merge pull request #1809 from MushroomObserver/nimmo-matrix_table-js

Move spacers to `matrix-table_controller.js`
MushroomObserver · Jan 16, 2024 · 4d1db88 · 4d1db88
2 parents 528bde5 + 61d315e
commit 4d1db88
Show file tree

Hide file tree

Showing 10 changed files with 45 additions and 37 deletions.
diff --git a/app/javascript/controllers/matrix-table_controller.js b/app/javascript/controllers/matrix-table_controller.js
@@ -5,11 +5,49 @@ export default class extends Controller {
   connect() {
     this.element.dataset.stimulus = "connected";
 
+    this.matrixBoxes = document.querySelectorAll('.matrix-box')
     this.boxes = document.querySelectorAll('.matrix-box .panel-sizing')
     this.footers = document.querySelectorAll('.matrix-box .log-footer')
+
+    this.add_spacers()
     this.rearrange()
   }
 
+  add_spacers() {
+    this.matrixBoxes.forEach((element, i) => {
+      if (i % 2 == 0) {
+        element.insertAdjacentElement('beforebegin', this.smSpacer())
+      }
+      if (i % 3 == 0) {
+        element.insertAdjacentElement('beforebegin', this.mdSpacer())
+      }
+      if (i % 4 == 0) {
+        element.insertAdjacentElement('beforebegin', this.lgSpacer())
+      }
+    })
+  }
+
+  smSpacer() {
+    const spacer = document.createElement('div')
+    spacer.classList.add('hidden', 'visible-sm-block')
+    spacer.style.clear = "left"
+    return spacer
+  }
+
+  mdSpacer() {
+    const spacer = document.createElement('div')
+    spacer.classList.add('hidden', 'visible-md-block')
+    spacer.style.clear = "left"
+    return spacer
+  }
+
+  lgSpacer() {
+    const spacer = document.createElement('div')
+    spacer.classList.add('hidden', 'visible-lg-block')
+    spacer.style.clear = "left"
+    return spacer
+  }
+
   rearrange() {
     this.breakpoint =
       Array.from(document.querySelectorAll('[data-breakpoint]')).filter(s =>

diff --git a/app/views/controllers/images/index.html.erb b/app/views/controllers/images/index.html.erb
@@ -12,9 +12,7 @@ flash_error(@error) if @error && @objects.empty?
              data: { controller: "matrix-table",
                      action: "resize@window->matrix-table#rearrange" }) do %>
     <%= render(partial: "shared/matrix_box",
-                layout: "shared/matrix_table",
-                collection: @objects,
-                as: :object) %>
+               collection: @objects, as: :object) %>
     <div style="clear:left"></div>
   <% end %>
 <% end %>
diff --git a/app/views/controllers/observations/identify/index.html.erb b/app/views/controllers/observations/identify/index.html.erb
@@ -15,8 +15,7 @@ flash_error(@error) if @error && @objects.empty?
              data: { controller: "matrix-table",
                      action: "resize@window->matrix-table#rearrange" }) do %>
     <%= render(partial: "shared/matrix_box",
-               layout: "shared/matrix_table",
-               locals: { link_method: :get, identify: true },
+               locals: { identify: true },
                collection: @objects, as: :object) %>
     <div style="clear:left"></div>
   <% end %>

diff --git a/app/views/controllers/observations/index.html.erb b/app/views/controllers/observations/index.html.erb
@@ -40,7 +40,6 @@ flash_error(@error) if @error && @objects.empty?
              data: { controller: "matrix-table",
                      action: "resize@window->matrix-table#rearrange" }) do %>
     <%= render(partial: "shared/matrix_box",
-               layout: "shared/matrix_table",
                collection: @objects, as: :object) %>
     <div style="clear:left"></div>
   <% end %>

diff --git a/app/views/controllers/rss_logs/index.html.erb b/app/views/controllers/rss_logs/index.html.erb
@@ -13,7 +13,6 @@ flash_error(@error) if @error && @objects.empty?
              data: { controller: "matrix-table",
                      action: "resize@window->matrix-table#rearrange" }) do %>
     <%= render(partial: "shared/matrix_box",
-               layout: "shared/matrix_table",
                collection: @objects, as: :object) %>
     <div style="clear:left"></div>
   <% end %>

diff --git a/app/views/controllers/shared/_images_to_remove.erb b/app/views/controllers/shared/_images_to_remove.erb
@@ -10,8 +10,7 @@
              data: { controller: "matrix-table",
                      action: "resize@window->matrix-table#rearrange" }) do %>
 
-    <%= render(layout: "shared/matrix_table",
-               locals: { objects: @object.images }) do |image| %>
+    <% @object.images.each do |image| %>
 
       <%= matrix_box(id: image.id) do %>
         <%= tag.div(class: "py-3 text-center") do %>

diff --git a/app/views/controllers/shared/_images_to_reuse.erb b/app/views/controllers/shared/_images_to_reuse.erb
@@ -40,8 +40,7 @@ query = query_images_to_reuse(@all_users, @user)
              data: { controller: "matrix-table",
                      action: "resize@window->matrix-table#rearrange" }) do %>
 
-    <%= render(layout: "shared/matrix_table",
-               locals: { objects: @objects }) do |image| %>
+    <% @objects.each do |image| %>
       <%= matrix_box(class: "text-center", id: image.id) do %>
         <%= panel_block do %>
           <%= interactive_image(image, votes: false, original: true,

diff --git a/app/views/controllers/shared/_matrix_table.erb b/app/views/controllers/shared/_matrix_table.erb
diff --git a/app/views/controllers/users/index.html.erb b/app/views/controllers/users/index.html.erb
@@ -59,9 +59,7 @@ flash_error(@error) if @error && @objects.empty?
                  data: { controller: "matrix-table",
                          action: "resize@window->matrix-table#rearrange" }) do %>
         <%= render(partial: "shared/matrix_box",
-                   layout: "shared/matrix_table",
-                   collection: @objects,
-                   as: :object) %>
+                   collection: @objects, as: :object) %>
       <% end %>
     <% end %>
 <% end %>

diff --git a/app/views/controllers/visual_groups/_image_matrix.html.erb b/app/views/controllers/visual_groups/_image_matrix.html.erb
@@ -3,8 +3,7 @@
     <%= tag.ul(class: "row list-unstyled mt-3",
                data: { controller: "matrix-table",
                        action: "resize@window->matrix-table#rearrange" }) do %>
-      <%= render(layout: "shared/matrix_table",
-                 locals: { objects: @subset }) do |row| %>
+      <% @subset.each do |row| %>
         <%= matrix_box(id: row[0]) do %>
           <%= tag.div(class: "panel panel-default") do %>
             <%= tag.div(class: "thumbnail-container") do
@@ -17,7 +16,7 @@
               )
             end %>
           <% end %>
-        <% end %><!-- .matrix-box -->
+        <% end %>
       <% end %>
     <% end %>
   <% end %>