lun_admin/lunBackServer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

...

Browse Source
This commit is contained in:
lunaticbum
2024-10-11 17:17:57 +09:00
parent a810db5d25
commit 23ed2e43cc
6 changed files with 428 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/blog.css
+23
View File
@@ -0,0 +1,23 @@
:root{
--ButtonWidth:45%;
--ButtonHeight:45px;
}
#save {
right: 0;
position: absolute;
width: var(--ButtonWidth);
height: var(--ButtonHeight);
}
.layer > * {
height: var(--ButtonHeight);
}
input {
width: 100%;
}
select , #hashtag{
margin-left: 1%;
width: fit-content;
margin-right: 1%;
}
src/main/resources/static/css/common.css
+35 -10
View File
@@ -1,38 +1,63 @@
:root {
--WindowFull : 100svh;
--TopHeight: 50px;
--FooterHeight: 120px;
--WindowFull : 100%;
--TopHeight: 160px;
--FooterHeight: 160px;
--ContentVerticalMargin: 5px;
}
input, select ,button{
color: white;
background: #2d2f34;
border: black;
border-width: 1px;
padding: 0;
margin: 0;
position: relative;
}
body, html {
background-color: black;
margin: 0px;
margin-left: 2.5%;
margin-right: 2.5%;
height: 100lvh;
width: 95%;
}
header {
width: 100%;
align-content: center;
position: relative;
background-color: Gray;
height: var(--TopHeight);
background-image: url("../blog/post/images/42cc3207-42a4-4ceb-8a2f-f5f7a89496fc.jpg");
background-repeat: revert;
background-size: contain;
background-origin: revert;
}
#content {
margin-left: 2.5%;
margin-right: 2.5%;
position: relative;
overflow-y: auto;
overflow-x: clip;
background: black;
min-height: calc((var(--TopHeight) + var(--FooterHeight)) * 2);
height: calc(var(--WindowFull) - calc(var(--FooterHeight) + var(--TopHeight)));
background-image: url("../blog/post/images/bb109b5a-f907-4da1-9c4f-55533395ed6e.jpg");
background-repeat: revert;
background-size: contain;
background-origin: revert;
}
#content > * {
margin-top: 5px;
margin-bottom: 5px;
margin-top: var(--ContentVerticalMargin);
margin-bottom: var(--ContentVerticalMargin);
}
footer {
width: 100%;
align-content: center;
position: relative;
height: var(--FooterHeight);
background-color: aquamarine;
background-image: url("../blog/post/images/42cc3207-42a4-4ceb-8a2f-f5f7a89496fc.jpg");
background-repeat: revert;
background-size: contain;
transform: scaleY(-1);
}
src/main/resources/templates/content/blog/write.html
+24 -9
View File
@@ -7,20 +7,33 @@
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" th:src="@{/js/toast-ui.js}"></script>
<link th:href="@{/css/blog.css}" rel="stylesheet" />
<link th:href="@{/css/toast-ui.css}" rel="stylesheet" />
<link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
<!-- <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor-dark.css" />-->
<!-- <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor-dark.css" />-->
<script th:inline="javascript">
let editor
var editor
let onChange = () => {console.log(editor.getMarkdown())}
document.addEventListener("DOMContentLoaded", onLoaded);
function onLoaded() {
var h = document.querySelector('#content').getBoundingClientRect().height + 'px'
var style = getComputedStyle(document.body)
console.log(style.getPropertyValue('--ContentVerticalMargin'))
console.log(window.c)
console.log(style.getPropertyValue('--FooterHeight'))
console.log(style.getPropertyValue('--TopHeight'))
var editorHeght = (
document.querySelector('#content').getBoundingClientRect().height -
(
Number(style.getPropertyValue('--ButtonHegit').replace("px","") * 3)
+ Number(style.getPropertyValue('--TopHeight').replace("px",""))
)
)
editor = new toastui.Editor({
el: document.querySelector('#editor'),
previewStyle: 'tab',
height: '500px',
width:'100%',
height: editorHeght+ 'px',
width:'95%',
theme:'dark',
usageStatistics : false,
toolbar:null,
@@ -80,14 +93,16 @@
</script>
</head>
<div layout:fragment="content" id="content">
<input id="title_layer" />
<div class="layer">
<input id="title_layer" />
</div>
<div id="editor" ></div>
<div id="hashtag_layer">
<div class="layer">
<select > </select>
<input id="hashtag" />
</div>
<div id="controll_layer" >
<button onclick="save()">asdsad</button>
<div id="layer" >
<button id="save" onclick="save()">asdsad</button>
</div>
</div>
</html>