Skip to content

Commit 56fab01

Browse files
mamicidalmamicidal
authored
Merge pull request #156 from ritovision/fix-mobile-layout
Site-wide responsive layout fix
2 parents 3e908b3 + ac0f207 commit 56fab01

7 files changed

Lines changed: 366 additions & 20 deletions

File tree

‎_layouts/col-sidebar.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en">
33
<head>
44
{% include head.html %}
5+
<link rel="stylesheet" href="{{ '/assets/css/mxgraph-responsive.css' | relative_url }}">
56
<script type="text/javascript">
67
$(function(){
78
var baseurl = "{{ site.github.repository_url }}/blob/master/";
@@ -10,6 +11,7 @@
1011
});
1112
</script>
1213
<script async defer src="https://buttons.github.io/buttons.js"></script>
14+
<script src="{{ '/assets/js/mxgraph-responsive.js' | relative_url }}" defer></script>
1315
</head>
1416
<body class="base-grid col-sidebar">
1517

‎_sass/_base.scss‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ a {
6666
max-width: $grid-val * 50; // 30 * 45 = 1320px
6767
width: 100%;
6868
margin: 0 auto;
69-
padding: 0;
69+
padding: 0 0 0 15px;
7070
& > * {
7171
margin-left: 0;
7272
margin-right: 30px;
@@ -102,6 +102,12 @@ footer {
102102
grid-area: footer;
103103
margin-left: 1em;
104104
}
105+
/* allow footer to center on mobile */
106+
@media screen and (max-width: $content-bp - 1) {
107+
footer {
108+
margin-left: 0;
109+
}
110+
}
105111

106112
.social {
107113
float: right;
@@ -152,6 +158,12 @@ footer {
152158
max-width: 768px;
153159
line-height:normal;
154160
}
161+
/* contain sizing on mobile */
162+
@media screen and (max-width: $content-bp - 1) {
163+
.bigheader {
164+
font-size: 10vw;
165+
}
166+
}
155167

156168
@media screen and (max-width: $header-bp - 1) { // 1019px
157169
// replace desktop nav with mobile nav
@@ -173,3 +185,13 @@ footer {
173185
padding-left: 1em;
174186
}
175187
}
188+
@media screen and (max-width: $content-bp - 1) {
189+
.footer-wrapper {
190+
display: flex;
191+
flex-direction: column;
192+
align-items: center;
193+
margin-left: auto;
194+
margin-right: auto;
195+
padding: 0 1rem; /* small side padding so text doesn’t hug edges */
196+
}
197+
}

‎_sass/_components.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -635,6 +635,23 @@ table {
635635
#disclaimer p {
636636
min-width:80%;
637637
}
638+
/* mobile responsive settings for disclaimer */
639+
@media screen and (max-width: $content-bp - 1) {
640+
#disclaimer p {
641+
min-width: 0;
642+
}
643+
#disclaimer a.disclaimerOK {
644+
margin: 0 0 0 1rem;
645+
}
646+
#close-disclaimer {
647+
float: none;
648+
padding: 0;
649+
margin-right: 20px;
650+
}
651+
#disclaimer {
652+
padding: 15px 20px;
653+
}
654+
}
638655

639656
.sitemap {
640657
h2 {

‎_sass/_nav.scss‎

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,13 @@ header {
192192
}
193193
}
194194

195+
@media screen and (max-width: $content-bp - 1) {
196+
.disclaimer {
197+
display: block;
198+
margin-left: auto;
199+
margin-right: auto;
200+
}
201+
}
195202

196203
@media screen and (min-width: $header-bp) { // 1020px
197204
.alt-nav {
@@ -305,6 +312,16 @@ header {
305312
.header-wrapper {
306313
max-height: 75px;
307314
}
315+
316+
.search-bar {
317+
width: 90%;
318+
max-width: 90%;
319+
}
320+
.mini-search-bar {
321+
width: 70%;
322+
max-width: 70%;
323+
}
324+
.mobile-menu .search-bar { margin-left: 5px; }
308325
}
309326

310327
@media screen and (min-width: $content-bp) { // 840px
@@ -317,21 +334,31 @@ header {
317334
}
318335

319336
@media screen and (max-width: $content-bp - 1) { // 839px
320-
// restyling for ease of use on mobile
337+
.social {
338+
display: flex;
339+
flex-direction: row;
340+
justify-content: center;
341+
margin-left: auto;
342+
margin-right: auto;
343+
gap: 2rem;
344+
margin-bottom: 1rem;
345+
}
346+
321347
.bot-nav {
348+
justify-content: center;
349+
margin-right: 0; /* remove the "basic layout spec" margins added */
350+
351+
// restyling for ease of use on mobile
322352
ul {
323353
display: flex;
324354
flex-direction: column;
325355
align-items: center;
326356
margin: 5 auto;
327357
}
328358
}
329-
330-
.social {
331-
float: none;
332-
}
333359
}
334360

361+
335362
@media screen and (max-width: $content-bp) {
336363
.main-wrapper,
337364
.header-wrapper,

‎_sass/_simple-mobile.scss‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -37,17 +37,3 @@
3737
display:none !important;
3838
}
3939
}
40-
41-
//mobile responsiveness for the bottom menu and media icons
42-
@media only screen and (max-width: 600px) {
43-
.bot-nav{
44-
justify-content: center;
45-
}
46-
.social{
47-
display: flex;
48-
justify-content: center;
49-
a{
50-
padding:20px;
51-
}
52-
}
53-
}

‎assets/css/mxgraph-responsive.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* assets/css/mxgraph-responsive.css
2+
Minimal safety CSS for mxgraph so layout is protected before JS runs
3+
*/
4+
.mxgraph {
5+
box-sizing: border-box;
6+
max-width: 100%;
7+
width: 100%;
8+
min-width: 0;
9+
min-height: 0;
10+
height: auto;
11+
overflow: auto;
12+
position: relative;
13+
-webkit-overflow-scrolling: touch;
14+
touch-action: auto;
15+
margin-top: 2.5rem !important;
16+
margin-bottom: 2.5rem;
17+
}
18+
19+
.mxgraph iframe,
20+
.mxgraph svg,
21+
.mxgraph > div > svg,
22+
.mxgraph > div > iframe {
23+
display: block;
24+
width: 100%;
25+
max-width: 100%;
26+
min-width: 0;
27+
min-height: 0 !important;
28+
height: auto;
29+
box-sizing: border-box;
30+
}

0 commit comments

Comments
 (0)