oliverbooth/oliverbooth.dev
oliverbooth
/
oliverbooth.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

style: make wysiwyg editor full-height

This commit is contained in:
Oliver Booth 2024-02-27 00:27:14 +00:00
parent 7cb6e9d463
commit 5d7c2c3b50
Signed by: oliverbooth
GPG Key ID: E60B570D1B7557B5
2 changed files with 55 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
OliverBooth/Pages/Admin/EditBlogPost.cshtml
View File

@ -12,30 +12,32 @@
<input type="hidden" data-blog-pid="@post.Id">
<div style="margin-bottom: 20px;">
<button id="save-button" class="btn btn-primary"><i class="fa-solid fa-floppy-disk fa-fw"></i> Save <span class="text-muted">(Ctrl+S)</span></button>
<a href="/blog/@post.Published.ToString(@"yyyy\/MM\/dd")/@post.Slug" target="_blank" class="btn btn-info"><i class="fa-solid fa-magnifying-glass"></i> Preview</a>
<div class="d-flex flex-column" style="height: calc(100vh - 35px)">
<div class="mb-3">
<button id="save-button" class="btn btn-primary"><i class="fa-solid fa-floppy-disk fa-fw"></i> Save <span class="text-muted">(Ctrl+S)</span></button>
<a href="/blog/@post.Published.ToString(@"yyyy\/MM\/dd")/@post.Slug" target="_blank" class="btn btn-info"><i class="fa-solid fa-magnifying-glass"></i> Preview</a>
</div>
<table class="table">
<tr>
<th>Post ID</th>
<td><input class="form-control" type="text" value="@post.Id" disabled="disabled"></td>
</tr>
<tr>
<th>Title</th>
<td><input class="form-control" id="post-title" type="text" value="@post.Title"></td>
</tr>
</table>
<div class="d-flex flex-row flex-fill">
<div class="flex-fill mb-0 highlighting-container" style="border-right: 2px dotted #FFFFFF;">
<textarea id="content" spellcheck="false">@post.Body</textarea>
<pre id="highlighting" aria-hidden="true"><code id="highlighting-content" class="language-markdown">@post.Body</code></pre>
</div>
<div class="flex-fill mb-0" style="overflow-y: scroll; background: #1E1E1E; max-height: calc(100vh - 35px)">
<article id="article-preview" style="background: #333; max-width: 700px; margin: 20px auto; padding: 20px;">
@Html.Raw(Markdown.ToHtml(post.Body, MarkdownPipeline))
</article>
</div>
</div>
</div>
<table class="table">
<tr>
<th>Post ID</th>
<td><input class="form-control" type="text" value="@post.Id" disabled="disabled"></td>
</tr>
<tr>
<th>Title</th>
<td><input class="form-control" id="post-title" type="text" value="@post.Title"></td>
</tr>
</table>
<div class="row" style="margin-top: 20px;">
<div id="editing-area" class="col-md-6 col-sm-12">
<textarea id="content" spellcheck="false">@post.Body</textarea>
<pre id="highlighting" aria-hidden="true"><code id="highlighting-content" class="language-markdown">@post.Body</code></pre>
</div>
<div class="col-md-6 col-sm-12" style="overflow-y: scroll; background: #1E1E1E">
<article id="article-preview" style="background: #333; max-width: 700px; margin: 20px auto; padding: 20px;">
@Html.Raw(Markdown.ToHtml(post.Body, MarkdownPipeline))
</article>
</div>
</div>

31
src/scss/admin.scss
View File

@ -70,12 +70,12 @@ textarea {
}
#highlighting, #content {
margin: 10px;
padding: 10px;
border: 0;
width: calc(100% - 32px);
height: 500px;
width: 100%;
height: 100%;
position: relative;
margin: 0;
}
#highlighting, #content, #highlighting * {
@ -85,7 +85,6 @@ textarea {
}
#highlighting {
margin-top: -511px;
z-index: 0;
background: #1E1E1E;
}
@ -99,8 +98,32 @@ textarea {
overflow-wrap: normal;
overflow-x: scroll;
white-space: pre;
&:focus {
outline: none;
}
}
#highlighting-content, #highlighting-content code {
white-space: pre !important;
}
#content, .highlighting-container .code-toolbar {
grid-column: 1;
grid-row: 1;
}
.highlighting-container {
display: grid;
max-width: 50%;
max-height: calc(100vh - 35px);
overflow: scroll;
}
.highlighting-container .code-toolbar {
height: 100%;
.toolbar {
display: none;
}
}