Skip to content

Commit

Permalink
fix: styles for share video functionality of the video xblock
Browse files Browse the repository at this point in the history
  • Loading branch information
@ihor-romaniuk
ihor-romaniuk committed Dec 4, 2024
1 parent 1adf83c commit 7bc74fb
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 32 deletions.
47 changes: 15 additions & 32 deletions lms/templates/video.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,31 +66,23 @@ <h4 class="hd hd-5">${_('Video')}</h4>
% endif
% if sharing_sites_info:
<div class="wrapper-social-share">
<button
style="background-image: none; background-color: rgb(0, 38, 43); border-radius: 0px; color: white"
class="social-toggle-btn btn"
>
<span class="icon fa fa-share-alt mr-2" style="text-shadow: none"></span>
<button class="social-toggle-btn btn">
<span class="icon fa fa-share-alt"></span>
${_('Share this video')}
</button>
<div
hidden
class="container-social-share color-black p-2"
style="width: 300px; border-radius: 6px; background-color: white; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15),0 .25rem .625rem rgba(0,0,0,.15)"
>
<div hidden class="container-social-share">
${_('Share this video')}
<div class="btn-link close-btn float-right">
<span style="color: black" class="icon fa fa-close" />
<div class="btn-link close-btn">
<span class="icon fa fa-close"></span>
</div>

% for sharing_site_info in sharing_sites_info:
<a
class="btn-link social-share-link"
data-source="${sharing_site_info['name']}"
href="${sharing_site_info['sharing_url']}"
target="_blank"
rel="noopener noreferrer"
style="font-size: 1.5rem"
class="social-share-link"
data-source="${sharing_site_info['name']}"
href="${sharing_site_info['sharing_url']}"
target="_blank"
rel="noopener noreferrer"
>
% if (sharing_site_info['name'] == 'twitter'):
<!--
Expand All @@ -110,23 +102,14 @@ <h4 class="hd hd-5">${_('Video')}</h4>
<span class="sr">${_("Share on {site}").format(site=sharing_site_info['name'])}</span>
</a>
% endfor
<div style="background-color: #F2F0EF" class="public-video-url-container p-2">
<a href=${public_video_url} class="d-inline-block align-middle" style="width: 200px">
<div
class="text-nowrap"
style="color: black; overflow: hidden; text-overflow: ellipsis; vertical-align: middle"
>
${public_video_url}
</div>
<div class="public-video-url-container">
<a href=${public_video_url} class="public-video-url-link">
${public_video_url}
</a>
<div
class="public-video-copy-btn btn-link d-inline-block float-right"
data-url=${public_video_url}
>
<span class="icon fa fa-link pr-1"></span>
<div class="public-video-copy-btn" data-url=${public_video_url}>
<span class="icon fa fa-link"></span>
<span>${_('Copy')}</span>
</div>
<span>
</div>
</div>
</div>
Expand Down
86 changes: 86 additions & 0 deletions xmodule/static/css-builtin-blocks/VideoBlockDisplay.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1161,3 +1161,89 @@
bottom: 0;
background-color: transparent;
}

.xmodule_display.xmodule_VideoBlock .wrapper-social-share .social-toggle-btn {
background: var(--primary);
font-size: 13px;
font-weight: 700;
padding: calc(var(--baseline) * 0.35) calc(var(--baseline) * 0.9);
color: var(--white);
box-shadow: none;
text-shadow: none;
border-radius: 3px;
border: none;
}

.xmodule_display.xmodule_VideoBlock .wrapper-social-share .social-toggle-btn:hover,
.xmodule_display.xmodule_VideoBlock .wrapper-social-share .social-toggle-btn:focus {
background: var(--btn-brand-focus-background);
}

.xmodule_display.xmodule_VideoBlock .wrapper-social-share .social-toggle-btn .fa {
margin-right: calc(var(--baseline) * 0.4);
}

.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share {
padding: calc(var(--baseline) * 0.4);
width: 300px;
border-radius: 6px;
background-color: var(--white);
box-shadow: rgba(0, 0, 0, 0.15) 0 0.5rem 1rem, rgba(0, 0, 0, 0.15) 0 0.25rem 0.625rem;
}

.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .close-btn {
float: right;
cursor: pointer;
vertical-align: top;
display: inline-flex;
color: var(--black);
text-decoration: none !important;
}

.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .social-share-link {
margin-right: calc(var(--baseline) * 0.2);
font-size: 24px;
height: 24px;
vertical-align: middle;
text-decoration: none;
display: inline-flex;
}

.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .social-share-link > span > svg {
width: auto;
height: 24px;
vertical-align: top;
display: inline-flex;
}

.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .public-video-url-container {
padding: calc(var(--baseline) * 0.4);
display: flex;
align-items: center;
justify-content: space-between;
background-color: #f2f0ef;
}

.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .public-video-url-link {
color: var(--black);
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}

.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .public-video-url-link:hover {
text-decoration: underline;
}

.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .public-video-copy-btn {
margin-left: calc(var(--baseline) * 0.7);
flex-shrink: 0;
color: var(--primary);
cursor: pointer;
}

.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .public-video-copy-btn:hover {
text-decoration: none;
color: var(--link-hover-color);
}

0 comments on commit 7bc74fb

Please sign in to comment.