FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix responsiveness

Browse source
This commit is contained in:
Emruz Hossain 2020-10-01 21:57:34 +06:00
parent 5614eaa564
commit d4d9c020ea
15 changed files with 142 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

3
layouts/_default/single.html
View file

@ -75,6 +75,9 @@
</div>
</div>
</div>
{{ if .IsTranslated }}
{{ partial "navigators/floating-lang-selector.html" . }}
{{ end }}
</section>
{{ end }}

19
layouts/partials/navigators/floating-lang-selector.html Normal file
View file

@ -0,0 +1,19 @@
{{ $pageURL:= .RelPermalink }}
{{ if .Site.IsMultiLingual }}
{{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
{{ end }}
<div class="dropdown languageSelector">
<a class="btn dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/16.png">
{{ .Site.Language.LanguageName }}
</a>
<div class="dropdown-menu" aria-labelledby="languageSelector">
{{ range .Translations }}
<a class="dropdown-item nav-link languages-item" href="{{ path.Join "/" (cond (eq .Language.Lang "en") "" .Language.Lang) $pageURL }}">
<img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/24.png">
{{ .Language.LanguageName }}
</a>
{{ end }}
</div>
</div>

19
layouts/partials/navigators/lang-selector-2.html Normal file
View file

@ -0,0 +1,19 @@
{{ $pageURL:= .RelPermalink }}
{{ if .Site.IsMultiLingual }}
{{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
{{ end }}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/16.png">
{{ .Site.Language.LanguageName }}
</a>
<div class="dropdown-menu" aria-labelledby="languageSelector">
{{ range .Translations }}
<a class="dropdown-item nav-link languages-item" href="{{ path.Join "/" (cond (eq .Language.Lang "en") "" .Language.Lang) $pageURL }}">
<img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/24.png">
{{ .Language.LanguageName }}
</a>
{{ end }}
</div>
</li>

14
layouts/partials/navigators/lang-selector.html Normal file
View file

@ -0,0 +1,14 @@
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/16.png">
{{ .Site.Language.LanguageName }}
</a>
<div class="dropdown-menu" aria-labelledby="languageSelector">
{{ range $.Site.Home.AllTranslations }}
<a class="dropdown-item nav-link languages-item" href="{{ .Permalink }}">
<img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/24.png">
{{ .Language.LanguageName }}
</a>
{{ end }}
</div>
</li>

26
layouts/partials/navigators/navbar-2.html
View file

@ -7,11 +7,6 @@
{{ $invertedLogo = .Site.Params.logo.inverted }}
{{ end }}
{{ $pageURL:= .RelPermalink }}
{{ if .Site.IsMultiLingual }}
{{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
{{ end }}
<nav class="navbar navbar-expand-xl top-navbar final-navbar shadow">
<div class="container">
<button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button" onclick="toggleSidebar()">
@ -25,24 +20,11 @@
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="top-nav-items">
<div class="collapse navbar-collapse lang-selector" id="top-nav-items">
<ul class="navbar-nav ml-auto">
{{ if .IsTranslated }}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/16.png">
{{ .Site.Language.LanguageName }}
</a>
<div class="dropdown-menu" aria-labelledby="languageSelector">
{{ range .Translations }}
<a class="dropdown-item nav-link languages-item" href="{{ path.Join "/" (cond (eq .Language.Lang "en") "" .Language.Lang) $pageURL }}">
<img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/24.png">
{{ .Language.LanguageName }}
</a>
{{ end }}
</div>
</li>
{{ end }}
{{ if .IsTranslated }}
{{ partial "navigators/lang-selector-2.html" . }}
{{ end }}
</ul>
</div>
</div>

15
layouts/partials/navigators/navbar.html
View file

@ -62,20 +62,7 @@
</li>
{{ end }}
{{ if .IsTranslated }}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/16.png">
{{ .Site.Language.LanguageName }}
</a>
<div class="dropdown-menu" aria-labelledby="languageSelector">
{{ range $.Site.Home.AllTranslations }}
<a class="dropdown-item nav-link languages-item" href="{{ .Permalink }}">
<img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/24.png">
{{ .Language.LanguageName }}
</a>
{{ end }}
</div>
</li>
{{ partial "navigators/lang-selector.html" . }}
{{ end }}
</ul>
</div>

1
layouts/partials/scripts.html
View file

@ -1,4 +1,5 @@
<script src="/assets/js/jquery-3.4.1.min.js"></script>
<script src="/assets/js/popper.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/assets/js/navbar.js"></script>

70
package-lock.json generated
View file

@ -113,15 +113,15 @@
}
},
"browserslist": {
"version": "4.14.0",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.0.tgz",
"integrity": "sha512-pUsXKAF2lVwhmtpeA3LJrZ76jXuusrNyhduuQs7CDFf9foT4Y38aQOserd2lMe5DSSrjf3fx34oHwryuvxAUgQ==",
"version": "4.14.5",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.5.tgz",
"integrity": "sha512-Z+vsCZIvCBvqLoYkBFTwEYH3v5MCQbsAjp50ERycpOjnPmolg1Gjy4+KaWWpm8QOJt9GHkhdqAl14NpCX73CWA==",
"dev": true,
"requires": {
"caniuse-lite": "^1.0.30001111",
"electron-to-chromium": "^1.3.523",
"escalade": "^3.0.2",
"node-releases": "^1.1.60"
"caniuse-lite": "^1.0.30001135",
"electron-to-chromium": "^1.3.571",
"escalade": "^3.1.0",
"node-releases": "^1.1.61"
}
},
"caller-callsite": {
@ -155,9 +155,9 @@
"dev": true
},
"caniuse-lite": {
"version": "1.0.30001118",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001118.tgz",
"integrity": "sha512-RNKPLojZo74a0cP7jFMidQI7nvLER40HgNfgKQEJ2PFm225L0ectUungNQoK3Xk3StQcFbpBPNEvoWD59436Hg==",
"version": "1.0.30001141",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001141.tgz",
"integrity": "sha512-EHfInJHoQTmlMdVZrEc5gmwPc0zyN/hVufmGHPbVNQwlk7tJfCmQ2ysRZMY2MeleBivALUTyyxXnQjK18XrVpA==",
"dev": true
},
"chalk": {
@ -264,9 +264,9 @@
}
},
"electron-to-chromium": {
"version": "1.3.550",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.550.tgz",
"integrity": "sha512-MWDHoJsSieBaJ6mObvi3V0eKZufR1iMJl56VIGdXCgFHyCUbVDGm2IMXUNjDxgbGbKa3tA5+zJmHuBQqRxGiLA==",
"version": "1.3.576",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.576.tgz",
"integrity": "sha512-uSEI0XZ//5ic+0NdOqlxp0liCD44ck20OAGyLMSymIWTEAtHKVJi6JM18acOnRgUgX7Q65QqnI+sNncNvIy8ew==",
"dev": true
},
"emoji-regex": {
@ -285,9 +285,9 @@
}
},
"escalade": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.0.2.tgz",
"integrity": "sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ==",
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.0.tgz",
"integrity": "sha512-mAk+hPSO8fLDkhV7V0dXazH5pDc6MrjBTPyD3VeKzxnVFjH1MIxbCdqGZB9O8+EwWakZs3ZCbDS4IpRt79V1ig==",
"dev": true
},
"escape-string-regexp": {
@ -370,9 +370,9 @@
"dev": true
},
"get-stdin": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-7.0.0.tgz",
"integrity": "sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ==",
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-8.0.0.tgz",
"integrity": "sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==",
"dev": true
},
"glob-parent": {
@ -559,9 +559,9 @@
}
},
"node-releases": {
"version": "1.1.60",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.60.tgz",
"integrity": "sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA==",
"version": "1.1.61",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.61.tgz",
"integrity": "sha512-DD5vebQLg8jLCOzwupn954fbIiZht05DAZs0k2u8NStSe6h9XdsuIQL8hSRKYiU8WUQRznmSDrKGbv3ObOmC7g==",
"dev": true
},
"normalize-path": {
@ -641,9 +641,9 @@
"dev": true
},
"postcss": {
"version": "7.0.32",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
"integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
"version": "7.0.35",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
"integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@ -652,16 +652,16 @@
}
},
"postcss-cli": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-7.1.1.tgz",
"integrity": "sha512-bYQy5ydAQJKCMSpvaMg0ThPBeGYqhQXumjbFOmWnL4u65CYXQ16RfS6afGQpit0dGv/fNzxbdDtx8dkqOhhIbg==",
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-7.1.2.tgz",
"integrity": "sha512-3mlEmN1v2NVuosMWZM2tP8bgZn7rO5PYxRRrXtdSyL5KipcgBDjJ9ct8/LKxImMCJJi3x5nYhCGFJOkGyEqXBQ==",
"dev": true,
"requires": {
"chalk": "^4.0.0",
"chokidar": "^3.3.0",
"dependency-graph": "^0.9.0",
"fs-extra": "^9.0.0",
"get-stdin": "^7.0.0",
"get-stdin": "^8.0.0",
"globby": "^11.0.0",
"postcss": "^7.0.0",
"postcss-load-config": "^2.0.0",
@ -713,9 +713,9 @@
"dev": true
},
"supports-color": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
"integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"requires": {
"has-flag": "^4.0.0"
@ -724,9 +724,9 @@
}
},
"postcss-load-config": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz",
"integrity": "sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==",
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.2.tgz",
"integrity": "sha512-/rDeGV6vMUo3mwJZmeHfEDvwnTKKqQ0S7OHUi/kJvvtx3aWtyWG2/0ZWnzCt2keEclwN6Tf0DST2v9kITdOKYw==",
"dev": true,
"requires": {
"cosmiconfig": "^5.0.0",

2
package.json
View file

@ -18,6 +18,6 @@
"homepage": "https://github.com/hossainemruz/toha#readme",
"devDependencies": {
"autoprefixer": "^9.8.6",
"postcss-cli": "^7.1.1"
"postcss-cli": "^7.1.2"
}
}

