....
This commit is contained in:
parent
075e5b50c8
commit
a02349f7a1
@ -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;
|
||||||
|
}
|
||||||
@ -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;
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user