diff --git a/client/components/MarkdownEditor.tsx b/client/components/MarkdownEditor.tsx index 2628ef2..337514e 100644 --- a/client/components/MarkdownEditor.tsx +++ b/client/components/MarkdownEditor.tsx @@ -29,7 +29,7 @@ export const MarkdownEditor = ({ placeholder, source, setSource }: Props) => { return (
-

Editor

+
Editor
-

Preview

+
Preview
{source.trim().length ? :
{placeholder}
}
diff --git a/client/pages/AdminPage.tsx b/client/pages/AdminPage.tsx index b2160b2..87f3661 100644 --- a/client/pages/AdminPage.tsx +++ b/client/pages/AdminPage.tsx @@ -36,19 +36,23 @@ const CreateProblem = ({}) => { } return ( - <> -
- +
+
+ setTitle(e.target instanceof HTMLInputElement ? e.target.value : '')} placeholder="Problema..." />
- +
+ + +
- +
) } diff --git a/client/styles/main.scss b/client/styles/main.scss index dbe2aac..ef18d3f 100644 --- a/client/styles/main.scss +++ b/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; +} + +.col { + width: 100%; + + display: flex; + gap: 0.5rem; + align-items: center; - @media screen and (max-width: $device-s-width), (pointer: coarse) { - flex-direction: column; - width: 100%; + 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; + // } + // } } diff --git a/index.html b/index.html index 1aa5984..91c0ab7 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ PHC | Problemi + diff --git a/public/favicon.zip b/public/favicon.zip new file mode 100644 index 0000000..6c83a53 Binary files /dev/null and b/public/favicon.zip differ diff --git a/public/favicon/about.txt b/public/favicon/about.txt new file mode 100644 index 0000000..40be84d --- /dev/null +++ b/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)) diff --git a/public/favicon/android-chrome-192x192.png b/public/favicon/android-chrome-192x192.png new file mode 100644 index 0000000..34f0733 Binary files /dev/null and b/public/favicon/android-chrome-192x192.png differ diff --git a/public/favicon/android-chrome-512x512.png b/public/favicon/android-chrome-512x512.png new file mode 100644 index 0000000..117123f Binary files /dev/null and b/public/favicon/android-chrome-512x512.png differ diff --git a/public/favicon/apple-touch-icon.png b/public/favicon/apple-touch-icon.png new file mode 100644 index 0000000..3958bdd Binary files /dev/null and b/public/favicon/apple-touch-icon.png differ diff --git a/public/favicon/favicon-16x16.png b/public/favicon/favicon-16x16.png new file mode 100644 index 0000000..8be047c Binary files /dev/null and b/public/favicon/favicon-16x16.png differ diff --git a/public/favicon/favicon-32x32.png b/public/favicon/favicon-32x32.png new file mode 100644 index 0000000..10dcac5 Binary files /dev/null and b/public/favicon/favicon-32x32.png differ diff --git a/public/favicon/favicon.ico b/public/favicon/favicon.ico new file mode 100644 index 0000000..01d5c76 Binary files /dev/null and b/public/favicon/favicon.ico differ diff --git a/public/favicon/site.webmanifest b/public/favicon/site.webmanifest new file mode 100644 index 0000000..45dc8a2 --- /dev/null +++ b/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"} \ No newline at end of file