This commit is contained in:
lunaticbum 2024-11-07 14:01:21 +09:00
parent 075e5b50c8
commit a02349f7a1
5 changed files with 40 additions and 34 deletions

View File

@ -34,19 +34,19 @@
line-height: 30px; line-height: 30px;
width: 100%; width: 100%;
padding: 0; padding: 0;
margin: 2px; /*margin: 2px;*/
margin-top: 5px;
margin-bottom: 5px;
align-content: center; align-content: center;
top: 0; top: 0;
bottom: 0; bottom: 0;
color: white; color: white;
background: #40404564; /*background: #40404564;*/
position: relative; position: relative;
outline-width: thin; border: 1px solid #393b42;
outline-color: #ec914b8f;
border-color: #ec914b8f;
border-style: groove;
border-width: 1px;
height: var(--ButtonHeight); height: var(--ButtonHeight);
border-radius: 10px;
background: #00000044;
} }
#title_field { #title_field {
font-size: 20px; font-size: 20px;
@ -158,3 +158,9 @@ a.btn_layerClose:hover {
overflow-y: hidden; overflow-y: hidden;
overflow-x: hidden; overflow-x: hidden;
} }
#editor {
border: 1px solid #393b42;
padding: 1px;
border-radius: 10px;
background: #00000044;
}

View File

