swedbank-pay-design-guide-jekyll-theme 1.8.1 → 1.9.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/_includes/iterator.html +2 -2
- data/_includes/title-header.html +32 -0
- data/_layouts/default.html +13 -32
- data/_layouts/front-page.html +24 -21
- data/_plugins/sidebar.rb +2 -1
- data/_sass/breakpoints.scss +5 -0
- data/_sass/card.scss +1 -0
- data/_sass/front-page.scss +108 -71
- data/_sass/sidebar.scss +33 -3
- data/_sass/swedbank-pay-design-guide-theme.scss +5 -0
- data/_sass/title-header.scss +3 -0
- data/_sass/variables.scss +1 -1
- data/assets/css/pygments-autumn.css +1 -1
- data/lib/gem_version.rb +1 -1
- data/lib/safe_merge.rb +28 -0
- data/lib/sanitized_filename.rb +12 -0
- data/lib/sidebar.rb +23 -196
- data/lib/sidebar_html_builder.rb +154 -0
- data/lib/sidebar_page.rb +181 -0
- data/lib/sidebar_page_collection.rb +36 -0
- data/lib/sidebar_page_title.rb +94 -0
- data/lib/sidebar_parser.rb +95 -0
- data/lib/sidebar_path.rb +62 -0
- data/lib/sidebar_renderer.rb +67 -0
- data/lib/sidebar_text_builder.rb +47 -0
- data/lib/sidebar_tree_builder.rb +86 -0
- metadata +31 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: f92dcd253d65caf6bcc5ac6663cf8fef62eda89950bc5a0279d6d6893c436ad7
|
4
|
+
data.tar.gz: 76218fadaf01fde1ec62db738d8b7a02f382121dc3864a367e992a6eb31a81a1
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 12d0597e1ed06b31f81ef396347e6ba3cfbffeb6b7fd3a997092def427e12d154a044d41bc9c6763ba69a19ff2a3340e87e2ee93c0a7ef32c78736b950288761
|
7
|
+
data.tar.gz: 4521b44c5016625b6af1fb6b4eb1e4cc41f067224a11fb72b1696690ef76b1a25223ff2bc805c2fae189e68cc12fbcc9872e48103637fc432c74e937bb6f7f4f
|
data/_includes/iterator.html
CHANGED
@@ -5,13 +5,13 @@
|
|
5
5
|
|
6
6
|
<nav class="iterator d-flex">
|
7
7
|
{% if prev_href != blank and prev_href != empty and prev_href != nil %}
|
8
|
-
<a class="mr-auto btn btn-
|
8
|
+
<a class="mr-auto btn btn-primary" role="button" rel="prev" href="{{ prev_href }}">
|
9
9
|
{{ prev_title }}
|
10
10
|
</a>
|
11
11
|
{% endif %}
|
12
12
|
|
13
13
|
{% if next_href != blank and next_href != empty and next_href != nil %}
|
14
|
-
<a class="ml-auto btn btn-
|
14
|
+
<a class="ml-auto btn btn-primary" role="button" rel="next" href="{{ next_href }}">
|
15
15
|
{{ next_title }}
|
16
16
|
</a>
|
17
17
|
{% endif %}
|
@@ -0,0 +1,32 @@
|
|
1
|
+
{% assign lead_title = page.lead_title %}
|
2
|
+
{% assign main_title = page.main_title | default: page.title %}
|
3
|
+
{% assign description = page.description %}
|
4
|
+
{% assign estimated_read = page.estimated_read %}
|
5
|
+
{% capture max_width_class %}
|
6
|
+
{% if page.card_overview %}
|
7
|
+
max-width-card-overview
|
8
|
+
{% else %}
|
9
|
+
max-width
|
10
|
+
{% endif %}
|
11
|
+
{% endcapture %}
|
12
|
+
|
13
|
+
<div class="title-header">
|
14
|
+
<div class="title-header-container {{ max_width_class | strip }}">
|
15
|
+
{% if lead_title != nil %}
|
16
|
+
<h4>{{ lead_title }}</h4>
|
17
|
+
{% endif %}
|
18
|
+
|
19
|
+
<h1>{{ main_title }}</h1>
|
20
|
+
|
21
|
+
{% if estimated_read %}
|
22
|
+
<div class="title-header-estimated-read">
|
23
|
+
<i class="material-icons">schedule</i>
|
24
|
+
{{ estimated_read }} min read
|
25
|
+
</div>
|
26
|
+
{% endif %}
|
27
|
+
|
28
|
+
{% if description %}
|
29
|
+
<p>{{ description | markdownify }}</p>
|
30
|
+
{% endif %}
|
31
|
+
</div>
|
32
|
+
</div>
|
data/_layouts/default.html
CHANGED
@@ -3,7 +3,7 @@
|
|
3
3
|
{%- assign image = page.opengraph.image | default: site.opengraph.image -%}
|
4
4
|
{%- assign github_branch = site.github.branch | default : "develop" -%}
|
5
5
|
{%- assign design_guide_base_url = site.design_guide.base_url | default: 'https://design.swedbankpay.com' -%}
|
6
|
-
{%- assign design_guide_version = site.design_guide.version | default: '4.
|
6
|
+
{%- assign design_guide_version = site.design_guide.version | default: '4.8.1' -%}
|
7
7
|
{%- assign design_guide_url = design_guide_base_url | append: '/v/' | append: design_guide_version -%}
|
8
8
|
{%- if page.sidebar.navigation == nil -%}
|
9
9
|
{%- unless page.name contains "index" -%}
|
@@ -66,12 +66,21 @@
|
|
66
66
|
<nav class="sidebar-nav">
|
67
67
|
<a href="/" class="sidebar-header">
|
68
68
|
<img src="{{ design_guide_url }}/img/swedbankpay-logo-v.svg"
|
69
|
-
alt="Swedbank Pay vertical logo" />
|
69
|
+
alt="Swedbank Pay vertical logo" class="logotype-vertical logotype-lg"/>
|
70
70
|
<div class="sidebar-header-text">
|
71
71
|
<span>{</span>developer portal<span>}</span>
|
72
72
|
</div>
|
73
73
|
</a>
|
74
|
-
|
74
|
+
<div class="search-container mx-2 my-4 px-3 py-2 d-flex ">
|
75
|
+
<input type="text" id="search-input" class="search-input w-100 "
|
76
|
+
placeholder="Search in documentation"
|
77
|
+
onfocus="this.placeholder=''"
|
78
|
+
onblur="this.placeholder='Search in documentation'">
|
79
|
+
|
80
|
+
<label for="search-input" class="mb-0">
|
81
|
+
<i class="material-icons m-0" aria-hidden="true">search</i>
|
82
|
+
</label>
|
83
|
+
</div>
|
75
84
|
<ul id="dx-sidebar-main-nav-ul" class="main-nav-ul">
|
76
85
|
</ul>
|
77
86
|
</nav>
|
@@ -80,30 +89,7 @@
|
|
80
89
|
|
81
90
|
<main class="doc-view col-xxl-10 col-lg-9">
|
82
91
|
{% if page.layout != 'front-page' %}
|
83
|
-
|
84
|
-
{% assign title_main = title | split: '–' | last %}
|
85
|
-
{% assign description = page.description %}
|
86
|
-
{% assign estimated_read = page.estimated_read %}
|
87
|
-
<div class="title-header">
|
88
|
-
<div class="title-header-container
|
89
|
-
{% if page.card_overview %} max-width-card-overview
|
90
|
-
{% else %} max-width
|
91
|
-
{% endif %}">
|
92
|
-
{% if title_lead != title_main %}
|
93
|
-
<h4>{{ title_lead }}</h4>
|
94
|
-
{% endif %}
|
95
|
-
<h1>{{ title_main }}</h1>
|
96
|
-
{% if estimated_read %}
|
97
|
-
<div class="title-header-estimated-read">
|
98
|
-
<i class="material-icons">schedule</i>
|
99
|
-
{{ estimated_read }} min read
|
100
|
-
</div>
|
101
|
-
{% endif %}
|
102
|
-
{% if description %}
|
103
|
-
<p>{{ description | markdownify }}</p>
|
104
|
-
{% endif %}
|
105
|
-
</div>
|
106
|
-
</div>
|
92
|
+
{% include title-header.html %}
|
107
93
|
{% endif %}
|
108
94
|
<div class="doc-container{% if page.layout == 'front-page' %} no-padding
|
109
95
|
{% elsif page.card_overview %} normal-padding max-width-card-overview
|
@@ -116,12 +102,7 @@
|
|
116
102
|
</main>
|
117
103
|
</div>
|
118
104
|
</div>
|
119
|
-
|
120
|
-
<footer class="page-footer">
|
121
|
-
<p class="page-footer-rights">© Swedbank Pay</p>
|
122
|
-
</footer>
|
123
105
|
</div>
|
124
|
-
|
125
106
|
<script src="{{ design_guide_url }}/scripts/dg.js"></script>
|
126
107
|
<script src="{{ '/assets/js/swedbank-pay-design-guide-theme.js' | relative_url }}"></script>
|
127
108
|
{%- if site.google_analytics.tracking_id %}
|
data/_layouts/front-page.html
CHANGED
@@ -9,20 +9,20 @@ layout: default
|
|
9
9
|
{% assign front_page_start_heading = page.front_page.start_heading | default: "Start your integration" %}
|
10
10
|
|
11
11
|
<div class="front-page">
|
12
|
-
<div class="front-page-
|
13
|
-
<div class="front-page-
|
14
|
-
<
|
15
|
-
|
16
|
-
<
|
17
|
-
{<span>{{ front_page_title }}</span>}
|
18
|
-
</div>
|
19
|
-
<p>{{ front_page_ingress }}</p>
|
20
|
-
</div>
|
21
|
-
<div class="front-page-intro-cards">
|
22
|
-
<h2 id="front-page-start" class="heading-line heading-line-white">{{ front_page_start_heading }}</h2>
|
23
|
-
{% contentblock start %}
|
12
|
+
<div class="front-page-top">
|
13
|
+
<div class="front-page-hero">
|
14
|
+
<h3>{{ front_page_hero }}</h3>
|
15
|
+
<div class="front-page-hero-name">
|
16
|
+
{<span>{{ front_page_title }}</span>}
|
24
17
|
</div>
|
18
|
+
<p>{{ front_page_ingress }}</p>
|
19
|
+
</div>
|
20
|
+
<div class="front-page-intro-cards">
|
21
|
+
<h2 id="front-page-start" class="heading-line heading-line-white">{{ front_page_start_heading }}</h2>
|
22
|
+
{% contentblock start %}
|
25
23
|
</div>
|
24
|
+
</div>
|
25
|
+
<div class="front-page-container">
|
26
26
|
{% if show_merchants_bar == true %}
|
27
27
|
<div class="front-page-merchants">
|
28
28
|
<h6>Trusted by</h6>
|
@@ -52,27 +52,30 @@ layout: default
|
|
52
52
|
</div>
|
53
53
|
</div>
|
54
54
|
{% endif %}
|
55
|
-
<
|
55
|
+
<div class="front-page-demoshop">
|
56
56
|
<span class="front-page-demoshop-text">
|
57
|
-
<span class="h2">Try our Demoshop
|
57
|
+
<span class="h2">Try our Demoshop</span>
|
58
58
|
<span class="demoshop-text-description">
|
59
|
-
|
59
|
+
See how our checkout and payment methods are used
|
60
60
|
in practice!
|
61
61
|
</span>
|
62
62
|
</span>
|
63
63
|
<span class="front-page-demoshop-link">
|
64
|
-
<
|
65
|
-
|
64
|
+
<a href="https://ecom.externalintegration.payex.com/pspdemoshop" class="text-decoration-none">
|
65
|
+
<span class="h3 mr-2">Go to the demoshop
|
66
|
+
<i class="material-icons ml-2">arrow_forward</i>
|
67
|
+
</span>
|
68
|
+
</a>
|
66
69
|
<span class="demoshop-link-img">
|
67
|
-
<img class="demoshop-link-img-mobile d-
|
70
|
+
<img class="demoshop-link-img-mobile d-none d-md-flex"
|
68
71
|
src="/assets/img/demoshop-mobile.svg" alt="demoshop-mobile" />
|
69
|
-
<img class="demoshop-link-img-mobile d-none d-
|
72
|
+
<img class="demoshop-link-img-mobile d-none d-xl-flex d-xxl-none"
|
70
73
|
src="/assets/img/demoshop-mobile2.svg" alt="demoshop-mobile2" />
|
71
|
-
<img class="demoshop-link-img-web d-none d-
|
74
|
+
<img class="demoshop-link-img-web d-none d-xxl-flex"
|
72
75
|
src="/assets/img/demoshop-web.svg" alt="demoshop-web" />
|
73
76
|
</span>
|
74
77
|
</span>
|
75
|
-
</
|
78
|
+
</div>
|
76
79
|
|
77
80
|
<div class="front-page-container">
|
78
81
|
<div class="front-page-cards-sdk">
|
data/_plugins/sidebar.rb
CHANGED
data/_sass/card.scss
CHANGED
data/_sass/front-page.scss
CHANGED
@@ -1,8 +1,9 @@
|
|
1
1
|
@import 'colors.scss';
|
2
2
|
@import 'fonts.scss';
|
3
|
+
@import 'breakpoints.scss';
|
3
4
|
|
4
5
|
$front-page-padding: 0 4rem;
|
5
|
-
$front-page-max-width:
|
6
|
+
$front-page-max-width: 1312px;
|
6
7
|
|
7
8
|
@mixin row-cards {
|
8
9
|
>[class*='col-'] {
|
@@ -49,77 +50,87 @@ $front-page-max-width: 1280px;
|
|
49
50
|
}
|
50
51
|
|
51
52
|
.front-page {
|
53
|
+
margin: 3rem 2rem 0;
|
52
54
|
position: relative;
|
53
55
|
display: flex;
|
54
56
|
flex-direction: column;
|
55
57
|
align-items: center;
|
58
|
+
|
59
|
+
.front-page-top {
|
60
|
+
position: relative;
|
61
|
+
padding: 4rem 4rem 2rem;
|
62
|
+
width: 100%;
|
63
|
+
margin-bottom: 3rem;
|
64
|
+
max-width: 1432px;
|
65
|
+
background-color: $dark-brown;
|
66
|
+
z-index: 0;
|
67
|
+
border-radius: 1rem;
|
68
|
+
min-height: 33rem;
|
56
69
|
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
.front-page-top {
|
62
|
-
padding-top: 4rem;
|
63
|
-
width: 100%;
|
70
|
+
.front-page-hero {
|
71
|
+
position: relative;
|
72
|
+
max-width: 38rem;
|
64
73
|
margin-bottom: 3rem;
|
74
|
+
z-index: 1;
|
65
75
|
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
top: 0;
|
71
|
-
left: 0;
|
72
|
-
background-color: $dark-brown;
|
73
|
-
width: 100%;
|
74
|
-
height: 34rem;
|
75
|
-
z-index: 0;
|
76
|
+
h3 {
|
77
|
+
color: $yellow;
|
78
|
+
font-family: $headline;
|
79
|
+
margin-bottom: 0;
|
76
80
|
}
|
77
81
|
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
z-index: 1;
|
82
|
+
p {
|
83
|
+
color: $white;
|
84
|
+
font-size: 1.125rem;
|
85
|
+
}
|
83
86
|
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
87
|
+
.front-page-hero-name {
|
88
|
+
font-family: $mono;
|
89
|
+
font-weight: bold;
|
90
|
+
font-size: 2rem;
|
91
|
+
color: $yellow;
|
92
|
+
margin-bottom: 1rem;
|
89
93
|
|
90
|
-
|
94
|
+
span {
|
91
95
|
color: $white;
|
92
|
-
font-size: 1.125rem;
|
93
96
|
}
|
97
|
+
}
|
98
|
+
|
99
|
+
}
|
94
100
|
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
font-size: 2rem;
|
99
|
-
color: $yellow;
|
100
|
-
margin-bottom: 1rem;
|
101
|
+
.front-page-intro-cards {
|
102
|
+
h2 {
|
103
|
+
color: $white;
|
101
104
|
|
102
|
-
|
103
|
-
|
104
|
-
}
|
105
|
+
.header-anchor {
|
106
|
+
display: none;
|
105
107
|
}
|
108
|
+
}
|
106
109
|
|
110
|
+
.row {
|
111
|
+
@include row-cards();
|
107
112
|
}
|
113
|
+
}
|
108
114
|
|
115
|
+
@media screen and (min-width: $breakpoint-xxl) {
|
116
|
+
margin-bottom: 10rem;
|
117
|
+
|
109
118
|
.front-page-intro-cards {
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
display: none;
|
115
|
-
}
|
116
|
-
}
|
117
|
-
|
118
|
-
.row {
|
119
|
-
@include row-cards();
|
120
|
-
}
|
119
|
+
position: absolute;
|
120
|
+
left: 0;
|
121
|
+
width: 100%;
|
122
|
+
padding: 0 4rem;
|
121
123
|
}
|
122
124
|
}
|
125
|
+
}
|
126
|
+
.front-page-container {
|
127
|
+
max-width: $front-page-max-width;
|
128
|
+
margin: $front-page-padding;
|
129
|
+
position: relative;
|
130
|
+
|
131
|
+
@media screen and (max-width: $breakpoint-md) {
|
132
|
+
margin: 0;
|
133
|
+
}
|
123
134
|
|
124
135
|
.front-page-merchants {
|
125
136
|
margin-bottom: 3.75rem;
|
@@ -221,19 +232,7 @@ $front-page-max-width: 1280px;
|
|
221
232
|
height: 22.5rem;
|
222
233
|
background-color: $dark-brown;
|
223
234
|
text-decoration: none;
|
224
|
-
|
225
|
-
&:hover,
|
226
|
-
&:focus {
|
227
|
-
.front-page-demoshop-link {
|
228
|
-
background-color: $white;
|
229
|
-
color: $brown;
|
230
|
-
|
231
|
-
.h3 {
|
232
|
-
color: $brown;
|
233
|
-
}
|
234
|
-
|
235
|
-
}
|
236
|
-
}
|
235
|
+
border-radius: 1rem;
|
237
236
|
|
238
237
|
&:after {
|
239
238
|
display: none;
|
@@ -249,17 +248,29 @@ $front-page-max-width: 1280px;
|
|
249
248
|
|
250
249
|
.h2 {
|
251
250
|
color: $white;
|
252
|
-
|
253
|
-
span {
|
254
|
-
color: $yellow;
|
255
|
-
}
|
256
251
|
}
|
257
252
|
|
258
253
|
.demoshop-text-description {
|
259
254
|
color: $white;
|
260
|
-
width:
|
261
|
-
height: 4.5rem;
|
255
|
+
width: 40%;
|
256
|
+
min-height: 4.5rem;
|
257
|
+
font-size: 1rem;
|
258
|
+
|
262
259
|
}
|
260
|
+
|
261
|
+
}
|
262
|
+
|
263
|
+
@media screen and (max-width: $breakpoint-md) {
|
264
|
+
padding-top: 3rem;
|
265
|
+
height: 18rem;
|
266
|
+
|
267
|
+
.front-page-demoshop-text {
|
268
|
+
.demoshop-text-description {
|
269
|
+
width: 100%;
|
270
|
+
min-height: 2.25rem;
|
271
|
+
}
|
272
|
+
}
|
273
|
+
|
263
274
|
}
|
264
275
|
|
265
276
|
.front-page-demoshop-link {
|
@@ -274,6 +285,21 @@ $front-page-max-width: 1280px;
|
|
274
285
|
box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);
|
275
286
|
max-width: $front-page-max-width;
|
276
287
|
width: 100%;
|
288
|
+
cursor: pointer;
|
289
|
+
|
290
|
+
a::after{
|
291
|
+
content: '';
|
292
|
+
}
|
293
|
+
|
294
|
+
&:hover,
|
295
|
+
&:focus {
|
296
|
+
background-color: $white;
|
297
|
+
color: $brown;
|
298
|
+
|
299
|
+
.h3 {
|
300
|
+
color: $brown;
|
301
|
+
}
|
302
|
+
}
|
277
303
|
|
278
304
|
.demoshop-link-img {
|
279
305
|
display: flex;
|
@@ -281,6 +307,7 @@ $front-page-max-width: 1280px;
|
|
281
307
|
position: absolute;
|
282
308
|
bottom: -1rem;
|
283
309
|
right: 3%;
|
310
|
+
pointer-events: none;
|
284
311
|
|
285
312
|
.demoshop-link-img-web {
|
286
313
|
width: 26.5rem;
|
@@ -297,8 +324,6 @@ $front-page-max-width: 1280px;
|
|
297
324
|
}
|
298
325
|
}
|
299
326
|
|
300
|
-
|
301
|
-
|
302
327
|
.h3 {
|
303
328
|
color: $white;
|
304
329
|
padding-right: 1rem;
|
@@ -306,6 +331,18 @@ $front-page-max-width: 1280px;
|
|
306
331
|
margin: 0;
|
307
332
|
}
|
308
333
|
}
|
334
|
+
|
335
|
+
@media screen and (min-width: $breakpoint-xxl) {
|
336
|
+
.front-page-demoshop-text {
|
337
|
+
margin-bottom: 1rem;
|
338
|
+
}
|
339
|
+
|
340
|
+
.front-page-demoshop-link {
|
341
|
+
.demoshop-link-img {
|
342
|
+
bottom: -2rem;
|
343
|
+
}
|
344
|
+
}
|
345
|
+
}
|
309
346
|
}
|
310
347
|
|
311
348
|
|