playbook_ui 14.17.0.pre.alpha.PBNTR935draggablelinedesign7118 → 14.17.0.pre.alpha.PLAY1967bracketlayoutphase27205

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 (18) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +30 -35
  3. data/app/pb_kits/playbook/pb_layout/_layout.scss +43 -1
  4. data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -0
  5. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +318 -118
  6. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
  7. data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +78 -41
  8. data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +73 -0
  9. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +19 -7
  10. data/dist/chunks/{_typeahead-HqfDnjRe.js → _typeahead-DZZ1n1Oe.js} +1 -1
  11. data/dist/chunks/{_weekday_stacked-DVQITtQ9.js → _weekday_stacked-DO7xRd7g.js} +2 -2
  12. data/dist/chunks/vendor.js +1 -1
  13. data/dist/playbook-doc.js +1 -1
  14. data/dist/playbook-rails-react-bindings.js +1 -1
  15. data/dist/playbook-rails.js +1 -1
  16. data/dist/playbook.css +1 -1
  17. data/lib/playbook/version.rb +1 -1
  18. metadata +5 -4
data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx CHANGED
@@ -1,11 +1,102 @@
1
1
  import React from 'react'
2
2
 
3
3
  import Layout from '../../pb_layout/_layout'
4
- import Flex from '../../pb_flex/_flex'
5
- import Body from '../../pb_body/_body'
6
4
  import Caption from '../../pb_caption/_caption'
7
5
  import SectionSeparator from '../../pb_section_separator/_section_separator'
8
6
 
