From 13703bf57548e50512d8ffe3c901a070478a69d1 Mon Sep 17 00:00:00 2001 From: Hideaki Tanabe Date: Tue, 27 Oct 2020 00:35:34 +0900 Subject: [PATCH 1/2] Update layout --- public/css/style.css | 74 +++++++++++++++----------------------------- public/index.html | 26 +++++++--------- public/js/main.js | 21 +++++++++++-- 3 files changed, 55 insertions(+), 66 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index 20bb688..7695388 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -8,6 +8,12 @@ html, body { font-size: 1em; line-height: 1.5em; background-color: #444; + height: 100%; + overflow: hidden; +} + +body { + overscroll-behavior-y: none; } h1, h2, h3, h4, h5, h6, p { @@ -34,9 +40,13 @@ img { } #header { - padding: 10px 0 ; + position: fixed; + z-index: 1000; + top: 0; + left: 0; background-color: #444; width: 100%; + padding: 10px; text-align: center; } @@ -46,67 +56,34 @@ img { } #container { - min-height: 100%; - height: auto !important; - height: 100%; - width: 1100px; - padding: 20px; + position: absolute; + width: 100%; margin: 0 auto; background-color: #fff; - border-radius: 10px; + overflow: hidden; } -#container .section { - margin-bottom: 20px; +#editor-wrapper { + border-right: 10px solid #eee; } -#content .mode { - border: 1px solid #ddd; - border-radius: 3px; - width: 535px; - display: inline-block; - vertical-align: top; +#preview-wrapper { + padding-left: 10px; } -#content .mode .content { - padding: 10px; -} - -#preview { - margin-left: 20px; -} - -#leftColumn { - float: left; - width: 700px; -} - -#rightColumn { - width: 240px; - float: right; -} - -textarea#markdown { +.column { padding: 0; margin: 0; - width: 100%; - height: 400px; - overflow: auto; - font-size: 15px; - border: none; -/* border: 2px solid #D1D1BC;*/ - resize: vertical; - outline: none; + white-space: nowrap; + display: inline-block; + width: 50%; + vertical-align: top; + overflow-y: scroll; } -#editor { - width: 100%; -} - #footer { - clear: both; + display :none; width: 100%; - padding: 10px; background-color: #444; color: #fff; text-align: center; @@ -117,7 +94,6 @@ textarea#markdown { color: #999; } - #footer #copyright a { font-size: 12px; color: #999; diff --git a/public/index.html b/public/index.html index 7a7b468..7a3be63 100644 --- a/public/index.html +++ b/public/index.html @@ -27,12 +27,10 @@
-
-
-
- -
# Markdown syntax guide +
+
+
# Markdown syntax guide ## Headers @@ -56,16 +54,16 @@ _You **can** combine them_ * Item 1 * Item 2 - * Item 2a - * Item 2b +* Item 2a +* Item 2b ### Ordered 1. Item 1 1. Item 2 1. Item 3 - 1. Item 3a - 1. Item 3b + 1. Item 3a + 1. Item 3b ## Images @@ -99,14 +97,12 @@ alert(message); ## Inline code This web site is using `markedjs/marked`.
-
- -
-
-
+
+
+
+
-
diff --git a/public/js/main.js b/public/js/main.js index 591c9ef..47a8ea1 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -1,13 +1,28 @@ $(function() { - var isEdited = false; + let isEdited = false; + + let adjustScreen = () => { + let screenHeight = $(window).height(); + let headerHeight = $('#header').outerHeight(); + let containerHeight = screenHeight - headerHeight; + console.log(containerHeight); + $('#container').css({ top: `${headerHeight}px` }); + $('#container').css({ height: `${containerHeight}px`}); + $('.column').css({ height: `${containerHeight}px`}); + }; + + $(window).resize(() => { + adjustScreen(); + }); // Setup editor - var editor = ace.edit('editor'); + let editor = ace.edit('editor'); editor.getSession().setUseWrapMode(true); editor.setOptions({ maxLines: Infinity, indentedSoftWrap: false, fontSize: 14, + autoScrollEditorIntoView: true, theme: 'ace/theme/github', // TODO consider some options }); @@ -15,6 +30,7 @@ $(function() { editor.on('change', () => { isEdited = true; convert(); + adjustScreen(); }); let convert = () => { @@ -31,4 +47,5 @@ $(function() { }); convert(); + adjustScreen(); }); \ No newline at end of file From e34f87da3f3a4d227d0404729f06133b69f34ec6 Mon Sep 17 00:00:00 2001 From: Hideaki Tanabe Date: Tue, 27 Oct 2020 01:16:25 +0900 Subject: [PATCH 2/2] Update --- public/css/style.css | 26 +++++++++++++++++++++----- public/js/main.js | 7 +++---- 2 files changed, 24 insertions(+), 9 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index 7695388..bd79f5d 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -13,7 +13,7 @@ html, body { } body { - overscroll-behavior-y: none; + overscroll-behavior: none; } h1, h2, h3, h4, h5, h6, p { @@ -82,24 +82,40 @@ img { } #footer { - display :none; + padding: 5px; + z-index: 1001; + position: absolute; + bottom: 0; + left: 0; width: 100%; background-color: #444; color: #fff; text-align: center; + display: flex; + justify-content: center; + align-items: center; } #footer #copyright { - font-size: 12px; color: #999; } +#copyright img { + width: 16px; + display: block; + padding: 0; + margin: 0; +} + #footer #copyright a { - font-size: 12px; + display: block; + padding: 0; + margin: 0; + font-size:0; color: #999; } #footer #copyright a:hover { color: #fff; - text-decoration: underline; + text-decoration: none; } \ No newline at end of file diff --git a/public/js/main.js b/public/js/main.js index 47a8ea1..abf00df 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -4,10 +4,9 @@ $(function() { let adjustScreen = () => { let screenHeight = $(window).height(); let headerHeight = $('#header').outerHeight(); - let containerHeight = screenHeight - headerHeight; - console.log(containerHeight); + let footerHeight = $('#footer').outerHeight(); + let containerHeight = screenHeight - headerHeight - footerHeight; $('#container').css({ top: `${headerHeight}px` }); - $('#container').css({ height: `${containerHeight}px`}); $('.column').css({ height: `${containerHeight}px`}); }; @@ -18,6 +17,7 @@ $(function() { // Setup editor let editor = ace.edit('editor'); editor.getSession().setUseWrapMode(true); + editor.renderer.setScrollMargin(10, 10, 10, 10); editor.setOptions({ maxLines: Infinity, indentedSoftWrap: false, @@ -26,7 +26,6 @@ $(function() { theme: 'ace/theme/github', // TODO consider some options }); - editor.on('change', () => { isEdited = true; convert();