hazza/github-style
1
0
Fork 0
mirror of https://github.com/MeiK2333/github-style.git synced 2025-10-13 21:02:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

添加 header 栏的移动端样式

Browse Source
This commit is contained in:
MeiK
2020-12-16 11:30:44 +08:00
parent 5c70eabd64
commit b2509ea598
4 changed files with 63 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
layouts/partials/header.html
View File

@@ -1,6 +1,6 @@
<div style="position: relative">
<header class="Header">
<div class="Header-item" style="margin-top: -4px; margin-bottom: -4px;">
<header class="Header js-details-container Details px-3 px-md-4 px-lg-5 flex-wrap flex-md-nowrap open Details--on">
<div class="Header-item mobile-none" style="margin-top: -4px; margin-bottom: -4px;">
<a class="Header-link" href="{{ .Site.BaseURL }}">
<svg class="octicon" height="32" viewBox="0 0 16 16" version="1.1" width="32">
<path fill-rule="evenodd"
@@ -9,17 +9,45 @@
</svg>
</a>
</div>
<div class="Header-item Header-item--full">
<div class="Header-search">
<div class="Header-item d-md-none">
<button class="Header-link btn-link js-details-target" type="button"
onclick="document.querySelector('#header-search').style.display = document.querySelector('#header-search').style.display == 'none'? 'block': 'none'">
<svg height="24" class="octicon octicon-three-bars" viewBox="0 0 16 16" version="1.1" width="24">
<path fill-rule="evenodd"
d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z">
</path>
</svg>
</button>
</div>
<div style="display: none;" id="header-search"
class="Header-item Header-item--full flex-column flex-md-row width-full flex-order-2 flex-md-order-none mr-0 mr-md-3 mt-3 mt-md-0 Details-content--hidden-not-important d-md-flex">
<div
class="Header-search header-search flex-auto js-site-search position-relative flex-self-stretch flex-md-self-auto mb-3 mb-md-0 mr-0 mr-md-3 scoped-search site-scoped-search js-jump-to">
<div class="position-relative">
<form target="_blank" action="https://www.google.com/search" accept-charset="UTF-8" method="get"
autocomplete="off">
<label class="Header-search-label">
<input class="Header-search-input" type="text" name="q" value="" placeholder="Search">
<label
class="Header-search-label form-control input-sm header-search-wrapper p-0 js-chromeless-input-container header-search-wrapper-jump-to position-relative d-flex flex-justify-between flex-items-center">
<input type="text"
class="Header-search-input form-control input-sm header-search-input jump-to-field js-jump-to-field js-site-search-focus js-site-search-field is-clearable"
name="q" value="" placeholder="Search" autocomplete="off">
<input type="hidden" name="q" value="site:{{ .Site.BaseURL }}">
</label>
</form>
</div>
</div>
</div>
<div class="Header-item Header-item--full flex-justify-center d-md-none position-relative">
<a class="Header-link " href="{{ .Site.BaseURL }}">
<svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16" version="1.1"
width="32">
<path fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
</path>
</svg>
</a>
</div>
<div class="Header-item" style="margin-right: 0;">
<a href="javascript:void(0)" class="Header-link no-select" onclick="switchTheme()">
<svg style="fill: var(--color-profile-color-modes-toggle-moon);" class="no-select" viewBox="0 0 16 16"

10
layouts/partials/user-profile.html
View File

@@ -124,3 +124,13 @@
{{ end }}
</div>
</div>
<script>
window.onscroll = function (e) {
const headerImg = document.querySelector('#headerImg');
if (headerImg.getBoundingClientRect().bottom <= 0) {
document.querySelector('#headerStuck').classList.add('is-stuck');
} else {
document.querySelector('#headerStuck').classList.remove('is-stuck');
}
};
</script>

17
static/css/github-style.css
View File

@@ -28,10 +28,6 @@ body {
margin-right: 16px;
}
.Header-item--full {
width: 100%;
}
.octicon {
fill: currentColor;
}
@@ -114,3 +110,16 @@ body {
-ms-user-select: none;
user-select: none;
}
@media (max-width: 768px) {
.mobile-none {
display: none!important;
}
.Header {
padding-left: 16px!important;
padding-right: 16px!important;
}
.Header-search {
max-width: 100%;
}
}

9
static/js/github-style.js
View File

@@ -322,12 +322,3 @@ function setRelativeTime() {
elem.setAttribute('title', new Date(dateStr).toLocaleString());
});
}
window.onscroll = function (e) {
const headerImg = document.querySelector('#headerImg');
if (headerImg.getBoundingClientRect().bottom <= 0) {
document.querySelector('#headerStuck').classList.add('is-stuck');
} else {
document.querySelector('#headerStuck').classList.remove('is-stuck');
}
};