phc/problemi
6
3
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: new style of markdown editor

Browse Source
This commit is contained in:
aziis98
2023-01-12 15:40:46 +01:00
parent 8a911f5ddb
commit 9d8689da36
3 changed files with 111 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/styles/main.scss
+100 -33
View File
@@ -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;
// .markdown-editor {
// grid-template-columns: auto;
// grid-template-rows: auto auto;
.preview,
.editor {
justify-self: center;
}
}
// .preview,
// .editor {
// justify-self: center;
// }
// }
}