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>
+            <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 {
@@ -234,6 +234,29 @@ hr {
     border-bottom: 2px dotted #555;
 }
 
+.math {
+    max-width: 100%;
+    overflow-x: auto;
+}
+
+.math.math-inline {
+    display: inline-grid;
+}    
+
+@media screen and (min-width: $device-m-width) {
+    .math {
+        max-width: 100%;
+        overflow-x: auto;
+    }
+}
+
+@media screen and (max-width: $device-m-width) {
+    .math {
+        max-width: calc(100vw - 3.5rem);
+        overflow-x: auto;
+    }
+}
+
 .math-inline {
     font-size: 95%;
 }
@@ -285,10 +308,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;
+.col {
     width: 100%;
+
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+
+    label {
+        align-self: start;
+        display: grid;
+        place-content: center;
     }
 }
 
@@ -336,10 +368,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 +799,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 +845,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 +873,32 @@ 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;
+        max-width: 100%;
+
+        .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 +908,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 +984,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 +998,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 +1014,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;
+    //     }
+    // }
 }

index.html

@@ -6,6 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
         <title>PHC | Problemi</title>
+        <link rel="icon" type="image/png" href="/favicon/android-chrome-512x512.png" />
 
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

public/favicon/about.txt

@@ -0,0 +1,6 @@
+This favicon was generated using the following font:
+
+- Font Title: Lato
+- Font Author: Copyright (c) 2010-2011 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato". Licensed under the SIL Open Font License, Version 1.1.
+- Font Source: http://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHvxk6XweuBCY.ttf
+- Font License: SIL Open Font License, 1.1 (http://scripts.sil.org/OFL))

public/favicon/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}