7
+ const teamData = {
8
+ eagles: {
9
+ avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/8/8e/Philadelphia_Eagles_logo.svg/1920px-Philadelphia_Eagles_logo.svg.png",
10
+ name:"Eagles",
11
+ rank:"#1 NFC East",
12
+ territory:"PHI",
13
+ },
14
+ packers: {
15
+ avatar:"https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Green_Bay_Packers_logo.svg/1920px-Green_Bay_Packers_logo.svg.png",
16
+ name:"Packers",
17
+ rank:"#3 NFC North",
18
+ territory:"GB",
19
+ },
20
+ vikings: {
21
+ avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/4/48/Minnesota_Vikings_logo.svg/1024px-Minnesota_Vikings_logo.svg.png",
22
+ name:"Vikings",
23
+ rank:"#2 NFC North",
24
+ territory:"MIN",
25
+ },
26
+ rams: {
27
+ avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/8/8a/Los_Angeles_Rams_logo.svg/1920px-Los_Angeles_Rams_logo.svg.png",
28
+ name:"Rams",
29
+ rank:"#1 NFC West",
30
+ territory:"LAR",
31
+ },
32
+ lions: {
33
+ avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/7/71/Detroit_Lions_logo.svg/1920px-Detroit_Lions_logo.svg.png",
34
+ name:"Lions",
35
+ rank:"#1 NFC North",
36
+ territory:"DET",
37
+ },
38
+ commanders: {
39
+ avatar:"https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Washington_Commanders_logo.svg/2560px-Washington_Commanders_logo.svg.png",
40
+ name:"Commanders",
41
+ rank:"#2 NFC East",
42
+ territory:"WAS",
43
+ },
44
+ buccaneers: {
45
+ avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/a/a2/Tampa_Bay_Buccaneers_logo.svg/1920px-Tampa_Bay_Buccaneers_logo.svg.png",
46
+ name:"Buccaneers",
47
+ rank:"#1 NFC South",
48
+ territory:"TB",
49
+ },
50
+ chiefs: {
51
+ avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/e/e1/Kansas_City_Chiefs_logo.svg/2560px-Kansas_City_Chiefs_logo.svg.png",
52
+ name:"Chiefs",
53
+ rank:"#1 AFC West",
54
+ territory:"KC",
55
+ },
56
+ chargers: {
57
+ avatar:"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Los_Angeles_Chargers_logo.svg/2560px-Los_Angeles_Chargers_logo.svg.png",
58
+ name:"Chargers",
59
+ rank:"#2 AFC West",
60
+ territory:"LAC",
61
+ },
62
+ texans: {
63
+ avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/2/28/Houston_Texans_logo.svg/1280px-Houston_Texans_logo.svg.png",
64
+ name:"Texans",
65
+ rank:"#1 AFC South",
66
+ territory:"HOU",
67
+ },
68
+ broncos: {
69
+ avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/4/44/Denver_Broncos_logo.svg/2560px-Denver_Broncos_logo.svg.png",
70
+ name:"Broncos",
71
+ rank:"#3 AFC West",
72
+ territory:"DEN",
73
+ },
74
+ bills: {
75
+ avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/7/77/Buffalo_Bills_logo.svg/1920px-Buffalo_Bills_logo.svg.png",
76
+ name:"Bills",
77
+ rank:"#1 AFC East",
78
+ territory:"BUF",
79
+ },
80
+ steelers: {
81
+ avatar:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Pittsburgh_Steelers_logo.svg/1280px-Pittsburgh_Steelers_logo.svg.png",
82
+ name:"Steelers",
83
+ rank:"#2 AFC North",
84
+ territory:"PIT",
85
+ },
86
+ ravens: {
87
+ avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/1/16/Baltimore_Ravens_logo.svg/2560px-Baltimore_Ravens_logo.svg.png",
88
+ name:"Ravens",
89
+ rank:"#1 AFC North",
90
+ territory:"BAL",
91
+ },
92
+ bye: {
93
+ avatar:"",
94
+ name:"BYE",
95
+ rank:"",
96
+ territory:"",
97
+ },
98
+ }
99
+
9
100
  const LayoutBracket = () => {
10
101
  return (
11
102
  <div>
@@ -18,80 +109,140 @@ const LayoutBracket = () => {
18
109
  </Layout.RoundLabel>
19
110
  <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
20
111
  <Layout.Game>
21
- <Flex justify="between">
22
- <Body>Packers</Body>
23
- <Body>10</Body>
24
- </Flex>
25
- <Flex justify="between">
26
- <Body><strong>Eagles</strong></Body>
27
- <Body>22</Body>
28
- </Flex>
112
+ <Layout.Participant
113
+ avatar={teamData.packers.avatar}
114
+ name={teamData.packers.name}
115
+ points="10"
116
+ rank={teamData.packers.rank}
117
+ territory={teamData.packers.territory}
118
+ />
119
+ <Layout.Participant
120
+ avatar={teamData.eagles.avatar}
121
+ name={teamData.eagles.name}
122
+ points="22"
123
+ rank={teamData.eagles.rank}
124
+ territory={teamData.eagles.territory}
125
+ winner
126
+ />
29
127
  </Layout.Game>
30
128
  <Layout.Game>
31
- <Flex justify="between">
32
- <Body>Vikings</Body>
33
- <Body>9</Body>
34
- </Flex>
35
- <Flex justify="between">
36
- <Body><strong>Rams</strong></Body>
37
- <Body>27</Body>
38
- </Flex>
129
+ <Layout.Participant
130
+ avatar={teamData.vikings.avatar}
131
+ name={teamData.vikings.name}
132
+ points="9"
133
+ rank={teamData.vikings.rank}
134
+ territory={teamData.vikings.territory}
135
+ />
136
+ <Layout.Participant
137
+ avatar={teamData.rams.avatar}
138
+ name={teamData.rams.name}
139
+ points="27"
140
+ rank={teamData.rams.rank}
141
+ territory={teamData.rams.territory}
142
+ winner
143
+ />
39
144
  </Layout.Game>
40
145
  <Layout.Game>
41
- <Flex justify="between">
42
- <Body><strong>Lions</strong></Body>
43
- </Flex>
44
- <Flex justify="between">
45
- <Body>BYE</Body>
46
- </Flex>
146
+ <Layout.Participant
147
+ avatar={teamData.lions.avatar}
148
+ name={teamData.lions.name}
149
+ points=""
150
+ rank={teamData.lions.rank}
151
+ territory={teamData.lions.territory}
152
+ winner
153
+ />
154
+ <Layout.Participant
155
+ avatar={teamData.bye.avatar}
156
+ name={teamData.bye.name}
157
+ points=""
158
+ rank={teamData.bye.rank}
159
+ territory={teamData.bye.territory}
160
+ />
47
161
  </Layout.Game>
48
162
  <Layout.Game>
49
- <Flex justify="between">
50
- <Body><strong>Commanders</strong></Body>
51
- <Body>23</Body>
52
- </Flex>
53
- <Flex justify="between">
54
- <Body>Buccaneers</Body>
55
- <Body>20</Body>
56
- </Flex>
163
+ <Layout.Participant
164
+ avatar={teamData.commanders.avatar}
165
+ name={teamData.commanders.name}
166
+ points="23"
167
+ rank={teamData.commanders.rank}
168
+ territory={teamData.commanders.territory}
169
+ winner
170
+ />
171
+ <Layout.Participant
172
+ avatar={teamData.buccaneers.avatar}
173
+ name={teamData.buccaneers.name}
174
+ points="20"
175
+ rank={teamData.buccaneers.rank}
176
+ territory={teamData.buccaneers.territory}
177
+ />
57
178
  </Layout.Game>
58
179
  <Layout.Game>
59
- <Flex justify="between">
60
- <Body><strong>Chiefs</strong></Body>
61
- </Flex>
62
- <Flex justify="between">
63
- <Body>BYE</Body>
64
- </Flex>
180
+ <Layout.Participant
181
+ avatar={teamData.chiefs.avatar}
182
+ name={teamData.chiefs.name}
183
+ points=""
184
+ rank={teamData.chiefs.rank}
185
+ territory={teamData.chiefs.territory}
186
+ winner
187
+ />
188
+ <Layout.Participant
189
+ avatar={teamData.bye.avatar}
190
+ name={teamData.bye.name}
191
+ points=""
192
+ rank={teamData.bye.rank}
193
+ territory={teamData.bye.territory}
194
+ />
65
195
  </Layout.Game>
66
196
  <Layout.Game>
67
- <Flex justify="between">
68
- <Body>Chargers</Body>
69
- <Body>12</Body>
70
- </Flex>
71
- <Flex justify="between">
72
- <Body><strong>Texans</strong></Body>
73
- <Body>32</Body>
74
- </Flex>
197
+ <Layout.Participant
198
+ avatar={teamData.chargers.avatar}
199
+ name={teamData.chargers.name}
200
+ points="12"
201
+ rank={teamData.chargers.rank}
202
+ territory={teamData.chargers.territory}
203
+ />
204
+ <Layout.Participant
205
+ avatar={teamData.texans.avatar}
206
+ name={teamData.texans.name}
207
+ points="32"
208
+ rank={teamData.texans.rank}
209
+ territory={teamData.texans.territory}
210
+ winner
211
+ />
75
212
  </Layout.Game>
76
213
  <Layout.Game>
77
- <Flex justify="between">
78
- <Body>Broncos</Body>
79
- <Body>7</Body>
80
- </Flex>
81
- <Flex justify="between">
82
- <Body><strong>Bills</strong></Body>
83
- <Body>31</Body>
84
- </Flex>
214
+ <Layout.Participant
215
+ avatar={teamData.broncos.avatar}
216
+ name={teamData.broncos.name}
217
+ points="7"
218
+ rank={teamData.broncos.rank}
219
+ territory={teamData.broncos.territory}
220
+ />
221
+ <Layout.Participant
222
+ avatar={teamData.bills.avatar}
223
+ name={teamData.bills.name}
224
+ points="31"
225
+ rank={teamData.bills.rank}
226
+ territory={teamData.bills.territory}
227
+ winner
228
+ />
85
229
  </Layout.Game>
86
230
  <Layout.Game>
87
- <Flex justify="between">
88
- <Body>Steelers</Body>
89
- <Body>14</Body>
90
- </Flex>
91
- <Flex justify="between">
92
- <Body><strong>Ravens</strong></Body>
93
- <Body>28</Body>
94
- </Flex>
231
+ <Layout.Participant
232
+ avatar={teamData.steelers.avatar}
233
+ name={teamData.steelers.name}
234
+ points="14"
235
+ rank={teamData.steelers.rank}
236
+ territory={teamData.steelers.territory}
237
+ />
238
+ <Layout.Participant
239
+ avatar={teamData.ravens.avatar}
240
+ name={teamData.ravens.name}
241
+ points="28"
242
+ rank={teamData.ravens.rank}
243
+ territory={teamData.ravens.territory}
244
+ winner
245
+ />
95
246
  </Layout.Game>
96
247
  </Layout.Round>
97
248
  <Layout.RoundLabel>
@@ -100,44 +251,72 @@ const LayoutBracket = () => {
100
251
  </Layout.RoundLabel>
101
252
  <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
102
253
  <Layout.Game>
103
- <Flex justify="between">
104
- <Body>Rams</Body>
105
- <Body>22</Body>
106
- </Flex>
107
- <Flex justify="between">
108
- <Body><strong>Eagles</strong></Body>
109
- <Body>28</Body>
110
- </Flex>
254
+ <Layout.Participant
255
+ avatar={teamData.rams.avatar}
256
+ name={teamData.rams.name}
257
+ points="22"
258
+ rank={teamData.rams.rank}
259
+ territory={teamData.rams.territory}
260
+ />
261
+ <Layout.Participant
262
+ avatar={teamData.eagles.avatar}
263
+ name={teamData.eagles.name}
264
+ points="28"
265
+ rank={teamData.eagles.rank}
266
+ territory={teamData.eagles.territory}
267
+ winner
268
+ />
111
269
  </Layout.Game>
112
270
  <Layout.Game>
113
- <Flex justify="between">
114
- <Body><strong>Commanders</strong></Body>
115
- <Body>45</Body>
116
- </Flex>
117
- <Flex justify="between">
118
- <Body>Lions</Body>
119
- <Body>31</Body>
120
- </Flex>
271
+ <Layout.Participant
272
+ avatar={teamData.commanders.avatar}
273
+ name={teamData.commanders.name}
274
+ points="45"
275
+ rank={teamData.commanders.rank}
276
+ territory={teamData.commanders.territory}
277
+ winner
278
+ />
279
+ <Layout.Participant
280
+ avatar={teamData.lions.avatar}
281
+ name={teamData.lions.name}
282
+ points="31"
283
+ rank={teamData.lions.rank}
284
+ territory={teamData.lions.territory}
285
+ />
121
286
  </Layout.Game>
122
287
  <Layout.Game>
123
- <Flex justify="between">
124
- <Body>Texans</Body>
125
- <Body>14</Body>
126
- </Flex>
127
- <Flex justify="between">
128
- <Body><strong>Chiefs</strong></Body>
129
- <Body>23</Body>
130
- </Flex>
288
+ <Layout.Participant
289
+ avatar={teamData.texans.avatar}
290
+ name={teamData.texans.name}
291
+ points="14"
292
+ rank={teamData.texans.rank}
293
+ territory={teamData.texans.territory}
294
+ />
295
+ <Layout.Participant
296
+ avatar={teamData.chiefs.avatar}
297
+ name={teamData.chiefs.name}
298
+ points="23"
299
+ rank={teamData.chiefs.rank}
300
+ territory={teamData.chiefs.territory}
301
+ winner
302
+ />
131
303
  </Layout.Game>
132
304
  <Layout.Game>
133
- <Flex justify="between">
134
- <Body>Ravens</Body>
135
- <Body>25</Body>
136
- </Flex>
137
- <Flex justify="between">
138
- <Body><strong>Bills</strong></Body>
139
- <Body>27</Body>
140
- </Flex>
305
+ <Layout.Participant
306
+ avatar={teamData.ravens.avatar}
307
+ name={teamData.ravens.name}
308
+ points="25"
309
+ rank={teamData.ravens.rank}
310
+ territory={teamData.ravens.territory}
311
+ />
312
+ <Layout.Participant
313
+ avatar={teamData.bills.avatar}
314
+ name={teamData.bills.name}
315
+ points="27"
316
+ rank={teamData.bills.rank}
317
+ territory={teamData.bills.territory}
318
+ winner
319
+ />
141
320
  </Layout.Game>
142
321
  </Layout.Round>
143
322
  <Layout.RoundLabel>
@@ -146,24 +325,38 @@ const LayoutBracket = () => {
146
325
  </Layout.RoundLabel>
147
326
  <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
148
327
  <Layout.Game>
149
- <Flex justify="between">
150
- <Body>Commanders</Body>
151
- <Body>23</Body>
152
- </Flex>
153
- <Flex justify="between">
154
- <Body><strong>Eagles</strong></Body>
155
- <Body>55</Body>
156
- </Flex>
328
+ <Layout.Participant
329
+ avatar={teamData.commanders.avatar}
330
+ name={teamData.commanders.name}
331
+ points="23"
332
+ rank={teamData.commanders.rank}
333
+ territory={teamData.commanders.territory}
334
+ />
335
+ <Layout.Participant
336
+ avatar={teamData.eagles.avatar}
337
+ name={teamData.eagles.name}
338
+ points="55"
339
+ rank={teamData.eagles.rank}
340
+ territory={teamData.eagles.territory}
341
+ winner
342
+ />
157
343
  </Layout.Game>
158
344
  <Layout.Game>
159
- <Flex justify="between">
160
- <Body>Bills</Body>
161
- <Body>29</Body>
162
- </Flex>
163
- <Flex justify="between">
164
- <Body><strong>Chiefs</strong></Body>
165
- <Body>32</Body>
166
- </Flex>
345
+ <Layout.Participant
346
+ avatar={teamData.bills.avatar}
347
+ name={teamData.bills.name}
348
+ points="29"
349
+ rank={teamData.bills.rank}
350
+ territory={teamData.bills.territory}
351
+ />
352
+ <Layout.Participant
353
+ avatar={teamData.chiefs.avatar}
354
+ name={teamData.chiefs.name}
355
+ points="32"
356
+ rank={teamData.chiefs.rank}
357
+ territory={teamData.chiefs.territory}
358
+ winner
359
+ />
167
360
  </Layout.Game>
168
361
  </Layout.Round>
169
362
  <Layout.RoundLabel>
@@ -172,14 +365,21 @@ const LayoutBracket = () => {
172
365
  </Layout.RoundLabel>
173
366
  <Layout.Round>
174
367
  <Layout.Game>
175
- <Flex justify="between">
176
- <Body>Chiefs</Body>
177
- <Body>22</Body>
178
- </Flex>
179
- <Flex justify="between">
180
- <Body><strong>Eagles</strong></Body>
181
- <Body>40</Body>
182
- </Flex>
368
+ <Layout.Participant
369
+ avatar={teamData.chiefs.avatar}
370
+ name={teamData.chiefs.name}
371
+ points="22"
372
+ rank={teamData.chiefs.rank}
373
+ territory={teamData.chiefs.territory}
374
+ />
375
+ <Layout.Participant
376
+ avatar={teamData.eagles.avatar}
377
+ name={teamData.eagles.name}
378
+ points="40"
379
+ rank={teamData.eagles.rank}
380
+ self
381
+ territory={teamData.eagles.territory}
382
+ />
183
383
  </Layout.Game>
184
384
  </Layout.Round>
185
385
  </Layout>
data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md CHANGED
@@ -1,4 +1,4 @@
1
- Use `<Layout.RoundLabel>`, `<Layout.Round>`, and `<Layout.Game>` to make a bracket layout.
1
+ Use `<Layout.RoundLabel>`, `<Layout.Round>`, `<Layout.Game>`, and/or `<Layout.Participant>` to make a bracket layout. Feel free to use custom components in place of the template components based on your needs.
2
2
 
3
3
  On mobile devices, `<Layout.RoundLabel>` will display (on desktop these components are hidden) and the bracket will be in one column.
4
4
 
data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx CHANGED
@@ -5,6 +5,8 @@ import { GlobalProps, globalProps, globalInlineProps } from '../../utilities/glo
5
5
 
6
6
  import Card from '../../pb_card/_card'
7
7
  import SectionSeparator from '../../pb_section_separator/_section_separator'
8
+ import Body from '../../pb_body/_body'
9
+ import Flex from '../../pb_flex/_flex'
8
10
 
9
11
  type LayoutGameProps = {
10
12
  children: React.ReactNode[] | React.ReactNode,
@@ -18,66 +20,101 @@ type LayoutGameProps = {
18
20
  const Game = (props: LayoutGameProps) => {
19
21
  const { children, className, numberOfRounds, numberOfGames, isOdd } = props
20
22
  const dynamicInlineProps = globalInlineProps(props)
21
-
23
+
22
24
  const numberOfChildren = Array.isArray(children) ? children.length : 0
23
-
25
+
24
26
  const isMultiple = Array.isArray(children)
25
-
27
+
26
28
  let ratio = 0
27
29
  let exponent
28
30
  if (numberOfGames > 1) {
29
31
  exponent = (numberOfRounds) - Math.log2(numberOfGames) - 1
30
32
  ratio = 2 ** exponent
31
33
  }
32
-
34
+
35
+ let hasWinner = false
33
36
  if (numberOfChildren === 2) {
34
37
  const [firstChild, secondChild] = React.Children.toArray(children)
35
-
36
- if (React.isValidElement(firstChild) && React.isValidElement(secondChild)) {
37
- return (
38
- <div
39
- className={classnames('layout_game', globalProps(props), className)}
40
- style={dynamicInlineProps}
41
- >
42
- <Card
43
- marginY="xs"
44
- padding="none"
45
- shadow="deep"
38
+
39
+ if (React.isValidElement(firstChild) && React.isValidElement(secondChild)) {
40
+ if ('winner' in firstChild.props || 'winner' in secondChild.props) {
41
+ hasWinner = true
42
+ }
43
+ return (
44
+ <div
45
+ className={classnames('layout_game', globalProps(props), className)}
46
+ style={dynamicInlineProps}
46
47
  >
47
- <Card.Body padding="xs">{firstChild}</Card.Body>
48
- <SectionSeparator />
49
- <Card.Body padding="xs">{secondChild}</Card.Body>
50
- </Card>
51
- {isOdd && numberOfGames > 1 &&
52
- <div
53
- className="half_box"
54
- style={{ height: `calc(${ratio} * 100% + 4px)` }}
55
- />
56
- }
57
- </div>
48
+ <Card
49
+ marginY="xs"
50
+ overflow="hidden"
51
+ padding="none"
52
+ shadow="deep"
53
+ >
54
+ <Card.Body padding="none">{firstChild}</Card.Body>
55
+ <SectionSeparator />
56
+ <Card.Body padding="none">{secondChild}</Card.Body>
57
+ </Card>
58
+ {isOdd && numberOfGames > 1 &&
59
+ <div
60
+ className="half_box"
61
+ style={{ height: `calc(${ratio} * 100% + 4px)` }}
62
+ />
63
+ }
64
+ {numberOfGames > 1 && hasWinner &&
65
+ <div className="polygon_node" />
66
+ }
67
+ </div>
58
68
  )
59
69
  }
60
70
  }
61
-
71
+
62
72
  return (
63
73
  <div
64
74
  className={classnames('layout_game', globalProps(props), className)}
65
75
  style={dynamicInlineProps}
66
76
  >
67
- {((!isMultiple && children) || numberOfChildren >= 1 )? (
68
- children
69
- ) : (
70
- <Card
71
- marginY="xs"
72
- padding="none"
73
- shadow="deep"
74
- >
75
- <Card.Body padding="xs">To be determined...</Card.Body>
76
- <SectionSeparator />
77
- <Card.Body padding="xs">To be determined...</Card.Body>
78
- </Card>
79
- )}
80
- {isOdd && numberOfGames > 1 &&
77
+ {((!isMultiple && children) || numberOfChildren >= 1) ? (
78
+ children
79
+ ) : (
80
+ <Card
81
+ height="123px"
82
+ marginY="xs"
83
+ padding="none"
84
+ shadow="deep"
85
+ >
86
+ <Card.Body
87
+ flexGrow={1}
88
+ padding="xs"
89
+ >
90
+ <Flex
91
+ height="100%"
92
+ justify="center"
93
+ orientation="column"
94
+ >
95
+ <Body color="lighter">
96
+ To be determined...
97
+ </Body>
98
+ </Flex>
99
+ </Card.Body>
100
+ <SectionSeparator />
101
+ <Card.Body
102
+ flexGrow={1}
103
+ padding="xs"
104
+ >
105
+ <Flex
106
+ height="100%"
107
+ justify="center"
108
+ orientation="column"
109
+ >
110
+ <Body color="lighter">
111
+ To be determined...
112
+ </Body>
113
+ </Flex>
114
+ </Card.Body>
115
+ </Card>
116
+ )}
117
+ {isOdd && numberOfGames > 1 &&
81
118
  <div
82
119
  className="half_box"
83
120
  style={{ height: `calc(${ratio} * 100% + 4px)` }}