style: new style of markdown editor

client/components/MarkdownEditor.tsx

@@ -29,7 +29,7 @@ export const MarkdownEditor = ({ placeholder, source, setSource }: Props) => {
     return (
         <div class="markdown-editor">
             <div class="editor">
-                <h1>Editor</h1>
+                <div class="label">Editor</div>
                 <textarea
                     onInput={e => setSource(e.target instanceof HTMLTextAreaElement ? e.target.value : '')}
                     value={source}
@@ -39,7 +39,7 @@ export const MarkdownEditor = ({ placeholder, source, setSource }: Props) => {
                 ></textarea>
             </div>
             <div class="preview">
-                <h1>Preview</h1>
+                <div class="label">Preview</div>
                 <div class="preview-content">
                     {source.trim().length ? <Markdown source={source} /> : <div class="placeholder">{placeholder}</div>}
                 </div>

client/pages/AdminPage.tsx

@@ -36,19 +36,23 @@ const CreateProblem = ({}) => {
     }
 
     return (
-        <>
-            <div class="problem-title">
-                <label>Titolo</label>
+        <div class="create-problem-form">
+            <div class="col">
+                <label for="create-problem-title">Titolo</label>
                 <input
                     type="text"
+                    id="create-problem-title"
                     value={title}
                     onInput={e => setTitle(e.target instanceof HTMLInputElement ? e.target.value : '')}
                     placeholder="Problema..."
                 />
             </div>
-            <MarkdownEditor placeholder="Scrivi un nuovo problema..." {...{ source, setSource }} />
+            <div class="col">
+                <label>Testo</label>
+                <MarkdownEditor placeholder="Scrivi un nuovo problema..." {...{ source, setSource }} />
+            </div>
             <button onClick={handleCreateProblem}>Aggiungi Problema</button>
-        </>
+        </div>
     )
 }
 

client/styles/main.scss

@@ -1,4 +1,4 @@
-$device-s-width: 640px;
+$device-s-width: 925px;
 $device-m-width: 1200px;
 
 :root {
@@ -285,10 +285,19 @@ $heading-scale: 1.25;
     display: flex;
     gap: 0.5rem;
     align-items: center;
+}
 
-    @media screen and (max-width: $device-s-width), (pointer: coarse) {
-        flex-direction: column;
-        width: 100%;
+.col {
+    width: 100%;
+
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+
+    label {
+        align-self: start;
+        display: grid;
+        place-content: center;
     }
 }
 
@@ -336,10 +345,18 @@ main {
 
     .title {
         font-size: 32px;
+
+        @media screen and (max-width: $device-s-width), (pointer: coarse) {
+            text-align: center;
+        }
     }
 
     .subtitle {
         font-size: 28px;
+
+        @media screen and (max-width: $device-s-width), (pointer: coarse) {
+            text-align: center;
+        }
     }
 
     .info {
@@ -759,27 +776,45 @@ header {
 }
 
 .markdown-editor {
-    display: grid;
-    width: 100%;
-    grid-template-columns: repeat(2, 1fr);
+    display: flex;
+    flex-direction: row;
 
-    gap: 1rem;
+    box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
+    border-radius: 0.25rem;
+    background: #ffffff;
+
+    // gap: 1rem;
 
     .editor,
     .preview {
         width: 100%;
-        max-width: 70ch;
+        max-width: 60ch;
+        min-width: 25ch;
+
+        flex: 0 1 100%;
 
         display: flex;
         flex-direction: column;
         align-items: center;
 
-        gap: 1rem;
+        .label {
+            display: flex;
+            align-self: start;
+
+            font-size: 16px;
+
+            font-weight: 400;
+            padding: 0.5rem;
+        }
     }
 
     .editor {
         justify-self: end;
 
+        .label {
+            right: 0;
+        }
+
         textarea {
             font-family: 'DM Mono', monospace;
             font-size: 16px;
@@ -787,13 +822,23 @@ header {
             resize: none;
             overflow-y: hidden;
 
-            min-height: 8rem;
+            min-height: 12rem;
+
+            box-shadow: none;
+            border-radius: unset;
+            background: none;
         }
     }
 
     .preview {
         justify-self: start;
 
+        border-left: 1px solid #ddd;
+
+        .label {
+            left: 0;
+        }
+
         .placeholder {
             color: #666;
         }
@@ -805,9 +850,31 @@ header {
 
             padding: 1rem;
 
-            box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
-            border-radius: 0.25rem;
-            background: #ffffff;
+            word-break: break-word;
+        }
+    }
+
+    @media screen and (max-width: $device-m-width), (pointer: coarse) {
+        flex-direction: column;
+
+        .editor textarea,
+        .preview .preview-content {
+            padding: 0.75rem;
+        }
+
+        .editor {
+            textarea {
+                min-height: 3rem;
+            }
+        }
+
+        .preview {
+            border-left: none;
+            border-top: 1px solid #ddd;
+
+            .preview-content {
+                min-height: 4rem;
+            }
         }
     }
 }
@@ -817,8 +884,13 @@ header {
 //
 
 main.page-admin {
-    .problem-title {
-        @extend .row;
+    .create-problem-form {
+        display: flex;
+        flex-direction: column;
+
+        align-items: center;
+
+        gap: 1rem;
     }
 
     .users-table {
@@ -888,11 +960,6 @@ main.page-admin {
         padding: 0.75rem;
     }
 
-    .markdown-editor {
-        grid-template-columns: auto;
-        grid-template-rows: auto auto;
-    }
-
     .form {
         width: 100%;
         padding: 1rem;
@@ -907,10 +974,10 @@ main.page-admin {
         }
     }
 
-    textarea,
-    .markdown-editor .preview .preview-content {
-        padding: 0.75rem;
-    }
+    // textarea,
+    // .markdown-editor .preview .preview-content {
+    //     padding: 0.75rem;
+    // }
 
     .solution {
         .solution-content {
@@ -923,13 +990,13 @@ main.page-admin {
 }
 
 @media screen and (max-width: $device-m-width), (pointer: coarse) {
-    .markdown-editor {
-        grid-template-columns: auto;
-        grid-template-rows: auto auto;
-
-        .preview,
-        .editor {
-            justify-self: center;
-        }
-    }
+    // .markdown-editor {
+    //     grid-template-columns: auto;
+    //     grid-template-rows: auto auto;
+
+    //     .preview,
+    //     .editor {
+    //         justify-self: center;
+    //     }
+    // }
 }