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 21:33:50 +08:00
parent 80b25beeb7
commit 98f651a562
2 changed files with 28 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
theme/css/page.css
View File

@ -105,4 +105,16 @@ h2 {
font-size: 1.2em !important; font-size: 1.2em !important;
margin-top: 10px !important; margin-top: 10px !important;
margin-right: 4px !important; margin-right: 4px !important;
}
@media (max-width: 641px) {
.hideonmobile {
display: none !important;
}
}
@media (min-width: 640px) {
.hideonmobile {
display: inline-flex !important;
}
} }

24
theme/index.hbs
View File

@ -57,14 +57,19 @@
</head> </head>
<body style="margin:0;padding:0;"> <body style="margin:0;padding:0;">
{{#if is_print }}
{{#toc}}{{/toc}}
{{/if}}
<mdui-layout> <mdui-layout>
{{#unless is_print }}
<mdui-top-app-bar class="topbar" scroll-behavior="elevate"> <mdui-top-app-bar class="topbar" scroll-behavior="elevate">
<mdui-button-icon icon="menu" id="open-drawer"></mdui-button-icon> <mdui-button-icon icon="menu" id="open-drawer"></mdui-button-icon>
<mdui-button id="open-study-env">实验环境</mdui-button> <mdui-button class="hideonmobile" id="open-study-env">实验环境</mdui-button>
<mdui-top-app-bar-title>{{ book_title }}</mdui-top-app-bar-title> <mdui-top-app-bar-title>{{ book_title }}</mdui-top-app-bar-title>
<div style="flex-grow: 1"></div> <div style="flex-grow: 1"></div>
{{#previous}} {{#previous}}
<mdui-button id="previous—page" href="{{ path_to_root }}{{link}}">上一章</mdui-button> <mdui-button id="previous—page" class="hideonmobile" href="{{ path_to_root }}{{link}}">上一章</mdui-button>
{{/previous}} {{/previous}}
{{#next}} {{#next}}
<mdui-button id="next—page" href="{{ path_to_root }}{{link}}">下一章</mdui-button> <mdui-button id="next—page" href="{{ path_to_root }}{{link}}">下一章</mdui-button>
@ -73,20 +78,18 @@
<mdui-button-icon icon="web" href="{{git_repository_url}}"></mdui-button-icon> <mdui-button-icon icon="web" href="{{git_repository_url}}"></mdui-button-icon>
{{/if}} {{/if}}
{{#if print_enable}} {{#if print_enable}}
<mdui-button-icon href="{{ path_to_root }}print.html" title="Print this book" aria-label="Print this book" <mdui-button-icon class="hideonmobile" href="{{ path_to_root }}print.html" title="Print this book"
icon="print"> aria-label="Print this book" icon="print">
</mdui-button-icon> </mdui-button-icon>
{{/if}} {{/if}}
</mdui-top-app-bar> </mdui-top-app-bar>
<mdui-navigation-drawer close-on-overlay-click class="toc-drawer" id="toc-drawer" placement="left" open> <mdui-navigation-drawer close-on-overlay-click class="toc-drawer" id="toc-drawer" placement="left" open>
</mdui-navigation-drawer> </mdui-navigation-drawer>
{{/unless}}
{{#unless is_print }}
{{#if is_print }}
{{#toc}}{{/toc}}
{{/if}}
<!-- Render toc --> <!-- Render toc -->
<div style="display:none;" id="helperframe"> <div style="display:none;" id="helperframe">
{{#toc}}{{/toc}} {{#toc}}{{/toc}}
@ -94,20 +97,24 @@
<script src="{{ ../path_to_root }}theme/js/tocrender.js"></script> <script src="{{ ../path_to_root }}theme/js/tocrender.js"></script>
<!-- Render toc finish --> <!-- Render toc finish -->
{{/unless}}
{{#unless is_print }}
<script> <script>
const navigationDrawer = document.querySelector(".toc-drawer"); const navigationDrawer = document.querySelector(".toc-drawer");
const openButton = document.getElementById("open-drawer"); const openButton = document.getElementById("open-drawer");
openButton.addEventListener("click", () => navigationDrawer.open = !navigationDrawer.open); openButton.addEventListener("click", () => navigationDrawer.open = !navigationDrawer.open);
</script> </script>
{{/unless}}
<mdui-layout-main class="example-layout-main" style="min-height: 100%"> <mdui-layout-main class="example-layout-main" style="min-height: 100%">
<div class="mdui-prose"> <div class="mdui-prose">
{{{ content }}} {{{ content }}}
</div> </div>
{{#unless is_print }}
<mdui-dialog headline="Study Env" close-on-esc close-on-overlay-click id="study-env-dialog"> <mdui-dialog headline="Study Env" close-on-esc close-on-overlay-click id="study-env-dialog">
<iframe src="about:blank" style="height:80%;width:99%" id="study-env-iframe"></iframe> <iframe src="about:blank" style="height:80%;width:99%" id="study-env-iframe"></iframe>
</mdui-dialog> </mdui-dialog>
@ -118,6 +125,7 @@
document.getElementById("study-env-iframe").src = "http://jslinux.cxykevin.top" document.getElementById("study-env-iframe").src = "http://jslinux.cxykevin.top"
}); });
</script> </script>
{{/unless}}
<div style="height:10em;display:flex;max-width: 78%;margin: auto;margin-top:2em;"> <div style="height:10em;display:flex;max-width: 78%;margin: auto;margin-top:2em;">
{{#previous}} {{#previous}}