file menu wip

src/style/app/pulldown/accounts.scss

@@ -139,10 +139,18 @@
 
     .loggedIn {
         position:absolute;
+
+        /*
             left:10px;
             top:10px;
+        */
+
+        left:0px;
+        top:0px;
         width:calc( 100% - 20px );
         height:calc( 100% - 20px );
+        padding:10px;
+
         overflow-y:auto;
 
         h1 {

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;
+                }
+            }
+        }
+    }
 }

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>