asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

perf: improve the responsive design for ultrawide screens (#540)

Browse source 
Resolves #540
This commit is contained in:
Cotes Chung 2022-06-08 16:15:38 +08:00
parent 20caace68a
commit 5d6e8c5ef6
No known key found for this signature in database
GPG key ID: 0D9E54843167A808
7 changed files with 73 additions and 208 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
_includes/footer.html
View file

@ -1,9 +1,7 @@
<!--
The Footer
-->
<!-- The Footer -->
<footer class="d-flex w-100 justify-content-center">
<div class="d-flex justify-content-between align-items-center text-muted">
<footer class="row">
<div class="col-12 d-flex justify-content-between align-items-center text-muted pl-0 pr-0">
<div class="footer-left">
<p class="mb-0">
© {{ 'now' | date: "%Y" }}
@ -33,5 +31,6 @@
</p>
</div>
</div> <!-- div.d-flex -->
</div>
</footer>

2
_includes/post-paginator.html
View file

@ -2,7 +2,7 @@
The paginator for post list on HomgPage.
-->
<ul class="pagination align-items-center mt-4 mb-0 pl-lg-2">
<ul class="pagination align-items-center mt-4 mb-5 pl-lg-2">
<!-- left arrow -->
{% if paginator.previous_page %}
{% assign prev_url = paginator.previous_page_path | relative_url %}

4
_includes/topbar.html
View file

@ -2,8 +2,8 @@
The Top Bar
-->
<div id="topbar-wrapper" class="row justify-content-center">
<div id="topbar" class="col-11 d-flex h-100 align-items-center justify-content-between">
<div id="topbar-wrapper">
<div id="topbar" class="container d-flex align-items-center justify-content-between h-100 pl-3 pr-3 pl-md-4 pr-md-4">
<span id="breadcrumb">
{% assign paths = page.url | split: '/' %}

4
_layouts/default.html
View file

@ -25,8 +25,8 @@ layout: compress
{% include topbar.html %}
<div id="main-wrapper">
<div id="main">
<div id="main-wrapper" class="d-flex justify-content-center">
<div id="main" class="container">
{{ content }}

18
_layouts/page.html
View file

@ -9,8 +9,8 @@ layout: default
<div class="row">
<!-- core -->
<div id="core-wrapper" class="col-12 col-lg-11 col-xl-8">
<div class="post pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
<div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pr-xl-5">
<div class="post pl-1 pr-1 pl-md-2 pr-md-2">
{% capture _content %}
{% if layout.refactor or page.layout == 'page' %}
@ -54,13 +54,11 @@ layout: default
<!-- tail -->
{% if layout.tail_includes %}
<div class="row">
<div class="col-12 col-lg-11 col-xl-8">
<div id="tail-wrapper" class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
{% for _include in layout.tail_includes %}
{% assign _include_path = _include | append: '.html' %}
{% include {{ _include_path }} %}
{% endfor %}
</div>
<div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 pl-4 pr-4 pr-xl-5">
{% for _include in layout.tail_includes %}
{% assign _include_path = _include | append: '.html' %}
{% include {{ _include_path }} %}
{% endfor %}
</div>
</div> <!-- .row -->
</div>
{% endif %}

238
_sass/addon/commons.scss
View file

@ -148,18 +148,15 @@ kbd {
}
footer {
position: absolute;
bottom: 0;
padding: 0 1rem;
height: $footer-height;
@include pl-pr(1.5rem);
font-size: 0.8rem;
> div.d-flex {
height: $footer-height;
line-height: 1.2rem;
width: 95%;
max-width: 1045px;
padding-bottom: 1rem;
border-top: 1px solid var(--main-border-color);
margin-bottom: 1rem;
> div {
width: 350px;
@ -227,7 +224,6 @@ img[data-src] {
.access {
top: 2rem;
transition: top 0.2s ease-in-out;
margin-right: 1.5rem;
margin-top: 3rem;
margin-bottom: 4rem;
@ -876,6 +872,7 @@ $sidebar-display: "sidebar-display";
#search-result-wrapper {
display: none;
height: 100%;
width: 100%;
overflow: auto;
.post-content {
@ -933,7 +930,7 @@ $sidebar-display: "sidebar-display";
#search-wrapper {
display: flex;
width: 85%;
width: 100%;
border-radius: 1rem;
border: 1px solid var(--search-wrapper-border-color);
background: var(--search-wrapper-bg);
@ -1002,7 +999,7 @@ $sidebar-display: "sidebar-display";
}
#search-results {
padding-bottom: 6rem;
padding-bottom: 3rem;
a {
&:hover {
@ -1055,7 +1052,7 @@ $sidebar-display: "sidebar-display";
}
#core-wrapper {
min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
.categories,
#tags,
@ -1088,29 +1085,13 @@ $sidebar-display: "sidebar-display";
background-color: var(--main-wrapper-bg);
position: relative;
min-height: 100vh;
padding-bottom: $footer-height;
@include pl-pr(0);
}
#main {
.row:first-child {
> div {
&:nth-child(1),
&:nth-child(2) {
margin-top: $topbar-height; /* same as the height of topbar */
}
&:first-child {
/* 3rem for topbar, 6rem for footer */
min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height});
}
}
}
div.row:first-of-type:last-of-type { /* alone */
margin-bottom: 4rem;
}
#core-wrapper,
#panel-wrapper {
margin-top: $topbar-height; /* same as the height of topbar */
}
#topbar-wrapper.row,
@ -1205,16 +1186,11 @@ $sidebar-display: "sidebar-display";
*/
@media all and (max-width: 576px) {
$footer-height: $footer-height-mobile; /* overwrite */
footer {
height: $footer-height;
height: $footer-height-mobile;
> div.d-flex {
width: 100%;
padding: 1.5rem 0;
margin-bottom: 0.3rem;
flex-wrap: wrap;
-ms-flex-pack: distribute !important;
justify-content: space-around !important;
@ -1226,12 +1202,8 @@ $sidebar-display: "sidebar-display";
}
}
#main > div.row:first-child > div:first-child {
min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
}
#core-wrapper {
min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
min-height: calc(100vh - #{$topbar-height} - #{$footer-height-mobile}) !important;
h1 {
margin-top: 2.2rem;
@ -1256,10 +1228,21 @@ $sidebar-display: "sidebar-display";
@include ml-mr(1.8rem);
}
#main-wrapper {
padding-bottom: $footer-height;
}
@media all and (max-width: 768px) {
%full-width {
max-width: 100%;
}
#topbar {
@extend %full-width;
}
#main {
@extend %full-width;
@include pl-pr(0);
}
}
/* hide sidebar and panel */
@ -1310,6 +1293,11 @@ $sidebar-display: "sidebar-display";
padding-top: $topbar-height;
}
#topbar,
#main {
max-width: 100%;
}
#search-result-wrapper {
width: 100%;
}
@ -1325,8 +1313,8 @@ $sidebar-display: "sidebar-display";
left: 0;
}
#main > div.row:first-child > div:nth-child(1),
#main > div.row:first-child > div:nth-child(2) {
#core-wrapper,
#panel-wrapper {
margin-top: 0;
}
@ -1336,17 +1324,6 @@ $sidebar-display: "sidebar-display";
display: block;
}
#search-wrapper {
&.loaded ~ a {
margin-right: 1rem;
}
}
#search-input {
margin-left: 0;
width: 95%;
}
#search-result-wrapper .post-content {
letter-spacing: 0;
}
@ -1395,17 +1372,17 @@ $sidebar-display: "sidebar-display";
margin-top: 3rem;
}
#search-wrapper {
width: 22%;
min-width: 150px;
}
#search-hints {
display: none;
}
#search-wrapper {
max-width: 210px;
}
#search-result-wrapper {
margin-top: 3rem;
max-width: $main-content-max-width;
}
div.post-content .table-wrapper > table {
@ -1415,17 +1392,17 @@ $sidebar-display: "sidebar-display";
/* button 'back-to-Top' position */
#back-to-top {
bottom: 5.5rem;
right: 1.2rem;
right: 5%;
}
#topbar {
@include pl-pr(2rem);
}
#topbar-title {
text-align: left;
}
footer > div.d-flex {
width: 92%;
}
}
/* Pad horizontal */
@ -1499,10 +1476,6 @@ $sidebar-display: "sidebar-display";
display: none;
}
#topbar {
padding: 0;
}
#main > div.row {
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
@ -1513,26 +1486,12 @@ $sidebar-display: "sidebar-display";
/* --- desktop mode, both sidebar and panel are visible --- */
@media all and (min-width: 1200px) {
#main > div.row > div.col-xl-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
padding-left: 3%;
}
#topbar {
padding: 0;
max-width: 1070px;
}
#panel-wrapper {
max-width: $panel-max-width;
}
#back-to-top {
bottom: 6.5rem;
right: 4.3rem;
}
#search-wrapper {
margin-right: 4rem;
}
#search-input {
@ -1568,62 +1527,27 @@ $sidebar-display: "sidebar-display";
}
@media all and (min-width: 1400px) {
#main > div.row {
padding-left: calc((100% - #{$main-content-max-width}) / 2);
> div.col-xl-8 {
max-width: 850px;
}
}
#search-result-wrapper {
padding-right: 2rem;
> div {
max-width: 1110px;
}
}
}
@media all and (min-width: 1400px) and (max-width: 1650px) {
#topbar {
padding-right: 2rem;
#back-to-top {
right: calc((100vw - #{$sidebar-width} - 1140px) / 2 + 3rem);
}
}
@media all and (min-width: 1650px) {
#breadcrumb {
padding-left: 0;
}
#main > div.row > div.col-xl-8 {
padding-left: 0;
> div:first-child {
padding-left: 0.55rem !important;
padding-right: 1.9rem !important;
}
}
#main-wrapper {
margin-left: $sidebar-width-large;
}
#panel-wrapper {
margin-left: calc((100% - #{$main-content-max-width}) / 10);
}
#topbar-wrapper {
left: $sidebar-width-large;
}
#topbar {
max-width: #{$main-content-max-width};
#topbar,
#main {
max-width: $main-content-max-width;
}
#search-wrapper {
margin-right: 3%;
#back-to-top {
right: calc((100vw - #{$sidebar-width-large} - #{$main-content-max-width}) / 2 + 2rem);
}
#sidebar {
@ -1744,58 +1668,4 @@ $sidebar-display: "sidebar-display";
} /* #sidebar */
footer > div.d-flex {
width: 92%;
max-width: 1140px;
}
#search-result-wrapper {
> div {
max-width: #{$main-content-max-width};
}
}
} /* min-width: 1650px */
@media all and (min-width: 1700px) {
#topbar-wrapper {
/* 100% - 350px - (1920px - 350px); */
padding-right: calc(100% - #{$sidebar-width-large} - (1920px - #{$sidebar-width-large}));
}
#topbar {
max-width: calc(#{$main-content-max-width} + 20px);
}
#main > div.row {
padding-left: calc((100% - #{$main-content-max-width} - 2%) / 2);
}
#panel-wrapper {
margin-left: 3%;
}
footer {
padding-left: 0;
padding-right: calc(100% - #{$sidebar-width-large} - 1180px);
}
#back-to-top {
right: calc(100% - 1920px + 15rem);
}
}
@media (min-width: 1920px) {
#main > div.row {
padding-left: 190px;
}
#search-result-wrapper {
padding-right: calc(100% - #{$sidebar-width-large} - 1180px);
}
#panel-wrapper {
margin-left: 41px;
}
}

4
_sass/addon/variables.scss
View file

@ -23,9 +23,7 @@ $topbar-height: 3rem !default;
$footer-height: 5rem !default;
$footer-height-mobile: 6rem !default; /* screen width: <= 576px */
$main-content-max-width: 1150px !default;
$panel-max-width: 300px !default;
$main-content-max-width: 1200px !default;
$bottom-min-height: 35rem !default;