svg.escobar.life

A simple SVG markup editor for the web

Commit: 8b703ba792a2b5fa4c05f2ce09fff0f0136e7588
Parent: 2693d2a8c0978619137a775a81dd4326dfd6d5db
Author: Pablo Emilio Escobar Gaviria <pablo-escobar@riseup.net>
Date: Thu, 24 Dec 2020 00:56:05 +1000

Made it so that the text editor is properly indented according to the length of the output

Diffstat

2 files changed, 31 insertions, 13 deletions

Status	File Name	N° Changes	Insertions	Deletions
Modified	css/styles.css	8	5	3
Modified	src/Editor.elm	36	26	10

diff --git a/css/styles.css b/css/styles.css
@@ -16,6 +16,8 @@
     --attribute: var(--accent);
     --string: #A5FF90;
     --comm: #B362FF;
+
+    --indent: 3em;
 }
 
 body {
@@ -134,9 +136,9 @@ body {
     white-space: pre;
     overflow: scroll;
 
-    width: calc(100% - 3em);
+    width: calc(100% - var(--indent));
     height: 100%;
-    margin-left: 3em;
+    margin-left: var(--indent);
 
     font-family: 'IBM Plex Mono', 'EmojiOne Color', monospace;
     font-size: 15pt;
@@ -182,7 +184,7 @@ body {
 
 .elmsh-line::before {
   display: inline-block;
-  width: 2em;
+  width: calc(var(--indent) - 1em);
   margin-right: 1em;
 
   content: attr(data-elmsh-lc);

diff --git a/src/Editor.elm b/src/Editor.elm
@@ -11,16 +11,32 @@ import SyntaxHighlight exposing (xml, toBlockHtml)
 
 editor : Model -> Html Msg
 editor model =
-  div 
-    [ id "editor"
-    , region
-    , label "Text editor" 
-    ]
-    [ div 
-      [ hidden True, translate model.editorScroll ]
-      [ codeDisplay model ]
-    , textarea model
-    ]
+  let
+    -- Indent the editor according to the order of magnitude of the number of
+    -- lines in the input file
+    indent 
+      = model.image
+        |> String.lines
+        |> List.length
+        |> toFloat
+        |> logBase 10
+        |> floor
+        |> (+) 1
+        |> max 1
+        |> String.fromInt
+        |> \s -> "--indent: " ++ s ++"em;"
+  in
+    div 
+      [ id "editor"
+      , region
+      , label "Text editor" 
+      , attribute "style" indent
+      ]
+      [ div 
+        [ hidden True, translate model.editorScroll ]
+        [ codeDisplay model ]
+      , textarea model
+      ]
 
 textarea : Model -> Html Msg
 textarea model =