study-area-cn
/
study-area-cn.old
Archived
2
1
Fork 3
Code Issues Pull Requests Actions Projects Releases Wiki Activity

调整界面布局

This commit is contained in:
cxykevin 2024-08-10 20:47:27 +08:00
parent 50c3188938
commit 8b30e0fed5
2 changed files with 70 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
theme/css/page.css
View File

@ -32,17 +32,13 @@ a:hover:after {
}
h1 {
margin-top: 0px;
margin-bottom: 20px;
margin-top: 0px !important;
margin-bottom: 20px !important;
}
h2 {
margin-top: 0px;
margin-bottom: 15px;
}
.preset {
min-height: 1rem !important;
margin-top: 30px !important;
margin-bottom: 15px !important;
}
.container {
@ -65,4 +61,48 @@ h2 {
.menu-link:hover:after {
width: calc(100% - 20px);
left: 20px;
}
.topbar {
position: fixed !important;
top: 0px;
right: 0px;
left: 0px;
}
.mdui-prose {
margin-left: 50px;
margin-right: 50px;
max-width: 78%;
margin: auto;
left: 0;
right: 0;
}
.toc-drawer {
position: fixed !important;
margin-left: 0px !important;
margin-right: 0px !important;
}
.bottombar {
height: 10em !important;
margin-top: 2em !important;
margin-left: 2em !important;
margin-right: 2em !important;
display: flex !important;
}
.prevpage {
display: flex !important;
font-size: 1.2em !important;
margin-top: 10px !important;
margin-left: 4px !important;
}
.nextpage {
display: flex !important;
font-size: 1.2em !important;
margin-top: 10px !important;
margin-right: 4px !important;
}

33
theme/index.hbs
View File

@ -56,13 +56,19 @@
<link rel="stylesheet" href="{{ ../path_to_root }}theme/css/page.css">
</head>
<body style="margin:0;padding:0;min-height:100%;width:100%">
<mdui-layout style="height:100%">
<mdui-top-app-bar>
<body style="margin:0;padding:0;">
<mdui-layout>
<mdui-top-app-bar class="topbar" scroll-behavior="elevate">
<mdui-button-icon icon="menu" id="open-drawer"></mdui-button-icon>
<mdui-button id="open-study-env">实验环境</mdui-button>
<mdui-top-app-bar-title>{{ book_title }}</mdui-top-app-bar-title>
<div style="flex-grow: 1"></div>
{{#previous}}
<mdui-button id="previous—page" href="{{ path_to_root }}{{link}}">上一章</mdui-button>
{{/previous}}
{{#next}}
<mdui-button id="next—page" href="{{ path_to_root }}{{link}}">下一章</mdui-button>
{{/next}}
{{#if git_repository_url}}
<mdui-button-icon icon="web" href="{{git_repository_url}}"></mdui-button-icon>
{{/if}}
@ -73,9 +79,14 @@
{{/if}}
</mdui-top-app-bar>
<mdui-navigation-drawer close-on-overlay-click class="toc-drawer" id="toc-drawer">
<mdui-navigation-drawer close-on-overlay-click class="toc-drawer" id="toc-drawer" placement="left" open>
</mdui-navigation-drawer>
{{#if is_print }}
{{#toc}}{{/toc}}
{{/if}}
<!-- Render toc -->
<div style="display:none;" id="helperframe">
{{#toc}}{{/toc}}
@ -93,7 +104,7 @@
</script>
<mdui-layout-main class="example-layout-main" style="min-height: 100%">
<div class="mdui-prose" style="margin-left:50px;margin-right:50px;">
<div class="mdui-prose">
{{{ content }}}
</div>
@ -108,14 +119,14 @@
});
</script>
<div style="height:10em;margin-top:2em;margin-left:2em;margin-right:2em;display:flex">
<div style="height:10em;display:flex;max-width: 78%;margin: auto;margin-top:2em;">
{{#previous}}
<mdui-card clickable style="width:49%;height: 100%" href="{{ path_to_root }}{{link}}">
<div style="display:flex;font-size:1.5em">
<mdui-icon name="navigate_before" style="font-size:1.5em"></mdui-icon> 上一章
<div style="display:flex;font-size:1.2em;margin-top: 10px;margin-left: 4px;">
<mdui-icon name="navigate_before" style="font-size:1.5em;"></mdui-icon> 上一章
</div>
<div style="text-align:center;font-size:2em">
<div style="text-align:center;font-size:1.8em;margin-top: 12px;">
{{title}}
</div>
</mdui-card>
@ -125,12 +136,12 @@
{{#next}}
<mdui-card clickable style="width:49%;height: 100%" href="{{ path_to_root }}{{link}}">
<div style="display:flex;font-size:1.5em">
<div style="display:flex;font-size:1.2em;margin-top: 10px;margin-right: 4px;">
<div style="flex-grow:1"></div>下一章<mdui-icon name="navigate_next"
style="font-size:1.5em"></mdui-icon>
</div>
<div style="text-align:center;font-size:2em">
<div style="text-align:center;font-size:1.8em;margin-top: 12px;">
{{title}}
</div>
</mdui-card>