Skip to content

Commit 2389c19

Browse files
ganatanganatan
committed
improve bootstrap example module on angular & react apps
1 parent 41b2dce commit 2389c19

File tree

21 files changed

+1387
-162
lines changed

21 files changed

+1387
-162
lines changed

‎angular/src/app/modules/application/example-bootstrap/00-main/items.ts‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,14 @@ export const ITEMS: any[] =
1111
{ id: 9, name: 'Collapse', link: 'collapse', icon: 'fas fa-balance-scale-right' },
1212
{ id: 10, name: 'Dropdowns', link: 'dropdowns', icon: 'fas fa-bahai' },
1313
{ id: 11, name: 'Forms', link: 'forms', icon: 'fas fa-basketball-ball' },
14-
{ id: 12, name: 'Images', link: 'images', icon: 'fab fa-battle-net' },
14+
{ id: 12, name: 'List-group', link: 'list-group', icon: 'fab fa-battle-net' },
1515
{ id: 13, name: 'Modal', link: 'modal', icon: 'fab fa-canadian-maple-leaf' },
1616
{ id: 14, name: 'Pagination', link: 'pagination', icon: 'far fa-address-card' },
17-
{ id: 15, name: 'Radio', link: 'radio', icon: 'fas fa-cart-plus' },
18-
{ id: 16, name: 'Select', link: 'select', icon: 'fab fa-centos' },
19-
{ id: 17, name: 'Tables', link: 'tables', icon: 'fas fa-chart-line' },
20-
{ id: 18, name: 'Toasts', link: 'toasts', icon: 'fas fa-cogs' },
21-
{ id: 19, name: 'Tooltips', link: 'tooltips', icon: 'fab fa-edge' },
22-
{ id: 20, name: 'Popovers', link: 'popovers', icon: 'fab fa-jedi-order' },
23-
{ id: 21, name: 'Progress', link: 'progress', icon: 'fab fa-galactic-republic' },
24-
{ id: 22, name: 'Spinners', link: 'spinners', icon: 'fab fa-empire' },
25-
{ id: 23, name: 'Typography', link: 'typography', icon: 'fas fa-dove' },
17+
{ id: 15, name: 'Popovers', link: 'popovers', icon: 'fab fa-jedi-order' },
18+
{ id: 16, name: 'Progress', link: 'progress', icon: 'fab fa-galactic-republic' },
19+
{ id: 17, name: 'Spinners', link: 'spinners', icon: 'fab fa-empire' },
20+
{ id: 18, name: 'Tables', link: 'tables', icon: 'fas fa-chart-line' },
21+
{ id: 19, name: 'Toasts', link: 'toasts', icon: 'fas fa-cogs' },
22+
{ id: 20, name: 'Tooltips', link: 'tooltips', icon: 'fab fa-edge' },
23+
{ id: 21, name: 'Typography', link: 'typography', icon: 'fas fa-dove' },
2624
];

‎angular/src/app/modules/application/example-bootstrap/collapses/items.component.html‎

