Merge pull request #1815 from kelvinruizdev/bug-escuchalo-de-nuestros…

…-alumnos agregue variables para manipular el width y el margin de el component…
4GeeksAcademy · Oct 24, 2023 · 9b4faa4 · 9b4faa4
2 parents 9e0df3d + f4987ff
commit 9b4faa4
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 3 deletions.
diff --git a/src/components/ReactPlayer/index.js b/src/components/ReactPlayer/index.js
@@ -38,6 +38,24 @@ const Iframe = styled(YouTube)`
   padding: 0;
   border-radius: ${(props) => props.borderRadius || "auto"};
   height: ${(props) => props.height || "100%"};
+  @media ${Devices.xxs} {
+    height: ${(props) => props.height_xxs};
+  }
+  @media ${Devices.xs} {
+    height: ${(props) => props.height_xs};
+  }
+  @media ${Devices.sm} {
+    height: ${(props) => props.height_sm};
+  }
+  @media ${Devices.tablet} {
+    height: ${(props) => props.height_tablet};
+  }
+  @media ${Devices.md} {
+    height: ${(props) => props.height_md};
+  }
+  @media ${Devices.lg} {
+    height: ${(props) => props.height_}lg;
+  }
 `;
 
 const Thumbnail = styled.img`
@@ -144,7 +162,11 @@ const Player = ({
 
   const imgStyles = image_thumb?.style ? JSON.parse(image_thumb?.style) : null;
   return (
-    <VideoWrapper {...rest} style={style} margin_tablet={margin_tablet}>
+    <VideoWrapper {...rest} 
+      style={style} 
+      margin_tablet={margin_tablet} 
+      width={width}
+    >
       {showVideo ? (
         <>
           {With_Modal ? (
@@ -166,7 +188,10 @@ const Player = ({
                 onStateChange={onStateChange}
                 onPlaybackRateChange={onPlaybackRateChange}
                 onPlaybackQualityChange={onPlaybackQualityChange}
-                height="375px"
+                height_xxs="300px"
+                height_tablet="400px"
+                height_md="520px"
+                height_lg="100%"
                 opts={{
                   // padding: "125px 0 0",
                   width: "100%",

diff --git a/src/components/Sections/index.js b/src/components/Sections/index.js
@@ -394,6 +394,7 @@ export const Grid = styled(Div)`
     grid-gap: ${(props) => props.gridGap_xxs};
     grid-template-columns: ${(props) =>
       props.columns_xxs ? `repeat(${props.columns_xxs}, 1fr)` : null};
+    padding: ${(props) => props.padding_xxs};
   }
   @media ${Devices.xs} {
     grid-template-columns: ${(props) =>
@@ -426,9 +427,11 @@ export const Grid = styled(Div)`
     grid-row: ${(props) => props.gridRow_tablet};
     justify-content: ${(props) => props.justifyContent_tablet};
     grid-template-areas: ${(props) => props.gridTemplateAreas_tablet};
+    padding: ${(props) => props.padding_tablet};
   }
   @media ${Devices.md} {
     margin: ${(props) => props.margin_md};
+     padding: ${(props) => props.padding_md};
     grid-template-columns: ${(props) => props.gridTemplateColumns_md};
     grid-template-rows: ${(props) =>
       props.gridTemplateRows_md
@@ -440,6 +443,7 @@ export const Grid = styled(Div)`
   }
   @media ${Devices.lg} {
     grid-template-columns: ${(props) => props.gridTemplateColumns_lg};
+    padding: ${(props) => props.padding_lg};
   }
   @media ${Devices.xl} {
   }

diff --git a/src/components/With4Geeks/index.js b/src/components/With4Geeks/index.js
@@ -130,6 +130,7 @@ export default ({
           columns_tablet={
             locationFiltered.length <= 3 ? locationFiltered.length : "3"
           }
+          padding_xxs="0 20px 50px 20px"
           padding_tablet="0 40px"
           padding_md="0 80px"
           padding_lg="0"
@@ -164,7 +165,8 @@ export default ({
                     alignSelf={`baseline`}
                   >
                     <ReactPlayer
-                      With_Modal={true}
+                      With_Modal={true} 
+                      margin_tablet="0px"
                       imageWidth="100%"
                       imageHeight="auto"
                       height="100%"