github
/
halo-theme-hao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化ToDoList页面模板

This commit is contained in:
roozen 2023-07-23 15:49:58 +08:00
parent 67302e836b
commit 70516acbd6
1 changed files with 49 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
templates/todolist.html
View File

@ -25,43 +25,46 @@
<div id="todolist-main" th:if="${not #lists.isEmpty(theme.config.todo.list)}"
th:with="todoList = ${theme.config.todo.list}">
<th:block th:each="todo : ${todoList}">
<div id="todolist-left" th:if="${#strings.equals(todo.seat, 'left')}">
<div class="todolist-item">
<h3 class="todolist-title">[[${todo.class_name}]]</h3>
<ul class="todolist-ul">
<th:block th:if="${not #lists.isEmpty(todo.todo_list)}"
th:each="data : ${todo.todo_list}">
<li th:class="${data.completed ? 'achieve' : ''}">
<i style="margin-right: 5px;"
th:class="${data.completed ? 'fa-regular fa-circle-check' : 'fa-regular fa-circle'}">
</i>[[${data.content}]]
</li>
</th:block>
</ul>
<div id="todolist-left-container">
<th:block th:each="todo : ${todoList}">
<div id="todolist-left" th:if="${#strings.equals(todo.seat, 'left')}">
<div class="todolist-item">
<h3 class="todolist-title">[[${todo.class_name}]]</h3>
<ul class="todolist-ul">
<th:block th:if="${not #lists.isEmpty(todo.todo_list)}"
th:each="data : ${todo.todo_list}">
<li th:class="${data.completed ? 'achieve' : ''}">
<i style="margin-right: 5px;"
th:class="${data.completed ? 'fa-regular fa-circle-check' : 'fa-regular fa-circle'}">
</i>[[${data.content}]]
</li>
</th:block>
</ul>
</div>
</div>
</div>
<div id="todolist-right" th:if="${#strings.equals(todo.seat, 'right')}">
<div class="todolist-item">
<h3 class="todolist-title">[[${todo.class_name}]]</h3>
<ul>
<th:block th:if="${not #lists.isEmpty(todo.todo_list)}"
th:each="data : ${todo.todo_list}">
<li th:class="${data.completed ? 'achieve' : ''}">
<i style="margin-right: 5px;"
th:class="${data.completed ? 'fa-regular fa-circle-check' : 'fa-regular fa-circle'}">
</i>[[${data.content}]]
</li>
</th:block>
</ul>
</th:block>
</div>
<div id="todolist-right-container">
<th:block th:each="todo : ${todoList}">
<div id="todolist-right" th:if="${#strings.equals(todo.seat, 'right')}">
<div class="todolist-item">
<h3 class="todolist-title">[[${todo.class_name}]]</h3>
<ul>
<th:block th:if="${not #lists.isEmpty(todo.todo_list)}"
th:each="data : ${todo.todo_list}">
<li th:class="${data.completed ? 'achieve' : ''}">
<i style="margin-right: 5px;"
th:class="${data.completed ? 'fa-regular fa-circle-check' : 'fa-regular fa-circle'}">
</i>[[${data.content}]]
</li>
</th:block>
</ul>
</div>
</div>
</div>
</th:block>
</th:block>
</div>
</div>
@ -79,7 +82,7 @@
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
justify-content: space-between;
margin: 16px 0 10px
}
@ -93,13 +96,21 @@
padding: 0
}
#todolist-left {
#todolist-left-container, #todolist-right-container {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
width: 50%;
}
#todolist-left {
width: 100%;
padding: 0 8px 0 0
}
#todolist-right {
width: 50%;
width: 100%;
padding: 0 0 0 8px
}
@ -113,7 +124,7 @@
}
@media screen and (max-width: 768px) {
#todolist-left,#todolist-right {
#todolist-left, #todolist-right {
width: 100%;
}
}
@ -145,7 +156,6 @@
</style>
</div>