Lines changed: 10 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22
<div class="card-body">
33
<h1 class="card-title text-center text-primary">Close collapse with Javascript</h1>
44
<p>
5-
<button class="btn btn-primary" type="button" data-bs-toggle="collapse"
6-
data-bs-target="#collapseWidthJavascript" aria-expanded="false"
7-
aria-controls="collapseWidthJavascript">
5+
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthJavascript"
6+
aria-expanded="false" aria-controls="collapseWidthJavascript">
87
Toggle width collapse
98
</button>
109
</p>
@@ -23,6 +22,7 @@ <h1 class="card-title text-center text-primary">Close collapse with Javascript</
2322
</p>
2423
</div>
2524
</div>
25+
2626
<div class="card mb-2">
2727
<div class="card-body">
2828
<h1 class="card-title text-center text-primary">Collapse with ahref</h1>
@@ -31,8 +31,8 @@ <h1 class="card-title text-center text-primary">Collapse with ahref</h1>
3131
aria-expanded="false" aria-controls="collapseExample">
3232
Link with href
3333
</a>
34-
<button class="btn btn-primary" type="button" data-bs-toggle="collapse"
35-
data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
34+
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
35+
aria-expanded="false" aria-controls="collapseExample">
3636
Button with data-bs-target
3737
</button>
3838
</p>
@@ -51,8 +51,8 @@ <h1 class="card-title text-center text-primary">Multiple Targets</h1>
5151
<a class="btn btn-primary me-2" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button"
5252
aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
5353
<button class="btn btn-primary me-2" type="button" data-bs-toggle="collapse"
54-
data-bs-target="#multiCollapseExample2" aria-expanded="false"
55-
aria-controls="multiCollapseExample2">Toggle second element</button>
54+
data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle
55+
second element</button>
5656
<button class="btn btn-primary me-2" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse"
5757
aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both
5858
elements</button>
@@ -81,8 +81,8 @@ <h1 class="card-title text-center text-primary">Multiple Targets</h1>
8181
<div class="card-body">
8282
<h1 class="card-title text-center text-primary">Horizontal</h1>
8383
<p>
84-
<button class="btn btn-primary" type="button" data-bs-toggle="collapse"
85-
data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
84+
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample"
85+
aria-expanded="false" aria-controls="collapseWidthExample">
8686
Toggle width collapse
8787
</button>
8888
</p>
@@ -95,82 +95,4 @@ <h1 class="card-title text-center text-primary">Horizontal</h1>
9595
</div>
9696
</div>
9797
</div>
98-
</div>
99-
100-
<!--<div class="row">
101-
<div class="col p-4">
102-
<div class="card mb-2">
103-
<div class="card-body">
104-
<h1 class="card-title text-center text-primary">Collapse with ahref</h1>
105-
<p>
106-
<a class="btn btn-primary ms-1" data-bs-toggle="collapse" href="#collapseExample" role="button"
107-
aria-expanded="false" aria-controls="collapseExample">
108-
Link with href
109-
</a>
110-
<button class="btn btn-primary ms-1" type="button" data-bs-toggle="collapse"
111-
data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
112-
Button with data-bs-target
113-
</button>
114-
</p>
115-
<div class="collapse" id="collapseExample">
116-
<div class="card card-body">
117-
Some placeholder content for the collapse component. This panel is hidden by default but revealed when
118-
the user activates the relevant trigger.
119-
</div>
120-
</div>
121-
</div>
122-
</div>
123-
<div class="card mb-2">
124-
<div class="card-body">
125-
<h1 class="card-title text-center text-primary">Multiple Targets</h1>
126-
<p>
127-
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button"
128-
aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
129-
<button class="btn btn-primary" type="button" data-bs-toggle="collapse"
130-
data-bs-target="#multiCollapseExample2" aria-expanded="false"
131-
aria-controls="multiCollapseExample2">Toggle second element</button>
132-
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse"
133-
aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both
134-
elements</button>
135-
</p>
136-
<div class="row">
137-
<div class="col">
138-
<div class="collapse multi-collapse" id="multiCollapseExample1">
139-
<div class="card card-body">
140-
Some placeholder content for the first collapse component of this multi-collapse example. This
141-
panel is hidden by default but revealed when the user activates the relevant trigger.
142-
</div>
143-
</div>
144-
</div>
145-
<div class="col">
146-
<div class="collapse multi-collapse" id="multiCollapseExample2">
147-
<div class="card card-body">
148-
Some placeholder content for the second collapse component of this multi-collapse example. This
149-
panel is hidden by default but revealed when the user activates the relevant trigger.
150-
</div>
151-
</div>
152-
</div>
153-
</div>
154-
</div>
155-
</div>
156-
<div class="card mb-2">
157-
<div class="card-body">
158-
<h1 class="card-title text-center text-primary">Horizontal</h1>
159-
<p>
160-
<button class="btn btn-primary" type="button" data-bs-toggle="collapse"
161-
data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
162-
Toggle width collapse
163-
</button>
164-
</p>
165-
<div style="min-height: 120px;">
166-
<div class="collapse collapse-horizontal" id="collapseWidthExample">
167-
<div class="card card-body" style="width: 300px;">
168-
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when
169-
triggered.
170-
</div>
171-
</div>
172-
</div>
173-
</div>
174-
</div>
175-
</div>
176-
</div>-->
98+
</div>