7
static/assets/css/layouts/list.css
View file

@ -155,6 +155,13 @@
visibility: hidden;
}
.navbar-collapse.lang-selector {
display: block !important;
position: absolute;
right: 0;
top: 0.5rem;
}
.content-cards {
padding-top: 20px;
width: 100%;

10
static/assets/css/layouts/main.css
View file

@ -137,7 +137,7 @@ img.right {
.card .card-head {
height: 172px;
-o-object-fit: cover;
object-fit: cover;
object-fit: cover;
overflow: hidden;
}
@ -238,6 +238,14 @@ img.right {
/* IPad Pro */
@media (max-width: 1024px) {
.content-section .languageSelector {
position: fixed;
right: 0.5rem;
bottom: 1rem;
z-index: 10000000;
background-color: #f9fafc;
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
}
}
/* Large devices (desktops, 992px and up) */

3
static/assets/css/layouts/single.css
View file

@ -368,6 +368,9 @@ mark {
.navbar-toggler {
display: block;
}
.navbar-collapse.lang-selector {
display: none;
}
.hero-area {
height: 300px;

39
static/assets/css/navigators/navbar.css
View file

@ -119,10 +119,17 @@
.top-navbar .dropdown-menu {
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
border: 1px solid #fff;
max-height: 100vh;
overflow-y: auto;
max-height: 0vh;
overflow: hidden;
display: block;
visibility: hidden;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.top-navbar .dropdown-menu.show {
max-height: 100vh;
visibility: visible;
transition: all 0.3s ease-in;
}
.top-navbar .dropdown-menu a {
@ -133,7 +140,6 @@
.top-navbar .dropdown-menu a:hover {
color: #2098d1;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
border-bottom: none;
background: rgb(2, 0, 36);
background: linear-gradient(
@ -190,11 +196,6 @@
border-bottom: none;
}
.final-navbar .navbar-collapse.show {
box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
transition: all 0.3s ease-out;
}
.dropdown-divider {
border-top: 1px solid #c0ccda;
}
@ -204,6 +205,12 @@
width: auto;
margin-right: 15px;
}
.top-navbar .dropdown-menu {
text-align: center;
margin-bottom: 0.5rem;
margin-right: 1rem;
transition: all 0.3s ease-out;
}
}
/* Large devices (desktops, 992px and up) */
@ -228,11 +235,6 @@
border-bottom: none;
}
.final-navbar .navbar-collapse.show {
box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
transition: all 0.3s ease-out;
}
.dropdown-divider {
border-top: 1px solid #c0ccda;
}
@ -266,11 +268,6 @@
border-bottom: none;
}
.final-navbar .navbar-collapse.show {
box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
transition: all 0.3s ease-out;
}
.dropdown-divider {
border-top: 1px solid #c0ccda;
}
@ -285,6 +282,10 @@
/* Small devices (landscape phones, 576px and up) */
@media only screen and (max-width: 576px) {
.top-navbar .dropdown-menu {
margin-left: -1rem;
margin-right: 0rem;
}
}
/* iPhoneX, iPhone 6,7,8 */

3
static/assets/css/sections/home.css
View file

@ -14,8 +14,7 @@
background-attachment: fixed;
background-position: center;
transform: scale(1.1);
-webkit-filter: blur(3px);
filter: blur(3px);
filter: blur(3px);
background-size: cover;
}

5
static/assets/js/popper.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long