优化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

View File

@ -25,11 +25,10 @@
<div id="todolist-main" th:if="${not #lists.isEmpty(theme.config.todo.list)}"
th:with="todoList = ${theme.config.todo.list}">
<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">
@ -44,7 +43,10 @@
</ul>
</div>
</div>
</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>
@ -57,11 +59,12 @@
</i>[[${data.content}]]
</li>
</th:block>
</ul>
</div>
</div>
</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>