Skip to content

Commit 8c122f4

Browse files
AdamJAdamJ
authored
Add alert for carousel autoplay (#269)
Add an alert on the Portfolio and Color Picker pages informing users that the carousel will begin to autoplay once they interact with it. Autoplay is paused when the mouse is hovered over it or the user leaves the browser window.
1 parent 5fc6a1f commit 8c122f4

File tree

7 files changed

+80
-40
lines changed

7 files changed

+80
-40
lines changed

‎docs/designs/presentations/colorPicker/index.html

+11-1
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,17 @@ <h1 class="display-1 fw-bold text-break">Color Picker presentation</h1>
9090
</p></div>
9191

9292
<content>
93-
<div class="container-xxl mb-2 py-2 px-md-5">
93+
<div class="container-xxl">
94+
<div class="row justify-content-center">
95+
<div class="col-8">
96+
<div class="alert alert-dismissible fade show" role="alert" style="background-color: rgba(0, 173, 239, .2); border-left: .25rem solid #00adef;">
97+
<strong>Hello there!</strong> The carousel will automatically play after the first user interaction. Hovering over a slide will pause the auto-play of the carousel.
98+
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
99+
</div>
100+
</div>
101+
</div>
102+
</div>
103+
<div class="container-xxl mb-2 py-2 px-md-5">
94104
<div class="row px-3">
95105
<div class="col-12">
96106
<div id="carouselExample" class="carousel slide" data-bs-ride="true">

‎docs/designs/presentations/portfolio/index.html

+11-1
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,17 @@ <h1 class="display-1 fw-bold text-break">Portfolio presentation</h1>
9090
</p></div>
9191

9292
<content>
93-
<div class="container-xxl mb-2 py-2 px-md-5">
93+
<div class="container-xxl">
94+
<div class="row justify-content-center">
95+
<div class="col-8">
96+
<div class="alert alert-dismissible fade show" role="alert" style="background-color: rgba(0, 173, 239, .2); border-left: .25rem solid #00adef;">
97+
<strong>Hello there!</strong> The carousel will automatically play after the first user interaction. Hovering over a slide will pause the auto-play of the carousel.
98+
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
99+
</div>
100+
</div>
101+
</div>
102+
</div>
103+
<div class="container-xxl mb-2 py-2 px-md-5">
94104
<div class="row px-3">
95105
<div class="col-12">
96106
<div id="carouselExample" class="carousel slide" data-bs-ride="true">

‎docs/feed.json

+16-16
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,28 @@
1414
"id": "https://www.adamjolicoeur.com/resume/",
1515
"url": "https://www.adamjolicoeur.com/resume/",
1616
"title": "resume",
17-
"date_published": "2024-03-22T13:12:18Z"
17+
"date_published": "2024-05-07T18:45:07Z"
18+
}
19+
,
20+
{
21+
"id": "https://www.adamjolicoeur.com/development/",
22+
"url": "https://www.adamjolicoeur.com/development/",
23+
"title": "development",
24+
"date_published": "2024-05-07T18:45:07Z"
25+
}
26+
,
27+
{
28+
"id": "https://www.adamjolicoeur.com/designs/alm/",
29+
"url": "https://www.adamjolicoeur.com/designs/alm/",
30+
"title": "Application Lifecycle Management",
31+
"date_published": "2024-05-07T18:45:07Z"
1832
}
1933
,
2034
{
2135
"id": "https://www.adamjolicoeur.com/contact/",
2236
"url": "https://www.adamjolicoeur.com/contact/",
2337
"title": "contact",
24-
"date_published": "2024-01-17T15:59:50Z"
38+
"date_published": "2024-03-27T14:55:32Z"
2539
}
2640
,
2741
{
@@ -66,13 +80,6 @@
6680
"date_published": "2024-01-07T19:11:34Z"
6781
}
6882
,
69-
{
70-
"id": "https://www.adamjolicoeur.com/development/",
71-
"url": "https://www.adamjolicoeur.com/development/",
72-
"title": "development",
73-
"date_published": "2024-01-07T19:11:34Z"
74-
}
75-
,
7683
{
7784
"id": "https://www.adamjolicoeur.com/designs/timetrak/",
7885
"url": "https://www.adamjolicoeur.com/designs/timetrak/",
@@ -101,13 +108,6 @@
101108
"date_published": "2024-01-07T19:11:34Z"
102109
}
103110
,
104-
{
105-
"id": "https://www.adamjolicoeur.com/designs/alm/",
106-
"url": "https://www.adamjolicoeur.com/designs/alm/",
107-
"title": "Application Lifecycle Management",
108-
"date_published": "2024-01-07T19:11:34Z"
109-
}
110-
,
111111
{
112112
"id": "https://www.adamjolicoeur.com/designs/",
113113
"url": "https://www.adamjolicoeur.com/designs/",

‎docs/sitemap.xml

+12-12
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,6 @@
2626
<lastmod>2024-01-07T19:11:34.528Z</lastmod>
2727
</url>
2828

29-
<url>
30-
<loc>https://www.adamjolicoeur.com/designs/alm/</loc>
31-
<lastmod>2024-01-07T19:11:34.528Z</lastmod>
32-
</url>
33-
3429
<url>
3530
<loc>https://www.adamjolicoeur.com/designs/customer-engagement/</loc>
3631
<lastmod>2024-01-07T19:11:34.528Z</lastmod>
@@ -51,11 +46,6 @@
5146
<lastmod>2024-01-07T19:11:34.528Z</lastmod>
5247
</url>
5348

54-
<url>
55-
<loc>https://www.adamjolicoeur.com/development/</loc>
56-
<lastmod>2024-01-07T19:11:34.528Z</lastmod>
57-
</url>
58-
5949
<url>
6050
<loc>https://www.adamjolicoeur.com/designs/presentations/colorPicker/</loc>
6151
<lastmod>2024-01-07T19:11:34.528Z</lastmod>
@@ -88,12 +78,22 @@
8878

8979
<url>
9080
<loc>https://www.adamjolicoeur.com/contact/</loc>
91-
<lastmod>2024-01-17T15:59:50.348Z</lastmod>
81+
<lastmod>2024-03-27T14:55:32.486Z</lastmod>
82+
</url>
83+
84+
<url>
85+
<loc>https://www.adamjolicoeur.com/designs/alm/</loc>
86+
<lastmod>2024-05-07T18:45:07.651Z</lastmod>
87+
</url>
88+
89+
<url>
90+
<loc>https://www.adamjolicoeur.com/development/</loc>
91+
<lastmod>2024-05-07T18:45:07.653Z</lastmod>
9292
</url>
9393

9494
<url>
9595
<loc>https://www.adamjolicoeur.com/resume/</loc>
96-
<lastmod>2024-03-22T13:12:18.550Z</lastmod>
96+
<lastmod>2024-05-07T18:45:07.654Z</lastmod>
9797
</url>
9898

9999
</urlset>

‎social/pages.json

+10-10
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,6 @@
2424
"imgName":"designs"
2525
},
2626

