Skip to content

Commit bf24a55

Browse files
lcharettelcharette
committed
Update for mobile
1 parent 3c9c1cd commit bf24a55

8 files changed

Lines changed: 581 additions & 523 deletions

File tree

‎app/assets/css/docs.less‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@
110110
border-bottom: @header-border-size solid @header-border-color;
111111
display: table;
112112
padding-bottom: @header-border-spacing; /* Space between text and border */
113+
text-align: initial;
113114
}
114115

115116
h1 {
@@ -248,6 +249,7 @@
248249
text-align: center;
249250
display: block;
250251
letter-spacing: @header-letter-spacing;
252+
text-align: initial;
251253
}
252254

253255
h1 {

‎app/assets/css/pager.less‎

Lines changed: 52 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
@pager-width: 60px;
22
@pager-font-size: 50px;
3+
@pager-breakpoint: @breakpoint-small-max;
34

5+
// Base pager styles (desktop default)
46
main > .uk-container {
57
padding-left: @pager-width + @global-gutter;
68
padding-right: @pager-width + @global-gutter;
@@ -13,48 +15,67 @@ main > .uk-container {
1315
top: 0;
1416
bottom: 0;
1517
width: @pager-width;
16-
font-size: @pager-font-size;
1718
height: 100%;
18-
cursor: pointer;
1919
display: table;
2020
text-align: center;
21+
font-size: @pager-font-size;
22+
cursor: pointer;
2123
color: @global-theme-color;
22-
}
23-
24-
a.pager-next > i,
25-
a.pager-prev > i {
26-
display: table-cell;
27-
vertical-align: middle;
28-
text-align: center;
29-
}
3024

31-
a.pager-next:hover,
32-
a.pager-prev:hover {
33-
background: @global-muted-background;
34-
color: @global-theme-color;
35-
text-decoration: none;
25+
&:hover {
26+
background: @global-muted-background;
27+
text-decoration: none;
28+
}
29+
30+
i {
31+
display: table-cell;
32+
vertical-align: middle;
33+
text-align: center;
34+
}
3635
}
3736

3837
a.pager-prev {
3938
left: @sidebar-width;
4039
}
40+
4141
a.pager-next {
4242
right: 0;
4343
}
44+
}
45+
46+
// Mobile layout
47+
@media (max-width: @pager-breakpoint) {
48+
main > .uk-container {
49+
padding-left: @global-gutter;
50+
padding-right: @global-gutter;
51+
}
52+
53+
.pager {
54+
display: table;
55+
width: 100%;
4456

45-
// @media only all and (max-width: 59.938em) {
46-
// .pager {
47-
// display: table-cell;
48-
// position: static;
49-
// top: auto;
50-
// width: 50%;
51-
// text-align: center;
52-
// height: 100px;
53-
// line-height: 100px;
54-
// padding-top: 0;
55-
// }
56-
// .pager > i {
57-
// display: inline-block;
58-
// }
59-
// }
60-
}
57+
a.pager-next,
58+
a.pager-prev {
59+
position: static;
60+
width: 50%;
61+
height: 100px;
62+
line-height: 100px;
63+
display: table-cell;
64+
vertical-align: middle;
65+
text-align: center;
66+
67+
i {
68+
display: inline;
69+
vertical-align: baseline;
70+
}
71+
}
72+
73+
a.pager-prev {
74+
left: auto;
75+
}
76+
77+
a.pager-next {
78+
right: auto;
79+
}
80+
}
81+
}

‎app/assets/css/sidebar.less‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,7 @@
33
*/
44
@sidebar-special-padding-horizontal: 12px;
55

