improve editor page

* allow uppercase file extensions fixes #60
ananthakumaran · Sep 30, 2023 · c00a854 · c00a854
1 parent 374b48e
commit c00a854
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 13 deletions.
diff --git a/src/app.scss b/src/app.scss
@@ -19,6 +19,8 @@ $menu-item-hover-background-color: $link-light;
 $menu-item-active-color: $link-dark;
 $menu-item-active-background-color: $link-light;
 
+$editor-full-height: calc(100vh - 21px - 57.75px - 10.5px);
+
 @import "bulma/bulma.sass";
 @import "bulma-switch/src/sass/index.sass";
 @import "@cityssm/bulma-sticky-table/sticky-table";
@@ -56,7 +58,7 @@ $menu-item-active-background-color: $link-light;
 
   a.du-active {
     color: $link !important;
-    background-color: $white-ter !important;
+    background-color: $white !important;
     font-weight: bold;
   }
 }
@@ -393,6 +395,8 @@ nav.level.grid-2 {
     background-color: $white-ter;
     color: $grey-light;
     border: none;
+    border-top-left-radius: $radius-small;
+    border-bottom-left-radius: $radius-small;
   }
 
   .cm-activeLineGutter {
@@ -557,9 +561,14 @@ nav.level.grid-2 {
   width: 800px;
 }
 
+.full-height {
+  max-height: $editor-full-height;
+}
+
 .editor .cm-editor {
-  max-height: calc(100vh - 185px);
+  max-height: $editor-full-height;
 }
+
 .cm-scroller {
   overflow: auto;
   font-family: $family-monospace !important;

diff --git a/src/lib/components/FileTree.svelte b/src/lib/components/FileTree.svelte
@@ -26,7 +26,7 @@
           <span class="icon is-small">
             <i class="fa-regular fa-file-lines" />
           </span>
-          {fileName(file.name)}
+          <span title={fileName(file.name)} class="truncate">{fileName(file.name)}</span>
           {#if file.name == selectedFileName && hasUnsavedChanges}
             <span class="ml-1 tag is-danger">unsaved</span>
           {/if}
@@ -39,7 +39,7 @@
             <span class="icon is-small">
               <i class="fa-regular fa-folder" />
             </span>
-            {file.name}
+            <span title={file.name} class="truncate">{file.name}</span>
           </summary>
           <svelte:self
             on:select={(e) => dispatch("select", e.detail)}

diff --git a/src/lib/sheet.ts b/src/lib/sheet.ts
@@ -9,7 +9,8 @@ interface Result {
 }
 
 export function parse(file: File): Promise<Result> {
-  const extension = file.name.split(".").pop();
+  let extension = file.name.split(".").pop();
+  extension = extension?.toLowerCase();
   if (extension === "csv" || extension === "txt") {
     return parseCSV(file);
   } else if (extension === "xlsx" || extension === "xls") {

diff --git a/src/routes/ledger/editor/[slug]/+page.svelte b/src/routes/ledger/editor/[slug]/+page.svelte
@@ -184,7 +184,7 @@
 
 <FileModal bind:open={modalOpen} on:save={(e) => createFile(e.detail)} label="Create" help="" />
 
-<section class="section tab-editor" style="padding-bottom: 0 !important">
+<section class="section tab-editor max-h-screen" style="padding-bottom: 0 !important">
   <div class="container is-fluid">
     <div class="columuns">
       <div class="column is-12 px-0 pt-0 mb-2">
@@ -299,9 +299,9 @@
       </div>
     </div>
     <div class="columns">
-      <div class="column is-2">
+      <div class="column is-3-widescreen is-2-fullhd is-4">
         <div class="box px-2">
-          <aside class="menu" style="max-height: calc(100vh - 185px)">
+          <aside class="menu full-height">
             <FileTree
               on:select={(e) => selectFile(e.detail)}
               files={buildLedgerTree(_.values(filesMap))}
@@ -311,14 +311,14 @@
           </aside>
         </div>
       </div>
-      <div class="column is-6">
+      <div class="column is-6-widescreen is-6-fullhd is-8">
         <div class="box py-0">
           <div class="editor" bind:this={editorDom} />
         </div>
       </div>
-      <div class="column is-4">
+      <div class="column is-3-widescreen is-4-fullhd is-hidden-touch is-hidden-desktop-only">
         {#if !_.isEmpty($editorState.output)}
-          <pre style="max-height: calc(100vh - 185px)">{$editorState.output}</pre>
+          <pre class="box px-3 full-height">{$editorState.output}</pre>
         {/if}
       </div>
     </div>

diff --git a/src/routes/ledger/import/+page.svelte b/src/routes/ledger/import/+page.svelte
@@ -279,7 +279,7 @@
           <Dropzone
             multiple={false}
             inputElement={input}
-            accept=".csv,.txt,.xls,.xlsx,.pdf"
+            accept=".csv,.txt,.xls,.xlsx,.pdf,.CSV,.TXT,.XLS,.XLSX,.PDF"
             on:drop={handleFilesSelect}
           >
             Drag 'n' drop CSV, TXT, XLS, XLSX, PDF file here or click to select
@@ -320,6 +320,8 @@
 <style lang="scss">
   @import "bulma/sass/utilities/_all.sass";
 
+  $import-full-height: calc(100vh - 205px);
+
   .clipboard {
     float: right;
     position: absolute;
@@ -337,6 +339,6 @@
   .table-wrapper {
     overflow-x: auto;
     overflow-y: auto;
-    max-height: calc(100vh - 225px);
+    max-height: $import-full-height;
   }
 </style>