15308555518/ mirror-web
1
0
Fork 0
mirror of https://github.com/tuna/mirror-web.git synced 2025-12-25 20:32:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Correctly place toggle for smaller screens

This commit is contained in:
Liu Xiaoyi 2024-03-31 20:28:36 +08:00
parent a4673145ee
commit 26f67a8071
No known key found for this signature in database
GPG Key ID: A04E02BF7E977471
2 changed files with 58 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
_includes/nav.html
View File

@ -1,14 +1,6 @@
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
{% unless page.legacy %}
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
{% endunless %}
<a class="navbar-brand" href="/">
<span class="thuhidden">
{% if site.logo %}
@ -74,20 +66,20 @@
{{ site.school }}</span>开源软件镜像站
</a>
</div>
<div class="nav-right">
<div class="dark-switch" data-mode="light">
<div class="dark-switch-inner" data-mode="light">
<span class="dark-switch-icon" data-active="light">{% fa_svg fas.fa-sun %}</span>
<span class="dark-switch-icon" data-active="dark">{% fa_svg fas.fa-moon %}</span>
<span class="dark-switch-icon" data-active="darker">{% fa_svg fas.fa-lightbulb %}</span>
<span class="dark-switch-icon" data-active="lighter">{% fa_svg fas.fa-fire %}</span>
</div>
<div class="dark-switch-hint dark-switch-hint-ack">
<strong>主题切换键<sup>Beta</sup></strong><br/>
TUNA Mirrors 现已支持在 Light / Dark / Darker / Lighter 模式之间自由切换了！
</div>
<div class="dark-switch" data-mode="light">
<div class="dark-switch-inner" data-mode="light">
<span class="dark-switch-icon" data-active="light">{% fa_svg fas.fa-sun %}</span>
<span class="dark-switch-icon" data-active="dark">{% fa_svg fas.fa-moon %}</span>
<span class="dark-switch-icon" data-active="darker">{% fa_svg fas.fa-lightbulb %}</span>
<span class="dark-switch-icon" data-active="lighter">{% fa_svg fas.fa-fire %}</span>
</div>
<div class="dark-switch-hint dark-switch-hint-ack">
<strong>主题切换键<sup>Beta</sup></strong><br/>
TUNA Mirrors 现已支持在 Light / Dark / Darker / Lighter 模式之间自由切换了！
</div>
</div>
<div class="nav-right">
<div class="{% unless page.legacy %}navbar-collapse collapse {% endunless %}navbar-right">
<ul class="nav navbar-nav" role="menubar">
{% unless site.hide_navbar %}
@ -105,6 +97,14 @@
{% endunless %}
</ul>
</div><!--/.nav-collapse -->
{% unless page.legacy %}
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
{% endunless %}
</div>
</div>
</div>

40
static/css/_dark.scss
View File

@ -1,9 +1,16 @@
// TODO: < 768 px width
// .nav-right {
// display: flex;
// flex-direction: row;
// align-items: center;
// }
.nav-right {
.navbar .container {
display: flex;
flex-direction: row;
align-items: center;
> * {
float: none;
}
}
.dark-switch {
@ -12,6 +19,13 @@
position: relative;
height: 36px;
@media (max-width: 991px) and (min-width: 768px) {
margin-right: -20px;
}
@media (max-width: 767.999px) {
}
&-inner {
height: 36px;
width: 36px;
@ -59,6 +73,11 @@
right: 100%;
bottom: 50%;
opacity: 0;
@media (max-width: 991px) and (min-width: 768px) {
right: unset;
bottom: calc(100% - 10px);
right: 50%;
}
}
}
@ -103,11 +122,26 @@
}
}
@keyframes hint-reveal-top {
0% {
transform: translate(50%, 0);
opacity: 1;
}
100% {
transform: translate(50%, -10px);
opacity: 0;
}
}
&::after {
content: "#{$mode}";
animation-fill-mode: both;
animation-iteration-count: 1;
animation-name: hint-reveal;
@media (max-width: 991px) and (min-width: 768px) {
animation-name: hint-reveal-top;
}
animation-duration: .2s;
animation-delay: 2s;
@if $mode == "darker" {