@ -8,9 +8,10 @@
} }
html { html {
background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='46.5' height='46.5' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23000000ff'/><path d='M27.31-2.917a5 5 0 010 5.834m-8.12 0a5 5 0 010-5.834m-4.827 7.501a10 10 0 010-9.169m17.774.001a10 10 0 010 9.169M10.181 7.36a15 15 0 01-.001-14.722m26.14 0a15 15 0 010 14.724m-9.01 36.22a5 5 0 010 5.835m-8.12 0a5 5 0 010-5.834m-4.827 7.501a10 10 0 010-9.169m17.774.001a10 10 0 010 9.169M10.181 53.86a15 15 0 01-.001-14.723m26.14 0a15 15 0 010 14.724m6.12-27.693a5 5 0 010-5.834m-4.827 7.5a10 10 0 010-9.169M33.431 30.61a15 15 0 01-.001-14.722M4.06 20.332a5 5 0 010 5.835m4.827-7.501a10 10 0 010 9.169m4.183-11.947a15 15 0 010 14.724' stroke-linecap='square' stroke-width='1.5' stroke='%23c15d1ae3' fill='none'/><path d='M43.582 42.44a5 5 0 015.835 0m-7.501-4.827a10 10 0 019.169 0M39.138 33.43a15 15 0 0114.724 0m-56.781 9.01a5 5 0 015.836 0m-7.501-4.827a10 10 0 019.169 0M-7.362 33.43a15 15 0 0114.724 0M49.417 4.06a5 5 0 01-5.834 0m7.501 4.827a10 10 0 01-9.169 0m11.946 4.182a15 15 0 01-14.723.001M2.917 4.06a5 5 0 01-5.834 0m7.501 4.827a10 10 0 01-9.169 0M7.36 13.069a15 15 0 01-14.722.001m27.694 6.12a5 5 0 015.835 0m0 8.12a5 5 0 01-5.834 0m7.5 4.827a10 10 0 01-9.168 0m.001-17.774a10 10 0 019.169 0m2.776 21.956a15 15 0 01-14.723.001m0-26.14a15 15 0 0114.724 0' stroke-linecap='square' stroke-width='1.5' stroke='%23ffffff72' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-93,-93)' fill='url(%23a)'/></svg>");
margin: 1vh 1vw; margin: 1vh 1vw;
background: var(--DEFAULT_LAYER_BACK);
} }
#where{ #where{
table-layout: fixed; table-layout: fixed;
} }
@ -22,8 +23,9 @@ body {
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
align-content: center; align-content: center;
background: var(--DEFAULT_LAYER_BACK);
padding: 1vh 1vw; padding: 1vh 1vw;
background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='45' height='51.96' patternTransform='scale(2) rotate(20)'><rect x='0' y='0' width='100%' height='100%' fill='%23202025ff'/><path d='M52.48 44.47a15 15 0 01-14.96 0 15 15 0 00-7.48 12.96M7.48 44.42a15 15 0 01-14.96 0M15 57.44c0-5.35-2.9-10.35-7.52-13.02a15 15 0 017.48-12.97M7.48 18.5a14.97 14.97 0 01-14.98-.03m15.02-.03A15 15 0 0115 5.47a15 15 0 00-4.4-10.62m23.8.05A15 15 0 0030 5.53a15 15 0 017.48 12.96 14.9 14.9 0 0015.02-.03m-22.5 13a15.13 15.13 0 017.52 13.01m-7.56-39a15 15 0 01-14.96 0M7.48 18.5a15 15 0 017.48 12.96 15 15 0 0015.04 0 15 15 0 017.48-12.96' stroke-width='3' stroke='%23ec914b8f' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-38,-21.84)' fill='url(%23a)'/></svg>") border-radius: 10px;
} }
body > *{ body > *{
@ -43,7 +45,7 @@ body > *{
header { header {
top: 0; top: 0;
background: var(--DEFAULT_LAYER_BACK); /*background: var(--DEFAULT_LAYER_BACK);*/
border-top: #ec914b8f; border-top: #ec914b8f;
border-radius: 10px 30px; border-radius: 10px 30px;
border-width: 1px; border-width: 1px;
@ -114,8 +116,7 @@ h2 {
position: relative; position: relative;
overflow-y: auto; overflow-y: auto;
overflow-x: clip; overflow-x: clip;
height: 68vh; height: 78vh;
max-height: 68vh;
min-height: 8vh; min-height: 8vh;
} }
@ -132,7 +133,7 @@ footer {
display: flex; display: flex;
bottom: 0; bottom: 0;
border-top: #ec914b8f; border-top: #ec914b8f;
background: var(--DEFAULT_LAYER_BACK); /*background: var(--DEFAULT_LAYER_BACK);*/
border-radius: 30px 10px; border-radius: 30px 10px;
border-width: 1px; border-width: 1px;
height: 5vh; height: 5vh;

View File

@ -60,5 +60,5 @@ function showPosition(position) {
} }
document.getElementById('location_field').value = "Lat: " + position.coords.latitude + ", Lon: " + position.coords.longitude; document.getElementById('location_field').textContent = "Lat: " + position.coords.latitude + ", Lon: " + position.coords.longitude;
} }

View File

@ -14,12 +14,16 @@
let onChange = () => {console.log(editor.getMarkdown())} let onChange = () => {console.log(editor.getMarkdown())}
document.addEventListener("DOMContentLoaded", onLoaded); document.addEventListener("DOMContentLoaded", onLoaded);
function onLoaded() { function onLoaded() {
baseData.title = urldecode([[${srcPost.title}]]); baseData.title = [[${srcPost.title}]];
baseData.content = urldecode([[${srcPost.content}]]); baseData.content = [[${srcPost.content}]];
var h = document.querySelector('#main_layer').getBoundingClientRect().height + 'px' baseData.firstPostLon = [[${srcPost.firstPostLon}]];
baseData.firstPostLat = [[${srcPost.firstPostLat}]];
document.getElementById('location_field').textContent = "Lat: " + baseData.firstPostLat + ", Lon: " + baseData.firstPostLon;
$('#title_layer').text(baseData.title)
var h = document.querySelector('#main_layer').getBoundingClientRect().height * 0.7
editor = new toastui.Editor({ editor = new toastui.Editor({
el: document.querySelector('#editor'), el: document.querySelector('#editor'),
height: '500px', height: h+ 'px',
width:'100%', width:'100%',
viewer: true, viewer: true,
usageStatistics : false, usageStatistics : false,
@ -27,21 +31,18 @@
theme:"dark", theme:"dark",
}); });
} }
function save() {
console.log(editor.getHTML())
}
</script> </script>
</th:block> </th:block>
<th:block layout:fragment="content" id="content"> <th:block layout:fragment="content" id="content">
<div id="main_layer"> <div id="main_layer">
<input id="title_layer" /> <label id="title_layer" class="write_option" ></label>
<div id="editor" ></div> <div id="editor" ></div>
<div id="hashtag_layer"> <div class="write_controllbox">
<select > </select> <div class="write_option btn-example" to="#popLayer1" onclick="openPopup(this)" ></div>
<input id="hashtag" /> <div style="width: 15px" ></div>
</div> <div class="write_option btn-example" to="#popLayer2" onclick="openPopup(this)" id="hashtag_field"></div>
<div id="controll_layer" > <div style="width: 15px" ></div>
<button onclick="save()">asdsad</button> <label class="write_option" readonly id="location_field"></label>
</div> </div>
</div> </div>
</th:block> </th:block>

View File

@ -30,11 +30,7 @@
console.log(style.getPropertyValue('--FooterHeight')) console.log(style.getPropertyValue('--FooterHeight'))
console.log(style.getPropertyValue('--TopHeight')) console.log(style.getPropertyValue('--TopHeight'))
var editorHeght = ( var editorHeght = (
document.querySelector('#main_layer').getBoundingClientRect().height - document.querySelector('#main_layer').getBoundingClientRect().height * 0.7
(
Number(style.getPropertyValue('--ButtonHegit').replace("px","") * 3)
+ Number(style.getPropertyValue('--TopHeight').replace("px",""))
)
) )
editor = new toastui.Editor({ editor = new toastui.Editor({
@ -115,8 +111,10 @@
<div class="write_controllbox"> <div class="write_controllbox">
<div class="write_option btn-example" to="#popLayer1" onclick="openPopup(this)" ></div> <div class="write_option btn-example" to="#popLayer1" onclick="openPopup(this)" ></div>
<div style="width: 15px" ></div>
<div class="write_option btn-example" to="#popLayer2" onclick="openPopup(this)" id="hashtag_field"></div> <div class="write_option btn-example" to="#popLayer2" onclick="openPopup(this)" id="hashtag_field"></div>
<label for="location_field"></label><input class="write_option" readonly id="location_field"/> <div style="width: 15px" ></div>
<label class="write_option" readonly id="location_field"></label>
</div> </div>
<h1><button id="save" class="write_option" style="width: 100%; position: relative" onclick="save()">저장하셈</button></h1> <h1><button id="save" class="write_option" style="width: 100%; position: relative" onclick="save()">저장하셈</button></h1>
</th:block> </th:block>