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> </div>
</div> </div>
{{ if .IsTranslated }}
{{ partial "navigators/floating-lang-selector.html" . }}
{{ end }}
</section> </section>
{{ end }} {{ 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 }} {{ $invertedLogo = .Site.Params.logo.inverted }}
{{ end }} {{ 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"> <nav class="navbar navbar-expand-xl top-navbar final-navbar shadow">
<div class="container"> <div class="container">
<button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button" onclick="toggleSidebar()"> <button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button" onclick="toggleSidebar()">
@ -25,24 +20,11 @@
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </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"> <ul class="navbar-nav ml-auto">
{{ if .IsTranslated }} {{ if .IsTranslated }}
<li class="nav-item dropdown"> {{ partial "navigators/lang-selector-2.html" . }}
<a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> {{ end }}
<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 }}
</ul> </ul>
</div> </div>
</div> </div>

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

@ -62,20 +62,7 @@
</li> </li>
{{ end }} {{ end }}
{{ if .IsTranslated }} {{ if .IsTranslated }}
<li class="nav-item dropdown"> {{ partial "navigators/lang-selector.html" . }}
<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>
{{ end }} {{ end }}
</ul> </ul>
</div> </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/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/bootstrap.min.js"></script>
<script src="/assets/js/navbar.js"></script> <script src="/assets/js/navbar.js"></script>

70
package-lock.json generated
View file

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

2
package.json
View file

@ -18,6 +18,6 @@
"homepage": "https://github.com/hossainemruz/toha#readme", "homepage": "https://github.com/hossainemruz/toha#readme",
"devDependencies": { "devDependencies": {
"autoprefixer": "^9.8.6", "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; visibility: hidden;
} }
.navbar-collapse.lang-selector {
display: block !important;
position: absolute;
right: 0;
top: 0.5rem;
}
.content-cards { .content-cards {
padding-top: 20px; padding-top: 20px;
width: 100%; width: 100%;

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

@ -137,7 +137,7 @@ img.right {
.card .card-head { .card .card-head {
height: 172px; height: 172px;
-o-object-fit: cover; -o-object-fit: cover;
object-fit: cover; object-fit: cover;
overflow: hidden; overflow: hidden;
} }
@ -238,6 +238,14 @@ img.right {
/* IPad Pro */ /* IPad Pro */
@media (max-width: 1024px) { @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) */ /* Large devices (desktops, 992px and up) */

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

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

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

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

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

@ -14,8 +14,7 @@
background-attachment: fixed; background-attachment: fixed;
background-position: center; background-position: center;
transform: scale(1.1); transform: scale(1.1);
-webkit-filter: blur(3px); filter: blur(3px);
filter: blur(3px);
background-size: cover; 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