From 52e5de2450306d57ef8364df528a3bad813ff252 Mon Sep 17 00:00:00 2001
From: stringsplit <77242831+nbitzz@users.noreply.github.com>
Date: Fri, 17 Mar 2023 12:07:03 -0700
Subject: [PATCH] file menu wip

---
 src/style/app/pulldown/accounts.scss   | 12 ++++-
 src/style/app/pulldown/files.scss      | 69 ++++++++++++++++++++++++++
 src/svelte/elem/pulldowns/Files.svelte |  5 +-
 3 files changed, 81 insertions(+), 5 deletions(-)

diff --git a/src/style/app/pulldown/accounts.scss b/src/style/app/pulldown/accounts.scss
index 3cab4ef..263489f 100644
--- a/src/style/app/pulldown/accounts.scss
+++ b/src/style/app/pulldown/accounts.scss
@@ -139,10 +139,18 @@
 
     .loggedIn {
         position:absolute;
-        left:10px;
-        top:10px;
+
+        /*
+            left:10px;
+            top:10px;
+        */
+
+        left:0px;
+        top:0px;
         width:calc( 100% - 20px );
         height:calc( 100% - 20px );
+        padding:10px;
+
         overflow-y:auto;
 
         h1 {
diff --git a/src/style/app/pulldown/files.scss b/src/style/app/pulldown/files.scss
index 6346ffd..d526d7d 100644
--- a/src/style/app/pulldown/files.scss
+++ b/src/style/app/pulldown/files.scss
@@ -31,4 +31,73 @@
             }
         }
     }
+
+    .loggedIn {
+        display: flex;
+        flex-direction: column;
+        max-height:100%;
+        overflow:hidden;
+
+        .searchBar {
+            transition-duration:150ms;
+            background-color:#171717;
+            width:100%;
+            padding:8px;
+            color:#dddddd;
+            border:none;
+            border-bottom: 1px solid #aaaaaa;
+            outline: none;
+            border-radius:0px;
+            font-size:14px;
+
+            &:focus {
+                transition-duration:150ms;
+                border-bottom: 1px solid #dddddd;
+            }
+
+            @media screen and (max-width: 500px) {
+                padding:12px;
+                font-size:16px;
+            }
+        }
+
+        .fileList {
+            overflow-y:auto;
+            overflow-x:hidden;
+            padding:5px 0;
+
+            .flFile {
+                padding: 3px 8px;
+
+                @media screen and (max-width: 500px) {
+                    padding:7px 12px;
+                }
+
+                .detail {
+                    color:#777777;
+                    font-size:14px;
+
+                    @media screen and (max-width: 500px) {
+                        font-size:16px;
+                    }
+                }
+
+                h2 {
+                    font-size:18px;
+                    text-overflow:ellipsis;
+                    overflow:hidden;
+                    font-weight:600;
+
+                    @media screen and (max-width: 500px) {
+                        font-size:20px;
+                    }
+                }
+
+                p, h2 {
+                    margin:0 0 0 0;
+                    white-space: nowrap;
+                }
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/svelte/elem/pulldowns/Files.svelte b/src/svelte/elem/pulldowns/Files.svelte
index 66d4e8d..abddd75 100644
--- a/src/svelte/elem/pulldowns/Files.svelte
+++ b/src/svelte/elem/pulldowns/Files.svelte
@@ -16,14 +16,13 @@
         </div>
     {:else}
         <div class="loggedIn">
-            <input type="text" placeholder={`Search ${$files.length} file(s)`}>
+            <input type="text" placeholder={`Search ${$files.length} file(s)`} class="searchBar">
 
             <div class="fileList">
                 {#each $files as file (file.id)}
                     <div class="flFile">
-                        <p class="detail">{file.id}</p>
                         <h2>{file.filename}</h2>
-                        <p class="detail"><span class="number">{file.mime.split(";")[0]}</span>&nbsp;&nbsp;—&nbsp;&nbsp;<span class="number">{file.sizeDisplay}</span></p>
+                        <p class="detail"><span class="number">{file.id}</span>&nbsp;&nbsp;—&nbsp;&nbsp;<span class="number">{file.mime.split(";")[0]}</span></p>
                     </div>
                 {/each}
             </div>