oddsgate-ds 1.0.153 → 1.0.155

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/cjs/index.js +1 -1
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/esm/index.js +1 -1
  4. package/dist/esm/index.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/organisms/CircularSlider/CircularSlider.component.tsx +3 -2
  7. package/src/components/organisms/CircularSlider/CircularSlider.stories.tsx +46 -42
  8. package/src/components/organisms/CircularSlider/CircularSlider.theme.ts +18 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oddsgate-ds",
3
- "version": "1.0.153",
3
+ "version": "1.0.155",
4
4
  "description": "Miew theme component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/components/organisms/CircularSlider/CircularSlider.component.tsx CHANGED
@@ -97,12 +97,13 @@ const CircularSlider = ({
97
97
  }
98
98
 
99
99
  for (let i = 0; i < slides.length; i++) {
100
- slides[i].style.width = slides[i].style.height = slidesSize + 'px'
100
+ slides[i].style.width = slides[i].style.height =
101
+ (isMobile ? slidesSize * 1.5 : slidesSize) + 'px'
101
102
  }
102
103
  }
103
104
 
104
105
  const sliderResize = debounce(() => {
105
- const sliderSize = isMobile ? 2.6 : 1
106
+ const sliderSize = isMobile ? 1.9 : 1
106
107
 
107
108
  let radius,
108
109
  w = slider?.current
package/src/components/organisms/CircularSlider/CircularSlider.stories.tsx CHANGED
@@ -24,7 +24,11 @@ const image = (
24
24
  )
25
25
 
26
26
  export const Simple: StoryObj<ICircularSlider> = {
27
- render: args => <div style={{ width: "100%", height: "200dvh" }}><CircularSlider {...args}></CircularSlider></div>,
27
+ render: args => (
28
+ <div style={{ width: '100%', height: '200dvh' }}>
29
+ <CircularSlider {...args}></CircularSlider>
30
+ </div>
31
+ ),
28
32
  args: {
29
33
  cta: <Button variant={'secondary'}>Join the Team</Button>,
30
34
  content: [
@@ -87,48 +91,48 @@ export const Simple: StoryObj<ICircularSlider> = {
87
91
  name: 'My name 1§2',
88
92
  role: 'My role',
89
93
  img: image
90
- },
91
- {
92
- name: 'My name 13',
93
- role: 'My role',
94
- img: image
95
- },
96
- {
97
- name: 'My name 14',
98
- role: 'My role',
99
- img: image
100
- },
101
- {
102
- name: 'My name 15',
103
- role: 'My role',
104
- img: image
105
- },
106
- {
107
- name: 'My name 16',
108
- role: 'My role',
109
- img: image
110
- },
111
- {
112
- name: 'My name 17',
113
- role: 'My role',
114
- img: image
115
- },
116
- {
117
- name: 'My name 19',
118
- role: 'My role',
119
- img: image
120
- },
121
- {
122
- name: 'My name 19',
123
- role: 'My role',
124
- img: image
125
- },
126
- {
127
- name: 'My name 20',
128
- role: 'My role',
129
- img: image
130
94
  }
95
+ // {
96
+ // name: 'My name 13',
97
+ // role: 'My role',
98
+ // img: image
99
+ // },
100
+ // {
101
+ // name: 'My name 14',
102
+ // role: 'My role',
103
+ // img: image
104
+ // },
105
+ // {
106
+ // name: 'My name 15',
107
+ // role: 'My role',
108
+ // img: image
109
+ // },
110
+ // {
111
+ // name: 'My name 16',
112
+ // role: 'My role',
113
+ // img: image
114
+ // },
115
+ // {
116
+ // name: 'My name 17',
117
+ // role: 'My role',
118
+ // img: image
119
+ // },
120
+ // {
121
+ // name: 'My name 19',
122
+ // role: 'My role',
123
+ // img: image
124
+ // },
125
+ // {
126
+ // name: 'My name 19',
127
+ // role: 'My role',
128
+ // img: image
129
+ // },
130
+ // {
131
+ // name: 'My name 20',
132
+ // role: 'My role',
133
+ // img: image
134
+ // }
131
135
  ],
132
- className: "h-100",
136
+ className: 'h-100'
133
137
  }
134
138
  }
package/src/components/organisms/CircularSlider/CircularSlider.theme.ts CHANGED
@@ -35,6 +35,10 @@ export const StyledCircularSliderWrapper = styled.div<ICircularSlider>`
35
35
  margin-right: 0;
36
36
  transform: translate(-30%, 0%);
37
37
 
38
+
39
+ @media only screen and (max-width: ${responsiveMedia}) {
40
+ transform: translate(-25%, 0%);
41
+ }
38
42
  @media only screen and (min-width: ${responsiveMedia}) {
39
43
  top: 50%;
40
44
  transform: translate(65%, -50%);
@@ -61,6 +65,11 @@ export const StyledCircularSliderSlide = styled.div<ICircularSlider>`
61
65
  filter: brightness(50%);
62
66
  cursor: pointer;
63
67
 
68
+ @media only screen and (max-width: ${responsiveMedia}) {
69
+ border-radius:50%;
70
+ overflow: hidden;
71
+ }
72
+
64
73
  & img{
65
74
  height: 100%;
66
75
  object-fit: cover;
@@ -71,6 +80,11 @@ export const StyledCircularSliderSlide = styled.div<ICircularSlider>`
71
80
 
72
81
  &.active{
73
82
  filter: brightness(100%);
83
+ /* @media only screen and (max-width: ${responsiveMedia}) {
84
+ width: 100px !important;
85
+ height: 100px !important;
86
+ } */
87
+
74
88
  }
75
89
 
76
90
  @media only screen and (min-width: ${responsiveMedia}) {
@@ -81,10 +95,13 @@ export const StyledCircularSliderSlide = styled.div<ICircularSlider>`
81
95
  `;
82
96
 
83
97
  export const StyledCircularSliderContent = styled.div<ICircularSlider>`
98
+
84
99
  width: 50%;
85
100
  text-align: center;
86
101
  margin: auto;
87
-
102
+ @media only screen and (max-width: ${responsiveMedia}) {
103
+ margin-top: 42px
104
+ }
88
105
  &>div{
89
106
  opacity: 0;
90
107
  transform: translate(0%, 5%);