....
This commit is contained in:
lunaticbum
parent
075e5b50c8
commit
a02349f7a1
@ -34,19 +34,19 @@
|
||||
line-height: 30px;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 2px;
|
||||
/*margin: 2px;*/
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
align-content: center;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
color: white;
|
||||
background: #40404564;
|
||||
/*background: #40404564;*/
|
||||
position: relative;
|
||||
outline-width: thin;
|
||||
outline-color: #ec914b8f;
|
||||
border-color: #ec914b8f;
|
||||
border-style: groove;
|
||||
border-width: 1px;
|
||||
border: 1px solid #393b42;
|
||||
height: var(--ButtonHeight);
|
||||
border-radius: 10px;
|
||||
background: #00000044;
|
||||
}
|
||||
#title_field {
|
||||
font-size: 20px;
|
||||
@ -157,4 +157,10 @@ a.btn_layerClose:hover {
|
||||
overflow: hidden;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#editor {
|
||||
border: 1px solid #393b42;
|
||||
padding: 1px;
|
||||
border-radius: 10px;
|
||||
background: #00000044;
|
||||
}
|
||||
@ -8,9 +8,10 @@
|
||||
}
|
||||
|
||||
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;
|
||||
background: var(--DEFAULT_LAYER_BACK);
|
||||
}
|
||||
|
||||
#where{
|
||||
table-layout: fixed;
|
||||
}
|
||||
@ -22,8 +23,9 @@ body {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
align-content: center;
|
||||
background: var(--DEFAULT_LAYER_BACK);
|
||||
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 > *{
|
||||
@ -43,7 +45,7 @@ body > *{
|
||||
|
||||
header {
|
||||
top: 0;
|
||||
background: var(--DEFAULT_LAYER_BACK);
|
||||
/*background: var(--DEFAULT_LAYER_BACK);*/
|
||||
border-top: #ec914b8f;
|
||||
border-radius: 10px 30px;
|
||||
border-width: 1px;
|
||||
@ -114,8 +116,7 @@ h2 {
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
overflow-x: clip;
|
||||
height: 68vh;
|
||||
max-height: 68vh;
|
||||
height: 78vh;
|
||||
min-height: 8vh;
|
||||
}
|
||||
|
||||
@ -132,7 +133,7 @@ footer {
|
||||
display: flex;
|
||||
bottom: 0;
|
||||
border-top: #ec914b8f;
|
||||
background: var(--DEFAULT_LAYER_BACK);
|
||||
/*background: var(--DEFAULT_LAYER_BACK);*/
|
||||
border-radius: 30px 10px;
|
||||
border-width: 1px;
|
||||
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())}
|
||||
document.addEventListener("DOMContentLoaded", onLoaded);
|
||||
function onLoaded() {
|
||||
baseData.title = urldecode([[${srcPost.title}]]);
|
||||
baseData.content = urldecode([[${srcPost.content}]]);
|
||||
var h = document.querySelector('#main_layer').getBoundingClientRect().height + 'px'
|
||||
baseData.title = [[${srcPost.title}]];
|
||||
baseData.content = [[${srcPost.content}]];
|
||||
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({
|
||||
el: document.querySelector('#editor'),
|
||||
height: '500px',
|
||||
height: h+ 'px',
|
||||
width:'100%',
|
||||
viewer: true,
|
||||
usageStatistics : false,
|
||||
@ -27,21 +31,18 @@
|
||||
theme:"dark",
|
||||
});
|
||||
}
|
||||
function save() {
|
||||
console.log(editor.getHTML())
|
||||
}
|
||||
</script>
|
||||
</th:block>
|
||||
<th:block layout:fragment="content" id="content">
|
||||
<div id="main_layer">
|
||||
<input id="title_layer" />
|
||||
<label id="title_layer" class="write_option" ></label>
|
||||
<div id="editor" ></div>
|
||||
<div id="hashtag_layer">
|
||||
<select > </select>
|
||||
<input id="hashtag" />
|
||||
</div>
|
||||
<div id="controll_layer" >
|
||||
<button onclick="save()">asdsad</button>
|
||||
<div class="write_controllbox">
|
||||
<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 style="width: 15px" ></div>
|
||||
<label class="write_option" readonly id="location_field"></label>
|
||||
</div>
|
||||
</div>
|
||||
</th:block>
|
||||
|
||||
@ -30,11 +30,7 @@
|
||||
console.log(style.getPropertyValue('--FooterHeight'))
|
||||
console.log(style.getPropertyValue('--TopHeight'))
|
||||
var editorHeght = (
|
||||
document.querySelector('#main_layer').getBoundingClientRect().height -
|
||||
(
|
||||
Number(style.getPropertyValue('--ButtonHegit').replace("px","") * 3)
|
||||
+ Number(style.getPropertyValue('--TopHeight').replace("px",""))
|
||||
)
|
||||
document.querySelector('#main_layer').getBoundingClientRect().height * 0.7
|
||||
)
|
||||
|
||||
editor = new toastui.Editor({
|
||||
@ -115,8 +111,10 @@
|
||||
<div class="write_controllbox">
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<h1><button id="save" class="write_option" style="width: 100%; position: relative" onclick="save()">저장하셈</button></h1>
|
||||
</th:block>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user