27-
{
28-
"title":"Application Lifecycle Management",
29-
"imgName":"application-lifecycle-management"
30-
},
31-
3227
{
3328
"title":"Customer Engagement App",
3429
"imgName":"customer-engagement-app"
@@ -49,11 +44,6 @@
4944
"imgName":"timetrak-by-switchback"
5045
},
5146

52-
{
53-
"title":"development",
54-
"imgName":"development"
55-
},
56-
5747
{
5848
"title":"Color Picker presentation",
5949
"imgName":"color-picker-presentation"
@@ -89,6 +79,16 @@
8979
"imgName":"contact"
9080
},
9181

82+
{
83+
"title":"Application Lifecycle Management",
84+
"imgName":"application-lifecycle-management"
85+
},
86+
87+
{
88+
"title":"development",
89+
"imgName":"development"
90+
},
91+
9292
{
9393
"title":"resume",
9494
"imgName":"resume"

‎src/pages/presentations/colorPicker/index.md

+10
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,16 @@ eleventyNavigation:
88
order: 2
99
---
1010

11+
<div class="container-xxl">
12+
<div class="row justify-content-center">
13+
<div class="col-8">
14+
<div class="alert alert-dismissible fade show" role="alert" style="background-color: rgba(0, 173, 239, .2); border-left: .25rem solid #00adef;">
15+
<strong>Hello there!</strong> The carousel will automatically play after the first user interaction. Hovering over a slide will pause the auto-play of the carousel.
16+
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
17+
</div>
18+
</div>
19+
</div>
20+
</div>
1121
<div class="container-xxl mb-2 py-2 px-md-5">
1222
<div class="row px-3">
1323
<div class="col-12">

‎src/pages/presentations/portfolio/index.md

+10
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,16 @@ eleventyNavigation:
88
order: 1
99
---
1010

11+
<div class="container-xxl">
12+
<div class="row justify-content-center">
13+
<div class="col-8">
14+
<div class="alert alert-dismissible fade show" role="alert" style="background-color: rgba(0, 173, 239, .2); border-left: .25rem solid #00adef;">
15+
<strong>Hello there!</strong> The carousel will automatically play after the first user interaction. Hovering over a slide will pause the auto-play of the carousel.
16+
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
17+
</div>
18+
</div>
19+
</div>
20+
</div>
1121
<div class="container-xxl mb-2 py-2 px-md-5">
1222
<div class="row px-3">
1323
<div class="col-12">

0 commit comments

Comments
 (0)