‎angular/src/app/modules/application/example-bootstrap/collapses/items.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,21 @@ export class CollapsesComponent {
1414

1515
closeCollapse() {
1616
const myCollapse = document.getElementById('collapseWidthJavascript')
17-
const bsCollapse = new bootstrap.Collapse(myCollapse, {
17+
new bootstrap.Collapse(myCollapse, {
1818
hide: true,
1919
})
2020
}
2121

2222
showCollapse() {
2323
const myCollapse = document.getElementById('collapseWidthJavascript')
24-
const bsCollapse = new bootstrap.Collapse(myCollapse, {
24+
new bootstrap.Collapse(myCollapse, {
2525
show: true,
2626
})
2727
}
2828

2929
toggleCollapse() {
3030
const myCollapse = document.getElementById('collapseWidthJavascript')
31-
const bsCollapse = new bootstrap.Collapse(myCollapse, {
31+
new bootstrap.Collapse(myCollapse, {
3232
toggle: true,
3333
})
3434
}

‎angular/src/app/modules/application/example-bootstrap/tutorial.component.html‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@
3232
<a routerLink="/bootstrap/dropdowns" class="link-dark rounded"><i
3333
class="fas fa-bahai text-primary mt-1 me-2"></i>Dropdowns</a>
3434
</li>
35+
<li>
36+
<a routerLink="/bootstrap/list-group" class="link-dark rounded"><i
37+
class="fab fa-battle-net text-primary mt-1 me-2"></i>List-group</a>
38+
</li>
3539
<li>
3640
<a routerLink="/bootstrap/modal" class="link-dark rounded"><i
3741
class="fab fa-canadian-maple-leaf text-primary mt-1 me-2"></i>Modal</a>
@@ -63,21 +67,13 @@
6367
<i class="fas fa-atom text-primary mt-1 me-2"></i>Checkbox</a>
6468
</li>
6569
<li>
66-
<a routerLink="/bootstrap/form-control" class="link-dark rounded">
70+
<a routerLink="/bootstrap/forms" class="link-dark rounded">
6771
<i class="fas fa-basketball-ball text-primary mt-1 me-2"></i>Forms</a>
6872
</li>
6973
<li>
7074
<a routerLink="/bootstrap/pagination" class="link-dark rounded">
7175
<i class="far fa-address-card text-primary mt-1 me-2"></i>Pagination</a>
7276
</li>
73-
<li>
74-
<a routerLink="/bootstrap/radio" class="link-dark rounded">
75-
<i class="fas fa-cart-plus text-primary mt-1 me-2"></i>Radio</a>
76-
</li>
77-
<li>
78-
<a routerLink="/bootstrap/select" class="link-dark rounded">
79-
<i class="fab fa-centos text-primary mt-1 me-2"></i>Select</a>
80-
</li>
8177
<li>
8278
<a routerLink="/bootstrap/tables" class="link-dark rounded">
8379
<i class="fas fa-chart-line text-primary mt-1 me-2"></i>Tables</a>
@@ -101,10 +97,6 @@
10197
<a routerLink="/bootstrap/breadcrumb" class="link-dark rounded">
10298
<i class="fab fa-app-store text-primary mt-1 me-2"></i>Breadcrumb</a>
10399
</li>
104-
<li>
105-
<a routerLink="/bootstrap/images" class="link-dark rounded">
106-
<i class="fab fa-battle-net text-primary mt-1 me-2"></i>Images</a>
107-
</li>
108100
<li>
109101
<a routerLink="/bootstrap/popovers" class="link-dark rounded">
110102
<i class="fab fa-jedi-order text-primary mt-1 me-2"></i>Popovers</a>

‎angular/src/assets/params/images/example-bootstrap/movie-screen.jpg‎

28.3 KB
Loading

‎react/src/app/modules/application/example-bootstrap/00-main/main.js‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,16 @@ class Main extends React.Component {
2020
{ id: 9, name: 'Collapse', link: 'collapse', icon: 'fas fa-balance-scale-right' },
2121
{ id: 10, name: 'Dropdowns', link: 'dropdowns', icon: 'fas fa-bahai' },
2222
{ id: 11, name: 'Forms', link: 'forms', icon: 'fas fa-basketball-ball' },
23-
{ id: 12, name: 'Images', link: 'images', icon: 'fab fa-battle-net' },
23+
{ id: 12, name: 'List-group', link: 'list-group', icon: 'fab fa-battle-net' },
2424
{ id: 13, name: 'Modal', link: 'modal', icon: 'fab fa-canadian-maple-leaf' },
2525
{ id: 14, name: 'Pagination', link: 'pagination', icon: 'far fa-address-card' },
26-
{ id: 15, name: 'Radio', link: 'radio', icon: 'fas fa-cart-plus' },
27-
{ id: 16, name: 'Select', link: 'select', icon: 'fab fa-centos' },
28-
{ id: 17, name: 'Tables', link: 'tables', icon: 'fas fa-chart-line' },
29-
{ id: 18, name: 'Toasts', link: 'toasts', icon: 'fas fa-cogs' },
30-
{ id: 19, name: 'Tooltips', link: 'tooltips', icon: 'fab fa-edge' },
31-
{ id: 20, name: 'Popovers', link: 'popovers', icon: 'fab fa-jedi-order' },
32-
{ id: 21, name: 'Progress', link: 'progress', icon: 'fab fa-galactic-republic' },
33-
{ id: 22, name: 'Spinners', link: 'spinners', icon: 'fab fa-empire' },
34-
{ id: 23, name: 'Typography', link: 'typography', icon: 'fas fa-dove' },
26+
{ id: 15, name: 'Popovers', link: 'popovers', icon: 'fab fa-jedi-order' },
27+
{ id: 16, name: 'Progress', link: 'progress', icon: 'fab fa-galactic-republic' },
28+
{ id: 17, name: 'Spinners', link: 'spinners', icon: 'fab fa-empire' },
29+
{ id: 18, name: 'Tables', link: 'tables', icon: 'fas fa-chart-line' },
30+
{ id: 19, name: 'Toasts', link: 'toasts', icon: 'fas fa-cogs' },
31+
{ id: 20, name: 'Tooltips', link: 'tooltips', icon: 'fab fa-edge' },
32+
{ id: 21, name: 'Typography', link: 'typography', icon: 'fas fa-dove' },
3533
];
3634

3735
function Item(props) {

‎react/src/app/modules/application/example-bootstrap/blockquotes/items.js‎

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,49 @@ class Blockquotes extends React.Component {
66

77
render() {
88
return (
9-
<div>
10-
<p>blockquotes works!</p>
9+
10+
11+
<div className="row">
12+
<div className="col p-4">
13+
<div className="card mb-2">
14+
<div className="card-body">
15+
<h1 className="card-title text-center text-primary">Blockquotes</h1>
16+
<blockquote className="blockquote">
17+
<p>A well-known quote, contained in a blockquote element.</p>
18+
</blockquote>
19+
<hr />
20+
<figure>
21+
<blockquote className="blockquote">
22+
<p>A well-known quote, contained in a blockquote element.</p>
23+
</blockquote>
24+
<figcaption className="blockquote-footer">
25+
Someone famous in <cite title="Source Title">Source Title</cite>
26+
</figcaption>
27+
</figure>
28+
<hr />
29+
<figure className="text-center">
30+
<blockquote className="blockquote">
31+
<p>A well-known quote, contained in a blockquote element.</p>
32+
</blockquote>
33+
<figcaption className="blockquote-footer">
34+
Someone famous in <cite title="Source Title">Source Title</cite>
35+
</figcaption>
36+
</figure>
37+
<hr />
38+
<figure className="text-end">
39+
<blockquote className="blockquote">
40+
<p>A well-known quote, contained in a blockquote element.</p>
41+
</blockquote>
42+
<figcaption className="blockquote-footer">
43+
Someone famous in <cite title="Source Title">Source Title</cite>
44+
</figcaption>
45+
</figure>
46+
<hr />
47+
</div>
48+
</div>
49+
</div>
1150
</div>
51+
1252
)
1353
}
1454

‎react/src/app/modules/application/example-bootstrap/breadcrumb/items.js‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,31 @@ class Blockquotes extends React.Component {
66

77
render() {
88
return (
9-
<div>
10-
<p>breadcrumb works!</p>
9+
10+
<div className="card mb-2">
11+
<div className="card-body">
12+
<h1 className="card-title text-center text-primary">Breadcrumb</h1>
13+
<nav aria-label="breadcrumb">
14+
<ol className="breadcrumb">
15+
<li className="breadcrumb-item active" aria-current="page">Home</li>
16+
</ol>
17+
</nav>
18+
<nav aria-label="breadcrumb">
19+
<ol className="breadcrumb">
20+
<li className="breadcrumb-item"><a href="#">Home</a></li>
21+
<li className="breadcrumb-item active" aria-current="page">Library</li>
22+
</ol>
23+
</nav>
24+
<nav aria-label="breadcrumb">
25+
<ol className="breadcrumb">
26+
<li className="breadcrumb-item"><a href="#">Home</a></li>
27+
<li className="breadcrumb-item"><a href="#">Library</a></li>
28+
<li className="breadcrumb-item active" aria-current="page">Data</li>
29+
</ol>
30+
</nav>
31+
</div>
1132
</div>
33+
1234
)
1335
}
1436

0 commit comments

Comments
 (0)