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

Optimize the responsive design for Pad devices

Browse source
This commit is contained in:
Cotes Chung 2021-04-05 17:50:35 +08:00
parent 3b5441a1c2
commit 7a5ad10bdc
1 changed files with 27 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
_sass/addon/commons.scss
View file

@ -1071,7 +1071,14 @@ $sidebar-display: "sidebar-display";
-webkit-transform: translate3d(0, -5px, 0); -webkit-transform: translate3d(0, -5px, 0);
} }
/* --- Responsive Design --- */ /*
Responsive Design:
{sidebar, content, panel} >= 1120px screen width
{sidebar, content} >= 850px screen width
{content} <= 849px screen width
*/
@media all and (max-width: 576px) { @media all and (max-width: 576px) {
@ -1121,8 +1128,8 @@ $sidebar-display: "sidebar-display";
} }
/* Hide Sidebar and TOC */ /* hide sidebar and panel */
@media all and (max-width: 830px) { @media all and (max-width: 849px) {
%slide { %slide {
-webkit-transition: transform 0.4s ease; -webkit-transition: transform 0.4s ease;
transition: transform 0.4s ease; transition: transform 0.4s ease;
@ -1239,16 +1246,17 @@ $sidebar-display: "sidebar-display";
} }
} }
} } // max-width: 849px
/* Phone & Pad */
@media all and (min-width: 577px) and (max-width: 1199px) { @media all and (min-width: 577px) and (max-width: 1199px) {
footer > .d-flex > div { footer > .d-flex > div {
width: 312px; width: 312px;
} }
} }
/* Sidebar visible */ /* Sidebar is visible */
@media all and (min-width: 831px) { @media all and (min-width: 850px) {
/* Solved jumping scrollbar */ /* Solved jumping scrollbar */
html { html {
overflow-y: scroll; overflow-y: scroll;
@ -1295,9 +1303,9 @@ $sidebar-display: "sidebar-display";
} }
/* iPad 9.7" horizontal */ /* Pad horizontal */
@media all and (min-width: 992px) and (max-width: 1024px) { @media all and (min-width: 992px) and (max-width: 1199px) {
#main-wrapper .col-lg-11 { #main .col-lg-11 {
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 0 96%; -ms-flex: 0 0 96%;
flex: 0 0 96%; flex: 0 0 96%;
@ -1305,11 +1313,17 @@ $sidebar-display: "sidebar-display";
} }
} }
/* Compact icons in sidebar & TOC hidden */ /* Compact icons in sidebar & panel hidden */
@media all and (min-width: 832px) and (max-width: 1199px) { @media all and (min-width: 850px) and (max-width: 1199px) {
#sidebar { #sidebar {
width: $sidebar-width-small; width: $sidebar-width-small;
.site-subtitle {
margin-left: 1rem;
margin-right: 1rem;
}
.sidebar-bottom { .sidebar-bottom {
a, a,
span { span {
@ -1354,7 +1368,7 @@ $sidebar-display: "sidebar-display";
} }
/* Pannel hidden */ /* panel hidden */
@media all and (max-width: 1199px) { @media all and (max-width: 1199px) {
#panel-wrapper { #panel-wrapper {
display: none; display: none;
@ -1609,7 +1623,7 @@ $sidebar-display: "sidebar-display";
} // #sidebar } // #sidebar
footer > div.d-flex { footer > div.d-flex {
width: 87%; width: 92%;
max-width: 1140px; max-width: 1140px;
} }