Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: video share page visual issues (#31974)

Browse Source 
* fix: video share page visual issues

* fix: better video sizing

* fixup! fix: better video sizing

* docs: comment explaining width funkiness
This commit is contained in:
Jansen Kantor
2023-03-24 10:59:38 -04:00
committed by GitHub
parent 773f97d324
commit d277cc0eb1
2 changed files with 46 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
lms/static/sass/_experiments.scss
View File

@@ -514,43 +514,57 @@
}
// AU 972 Social Video Sharing Page
.public-video-share-cta {
position: relative;
z-index: 1;
.public-video-page {
.org-logo{
height: 40px;
.tc-wrapper{
margin: auto;
// The edX video player only sets size by width. We want to make sure the video is fully on the page
// on-load, so we need to control height via width. This sets the width to either 90% of the horizontal
// space (when that's the limiter) or 70% of the vertical space times an approximate aspect ratio.
// Assuming the aspect ratio is even close to constistent, this sets the width to what it would need
// to be to make the height 70% of the vertical space on the screen
width: \min(90vw, 70vh * 1.6739);
}
.nav-links{
float: right;
}
.public-video-share-cta {
position: relative;
z-index: 1;
margin-top: 20px;
.btn-learn-more{
@extend %btn-shims;
color: #00262B;
background: #FFFFFF;
border-color: #F2F0EF;
&:hover,
&:active,
&:focus {
background: darken(#FFFFFF, 7%);
border-color: darken(#F2F0EF, 7%);
.org-logo{
height: 40px;
}
}
.btn-enroll{
@extend %btn-shims;
color: #FFFFFF;
background: #D23228;
border-color: #D23228;
.nav-links{
float: right;
}
&:hover,
&:active,
&:focus {
color: darken(#FFFFFF, 7%);
background: darken(#D23228, 7%);
border-color: darken(#D23228, 7%);
.btn-learn-more{
@extend %btn-shims;
color: #00262B;
background: #FFFFFF;
border-color: #F2F0EF;
&:hover,
&:active,
&:focus {
background: darken(#FFFFFF, 7%);
border-color: darken(#F2F0EF, 7%);
}
}
.btn-enroll{
@extend %btn-shims;
color: #FFFFFF;
background: #D23228;
border-color: #D23228;
&:hover,
&:active,
&:focus {
color: darken(#FFFFFF, 7%);
background: darken(#D23228, 7%);
border-color: darken(#D23228, 7%);
}
}
}
}

2
lms/templates/public_video.html
View File

@@ -20,6 +20,8 @@ from django.utils.translation import gettext as _
<meta data-rh="true" name="twitter:player:height" content="720">
</%block>
<%block name="bodyclass">view-in-course view-courseware courseware ${course.css_class or ''} public-video-page</%block>
<%block name="body_extra">
<nav class="public-video-share-cta" aria-label="Learn More">
% if org_logo: