add character count to create view

querwurzel · Nov 15, 2023 · 770bd5a · 770bd5a
1 parent b6637bb
commit 770bd5a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/frontend/src/components/CreatePaste/CreatePaste.tsx b/frontend/src/components/CreatePaste/CreatePaste.tsx
@@ -139,15 +139,16 @@ const CreatePaste: Component<CreatePasteProps> = ({onCreatePaste, initialPaste})
                  onInput={updateFormField("password")}/>
         </div>
         <hr/>
-        <div>
+        <div class={styles.content}>
           <textarea minLength="5"
                     maxLength="4096"
                     required
                     autofocus
                     rows="20"
-                    cols="75"
+                    cols="50"
                     placeholder="Paste here"
                     onInput={updateFormField("content")}>{form.content}</textarea>
+          <span>{form.content?.length || 0} / 4096</span>
         </div>
       </fieldset>
 

diff --git a/frontend/src/components/CreatePaste/createPaste.module.css b/frontend/src/components/CreatePaste/createPaste.module.css
@@ -1,7 +1,6 @@
 
 .lastPaste {
     margin: .5rem;
-    user-select: none;
     color: green;
     user-select: all;
     cursor: pointer;
@@ -47,6 +46,20 @@
     align-items: center;
 }
 
+.createForm .content {
+    flex-direction: column;
+    gap: 10px;
+    text-align: end;
+}
+
+.createForm .content span {
+    text-align: right;
+    display: inline-block;
+    width: 100%;
+    padding-right: 2rem;
+    font-size: .7rem;
+}
+
 .createForm label,
 .createForm input[type=radio],
 .createForm select {
@@ -58,7 +71,7 @@
 .createForm input[type=text],
 .createForm input[type=password] {
     display: inline-block;
-    width: 20rem;
+    width: 15rem;
     margin: 0;
 }
 
@@ -69,12 +82,10 @@
     margin: .5rem;
 }
 
-
 .createForm input[type=radio] {
     margin-right: .3rem;
 }
 
-
 .createForm label,
 .createForm button,
 .createForm select,