New editor (#458)
With this PR, when JS is activated and WASM supported, the article editor will be dynamically replaced with `contenteditable`s elements. This makes the editing interface simpler and less like a regular form. It will also allow us to easily add visual formatting with native browser APIs (and to insert images or videos directly). Here is a little demo:  There is still a lot to do, but it is a good first step. Fixes #255
This commit is contained in:
@@ -266,3 +266,58 @@ main .article-meta {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#plume-editor {
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
background: transparent;
|
||||
align-items: center;
|
||||
button {
|
||||
flex: 0 0 10em;
|
||||
font-size: 1.25em;
|
||||
margin: .5em 0em .5em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
& > * {
|
||||
min-height: 1em;
|
||||
outline: none;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: transparentize($black, 0.6);
|
||||
}
|
||||
|
||||
article {
|
||||
max-width: none;
|
||||
min-height: 80vh;
|
||||
}
|
||||
}
|
||||
|
||||
.popup {
|
||||
position: fixed;
|
||||
top: 15vh;
|
||||
bottom: 20vh;
|
||||
left: 20vw;
|
||||
right: 20vw;
|
||||
background: $lightgray;
|
||||
border: 1px solid $purple;
|
||||
z-index: 2;
|
||||
padding: 2em;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.popup:not(.show), .popup-bg:not(.show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.popup-bg {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user