bootstrap-bookingsync-sass 1.0.0.beta2 → 1.0.0.beta3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +13 -0
- data/assets/javascripts/bookingsync/menu.js +51 -5
- data/assets/stylesheets/_bootstrap-bookingsync.scss +1 -0
- data/assets/stylesheets/bookingsync/_layout.scss +39 -12
- data/assets/stylesheets/bookingsync/_menu.scss +23 -1
- data/assets/stylesheets/bookingsync/_navbar.scss +6 -0
- data/assets/stylesheets/bookingsync/_navs.scss +60 -0
- data/assets/stylesheets/bookingsync/_sheet.scss +0 -58
- data/assets/stylesheets/bookingsync/_variables.scss +1 -0
- data/docs/Gemfile.lock +1 -1
- data/docs/Rakefile +1 -1
- data/docs/content/components/menu.md +4 -4
- data/docs/content/compositions/_navbar.html +8 -4
- data/docs/content/compositions/compositions.md +186 -35
- data/docs/content/embed/annotated_section.html +1 -3
- data/docs/content/embed/annotated_section_with_tabulated_content.html +49 -0
- data/docs/content/embed/app_admin.html +50 -6
- data/docs/content/embed/app_admin__content.html +37 -0
- data/docs/content/embed/app_admin_with_menu.html +174 -0
- data/docs/content/embed/app_admin_with_menu__content.html +79 -0
- data/docs/content/embed/core_admin.html +4 -4
- data/docs/content/embed/fullscreen_modal.html +1 -1
- data/docs/content/embed/menu.html +3 -3
- data/docs/content/embed/nested_section.html +5 -4
- data/docs/content/embed/section.html +1 -1
- data/docs/content/embed/tabulated_content.html +1 -1
- data/docs/content/embed/two_columns.html +1 -1
- data/lib/bootstrap/bookingsync/version.rb +1 -1
- metadata +7 -3
- data/docs/content/embed/app_admin_content.html +0 -70
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 405b03caf7d9a6134679762dd934b2acdb5ea6f1
|
|
4
|
+
data.tar.gz: 97d6e7eeb124894a6421cb112f41f9efd9253def
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c648a7e0b08e2821468225b542bb293820df841b9857bc20c3ffdd5613c334b71d49c5dc5c73809cb5dfc27644be249ea50b6efe9482cf19cb0fac6a348278b0
|
|
7
|
+
data.tar.gz: d1ff881b0f0d5b950f062b7df7662946cba3596b57cab7d3b8b6872c41b36b5ea5bcb178370e33a9c8b49915ea2997c537c3e9a892244f9e6c677a407c36db91
|
data/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,16 @@
|
|
|
1
|
+
### master
|
|
2
|
+
|
|
3
|
+
### 1.0.0.beta3 - 2016-08-09
|
|
4
|
+
|
|
5
|
+
* bug fixes
|
|
6
|
+
* Fix `menu-body` padding when directly succeeding a `menu-icon`
|
|
7
|
+
* Fix menu for Apps and add `menu-folded`
|
|
8
|
+
|
|
9
|
+
* improvements
|
|
10
|
+
* Add support to automatically mask menu toggle button from apps if
|
|
11
|
+
connected with pushMessage `bookingsync:menu:toggle-button:hide`
|
|
12
|
+
* Add support for annotated sections with tabulated content
|
|
13
|
+
|
|
1
14
|
### 1.0.0.beta2 - 2016-08-07
|
|
2
15
|
|
|
3
16
|
* improvements
|
|
@@ -8,8 +8,27 @@
|
|
|
8
8
|
+function ($) {
|
|
9
9
|
'use strict';
|
|
10
10
|
|
|
11
|
+
$(document).on('click', '[data-toggle="menu-expand"]', function (event) {
|
|
12
|
+
var element = $(this);
|
|
13
|
+
var menu = $(element.data('menu'))
|
|
14
|
+
var submenu = $(element.data('submenu'));
|
|
15
|
+
|
|
16
|
+
if (submenu.hasClass('menu-submenu-collapsed')) {
|
|
17
|
+
menu.find('.active').removeClass('active');
|
|
18
|
+
element.parents('li').addClass('active');
|
|
19
|
+
menu.addClass('menu-collapsed');
|
|
20
|
+
menu.removeClass('menu-hovered');
|
|
21
|
+
submenu.removeClass('menu-submenu-collapsed');
|
|
22
|
+
} else {
|
|
23
|
+
menu.removeClass('menu-collapsed');
|
|
24
|
+
menu.removeClass('menu-hovered');
|
|
25
|
+
submenu.addClass('menu-submenu-collapsed');
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
|
|
11
30
|
var menuTimeout;
|
|
12
|
-
$(document).on('mouseenter', '.menu-collapsed', function (event) {
|
|
31
|
+
$(document).on('mouseenter', '.menu-folded, .menu-collapsed', function (event) {
|
|
13
32
|
var element = $(this);
|
|
14
33
|
if (!menuTimeout) {
|
|
15
34
|
menuTimeout = window.setTimeout(function() {
|
|
@@ -18,7 +37,7 @@
|
|
|
18
37
|
}
|
|
19
38
|
$(element.data('target')).toggleClass(element.data('value'));
|
|
20
39
|
});
|
|
21
|
-
$(document).on('mouseleave', '.menu-collapsed', function (event) {
|
|
40
|
+
$(document).on('mouseleave', '.menu-folded, .menu-collapsed', function (event) {
|
|
22
41
|
var element = $(this);
|
|
23
42
|
if (menuTimeout) {
|
|
24
43
|
window.clearTimeout(menuTimeout);
|
|
@@ -27,17 +46,44 @@
|
|
|
27
46
|
}
|
|
28
47
|
});
|
|
29
48
|
|
|
30
|
-
$(document).on('click', '.
|
|
49
|
+
$(document).on('click', '.menu-toggle-parent-frame', function(event) {
|
|
31
50
|
parent.postMessage("bookingsync:menu:toggle", "*");
|
|
32
51
|
});
|
|
33
52
|
|
|
34
|
-
$(window).
|
|
35
|
-
|
|
53
|
+
$(window).ready(function() {
|
|
54
|
+
var iframes = $('iframe.iframe-fullscreen');
|
|
55
|
+
var toggleButton = $('.menu-toggle-parent-frame');
|
|
56
|
+
|
|
57
|
+
// in parent iframe
|
|
58
|
+
if (iframes.length > 0) {
|
|
59
|
+
// Notify ability to hide parent menu-toggle button
|
|
60
|
+
iframes.each(function(index) {
|
|
61
|
+
var iframe = this;
|
|
62
|
+
$(iframe).ready(function() {
|
|
63
|
+
window.setTimeout(function() {
|
|
64
|
+
iframe.contentWindow.postMessage("bookingsync:menu:toggle-button:hideable", "*");
|
|
65
|
+
}, 1000);
|
|
66
|
+
});
|
|
67
|
+
});
|
|
68
|
+
|
|
36
69
|
window.addEventListener("message", function(event) {
|
|
70
|
+
if (event.data === "bookingsync:menu:toggle-button:hide") {
|
|
71
|
+
$('.menu-toggle-hideable').hide();
|
|
72
|
+
}
|
|
73
|
+
|
|
37
74
|
if (event.data === "bookingsync:menu:toggle") {
|
|
38
75
|
$('body').toggleClass("menu-open");
|
|
39
76
|
}
|
|
40
77
|
}, false);
|
|
41
78
|
}
|
|
79
|
+
|
|
80
|
+
// in app iframe
|
|
81
|
+
if (toggleButton.length > 0) {
|
|
82
|
+
window.addEventListener("message", function(event) {
|
|
83
|
+
if (event.data === "bookingsync:menu:toggle-button:hideable") {
|
|
84
|
+
parent.postMessage("bookingsync:menu:toggle-button:hide", "*");
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
}
|
|
42
88
|
});
|
|
43
89
|
}(jQuery);
|
|
@@ -63,10 +63,16 @@ body {
|
|
|
63
63
|
|
|
64
64
|
.navbar-toggle.menu-toggle {
|
|
65
65
|
float: left;
|
|
66
|
-
margin-left: $navbar-padding-horizontal;
|
|
66
|
+
margin-left: $navbar-padding-horizontal - 10px;
|
|
67
67
|
margin-right: 0;
|
|
68
68
|
}
|
|
69
69
|
|
|
70
|
+
.menu-toggle-hideable {
|
|
71
|
+
position: absolute;
|
|
72
|
+
top: 0;
|
|
73
|
+
left: 0;
|
|
74
|
+
}
|
|
75
|
+
|
|
70
76
|
.iframe-fullscreen {
|
|
71
77
|
width: 100%;
|
|
72
78
|
height: 100vh;
|
|
@@ -74,14 +80,11 @@ body {
|
|
|
74
80
|
}
|
|
75
81
|
|
|
76
82
|
@media (max-width: $grid-float-breakpoint) {
|
|
77
|
-
body.menu-open {
|
|
78
|
-
overflow: hidden;
|
|
79
|
-
max-height: 100vh;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
83
|
// .menu, // Already set
|
|
83
84
|
.menu-submenu,
|
|
84
|
-
.sided-content
|
|
85
|
+
.sided-content,
|
|
86
|
+
.sided-content-with-menu,
|
|
87
|
+
.menu-toggle-hideable {
|
|
85
88
|
transition: transform 0.2s cubic-bezier(.4, 0, .2, 1);
|
|
86
89
|
}
|
|
87
90
|
|
|
@@ -91,22 +94,46 @@ body {
|
|
|
91
94
|
}
|
|
92
95
|
|
|
93
96
|
body.menu-open {
|
|
94
|
-
|
|
95
|
-
|
|
97
|
+
overflow: hidden;
|
|
98
|
+
max-height: 100vh;
|
|
99
|
+
|
|
100
|
+
.menu:not(.menu-submenu-collapsed) {
|
|
96
101
|
transform: translate3d(0, 0, 0);
|
|
97
102
|
}
|
|
98
103
|
|
|
99
|
-
.sided-content
|
|
104
|
+
.sided-content,
|
|
105
|
+
.sided-content-with-menu {
|
|
100
106
|
transform: translate3d($menu-width, 0, 0);
|
|
101
107
|
}
|
|
108
|
+
|
|
109
|
+
.menu-toggle-hideable {
|
|
110
|
+
transform: translate3d($menu-collapsed-width, 0, 0);
|
|
111
|
+
}
|
|
102
112
|
}
|
|
103
113
|
}
|
|
104
114
|
|
|
105
115
|
@media (min-width: $grid-float-breakpoint) {
|
|
116
|
+
.menu-toggle-hideable {
|
|
117
|
+
display: none;
|
|
118
|
+
}
|
|
119
|
+
|
|
106
120
|
.sided-content {
|
|
107
|
-
|
|
108
|
-
|
|
121
|
+
padding-left: $menu-width;
|
|
122
|
+
|
|
123
|
+
& > .navbar {
|
|
109
124
|
margin-left: $menu-width;
|
|
110
125
|
}
|
|
111
126
|
}
|
|
127
|
+
|
|
128
|
+
.sided-content-with-menu {
|
|
129
|
+
padding-left: $menu-width - $menu-collapsed-width;
|
|
130
|
+
|
|
131
|
+
& > .navbar {
|
|
132
|
+
margin-left: $menu-width - $menu-collapsed-width;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.sided-content-full {
|
|
137
|
+
padding-left: $menu-collapsed-width;
|
|
138
|
+
}
|
|
112
139
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
//
|
|
2
2
|
// Menu
|
|
3
3
|
// --------------------------------------------------
|
|
4
|
+
$menu-submenu-width: $menu-width - $menu-collapsed-width;
|
|
4
5
|
|
|
5
6
|
.caret-right {
|
|
6
7
|
display: inline-block;
|
|
@@ -48,6 +49,7 @@
|
|
|
48
49
|
}
|
|
49
50
|
}
|
|
50
51
|
|
|
52
|
+
.menu-folded,
|
|
51
53
|
.menu-collapsed {
|
|
52
54
|
width: $menu-collapsed-width;
|
|
53
55
|
|
|
@@ -129,8 +131,14 @@
|
|
|
129
131
|
& > .menu-body {
|
|
130
132
|
padding-left: 15px;
|
|
131
133
|
}
|
|
134
|
+
|
|
135
|
+
.menu-icon + .menu-body {
|
|
136
|
+
padding-left: 0;
|
|
137
|
+
}
|
|
132
138
|
}
|
|
133
139
|
|
|
140
|
+
|
|
141
|
+
|
|
134
142
|
.menu-header {
|
|
135
143
|
background-color: $menu-header-bg;
|
|
136
144
|
color: $menu-header-color;
|
|
@@ -149,6 +157,10 @@
|
|
|
149
157
|
& > .menu-body {
|
|
150
158
|
padding-left: 15px;
|
|
151
159
|
}
|
|
160
|
+
|
|
161
|
+
.menu-icon + .menu-body {
|
|
162
|
+
padding-left: 0;
|
|
163
|
+
}
|
|
152
164
|
}
|
|
153
165
|
|
|
154
166
|
.menu-header-icon {
|
|
@@ -263,7 +275,7 @@
|
|
|
263
275
|
}
|
|
264
276
|
|
|
265
277
|
.menu-submenu {
|
|
266
|
-
width: $menu-
|
|
278
|
+
width: $menu-submenu-width;
|
|
267
279
|
margin-left: $menu-collapsed-width;
|
|
268
280
|
color: $menu-submenu-color;
|
|
269
281
|
background-color: $menu-submenu-bg;
|
|
@@ -300,3 +312,13 @@
|
|
|
300
312
|
}
|
|
301
313
|
}
|
|
302
314
|
}
|
|
315
|
+
|
|
316
|
+
.menu-submenu-collapsed {
|
|
317
|
+
transform: translate3d(-$menu-width, 0, 0);
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
@media (min-width: $grid-float-breakpoint) {
|
|
321
|
+
.menu-app {
|
|
322
|
+
margin-left: 0;
|
|
323
|
+
}
|
|
324
|
+
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
.sheet,
|
|
2
|
+
.annotated-section-content {
|
|
3
|
+
& > .nav-tabs {
|
|
4
|
+
background-color: $sheet-navbar-tabs-bg;
|
|
5
|
+
margin: - $sheet-padding;
|
|
6
|
+
margin-bottom: $sheet-padding;
|
|
7
|
+
|
|
8
|
+
> li > a {
|
|
9
|
+
margin-right: 0;
|
|
10
|
+
border-top: 0;
|
|
11
|
+
border-radius: 0;
|
|
12
|
+
color: $gray;
|
|
13
|
+
|
|
14
|
+
&:hover {
|
|
15
|
+
color: $gray;
|
|
16
|
+
background-color: $sheet-navbar-tabs-bg-hover;
|
|
17
|
+
border-left: 1px solid transparent;
|
|
18
|
+
border-right: 1px solid transparent;
|
|
19
|
+
border-radius: 0;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
> li.active a {
|
|
24
|
+
color: $brand-primary;
|
|
25
|
+
background-color: $sheet-bg;
|
|
26
|
+
|
|
27
|
+
&:hover {
|
|
28
|
+
color: $brand-primary;
|
|
29
|
+
background-color: $sheet-navbar-tabs-bg-hover;
|
|
30
|
+
border-top: 0;
|
|
31
|
+
border-left: 1px solid $gray-lightest;
|
|
32
|
+
border-right: 1px solid $gray-lightest;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
> li:first-of-type a,
|
|
37
|
+
> li:first-of-type a:hover {
|
|
38
|
+
border-left: 1px solid transparent;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// Dropdown
|
|
42
|
+
&.nav > li > a:focus,
|
|
43
|
+
.open > a,
|
|
44
|
+
.open > a:hover,
|
|
45
|
+
.open > a:focus {
|
|
46
|
+
background-color: $sheet-navbar-tabs-bg-hover;
|
|
47
|
+
border-color: transparent;
|
|
48
|
+
border-bottom-color: $gray-lightest;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
> .dropdown >.dropdown-menu {
|
|
52
|
+
border-top: 0;
|
|
53
|
+
background-color: $sheet-navbar-tabs-bg-hover;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
> .pull-right > .dropdown-menu {
|
|
57
|
+
right: -1px;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
@@ -9,64 +9,6 @@
|
|
|
9
9
|
border-radius: $sheet-border-radius;
|
|
10
10
|
margin: $sheet-margin;
|
|
11
11
|
padding: $sheet-padding;
|
|
12
|
-
|
|
13
|
-
& > .nav-tabs {
|
|
14
|
-
background-color: $sheet-navbar-tabs-bg;
|
|
15
|
-
margin: - $sheet-padding;
|
|
16
|
-
margin-bottom: $sheet-padding;
|
|
17
|
-
|
|
18
|
-
> li > a {
|
|
19
|
-
margin-right: 0;
|
|
20
|
-
border-top: 0;
|
|
21
|
-
border-radius: 0;
|
|
22
|
-
color: $gray;
|
|
23
|
-
|
|
24
|
-
&:hover {
|
|
25
|
-
color: $gray;
|
|
26
|
-
background-color: $sheet-navbar-tabs-bg-hover;
|
|
27
|
-
border-left: 1px solid transparent;
|
|
28
|
-
border-right: 1px solid transparent;
|
|
29
|
-
border-radius: 0;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
> li.active a {
|
|
34
|
-
color: $brand-primary;
|
|
35
|
-
background-color: $sheet-bg;
|
|
36
|
-
|
|
37
|
-
&:hover {
|
|
38
|
-
color: $brand-primary;
|
|
39
|
-
background-color: $sheet-navbar-tabs-bg-hover;
|
|
40
|
-
border-top: 0;
|
|
41
|
-
border-left: 1px solid $gray-lightest;
|
|
42
|
-
border-right: 1px solid $gray-lightest;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
> li:first-of-type a,
|
|
47
|
-
> li:first-of-type a:hover {
|
|
48
|
-
border-left: 1px solid transparent;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
// Dropdown
|
|
52
|
-
&.nav > li > a:focus,
|
|
53
|
-
.open > a,
|
|
54
|
-
.open > a:hover,
|
|
55
|
-
.open > a:focus {
|
|
56
|
-
background-color: $sheet-navbar-tabs-bg-hover;
|
|
57
|
-
border-color: transparent;
|
|
58
|
-
border-bottom-color: $gray-lightest;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
> .dropdown >.dropdown-menu {
|
|
62
|
-
border-top: 0;
|
|
63
|
-
background-color: $sheet-navbar-tabs-bg-hover;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
> .pull-right > .dropdown-menu {
|
|
67
|
-
right: -1px;
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
12
|
}
|
|
71
13
|
|
|
72
14
|
.sheet-header {
|
|
@@ -279,6 +279,7 @@ $navbar-height: 70px !default;
|
|
|
279
279
|
$navbar-default-bg: #fff !default;
|
|
280
280
|
$navbar-default-color: $gray-dark !default;
|
|
281
281
|
$navbar-default-border: $gray-lighter !default;
|
|
282
|
+
$navbar-default-toggle-border-color: transparent !default;
|
|
282
283
|
$navbar-default-toggle-icon-bar-bg: $gray-light !default;
|
|
283
284
|
|
|
284
285
|
$navbar-breadcrumb-brand-logo-height: 30px !default;
|
data/docs/Gemfile.lock
CHANGED
data/docs/Rakefile
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<div class="bs-callout bs-callout-danger">
|
|
7
7
|
<h4>Plugin dependency</h4>
|
|
8
8
|
<p>
|
|
9
|
-
This component requires <code>menu</code> and <code>
|
|
9
|
+
This component requires BookingSync <code>menu</code> and Bootstrap <code>collapse</code> JS plugins.
|
|
10
10
|
</p>
|
|
11
11
|
</div>
|
|
12
12
|
|
|
@@ -98,8 +98,8 @@
|
|
|
98
98
|
</a>
|
|
99
99
|
</li>
|
|
100
100
|
<li role="presentation">
|
|
101
|
-
<a href="#" class="menu-link" data-toggle="
|
|
102
|
-
data-
|
|
101
|
+
<a href="#" class="menu-link" data-toggle="menu-expand"
|
|
102
|
+
data-menu="#sidebar" data-submenu="#sidebar-settings">
|
|
103
103
|
<div class="menu-icon menu-link-icon">
|
|
104
104
|
<i class="icon-settings"></i>
|
|
105
105
|
</div>
|
|
@@ -148,7 +148,7 @@
|
|
|
148
148
|
</nav>
|
|
149
149
|
</footer>
|
|
150
150
|
</nav>
|
|
151
|
-
<nav class="menu menu-fixed flex-col menu-submenu">
|
|
151
|
+
<nav id="sidebar-settings" class="menu menu-fixed flex-col menu-submenu menu-submenu-collapsed">
|
|
152
152
|
<header class="menu-header">
|
|
153
153
|
<div class="menu-body menu-header-body">
|
|
154
154
|
<h4 class="menu-header-heading">Settings</h4>
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
<ul class="list-group list-unstyled">
|
|
2
|
-
<li><%= link_to("Core
|
|
2
|
+
<li><%= link_to("Core admin", "#core-admin",
|
|
3
3
|
class: "list-group-item") %></li>
|
|
4
|
-
<li><%= link_to("App
|
|
4
|
+
<li><%= link_to("App admin", "#app-admin",
|
|
5
|
+
class: "list-group-item") %></li>
|
|
6
|
+
<li><%= link_to("App admin with menu", "#app-admin",
|
|
5
7
|
class: "list-group-item") %></li>
|
|
6
8
|
<li><%= link_to("Section", "#section",
|
|
7
9
|
class: "list-group-item") %></li>
|
|
@@ -9,10 +11,12 @@
|
|
|
9
11
|
class: "list-group-item") %></li>
|
|
10
12
|
<li><%= link_to("Two columns", "#two-columns",
|
|
11
13
|
class: "list-group-item") %></li>
|
|
12
|
-
<li><%= link_to("Annotated section", "#annotated-section",
|
|
13
|
-
class: "list-group-item") %></li>
|
|
14
14
|
<li><%= link_to("Tabulated content", "#tabulated-content",
|
|
15
15
|
class: "list-group-item") %></li>
|
|
16
|
+
<li><%= link_to("Annotated section", "#annotated-section",
|
|
17
|
+
class: "list-group-item") %></li>
|
|
18
|
+
<li><%= link_to("Annotated section with tabulated content",
|
|
19
|
+
"#annotated-section-with-tabulated-content", class: "list-group-item") %></li>
|
|
16
20
|
<li><%= link_to("Fullscreen modal", "#fullscreen-modal",
|
|
17
21
|
class: "list-group-item") %></li>
|
|
18
22
|
</ul>
|