后台可控制侧栏的左右及隐藏布局

This commit is contained in:
liuzhihang 2022-10-22 12:35:47 +08:00
parent bb9618f7de
commit 9029289ef1
7 changed files with 38 additions and 18 deletions

View File

@ -131,6 +131,17 @@ spec:
- group: sidebar - group: sidebar
label: 侧边栏 label: 侧边栏
formSchema: formSchema:
- $formkit: select
name: location
label: 侧边栏位置
value: "right"
options:
- value: "hide"
label: "隐藏"
- value: "right"
label: "右侧"
- value: "left"
label: "左侧"
- $formkit: textarea - $formkit: textarea
name: widgets name: widgets
label: 小部件(无效) label: 小部件(无效)

View File

@ -7167,6 +7167,28 @@ span.fund_name {
width: calc(100% - 300px); width: calc(100% - 300px);
} }
/* 当隐藏边栏时,显示 100% */
.layout.hide > div:first-child {
width: 100%;
}
/* 侧边栏在左侧时,显示 100% */
.layout.left > div:first-child {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-o-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
/* 侧栏在左侧时,关闭左边距,打开右边距 */
.layout.left .aside-content {
padding-right: 15px;
padding-left: 0px !important;
}
div#categoryList { div#categoryList {
display: flex; display: flex;
width: 100%; width: 100%;

View File

@ -15,7 +15,7 @@
<!-- 置顶内容 --> <!-- 置顶内容 -->
<div th:replace="modules/recent-top :: recent-top"></div> <div th:replace="modules/recent-top :: recent-top"></div>
</div> </div>
<main class="layout" id="content-inner"> <main class="layout" id="content-inner" th:classappend="${theme.config.sidebar.location}">
<div class="recent-posts" id="recent-posts"> <div class="recent-posts" id="recent-posts">
<!-- 分类导航栏 --> <!-- 分类导航栏 -->

View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"> <html lang="en" xmlns:th="http://www.thymeleaf.org">
<div class="aside-content" id="aside-content" th:fragment="aside"> <div class="aside-content" id="aside-content" th:fragment="aside" th:if="${theme.config.sidebar.location != 'hide'}">
<!-- 个人信息卡片 --> <!-- 个人信息卡片 -->
<div th:replace="modules/widgets/profile :: profile"></div> <div th:replace="modules/widgets/profile :: profile"></div>

View File

@ -47,7 +47,6 @@
<!-- https://raphamorim.io/waterfall.js/ 应该是这个 还有相关的 js 代码 是否可以调整--> <!-- https://raphamorim.io/waterfall.js/ 应该是这个 还有相关的 js 代码 是否可以调整-->
<script th:src="@{/assets/libs/waterfall/waterfall.min.js}"></script> <script th:src="@{/assets/libs/waterfall/waterfall.min.js}"></script>
</div> </div>
<!-- 不知道干啥的 -->
<div> <div>
<script th:inline="javascript"> <script th:inline="javascript">

View File

@ -1,14 +0,0 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div id="rightside" th:fragment="rightside">
<div id="rightside-config-hide">
<button id="translateLink" type="button" title="简繁转换"></button>
<button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button>
<button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button>
</div>
<div id="rightside-config-show">
<button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button>
<button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button>
</div>
</div>
</html>

View File

@ -12,7 +12,9 @@
<div class="card-content"> <div class="card-content">
<div class="author-content-item-tips">互动</div> <div class="author-content-item-tips">互动</div>
<span class="author-content-item-title">最近评论</span></div> <span class="author-content-item-title">最近评论</span></div>
<div class="aside-list"><span>正在加载中...</span></div> <div class="aside-list">
<span>最近评论内容 TODO</span>
</div>
</div> </div>
</div> </div>
<!-- 右侧展示 tag --> <!-- 右侧展示 tag -->