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 (
- <>
-
-
+
)
}
diff --git a/client/styles/main.scss b/client/styles/main.scss
index dbe2aac..72c72cf 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 {
@@ -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;
+ // }
+ // }
}