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