fix: styles for share video functionality of the video xblock

openedx · Sep 3, 2024 · 55adc30 · 55adc30
1 parent 493e7ef
commit 55adc30
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 27 deletions.
diff --git a/lms/templates/video.html b/lms/templates/video.html
@@ -65,27 +65,20 @@ <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"
@@ -97,23 +90,14 @@ <h4 class="hd hd-5">${_('Video')}</h4>
                             </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>

diff --git a/xmodule/assets/video/_display.scss b/xmodule/assets/video/_display.scss
@@ -89,6 +89,88 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
     margin: 1em 0 0;
   }
 
+  .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;