Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
B
bootstrap_cloud-3355557
Manage
Activity
Members
Labels
Plan
Custom issue tracker
Code
Merge requests
0
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Locked files
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Model registry
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Code review analytics
Insights
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Terms and privacy
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
Issue forks
bootstrap_cloud-3355557
Commits
6fe86ed7
Commit
6fe86ed7
authored
3 years ago
by
baldwinlouie
Committed by
Yas Naoi
3 years ago
Browse files
Options
Downloads
Patches
Plain Diff
Issue
#3213300
by baldwinlouie, yas: Add support for modal video pop-up
parent
03dfb11f
No related branches found
Branches containing commit
Tags
8.x-1.6
Tags containing commit
No related merge requests found
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
bootstrap_cloud.libraries.yml
+1
-0
1 addition, 0 deletions
bootstrap_cloud.libraries.yml
css/modal.css
+55
-0
55 additions, 0 deletions
css/modal.css
js/bootstrap_for_cloud.js
+20
-0
20 additions, 0 deletions
js/bootstrap_for_cloud.js
templates/html.html.twig
+44
-24
44 additions, 24 deletions
templates/html.html.twig
with
120 additions
and
24 deletions
bootstrap_cloud.libraries.yml
+
1
−
0
View file @
6fe86ed7
...
...
@@ -41,5 +41,6 @@ framework:
css/views.css
:
{}
css/media.css
:
{}
css/fonts.css
:
{}
css/modal.css
:
{}
js
:
js/menu.js
:
{}
This diff is collapsed.
Click to expand it.
css/modal.css
0 → 100644
+
55
−
0
View file @
6fe86ed7
.modal
{
text-align
:
center
;
padding
:
0
!important
;
}
.modal-content
{
box-shadow
:
none
;
border
:
none
;
border-radius
:
0
;
}
.modal
:before
{
content
:
''
;
display
:
inline-block
;
height
:
100%
;
vertical-align
:
middle
;
margin-right
:
-4px
;
/* Adjusts for spacing */
}
.modal-dialog
{
display
:
inline-block
;
text-align
:
left
;
vertical-align
:
middle
;
}
.modal-dialog
{
max-width
:
800px
;
margin
:
30px
auto
;
}
.modal-body
{
position
:
relative
;
padding
:
15px
;
}
.close
{
position
:
absolute
;
right
:
-30px
;
top
:
0
;
z-index
:
999
;
font-size
:
2rem
;
font-weight
:
normal
;
color
:
#fff
;
opacity
:
1
;
}
.close
:hover
,
.close
:focus
{
color
:
#fff
;
opacity
:
1
;
}
button
.video
{
margin-bottom
:
10px
;
}
This diff is collapsed.
Click to expand it.
js/bootstrap_for_cloud.js
+
20
−
0
View file @
6fe86ed7
...
...
@@ -68,4 +68,24 @@
}
}
// Initialize modal behavior.
Drupal
.
behaviors
.
videoModal
=
{
attach
:
function
()
{
let
video_src
;
$
(
"
.video
"
).
click
(
function
()
{
video_src
=
$
(
this
).
attr
(
"
data-src
"
);
});
// Play the video.
$
(
"
#modal
"
).
on
(
"
shown.bs.modal
"
,
function
(
e
)
{
$
(
"
#video
"
).
attr
(
"
src
"
,
video_src
);
});
// Unset the video.
$
(
"
#modal
"
).
on
(
"
hide.bs.modal
"
,
function
(
e
)
{
$
(
"
#video
"
).
attr
(
"
src
"
,
''
);
});
}
}
})(
jQuery
);
This diff is collapsed.
Click to expand it.
templates/html.html.twig
+
44
−
24
View file @
6fe86ed7
...
...
@@ -44,32 +44,52 @@
* @see template_process()
*/
#}
{%
set
body_classes
=
[
logged_in
?
'user-logged-in'
,
not
root_path
?
'path-frontpage'
:
'path-'
~
root_path
|
clean_class
,
node_type
?
'page-node-type-'
~
node_type
|
clean_class
,
db_offline
?
'db-offline'
,
theme.settings.navbar_position
?
'navbar-is-'
~
theme.settings.navbar_position
,
theme.has_glyphicons
?
'has-glyphicons'
,
theme.settings.font_size
?
font_size_html
,
]
%}
{%
set
body_classes
=
[
logged_in
?
'user-logged-in'
,
not
root_path
?
'path-frontpage'
:
'path-'
~
root_path
|
clean_class
,
node_type
?
'page-node-type-'
~
node_type
|
clean_class
,
db_offline
?
'db-offline'
,
theme.settings.navbar_position
?
'navbar-is-'
~
theme.settings.navbar_position
,
theme.has_glyphicons
?
'has-glyphicons'
,
theme.settings.font_size
?
font_size_html
,
]
%}
<!DOCTYPE html>
<html
{{
html_attributes
}}
>
<head>
<head-placeholder
token=
"
{{
placeholder_token
|
raw
}}
"
>
<head>
<head-placeholder
token=
"
{{
placeholder_token
|
raw
}}
"
>
<title>
{{
head_title
|
safe_join
(
' | '
)
}}
</title>
<css-placeholder
token=
"
{{
placeholder_token
|
raw
}}
"
>
<js-placeholder
token=
"
{{
placeholder_token
|
raw
}}
"
>
</head>
<body
{{
attributes.addClass
(
body_classes
)
}}
>
<a
href=
"#main-content"
class=
"visually-hidden focusable skip-link"
>
{{
'Skip to main content'
|
t
}}
</a>
{{
page_top
}}
{{
page
}}
{{
page_bottom
}}
<js-bottom-placeholder
token=
"
{{
placeholder_token
|
raw
}}
"
>
</body>
<js-placeholder
token=
"
{{
placeholder_token
|
raw
}}
"
>
</head>
<body
{{
attributes.addClass
(
body_classes
)
}}
>
<div
class=
"container"
>
<div
class=
"modal fade"
id=
"modal"
tabindex=
"-1"
role=
"dialog"
aria-labelledby=
"modalPopup"
aria-hidden=
"true"
>
<div
class=
"modal-dialog"
role=
"document"
>
<div
class=
"modal-content"
>
<div
class=
"modal-body"
>
<button
type=
"button"
class=
"close"
data-dismiss=
"modal"
aria-label=
"Close"
>
<span
aria-hidden=
"true"
>
×
</span>
</button>
<!-- 16:9 aspect ratio -->
<div
class=
"embed-responsive embed-responsive-16by9"
>
<iframe
class=
"embed-responsive-item"
src=
""
id=
"video"
allow=
"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<a
href=
"#main-content"
class=
"visually-hidden focusable skip-link"
>
{{
'Skip to main content'
|
t
}}
</a>
{{
page_top
}}
{{
page
}}
{{
page_bottom
}}
<js-bottom-placeholder
token=
"
{{
placeholder_token
|
raw
}}
"
>
</body>
</html>
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment