From 5d7c2c3b50a5eb3be0b027b53c853b2b8f5b0d04 Mon Sep 17 00:00:00 2001
From: Oliver Booth <git@olivr.me>
Date: Tue, 27 Feb 2024 00:27:14 +0000
Subject: [PATCH] style: make wysiwyg editor full-height

---
 OliverBooth/Pages/Admin/EditBlogPost.cshtml | 54 +++++++++++----------
 src/scss/admin.scss                         | 31 ++++++++++--
 2 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/OliverBooth/Pages/Admin/EditBlogPost.cshtml b/OliverBooth/Pages/Admin/EditBlogPost.cshtml
index 68cb70c..bd3b836 100644
--- a/OliverBooth/Pages/Admin/EditBlogPost.cshtml
+++ b/OliverBooth/Pages/Admin/EditBlogPost.cshtml
@@ -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>
\ No newline at end of file
diff --git a/src/scss/admin.scss b/src/scss/admin.scss
index 87c700a..9ff9a16 100644
--- a/src/scss/admin.scss
+++ b/src/scss/admin.scss
@@ -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;
+  }
+}