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 committed Jun 3, 2024
1 parent 9bc0f85 commit 9123479
Showing 2 changed files with 94 additions and 30 deletions.
40 changes: 11 additions & 29 deletions lms/templates/video.html
Original file line number Diff line number Diff line change
@@ -66,55 +66,37 @@ <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>

<br />
% for sharing_site_info in sharing_sites_info:
<a
class="btn-link social-share-link"
class="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"
>
<span class="icon fa ${sharing_site_info['fa_icon_name']}" aria-hidden="true"></span>
<span class="sr">${_("Share on {site}").format(site=sharing_site_info['name'])}</span>
</a>
% endfor
<br />
<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>
84 changes: 83 additions & 1 deletion xmodule/assets/video/_display.scss
Original file line number Diff line number Diff line change
@@ -106,6 +106,88 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
}
}

.wrapper-social-share {
.social-toggle-btn {
background: $primary;
font-size: 13px;
font-weight: 700;
padding: ($baseline * .35) ($baseline * .9);
border: 1px solid #d2c9c9;
border-radius: 0;
color: $white;
box-shadow: none;
text-shadow: none;

&:hover {
background: $link-hover;
}

.fa {
@include margin-right($baseline * .4);
}
}

.close-btn {
color: $black;
}

.container-social-share {
@include padding($baseline * .4);

width: 300px;
border-radius: 6px;
background-color: $white;
box-shadow: rgba($black, .15) 0 .5rem 1rem, rgba($black, .15) 0 .25rem .625rem;

.close-btn {
float: right;
cursor: pointer;
}

.social-share-link {
@include margin-right($baseline * .2);

font-size: 24px;
text-decoration: none;
display: inline-flex;
}

.public-video-url-container {
@include padding($baseline * .4);

display: flex;
align-items: center;
justify-content: space-between;
background-color: #f2f0ef;
}

.public-video-url-link {
color: $black;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;

&:hover {
text-decoration: underline;
}
}

.public-video-copy-btn {
@include margin-left($baseline * .7);

flex-shrink: 0;
color: $primary;
cursor: pointer;

&:hover {
text-decoration: none;
color: $link-hover;
}
}
}
}

.wrapper-downloads {
@include media-breakpoint-up(md) {
display: flex;
@@ -162,7 +244,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark

.wrapper-transcript-feedback {
display: none;

.transcript-feedback-buttons {
display: flex;
}

0 comments on commit 9123479

Please sign in to comment.