@riosst100/pwa-marketplace 1.6.8 → 1.6.9

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 (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/ShopBy/shopBy.js +23 -2
  3. package/src/components/ShopBy/shopBy.module.css +12 -4
  4. package/src/components/ShopBySets/shopBySets.js +3 -3
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@riosst100/pwa-marketplace",
3
3
  "author": "riosst100@gmail.com",
4
- "version": "1.6.8",
4
+ "version": "1.6.9",
5
5
  "main": "src/index.js",
6
6
  "pwa-studio": {
7
7
  "targets": {
package/src/components/ShopBy/shopBy.js CHANGED
@@ -120,6 +120,14 @@ const ShopBy = props => {
120
120
 
121
121
  const newAvailableGroups = searchQuery ? filteredAvailableGroups : availableGroups;
122
122
 
123
+ const splitToNChunks = (array, n) => {
124
+ let result = [];
125
+ for (let i = n; i > 0; i--) {
126
+ result.push(array.splice(0, Math.ceil(array.length / i)));
127
+ }
128
+ return result;
129
+ }
130
+
123
131
  const setRelases = newAvailableGroups.map((group, index) => {
124
132
  const optionsResult = [];
125
133
 
@@ -138,15 +146,28 @@ const ShopBy = props => {
138
146
  </li>)
139
147
  })
140
148
 
149
+ let optionsResultSplitted = [];
150
+ if (active == group) {
151
+ optionsResultSplitted = splitToNChunks(optionsResult, 3);
152
+ }
153
+
141
154
  return (
142
155
  <>
143
- {optionsResult ?
144
- <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
156
+ {optionsResult && active == "all" ?
157
+ <div className={cn('singles_group-wrapper mb-4 px-2 inline-block', classes.singlesGroupWrapper)}>
145
158
  <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' >
146
159
  {group}
147
160
  </div>
148
161
  <div className={cn('singles_item-list flex flex-col')}>{optionsResult}</div>
149
162
  </div> : ''}
163
+ {active == group ? optionsResultSplitted && optionsResultSplitted.length && optionsResultSplitted.map((optionsResult, index) =>
164
+ <div key={index} className={cn('singles_group-wrapper mb-4 px-2 inline-block', classes.singlesGroupWrapper)}>
165
+ {index == 0 ? <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2'>{group}</div> :
166
+ <div className='singles_item_group_letter text-xl font-semibold pb-1 mb-2' style={{"marginTop":"35px"}}></div>}
167
+ <div className={cn('singles_item-list flex flex-col')}>{optionsResult}</div>
168
+ </div>
169
+ )
170
+ : ''}
150
171
  </>
151
172
  );
152
173
  }
package/src/components/ShopBy/shopBy.module.css CHANGED
@@ -31,16 +31,24 @@
31
31
 
32
32
  .singlesWrapper {
33
33
  column-count: 1;
34
+ display: flex;
35
+ width: 100%;
36
+ flex-wrap: wrap;
37
+ flex-direction: row;
38
+ }
39
+
40
+ .singlesGroupWrapper {
41
+ width: 100%;
34
42
  }
35
43
 
36
44
  @media screen and (min-width: 768px) {
37
- .singlesWrapper {
38
- column-count: 2;
45
+ .singlesGroupWrapper {
46
+ width: 50%;
39
47
  }
40
48
  }
41
49
 
42
50
  @media screen and (min-width: 1023px) {
43
- .singlesWrapper {
44
- column-count: 3;
51
+ .singlesGroupWrapper {
52
+ width: 33.33%;
45
53
  }
46
54
  }
package/src/components/ShopBySets/shopBySets.js CHANGED
@@ -115,20 +115,20 @@ const ShopBySets = props => {
115
115
 
116
116
  // console.log('setsResult: '+setsResult.length);
117
117
  let setsResultSplitted = [];
118
- if (active == release_type) {
118
+ if (active == release_type || newCollectibleGameSets.length == 1) {
119
119
  setsResultSplitted = splitToNChunks(setsResult, 3);
120
120
  }
121
121
 
122
122
  return (
123
123
  <>
124
- {active == "all" ?
124
+ {active == "all" && newCollectibleGameSets.length > 1 ?
125
125
  <div className={cn('singles_group-wrapper mb-4 px-2 inline-block', classes.singlesGroupWrapper)}>
126
126
  <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' >
127
127
  {release_type}
128
128
  </div>
129
129
  <div className={cn('singles_item-list flex flex-col')}>{setsResult}</div>
130
130
  </div> : ''}
131
- {active == release_type ? setsResultSplitted && setsResultSplitted.length && setsResultSplitted.map((setsResult, index) =>
131
+ {active == release_type || newCollectibleGameSets.length == 1 ? setsResultSplitted && setsResultSplitted.length && setsResultSplitted.map((setsResult, index) =>
132
132
  <div key={index} className={cn('singles_group-wrapper mb-4 px-2 inline-block', classes.singlesGroupWrapper)}>
133
133
  {index == 0 ? <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2'>{release_type}</div> :
134
134
  <div className='singles_item_group_letter text-xl font-semibold pb-1 mb-2' style={{"marginTop":"35px"}}></div>}