oddsgate-ds 1.0.70 → 1.0.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.70",
+  "version": "1.0.71",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/organisms/CircularSlider/CircularSlider.component.tsx

@@ -9,6 +9,7 @@ import {
 
 import Heading from '@/components/atoms/Heading/Heading.component';
 import { ICircularSlider } from './CircularSlider.interface'
+import isTouchDevice from '@/helpers/isTouchDevice';
 
 const CircularSlider = ({
   content,
@@ -25,9 +26,12 @@ const CircularSlider = ({
   const slidesHolder = useRef<HTMLDivElement>();
   const contentHolder = useRef<HTMLDivElement>();
 
-  const sliderSize = 1;
-  const slideSize = 0.15;
+  const isMobile = isTouchDevice();
 
+  const sliderSize = isMobile ? 2.6 : 1;
+  const slideSize = isMobile ? 0.12 : 0.15;
+
+  console.log(isMobile);
 
   //force 12 items
   if (content && content.length < 12) {

package/src/components/organisms/CircularSlider/CircularSlider.theme.ts

@@ -1,4 +1,5 @@
 import { ICircularSlider } from './CircularSlider.interface';
+import { responsiveMedia } from '@/styles/variables';
 import styled from 'styled-components';
 
 export const StyledCircularSlider = styled.div<ICircularSlider>`
@@ -7,19 +8,20 @@ export const StyledCircularSlider = styled.div<ICircularSlider>`
   min-height: 100dvh;
   overflow: hidden;
 
-
   & > svg{
+    display: none;
     position:absolute;
     top:50%;
     left:0;
     width:66.666%;
     height:auto;
+    transform: translate(-50%, -50%)
+  }
 
-    & path{
-      fill
+  @media only screen and (min-width: ${responsiveMedia}) {
+    & > svg{
+      display: block;
     }
-
-    transform: translate(-50%, -50%)
   }
 `;
 
@@ -30,7 +32,12 @@ export const StyledCircularSliderWrapper = styled.div<ICircularSlider>`
   margin: 0 auto;
   margin-right: 0;
   top: 50%;
-  transform: translate(65%, -50%);
+  transform: translate(23%, -50%);
+
+  @media only screen and (min-width: ${responsiveMedia}) {
+    transform: translate(65%, -50%);
+
+  }
 `;
 
 export const StyledCircularSliderSlides = styled.div<ICircularSlider>`
@@ -62,18 +69,28 @@ export const StyledCircularSliderSlide = styled.div<ICircularSlider>`
 export const StyledCircularSliderContent = styled.div<ICircularSlider>`
   position: absolute;
   top: 50%;
-  left:50%;
+  left:0%;
 
-  width: 25%;
+  width: 50%;
   text-align: center;
 
   opacity: 0;
-  transform: translate(-50%, 5%);
+  transform: translate(0%, 5%);
   transition: all 0.3s ease;
 
   &.active{
     opacity: 1;
-    transform: translate(-50%, -50%);
+    transform: translate(0%, -50%);
+  }
+
+  @media only screen and (min-width: ${responsiveMedia}) {
+    left:50%;
+    width: 25%;
+    transform: translate(-50%, 5%);
+
+    &.active{
+      transform: translate(-50%, -50%);
+    }
   }
 `;