Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: styles for share video functionality of the video xblock #34893

Open
wants to merge 1 commit into
base: open-release/redwood.master
Choose a base branch
from
+94 −30
Open

fix: styles for share video functionality of the video xblock #34893

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 11 additions & 29 deletions lms/templates/video.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
84 changes: 83 additions & 1 deletion xmodule/assets/video/_display.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -162,7 +244,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark

.wrapper-transcript-feedback {
display: none;

.transcript-feedback-buttons {
display: flex;
}
Expand Down
Loading