Add column layout to plamo filter checkboxes.

portfolio/templates/model-kits.html

@@ -2,170 +2,282 @@
 
 <div class="filters">
   <!-- Status -->
-  <fieldset class="filter-group" data-filter="status">
-    <legend>$table-plamo-status$</legend>
-    <label>
-      <input class="me-2" type="checkbox" value="$filter-plamo-in-box$" checked>
-      $filter-plamo-in-box$
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="$filter-plamo-building$" checked>
-      $filter-plamo-building$
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="$filter-plamo-built$" checked>
-      $filter-plamo-built$
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="$filter-plamo-complete$" checked>
-      $filter-plamo-complete$
-    </label>
+  <legend>$table-plamo-status$</legend>
+  <fieldset class="filter-group row row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-4 p-1" data-filter="status">
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="$filter-plamo-in-box$" checked>
+        $filter-plamo-in-box$
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="$filter-plamo-building$" checked>
+        $filter-plamo-building$
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="$filter-plamo-built$" checked>
+        $filter-plamo-built$
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="$filter-plamo-complete$" checked>
+        $filter-plamo-complete$
+      </label>
+    </div>
   </fieldset>
 
   <!-- Manufacturer -->
-  <fieldset class="filter-group" data-filter="manufacturer">
-    <legend>$table-plamo-manufacturer$</legend>
-    <label>
-      <input class="me-2" type="checkbox" value="AZmodel" checked>
-      AZmodel
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="Bandai" checked>
-      Bandai
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="Bandai Spirits" checked>
-      Bandai Spirits
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="Cavico" checked>
-      Cavico
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="Eduard" checked>
-      Eduard
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="Finemolds" checked>
-      Finemolds
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="Flame Toys" checked>
-      Flame Toys
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="Fujimi" checked>
-      Fujimi
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="Hasegawa" checked>
-      Hasegawa
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="Italeri" checked>
-      Italeri
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="Kotobukiya" checked>
-      Kotobukiya
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="MiniArt" checked>
-      MiniArt
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="Moderoid - Good Smile Company" checked>
-      Moderoid - Good Smile Company
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="Ōtaki" checked>
-      Ōtaki
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="Revell" checked>
-      Revell
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="Tamiya" checked>
-      Tamiya
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="Thunder Model" checked>
-      Thunder Model
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="Wave Corporation" checked>
-      Wave Corporation
-    </label>
+  <legend>$table-plamo-manufacturer$</legend>
+  <fieldset class="filter-group row row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-4 p-1" data-filter="manufacturer">
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="AZmodel" checked>
+        AZmodel
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="Bandai" checked>
+        Bandai
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="Bandai Spirits" checked>
+        Bandai Spirits
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="Cavico" checked>
+        Cavico
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="Eduard" checked>
+        Eduard
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="Finemolds" checked>
+        Finemolds
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="Flame Toys" checked>
+        Flame Toys
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="Fujimi" checked>
+        Fujimi
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="Hasegawa" checked>
+        Hasegawa
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="Italeri" checked>
+        Italeri
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="Kotobukiya" checked>
+        Kotobukiya
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="MiniArt" checked>
+        MiniArt
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="Moderoid - Good Smile Company" checked>
+        Moderoid - Good Smile Company
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="Ōtaki" checked>
+        Ōtaki
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="Revell" checked>
+        Revell
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="Tamiya" checked>
+        Tamiya
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="Thunder Model" checked>
+        Thunder Model
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="Wave Corporation" checked>
+        Wave Corporation
+      </label>
+    </div>
   </fieldset>
 
   <!-- Series -->
-  <fieldset class="filter-group" data-filter="series">
-    <legend>$table-plamo-series$</legend>
-    <label>
-      <input class="me-2" type="checkbox" value="$filter-plamo-series-msg$" checked>
-      $filter-plamo-series-msg$
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-pocket$" checked>
-      $filter-plamo-series-msg-pocket$
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-stardust$" checked>
-      $filter-plamo-series-msg-stardust$
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-char$" checked>
-      $filter-plamo-series-msg-char$
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-gqx$" checked>
-      $filter-plamo-series-msg-gqx$
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-ironblood$" checked>
-      $filter-plamo-series-msg-ironblood$
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-seed$" checked>
-      $filter-plamo-series-msg-seed$
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-seed-destiny$" checked>
-      $filter-plamo-series-msg-seed-destiny$
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-seed-freedom$" checked>
-      $filter-plamo-series-msg-seed-freedom$
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-witch$" checked>
-      $filter-plamo-series-msg-witch$
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-unicorn$" checked>
-      $filter-plamo-series-msg-unicorn$
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-zz$" checked>
-      $filter-plamo-series-msg-zz$
-    </label>
-        <label>
-      <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-zeta$" checked>
-      $filter-plamo-series-msg-zeta$
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="$filter-plamo-series-gundam-wing-endless-waltz$" checked>
-      $filter-plamo-series-gundam-wing-endless-waltz$
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="$filter-plamo-series-mfg-gundam$" checked>
-      $filter-plamo-series-mfg-gundam$
-    </label>
-    <label>
-      <input class="me-2" type="checkbox" value="$filter-plamo-series-gundam-bf-try$" checked>
-      $filter-plamo-series-gundam-bf-try$
-    </label>
+  <legend>$table-plamo-series$</legend>
+  <fieldset class="filter-group row row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-4 p-1" data-filter="series">
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg$" checked>
+        $filter-plamo-series-msg$
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-pocket$" checked>
+        $filter-plamo-series-msg-pocket$
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-stardust$" checked>
+        $filter-plamo-series-msg-stardust$
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-char$" checked>
+        $filter-plamo-series-msg-char$
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-gqx$" checked>
+        $filter-plamo-series-msg-gqx$
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-ironblood$" checked>
+        $filter-plamo-series-msg-ironblood$
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-seed$" checked>
+        $filter-plamo-series-msg-seed$
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-seed-destiny$" checked>
+        $filter-plamo-series-msg-seed-destiny$
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-seed-freedom$" checked>
+        $filter-plamo-series-msg-seed-freedom$
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-witch$" checked>
+        $filter-plamo-series-msg-witch$
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-unicorn$" checked>
+        $filter-plamo-series-msg-unicorn$
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-zz$" checked>
+        $filter-plamo-series-msg-zz$
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-zeta$" checked>
+        $filter-plamo-series-msg-zeta$
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="$filter-plamo-series-gundam-wing-endless-waltz$" checked>
+        $filter-plamo-series-gundam-wing-endless-waltz$
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="$filter-plamo-series-mfg-gundam$" checked>
+        $filter-plamo-series-mfg-gundam$
+      </label>
+    </div>
+
+    <div class="col">
+      <label>
+        <input class="me-2" type="checkbox" value="$filter-plamo-series-gundam-bf-try$" checked>
+        $filter-plamo-series-gundam-bf-try$
+      </label>
+    </div>
   </fieldset>
 </div>