6-
aside.uf-sidenav,
7-
aside {
8-
6+
.uf-sidebar {
97
// Set nav header padding
108
.uk-nav-header {
119
margin-top: @sidebar-item-padding-vertical;
@@ -14,13 +12,13 @@ aside {
1412
}
1513

1614
// Numbered list style for sidebar navigation
17-
.uk-nav-default {
15+
.uf-nav-chaptered {
1816
list-style-type: decimal-leading-zero;
1917
list-style-position: inside;
2018
}
2119

2220
// Marker style for numbered list
23-
.uk-nav-default > li::marker {
21+
.uf-nav-chaptered > li::marker {
2422
font-weight: bold;
2523
}
2624

‎app/assets/theme.less‎

Lines changed: 1 addition & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
/**
99
* Import custom styles for documentation
1010
*/
11+
@import 'css/alert.less';
1112
@import 'css/docs.less';
1213
@import 'css/sidebar.less';
1314
@import 'css/pager.less';
@@ -20,31 +21,3 @@
2021
@base-pre-padding: 0px;
2122
@breadcrumb-item-color: @global-link-color;
2223
@breadcrumb-divider-color: @global-emphasis-color;
23-
24-
/*
25-
* TEMP - Fix font smoothing issues until Beta 7 release
26-
*/
27-
@import 'css/alert.less';
28-
29-
html {
30-
scroll-padding-top: @navbar-nav-item-height + @global-medium-margin;
31-
}
32-
33-
.hook-base-body() {
34-
-webkit-font-smoothing: antialiased;
35-
-moz-osx-font-smoothing: grayscale;
36-
}
37-
.hook-navbar() {
38-
-webkit-font-smoothing: auto;
39-
-moz-osx-font-smoothing: auto;
40-
}
41-
42-
aside.uf-sidenav .uk-nav-default .uk-nav-sub a {
43-
letter-spacing: -0.45px;
44-
padding-bottom: 4px;
45-
padding-top: 4px;
46-
}
47-
48-
aside ~ main {
49-
margin-left: @sidebar-width;
50-
}

‎app/templates/partials/breadcrumbs.html.twig‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<div class="uk-section" uk-grid>
2-
<div class="uk-width-expand">
1+
<div class="uk-section uk-grid-small" uk-grid>
2+
<div class="uk-width-expand@s">
33
<nav aria-label="Breadcrumb">
44
<ul class="uk-breadcrumb">
55
{% for crumb in breadcrumbs %}
@@ -20,7 +20,7 @@
2020
</ul>
2121
</nav>
2222
</div>
23-
<div>
23+
<div class="uk-width-auto@s">
2424
{% if page.github is defined %}
2525
<a href="{{ page.github }}" class="uk-button uk-button-text" target="_blank" rel="noopener">
2626
<i class="fab fa-github"></i> Edit this page

‎app/templates/partials/header.html.twig‎

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,23 @@
11
<header>
22
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
3-
<div class="uk-navbar-container">
4-
<div class="uk-container uk-container-expand">
5-
<nav class="uk-navbar" uk-navbar>
3+
<div class="uk-container uk-navbar-container uk-container-expand">
4+
<nav class="uk-navbar" uk-navbar>
5+
<div class="uk-navbar-left">
66
<ul class="uk-navbar-nav uk-hidden@m">
77
<li>
8-
<a
9-
class="uk-navbar-item uk-logo"
10-
uk-toggle="target: aside; cls: open">
11-
<font-awesome-icon icon="bars" />
8+
<a href="#offcanvas-sidebar" uk-toggle class="uk-navbar-item">
9+
<i class="fa-solid fa-bars"></i>
1210
</a>
1311
</li>
1412
</ul>
15-
<div class="uk-navbar-left" data-test="navbar-left">
16-
<a href="{{ urlFor('index', [], [], '/') }}" class="uk-navbar-item uk-logo">{{site.title}}</a>
17-
</div>
18-
<div class="uk-navbar-right" data-test="navbar-right">
19-
<ul class="uk-navbar-nav">
20-
{% include "content/navigation/navbar.html.twig" %}
21-
</ul>
22-
</div>
23-
</nav>
24-
</div>
13+
<a href="{{ urlFor('index', [], [], '/') }}" class="uk-navbar-item uk-logo">{{site.title}}</a>
14+
</div>
15+
<div class="uk-navbar-right uk-visible@m">
16+
<ul class="uk-navbar-nav">
17+
{% include "content/navigation/navbar.html.twig" %}
18+
</ul>
19+
</div>
20+
</nav>
2521
</div>
2622
</div>
2723
</header>

‎app/templates/partials/sidebar.html.twig‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,20 @@
1-
<aside class="uf-sidenav">
2-
<ul class="uk-nav-default" uk-nav>
1+
<aside class="uf-sidebar uk-visible@m">
2+
<ul class="uk-nav-default uf-nav-chaptered" uk-nav>
33
{% include 'content/navigation/sidebar.html.twig' %}
44
</ul>
55
{% include "partials/footer.html.twig" %}
6-
</aside>
6+
</aside>
7+
<div
8+
class="uk-hidden@m uk-offcanvas"
9+
id="offcanvas-sidebar"
10+
uk-offcanvas="overlay: true; selClose: .uf-sidebar-close">
11+
<div class="uf-sidebar uk-offcanvas-bar">
12+
<ul class="uk-nav-default" uk-nav>
13+
{% include "content/navigation/navbar.html.twig" %}
14+
</ul>
15+
<ul class="uk-nav-default uf-nav-chaptered" uk-nav>
16+
{% include 'content/navigation/sidebar.html.twig' %}
17+
</ul>
18+
{% include "partials/footer.html.twig" %}
19+
</div>
20+
</div>

0 commit comments

Comments
 (0)