Merge pull request #684 from Akhilesh-max/ca5

PR to adjust the card’s position and responsiveness.
camicroscope · Mar 14, 2024 · cc6003a · cc6003a
2 parents c7d8c84 + 201301d
commit cc6003a
Showing 1 changed file with 66 additions and 68 deletions.
diff --git a/apps/dev-workbench/workbench.html b/apps/dev-workbench/workbench.html
@@ -240,74 +240,72 @@
         "
       >
         <!-- Cards -->
-        <div class="card" style="max-width: 20em; margin-left:2cm; auto;">
-          <!-- Card content -->
-          <div class="card-body">
-            <!-- Title -->
-            <h4 class="card-title">Select your dataset</h4>
-            <!-- Text -->
-            <p style="text-align: justify;" class="card-text">
-              Select the dataset (.zip) having three files; spritesheet
-              (data.jpg), a binary labels (labels.bin) and the classes
-              (labelnames.csv) from your local storage.
-            </p>
-            <div class="input-group">
-              <div class="custom-file">
-                <input
-                  type="file"
-                  id="spriteInput"
-                  accept=".zip"
-                  style="max-width: 98%;"
-                />
-                <label
-                  style="overflow: hidden;"
-                  class="custom-file-label spriteInputLabel"
-                  for="spriteInput"
-                  >Choose file
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div style="height: 1em; margin-left:5cm; padding: 2em 0; font-size: large;">
-          <b> OR</b>
-        </div>
-        <div class="card" style="max-width: 20em; margin-left:2cm; auto;">
-          <!-- Card content -->
-          <div class="card-body">
-            <!-- Title -->
-            <h4 class="card-title">Create your own</h4>
-            <!-- Text -->
-            <p class="card-text" style="text-align: justify;">
-              Build your own spritesheet using labeling from the caMicroscope
-              instance or browsing your own dataset.
-            </p>
-            <!-- Buttons -->
-            <div style="text-align: center;">
-              <button
-                data-toggle="modal"
-                data-target="#labelsUploadModal"
-                style="border-radius: 5px; font-size: 0.9em;"
-                class="btn btn-primary px-2"
-                onclick="resetLabelsModal()"
-              >
-                caM Labels
-              </button>
-              <button
-                style="border-radius: 5px; font-size: 0.9em;"
-                class="btn btn-primary px-2"
-                data-toggle="modal"
-                data-target="#labelsUploadModal"
-                onclick="resetLabelsModal(true)"
-              >
-                Custom Data
-              </button>
-            </div>
-          </div>
-        </div>
-        <!-- Cards -->
-      </div>
-    </div>
+   <div class="container">
+     <div class="row ">
+       <div class="col-12 col-lg-5 ">
+         <div class="card" style="max-width: 20em; margin:auto;">
+           <div class="card-body">
+             <h4 class="card-title">Select your dataset</h4>
+             <p style="text-align: justify" class="card-text">
+               Select the dataset (.zip) having three files; spritesheet (data.jpg),
+               a binary labels (labels.bin) and the classes (labelnames.csv)
+               from your local storage.
+             </p>
+             <div class="input-group">
+               <div class="custom-file">
+                 <input
+                   type="file"
+                   id="spriteInput"
+                   accept=".zip"
+                   style="max-width: 98%;"
+                 />
+                 <label
+                   style="overflow: hidden;"
+                   class="custom-file-label spriteInputLabel"
+                   for="spriteInput"
+                   > Choose file
+                 </label>
+               </div>
+             </div>
+           </div>
+         </div>
+       </div>
+       <div class="col-12 col-lg-2 d-flex align-items-center justify-content-center">
+           <b>OR</b>
+       </div>
+       <div class="col-12 col-lg-5 ">
+         <div class="card" style="max-width: 20em; margin:auto;">
+           <div class="card-body">
+             <h4 class="card-title">Create your own</h4>
+             <p class="card-text" style="text-align: justify;">
+               Build your own spritesheet using labeling from the caMicroscope
+               instance or browsing your own dataset.
+             </p>
+             <div style="text-align: center;">
+               <button
+                 data-toggle="modal"
+                 data-target="#labelsUploadModal"
+                 style="border-radius: 5px; font-size: 0.9em;"
+                 class="btn btn-primary px-2"
+                 onclick="resetLabelsModal()"
+               >
+                 caM Labels
+               </button>
+               <button
+                 style="border-radius: 5px; font-size: 0.9em;"
+                 class="btn btn-primary px-2"
+                 data-toggle="modal"
+                 data-target="#labelsUploadModal"
+                 onclick="resetLabelsModal(true)"
+               >
+                 Custom Data
+               </button>
+             </div>
+           </div>
+         </div>
+       </div>
+     </div>
+   </div>
 
     <!-- Labels/customData Upload Modal -->
     <div