style: new style of markdown editor

pull/1/head
parent 8a911f5ddb
commit 9d8689da36

@ -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>

@ -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>
)
}

@ -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;
// }
// }
}

Loading…
Cancel
Save