Implemented the code reviews changes and added logic for video with v…

…ideo cover.
JudicialCouncilOfCalifornia · Mar 1, 2024 · 51f01e6 · 51f01e6
1 parent 9a764f9
commit 51f01e6
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 48 deletions.
diff --git a/source/_patterns/02-molecules/video/_video.scss b/source/_patterns/02-molecules/video/_video.scss
@@ -57,3 +57,36 @@
     }
   }
 }
+
+/* media edit button fix */
+.jcc-video__video-container{
+  @include u-position(relative);
+  @include u-height(0);
+}
+
+.jcc-video__video-container-editor{
+  @include u-display(flex);
+  flex-direction: column;
+  justify-content: space-evenly;
+  gap: 10px;
+  height:auto;
+  padding-bottom:10px !important;
+}
+
+.jcc-video__video-container-editor  > .embed-responsive-item{
+  position: relative;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.jcc-video__video-container > .embed-responsive-item{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
diff --git a/source/_patterns/02-molecules/video/video.twig b/source/_patterns/02-molecules/video/video.twig
@@ -49,28 +49,19 @@
 {% endif %}
 
 {# Video layout classes #}
-{% if video_classes %}
-  {% set video_classes= video.video_classes %}
-{% else %}
-  {% set video_classes= "" %}
-{% endif %}
+{% set video_classes =  video_classes ? video.video_classes : ""%}
+
+{# set classes accrdoing to page : in ckeditor or  display page #}
+{% set added_class =  "media/body/preview" in video.path ? "jcc-video__video-container-editor" : "jcc-video__video-container embed-responsive" %}
 
-{# if in ckeditor #}
-{% if "media/body/preview" in video.path %}
- {% set added_class = "video-container-editor" %}
- {% set style_value = "10px" %}
-{% else %}
- {% set added_class = "video-container embed-responsive" %}
- {% set style_value = ratio * 100 ~ "%;" %}
-{% endif %}
 
 {% set classes = [
   'jcc-video',
   video_classes,
   added_class 
 ]|merge(video.classes|default([])) %}
 
-<div class="{{ classes|join(' ') }}" style= "padding-bottom: {{style_value}}"  >
+<div class="{{ classes|join(' ') }}" style="padding-bottom: {{ ratio * 100 }}%;">
   <iframe class="embed-responsive-item" title="{{ video.provider ~ ' ' ~ 'video player'|t }}"
     width="{{ video.width }}" height="{{ video.height }}"
     src="{{ url }}" data-src="{{ data_url }}"
@@ -80,4 +71,4 @@
   {% if video.cover %}
     <button class="jcc-video__cover" style="background-image: url({{ video.cover }});">{{ "Play video"|t }}</button>
   {% endif %}
-</div>
+</div>
diff --git a/source/css/_video_embed.scss b/source/css/_video_embed.scss