layout-ing

igvteam · Jan 10, 2024 · cfc8c02 · cfc8c02
1 parent b367e5e
commit cfc8c02
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 23 deletions.
diff --git a/css/_localTrackFileCard.scss b/css/_localTrackFileCard.scss
@@ -3,21 +3,46 @@
   left: -1000px;
 
   height: fit-content;
+  width: 384px;
 
   .card-header {
 
-    text-transform: uppercase;
-    text-align: center;
     padding: unset;
-    >div {
-      font-size: 1.125em;
-      margin: auto;
-      width: fit-content;
-      height: fit-content;
-      i {
+
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+
+    >div:first-child {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: space-between;
+      align-items: center;
+      >div {
+        color: transparent;
+      }
+      >button {
         cursor: pointer;
+        margin-right: 8px;
+        color: fuchsia;
       }
     }
+    >div:first-child:hover {
+      cursor: grab;
+    }
+    >div:first-child:active {
+      cursor: grabbing;
+    }
+    >div:last-child {
+      font-size: 1em;
+      padding: .5rem;
+      text-transform: uppercase;
+      text-align: left;
+    }
 
     background-color: rgba(15, 15, 15, 0.25);
   }

diff --git a/css/app.css b/css/app.css
diff --git a/css/app.css.map b/css/app.css.map
diff --git a/js/app.js b/js/app.js
@@ -391,14 +391,21 @@ function presentLocalTrackFileModal(trackFileNamesCard, trackFileNames) {
 
 function createLocalTrackFileCard(parentElement, id){
 
+    const str =
+        `Listed below are local file names that were present in the session file and cannot be loaded automatically. Click on a file name to retrieve the associated file via the file picker.`
+
     let html =
-        `<div id="${ id }" class="card" style="width: 18rem;">
+        `<div id="${ id }" class="card">
             <div class="card-header">
-            <div>
-                <i class="fas fa-sm fa-grip-horizontal"></i>
-            </div>
-            
-            Local Track Files
+                <div>
+                    <div>nadda</div>
+                    <button type="button" class="close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div>
+                    ${ str }
+                </div>
             </div>
             <ul class="list-group list-group-flush"></ul>
         </div>`