graphql_playground-rails 2.0.1 → 2.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (13) hide show
  1. checksums.yaml +5 -5
  2. data/README.md +23 -0
  3. data/app/controllers/graphql_playground/rails/application_controller.rb +0 -5
  4. data/app/views/graphql_playground/rails/application/index.html.erb +7 -7
  5. data/app/views/layouts/graphql_playground/rails/application.html.erb +484 -6
  6. data/lib/graphql_playground/rails.rb +10 -1
  7. data/lib/graphql_playground/rails/config.rb +53 -0
  8. data/lib/graphql_playground/rails/version.rb +1 -2
  9. metadata +4 -14
  10. data/app/assets/config/graphql_playground_rails_manifest.js +0 -2
  11. data/app/assets/javascripts/graphql_playground/rails/application.js +0 -1
  12. data/app/assets/stylesheets/graphql_playground/rails/application.css +0 -4
  13. data/app/assets/stylesheets/graphql_playground/rails/graphql_playground.css +0 -464
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
- SHA1:
3
- metadata.gz: c903c1a51c787fb81974054f5cc74d827ec04a97
4
- data.tar.gz: 19f75c6d7752c579bf14623d80b989d068a721a0
2
+ SHA256:
3
+ metadata.gz: 4cd678f6c213309c00a0b2c124b33bb6ecab72dc9c89d10b6b31c637905a06ba
4
+ data.tar.gz: 5f77c53c0132b521d291c8522bcffe3cd9ac63b04d1bd5abd678bb55edb48b89
5
5
  SHA512:
6
- metadata.gz: 39ee6283883ec387d77abf644738a1103a90bacab4b752cbdfd7435cf4945e5a9196ca10befa44d26480f53756bf232b0c20dc96e31d21664e17633486782d77
7
- data.tar.gz: 82d201a52f227ea5bfdbb7c0ef80172b70b532eaf33e40d1ae40ba24cda0b538f12ed6569269ad700aea155518aba3ba84bf3600e5ec9b7b72d2a66f71fec75f
6
+ metadata.gz: 93703baca4737e6f653426a112db7dcda6acc0fcfdd48e4428c875f336f3a95811ab22265c79af6282926a36e0b45582c4b03eb7b5268e5a8d27f32094858166
7
+ data.tar.gz: 7b25c1ad46b5a3af45f9bdbc3c95434696475a23bd9cc05ce831524be31759f52023d05a2b74907bbdba3b7beb7f89c568c4205b549180f25546c3937ca82731
data/README.md CHANGED
@@ -33,6 +33,29 @@ Rails.application.routes.draw do
33
33
  end
34
34
  ```
35
35
 
36
+ ### Configure
37
+
38
+ ```ruby
39
+ # config/initilizers/graphql_playground.rb
40
+ # All config options have a default that sould work out of the box
41
+ GraphqlPlayground::Rails.configure do |config|
42
+ config.headers = {
43
+ 'X-Auth-Header' => (view_context) -> { "123" }
44
+ }
45
+ config.title = "Playground"
46
+ config.csrf = true
47
+ config.playground_version = "latest"
48
+ # Ideally the assets would be added to your projects `vendor/assets` directories
49
+ config.favicon = "/assets/playground.ico"
50
+ config.playground_js_url = "/assets/playground.js"
51
+ config.playground_css_url = "/assets/playground.css"
52
+ # see: https://github.com/prisma-labs/graphql-playground#settings
53
+ config.settings = {
54
+ "editor.polling.enable": false
55
+ }
56
+ end
57
+ ```
58
+
36
59
  ## Contributing
37
60
 
38
61
  Submit a PR.
data/app/controllers/graphql_playground/rails/application_controller.rb CHANGED
@@ -10,11 +10,6 @@ module GraphqlPlayground
10
10
  def get_endpoint_url
11
11
  params[:graphql_path] || raise(%|You must include `graphql_path: "/my/endpoint"` when mounting GraphqlPlayground::Rails::Engine|)
12
12
  end
13
-
14
- helper_method :get_playground_version
15
- def get_playground_version
16
- GraphqlPlayground::Rails::PLAYGROUND_VERSION
17
- end
18
13
  end
19
14
  end
20
15
  end
data/app/views/graphql_playground/rails/application/index.html.erb CHANGED
@@ -36,21 +36,21 @@
36
36
  <span class="dGfHfc">GraphQL Playground</span>
37
37
  </div>
38
38
  </div>
39
- <div id="root" ></div>
39
+
40
+ <div id="root" />
41
+
40
42
  <script type="text/javascript">
41
43
  window.addEventListener('load', function (event) {
42
44
  const loadingWrapper = document.getElementById('loading-wrapper');
43
- if (loadingWrapper) {
44
- loadingWrapper.classList.add('fadeOut');
45
- }
45
+ loadingWrapper.classList.add('fadeOut');
46
46
  const root = document.getElementById('root');
47
47
  root.classList.add('playgroundIn');
48
48
 
49
49
  GraphQLPlayground.init(root, {
50
+ "canSaveConfig": false,
50
51
  "endpoint": "<%= get_endpoint_url %>",
51
- "settings": {
52
- "request.credentials": "include"
53
- }
52
+ "settings": <%= raw(GraphqlPlayground::Rails.config.all_settings.to_json) %>,
53
+ "headers": <%= raw(GraphqlPlayground::Rails.config.resolve_headers(self).to_json) %>
54
54
  });
55
55
  });
56
56
  </script>
data/app/views/layouts/graphql_playground/rails/application.html.erb CHANGED
@@ -4,15 +4,493 @@
4
4
  <%= csrf_meta_tags %>
5
5
  <meta charset=utf-8 />
6
6
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
7
- <link rel="shortcut icon" href="https://graphcool-playground.netlify.com/favicon.png">
7
+ <% if GraphqlPlayground::Rails.config.title.present? %>
8
+ <title><%= GraphqlPlayground::Rails.config.title %></title>
9
+ <% else %>
8
10
  <title>GraphQL Playground</title>
11
+ <% end %>
9
12
 
10
- <%= stylesheet_link_tag "graphql_playground/rails/application", media: "all" %>
11
- <%= javascript_include_tag "graphql_playground/rails/application" %>
13
+ <style type="text/css">
14
+ html {
15
+ font-family: "Open Sans", sans-serif;
16
+ overflow: hidden;
17
+ }
12
18
 
13
- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/graphql-playground-react@<%= get_playground_version %>/build/static/css/index.css" />
14
- <link rel="shortcut icon" href="//cdn.jsdelivr.net/npm/graphql-playground-react@<%= get_playground_version %>/build/favicon.png" />
15
- <script src="//cdn.jsdelivr.net/npm/graphql-playground-react@<%= get_playground_version %>/build/static/js/middleware.js"></script>
19
+ body {
20
+ margin: 0;
21
+ background: #172a3a;
22
+ }
23
+
24
+ .playgroundIn {
25
+ -webkit-animation: playgroundIn 0.5s ease-out forwards;
26
+ animation: playgroundIn 0.5s ease-out forwards;
27
+ }
28
+
29
+ @-webkit-keyframes playgroundIn {
30
+ from {
31
+ opacity: 0;
32
+ -webkit-transform: translateY(10px);
33
+ -ms-transform: translateY(10px);
34
+ transform: translateY(10px);
35
+ }
36
+ to {
37
+ opacity: 1;
38
+ -webkit-transform: translateY(0);
39
+ -ms-transform: translateY(0);
40
+ transform: translateY(0);
41
+ }
42
+ }
43
+
44
+ @keyframes playgroundIn {
45
+ from {
46
+ opacity: 0;
47
+ -webkit-transform: translateY(10px);
48
+ -ms-transform: translateY(10px);
49
+ transform: translateY(10px);
50
+ }
51
+ to {
52
+ opacity: 1;
53
+ -webkit-transform: translateY(0);
54
+ -ms-transform: translateY(0);
55
+ transform: translateY(0);
56
+ }
57
+ }
58
+ .fadeOut {
59
+ -webkit-animation: fadeOut 0.5s ease-out forwards;
60
+ animation: fadeOut 0.5s ease-out forwards;
61
+ }
62
+
63
+ @-webkit-keyframes fadeIn {
64
+ from {
65
+ opacity: 0;
66
+ -webkit-transform: translateY(-10px);
67
+ -ms-transform: translateY(-10px);
68
+ transform: translateY(-10px);
69
+ }
70
+ to {
71
+ opacity: 1;
72
+ -webkit-transform: translateY(0);
73
+ -ms-transform: translateY(0);
74
+ transform: translateY(0);
75
+ }
76
+ }
77
+
78
+ @keyframes fadeIn {
79
+ from {
80
+ opacity: 0;
81
+ -webkit-transform: translateY(-10px);
82
+ -ms-transform: translateY(-10px);
83
+ transform: translateY(-10px);
84
+ }
85
+ to {
86
+ opacity: 1;
87
+ -webkit-transform: translateY(0);
88
+ -ms-transform: translateY(0);
89
+ transform: translateY(0);
90
+ }
91
+ }
92
+
93
+ @-webkit-keyframes fadeOut {
94
+ from {
95
+ opacity: 1;
96
+ -webkit-transform: translateY(0);
97
+ -ms-transform: translateY(0);
98
+ transform: translateY(0);
99
+ }
100
+ to {
101
+ opacity: 0;
102
+ -webkit-transform: translateY(-10px);
103
+ -ms-transform: translateY(-10px);
104
+ transform: translateY(-10px);
105
+ }
106
+ }
107
+
108
+ @keyframes fadeOut {
109
+ from {
110
+ opacity: 1;
111
+ -webkit-transform: translateY(0);
112
+ -ms-transform: translateY(0);
113
+ transform: translateY(0);
114
+ }
115
+ to {
116
+ opacity: 0;
117
+ -webkit-transform: translateY(-10px);
118
+ -ms-transform: translateY(-10px);
119
+ transform: translateY(-10px);
120
+ }
121
+ }
122
+
123
+ @-webkit-keyframes appearIn {
124
+ from {
125
+ opacity: 0;
126
+ -webkit-transform: translateY(0px);
127
+ -ms-transform: translateY(0px);
128
+ transform: translateY(0px);
129
+ }
130
+ to {
131
+ opacity: 1;
132
+ -webkit-transform: translateY(0);
133
+ -ms-transform: translateY(0);
134
+ transform: translateY(0);
135
+ }
136
+ }
137
+
138
+ @keyframes appearIn {
139
+ from {
140
+ opacity: 0;
141
+ -webkit-transform: translateY(0px);
142
+ -ms-transform: translateY(0px);
143
+ transform: translateY(0px);
144
+ }
145
+ to {
146
+ opacity: 1;
147
+ -webkit-transform: translateY(0);
148
+ -ms-transform: translateY(0);
149
+ transform: translateY(0);
150
+ }
151
+ }
152
+
153
+ @-webkit-keyframes scaleIn {
154
+ from {
155
+ -webkit-transform: scale(0);
156
+ -ms-transform: scale(0);
157
+ transform: scale(0);
158
+ }
159
+ to {
160
+ -webkit-transform: scale(1);
161
+ -ms-transform: scale(1);
162
+ transform: scale(1);
163
+ }
164
+ }
165
+
166
+ @keyframes scaleIn {
167
+ from {
168
+ -webkit-transform: scale(0);
169
+ -ms-transform: scale(0);
170
+ transform: scale(0);
171
+ }
172
+ to {
173
+ -webkit-transform: scale(1);
174
+ -ms-transform: scale(1);
175
+ transform: scale(1);
176
+ }
177
+ }
178
+
179
+ @-webkit-keyframes innerDrawIn {
180
+ 0% {
181
+ stroke-dashoffset: 70;
182
+ }
183
+ 50% {
184
+ stroke-dashoffset: 140;
185
+ }
186
+ 100% {
187
+ stroke-dashoffset: 210;
188
+ }
189
+ }
190
+
191
+ @keyframes innerDrawIn {
192
+ 0% {
193
+ stroke-dashoffset: 70;
194
+ }
195
+ 50% {
196
+ stroke-dashoffset: 140;
197
+ }
198
+ 100% {
199
+ stroke-dashoffset: 210;
200
+ }
201
+ }
202
+
203
+ @-webkit-keyframes outerDrawIn {
204
+ 0% {
205
+ stroke-dashoffset: 76;
206
+ }
207
+ 100% {
208
+ stroke-dashoffset: 152;
209
+ }
210
+ }
211
+
212
+ @keyframes outerDrawIn {
213
+ 0% {
214
+ stroke-dashoffset: 76;
215
+ }
216
+ 100% {
217
+ stroke-dashoffset: 152;
218
+ }
219
+ }
220
+
221
+ .hHWjkv {
222
+ -webkit-transform-origin: 0px 0px;
223
+ -ms-transform-origin: 0px 0px;
224
+ transform-origin: 0px 0px;
225
+ -webkit-transform: scale(0);
226
+ -ms-transform: scale(0);
227
+ transform: scale(0);
228
+ -webkit-animation: scaleIn 0.25s linear forwards 0.2222222222222222s;
229
+ animation: scaleIn 0.25s linear forwards 0.2222222222222222s;
230
+ }
231
+
232
+ .gCDOzd {
233
+ -webkit-transform-origin: 0px 0px;
234
+ -ms-transform-origin: 0px 0px;
235
+ transform-origin: 0px 0px;
236
+ -webkit-transform: scale(0);
237
+ -ms-transform: scale(0);
238
+ transform: scale(0);
239
+ -webkit-animation: scaleIn 0.25s linear forwards 0.4222222222222222s;
240
+ animation: scaleIn 0.25s linear forwards 0.4222222222222222s;
241
+ }
242
+
243
+ .hmCcxi {
244
+ -webkit-transform-origin: 0px 0px;
245
+ -ms-transform-origin: 0px 0px;
246
+ transform-origin: 0px 0px;
247
+ -webkit-transform: scale(0);
248
+ -ms-transform: scale(0);
249
+ transform: scale(0);
250
+ -webkit-animation: scaleIn 0.25s linear forwards 0.6222222222222222s;
251
+ animation: scaleIn 0.25s linear forwards 0.6222222222222222s;
252
+ }
253
+
254
+ .eHamQi {
255
+ -webkit-transform-origin: 0px 0px;
256
+ -ms-transform-origin: 0px 0px;
257
+ transform-origin: 0px 0px;
258
+ -webkit-transform: scale(0);
259
+ -ms-transform: scale(0);
260
+ transform: scale(0);
261
+ -webkit-animation: scaleIn 0.25s linear forwards 0.8222222222222223s;
262
+ animation: scaleIn 0.25s linear forwards 0.8222222222222223s;
263
+ }
264
+
265
+ .byhgGu {
266
+ -webkit-transform-origin: 0px 0px;
267
+ -ms-transform-origin: 0px 0px;
268
+ transform-origin: 0px 0px;
269
+ -webkit-transform: scale(0);
270
+ -ms-transform: scale(0);
271
+ transform: scale(0);
272
+ -webkit-animation: scaleIn 0.25s linear forwards 1.0222222222222221s;
273
+ animation: scaleIn 0.25s linear forwards 1.0222222222222221s;
274
+ }
275
+
276
+ .llAKP {
277
+ -webkit-transform-origin: 0px 0px;
278
+ -ms-transform-origin: 0px 0px;
279
+ transform-origin: 0px 0px;
280
+ -webkit-transform: scale(0);
281
+ -ms-transform: scale(0);
282
+ transform: scale(0);
283
+ -webkit-animation: scaleIn 0.25s linear forwards 1.2222222222222223s;
284
+ animation: scaleIn 0.25s linear forwards 1.2222222222222223s;
285
+ }
286
+
287
+ .bglIGM {
288
+ -webkit-transform-origin: 64px 28px;
289
+ -ms-transform-origin: 64px 28px;
290
+ transform-origin: 64px 28px;
291
+ -webkit-transform: scale(0);
292
+ -ms-transform: scale(0);
293
+ transform: scale(0);
294
+ -webkit-animation: scaleIn 0.25s linear forwards 0.2222222222222222s;
295
+ animation: scaleIn 0.25s linear forwards 0.2222222222222222s;
296
+ }
297
+
298
+ .ksxRII {
299
+ -webkit-transform-origin: 95.98500061035156px 46.510000228881836px;
300
+ -ms-transform-origin: 95.98500061035156px 46.510000228881836px;
301
+ transform-origin: 95.98500061035156px 46.510000228881836px;
302
+ -webkit-transform: scale(0);
303
+ -ms-transform: scale(0);
304
+ transform: scale(0);
305
+ -webkit-animation: scaleIn 0.25s linear forwards 0.4222222222222222s;
306
+ animation: scaleIn 0.25s linear forwards 0.4222222222222222s;
307
+ }
308
+
309
+ .cWrBmb {
310
+ -webkit-transform-origin: 95.97162628173828px 83.4900016784668px;
311
+ -ms-transform-origin: 95.97162628173828px 83.4900016784668px;
312
+ transform-origin: 95.97162628173828px 83.4900016784668px;
313
+ -webkit-transform: scale(0);
314
+ -ms-transform: scale(0);
315
+ transform: scale(0);
316
+ -webkit-animation: scaleIn 0.25s linear forwards 0.6222222222222222s;
317
+ animation: scaleIn 0.25s linear forwards 0.6222222222222222s;
318
+ }
319
+
320
+ .Wnusb {
321
+ -webkit-transform-origin: 64px 101.97999572753906px;
322
+ -ms-transform-origin: 64px 101.97999572753906px;
323
+ transform-origin: 64px 101.97999572753906px;
324
+ -webkit-transform: scale(0);
325
+ -ms-transform: scale(0);
326
+ transform: scale(0);
327
+ -webkit-animation: scaleIn 0.25s linear forwards 0.8222222222222223s;
328
+ animation: scaleIn 0.25s linear forwards 0.8222222222222223s;
329
+ }
330
+
331
+ .bfPqf {
332
+ -webkit-transform-origin: 32.03982162475586px 83.4900016784668px;
333
+ -ms-transform-origin: 32.03982162475586px 83.4900016784668px;
334
+ transform-origin: 32.03982162475586px 83.4900016784668px;
335
+ -webkit-transform: scale(0);
336
+ -ms-transform: scale(0);
337
+ transform: scale(0);
338
+ -webkit-animation: scaleIn 0.25s linear forwards 1.0222222222222221s;
339
+ animation: scaleIn 0.25s linear forwards 1.0222222222222221s;
340
+ }
341
+
342
+ .edRCTN {
343
+ -webkit-transform-origin: 32.033552169799805px 46.510000228881836px;
344
+ -ms-transform-origin: 32.033552169799805px 46.510000228881836px;
345
+ transform-origin: 32.033552169799805px 46.510000228881836px;
346
+ -webkit-transform: scale(0);
347
+ -ms-transform: scale(0);
348
+ transform: scale(0);
349
+ -webkit-animation: scaleIn 0.25s linear forwards 1.2222222222222223s;
350
+ animation: scaleIn 0.25s linear forwards 1.2222222222222223s;
351
+ }
352
+
353
+ .iEGVWn {
354
+ opacity: 0;
355
+ stroke-dasharray: 76;
356
+ -webkit-animation: outerDrawIn 0.5s ease-out forwards 0.3333333333333333s, appearIn 0.1s ease-out forwards 0.3333333333333333s;
357
+ animation: outerDrawIn 0.5s ease-out forwards 0.3333333333333333s, appearIn 0.1s ease-out forwards 0.3333333333333333s;
358
+ -webkit-animation-iteration-count: 1, 1;
359
+ animation-iteration-count: 1, 1;
360
+ }
361
+
362
+ .bsocdx {
363
+ opacity: 0;
364
+ stroke-dasharray: 76;
365
+ -webkit-animation: outerDrawIn 0.5s ease-out forwards 0.5333333333333333s, appearIn 0.1s ease-out forwards 0.5333333333333333s;
366
+ animation: outerDrawIn 0.5s ease-out forwards 0.5333333333333333s, appearIn 0.1s ease-out forwards 0.5333333333333333s;
367
+ -webkit-animation-iteration-count: 1, 1;
368
+ animation-iteration-count: 1, 1;
369
+ }
370
+
371
+ .jAZXmP {
372
+ opacity: 0;
373
+ stroke-dasharray: 76;
374
+ -webkit-animation: outerDrawIn 0.5s ease-out forwards 0.7333333333333334s, appearIn 0.1s ease-out forwards 0.7333333333333334s;
375
+ animation: outerDrawIn 0.5s ease-out forwards 0.7333333333333334s, appearIn 0.1s ease-out forwards 0.7333333333333334s;
376
+ -webkit-animation-iteration-count: 1, 1;
377
+ animation-iteration-count: 1, 1;
378
+ }
379
+
380
+ .hSeArx {
381
+ opacity: 0;
382
+ stroke-dasharray: 76;
383
+ -webkit-animation: outerDrawIn 0.5s ease-out forwards 0.9333333333333333s, appearIn 0.1s ease-out forwards 0.9333333333333333s;
384
+ animation: outerDrawIn 0.5s ease-out forwards 0.9333333333333333s, appearIn 0.1s ease-out forwards 0.9333333333333333s;
385
+ -webkit-animation-iteration-count: 1, 1;
386
+ animation-iteration-count: 1, 1;
387
+ }
388
+
389
+ .bVgqGk {
390
+ opacity: 0;
391
+ stroke-dasharray: 76;
392
+ -webkit-animation: outerDrawIn 0.5s ease-out forwards 1.1333333333333333s, appearIn 0.1s ease-out forwards 1.1333333333333333s;
393
+ animation: outerDrawIn 0.5s ease-out forwards 1.1333333333333333s, appearIn 0.1s ease-out forwards 1.1333333333333333s;
394
+ -webkit-animation-iteration-count: 1, 1;
395
+ animation-iteration-count: 1, 1;
396
+ }
397
+
398
+ .hEFqBt {
399
+ opacity: 0;
400
+ stroke-dasharray: 76;
401
+ -webkit-animation: outerDrawIn 0.5s ease-out forwards 1.3333333333333333s, appearIn 0.1s ease-out forwards 1.3333333333333333s;
402
+ animation: outerDrawIn 0.5s ease-out forwards 1.3333333333333333s, appearIn 0.1s ease-out forwards 1.3333333333333333s;
403
+ -webkit-animation-iteration-count: 1, 1;
404
+ animation-iteration-count: 1, 1;
405
+ }
406
+
407
+ .dzEKCM {
408
+ opacity: 0;
409
+ stroke-dasharray: 70;
410
+ -webkit-animation: innerDrawIn 1s ease-in-out forwards 1.3666666666666667s, appearIn 0.1s linear forwards 1.3666666666666667s;
411
+ animation: innerDrawIn 1s ease-in-out forwards 1.3666666666666667s, appearIn 0.1s linear forwards 1.3666666666666667s;
412
+ -webkit-animation-iteration-count: infinite, 1;
413
+ animation-iteration-count: infinite, 1;
414
+ }
415
+
416
+ .DYnPx {
417
+ opacity: 0;
418
+ stroke-dasharray: 70;
419
+ -webkit-animation: innerDrawIn 1s ease-in-out forwards 1.5333333333333332s, appearIn 0.1s linear forwards 1.5333333333333332s;
420
+ animation: innerDrawIn 1s ease-in-out forwards 1.5333333333333332s, appearIn 0.1s linear forwards 1.5333333333333332s;
421
+ -webkit-animation-iteration-count: infinite, 1;
422
+ animation-iteration-count: infinite, 1;
423
+ }
424
+
425
+ .hjPEAQ {
426
+ opacity: 0;
427
+ stroke-dasharray: 70;
428
+ -webkit-animation: innerDrawIn 1s ease-in-out forwards 1.7000000000000002s, appearIn 0.1s linear forwards 1.7000000000000002s;
429
+ animation: innerDrawIn 1s ease-in-out forwards 1.7000000000000002s, appearIn 0.1s linear forwards 1.7000000000000002s;
430
+ -webkit-animation-iteration-count: infinite, 1;
431
+ animation-iteration-count: infinite, 1;
432
+ }
433
+
434
+ #loading-wrapper {
435
+ position: absolute;
436
+ width: 100vw;
437
+ height: 100vh;
438
+ display: -webkit-box;
439
+ display: -webkit-flex;
440
+ display: -ms-flexbox;
441
+ display: flex;
442
+ -webkit-align-items: center;
443
+ -webkit-box-align: center;
444
+ -ms-flex-align: center;
445
+ align-items: center;
446
+ -webkit-box-pack: center;
447
+ -webkit-justify-content: center;
448
+ -ms-flex-pack: center;
449
+ justify-content: center;
450
+ -webkit-flex-direction: column;
451
+ -ms-flex-direction: column;
452
+ flex-direction: column;
453
+ }
454
+
455
+ .logo {
456
+ width: 75px;
457
+ height: 75px;
458
+ margin-bottom: 20px;
459
+ opacity: 0;
460
+ -webkit-animation: fadeIn 0.5s ease-out forwards;
461
+ animation: fadeIn 0.5s ease-out forwards;
462
+ }
463
+
464
+ .text {
465
+ font-size: 32px;
466
+ font-weight: 200;
467
+ text-align: center;
468
+ color: rgba(255, 255, 255, 0.6);
469
+ opacity: 0;
470
+ -webkit-animation: fadeIn 0.5s ease-out forwards;
471
+ animation: fadeIn 0.5s ease-out forwards;
472
+ }
473
+
474
+ .dGfHfc {
475
+ font-weight: 400;
476
+ }
477
+ </style>
478
+
479
+ <% if GraphqlPlayground::Rails.config.playground_css_url.present? %>
480
+ <link rel="stylesheet" href="<%= GraphqlPlayground::Rails.config.playground_css_url %>" />
481
+ <% else %>
482
+ <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/graphql-playground-react@<%= GraphqlPlayground::Rails.config.playground_version %>/build/static/css/index.css" />
483
+ <% end %>
484
+ <% if GraphqlPlayground::Rails.config.logo %>
485
+ <link rel="shortcut icon" href="<%= GraphqlPlayground::Rails.config.favicon %>" />
486
+ <% else %>
487
+ <link rel="shortcut icon" href="//cdn.jsdelivr.net/npm/graphql-playground-react@<%= GraphqlPlayground::Rails.config.playground_version %>/build/favicon.png" />
488
+ <% end %>
489
+ <% if GraphqlPlayground::Rails.config.playground_js_url.present? %>
490
+ <script src="<%= GraphqlPlayground::Rails.config.playground_js_url %>"></script>
491
+ <% else %>
492
+ <script src="//cdn.jsdelivr.net/npm/graphql-playground-react@<%= GraphqlPlayground::Rails.config.playground_version %>/build/static/js/middleware.js"></script>
493
+ <% end %>
16
494
  </head>
17
495
  <body>
18
496
  <%= yield %>
data/lib/graphql_playground/rails.rb CHANGED
@@ -1,8 +1,17 @@
1
1
  require "graphql_playground/rails/engine"
2
2
  require "graphql_playground/rails/version"
3
+ require "graphql_playground/rails/config"
3
4
 
4
5
  module GraphqlPlayground
5
6
  module Rails
6
- # Your code goes here...
7
+ class << self
8
+ attr_accessor :config
9
+
10
+ def configure
11
+ yield config if block_given?
12
+ end
13
+ end
14
+
15
+ self.config = Config.new
7
16
  end
8
17
  end
data/lib/graphql_playground/rails/config.rb ADDED
@@ -0,0 +1,53 @@
1
+ module GraphqlPlayground
2
+ module Rails
3
+ class Config
4
+ # @example Adding a header to the request
5
+ # config.headers["My-Header"] = -> (view_context) { "My-Value" }
6
+ #
7
+ # @return [Hash<String => Proc>] Keys are headers to include in GraphQL requests, values are `->(view_context) { ... }` procs to determin values
8
+ attr_accessor :headers
9
+
10
+ attr_accessor :settings, :csrf, :title, :logo, :playground_version, :playground_js_url, :playground_css_url
11
+
12
+ DEFAULT_HEADERS = {
13
+ 'Content-Type' => ->(_) { 'application/json' },
14
+ }
15
+
16
+ CSRF_TOKEN_HEADER = {
17
+ "X-CSRF-Token" => -> (view_context) { view_context.form_authenticity_token }
18
+ }
19
+
20
+ DEFAULT_SETTINGS = {
21
+ "request.credentials": "include"
22
+ }
23
+
24
+ def initialize()
25
+ @title = nil
26
+ @favicon = nil
27
+ @csrf = true
28
+ @headers = DEFAULT_HEADERS
29
+ @playground_version = 'latest'
30
+ @playground_js_url = nil
31
+ @playground_css_url = nil
32
+ @settings = {}
33
+ end
34
+
35
+ # Call defined procs, add CSRF token if specified
36
+ def resolve_headers(view_context)
37
+ all_headers = DEFAULT_HEADERS.merge(headers)
38
+
39
+ if csrf
40
+ all_headers = all_headers.merge(CSRF_TOKEN_HEADER)
41
+ end
42
+
43
+ all_headers.each_with_object({}) do |(key, value), memo|
44
+ memo[key] = value.call(view_context)
45
+ end
46
+ end
47
+
48
+ def all_settings
49
+ DEFAULT_SETTINGS.merge(settings)
50
+ end
51
+ end
52
+ end
53
+ end
data/lib/graphql_playground/rails/version.rb CHANGED
@@ -1,6 +1,5 @@
1
1
  module GraphqlPlayground
2
2
  module Rails
3
- VERSION = '2.0.1'
4
- PLAYGROUND_VERSION = 'latest'
3
+ VERSION = '2.1.0'
5
4
  end
6
5
  end
metadata CHANGED
@@ -1,22 +1,19 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: graphql_playground-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 2.0.1
4
+ version: 2.1.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Ethan Apodaca
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2018-10-20 00:00:00.000000000 Z
11
+ date: 2020-03-15 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails
15
15
  requirement: !ruby/object:Gem::Requirement
16
16
  requirements:
17
- - - "~>"
18
- - !ruby/object:Gem::Version
19
- version: '5.1'
20
17
  - - ">="
21
18
  - !ruby/object:Gem::Version
22
19
  version: 5.1.0
@@ -24,9 +21,6 @@ dependencies:
24
21
  prerelease: false
25
22
  version_requirements: !ruby/object:Gem::Requirement
26
23
  requirements:
27
- - - "~>"
28
- - !ruby/object:Gem::Version
29
- version: '5.1'
30
24
  - - ">="
31
25
  - !ruby/object:Gem::Version
32
26
  version: 5.1.0
@@ -40,15 +34,12 @@ files:
40
34
  - LICENSE
41
35
  - README.md
42
36
  - Rakefile
43
- - app/assets/config/graphql_playground_rails_manifest.js
44
- - app/assets/javascripts/graphql_playground/rails/application.js
45
- - app/assets/stylesheets/graphql_playground/rails/application.css
46
- - app/assets/stylesheets/graphql_playground/rails/graphql_playground.css
47
37
  - app/controllers/graphql_playground/rails/application_controller.rb
48
38
  - app/views/graphql_playground/rails/application/index.html.erb
49
39
  - app/views/layouts/graphql_playground/rails/application.html.erb
50
40
  - config/routes.rb
51
41
  - lib/graphql_playground/rails.rb
42
+ - lib/graphql_playground/rails/config.rb
52
43
  - lib/graphql_playground/rails/engine.rb
53
44
  - lib/graphql_playground/rails/version.rb
54
45
  - lib/tasks/graphql_playground/rails_tasks.rake
@@ -71,8 +62,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
71
62
  - !ruby/object:Gem::Version
72
63
  version: '0'
73
64
  requirements: []
74
- rubyforge_project:
75
- rubygems_version: 2.5.2.3
65
+ rubygems_version: 3.0.6
76
66
  signing_key:
77
67
  specification_version: 4
78
68
  summary: An engine to provide the GraphQL Playground
data/app/assets/config/graphql_playground_rails_manifest.js DELETED
@@ -1,2 +0,0 @@
1
- //= link_directory ../javascripts/graphql_playground/rails .js
2
- //= link_directory ../stylesheets/graphql_playground/rails .css
data/app/assets/stylesheets/graphql_playground/rails/application.css DELETED
@@ -1,4 +0,0 @@
1
- /*
2
- *= require_tree .
3
- *= require_self
4
- */
data/app/assets/stylesheets/graphql_playground/rails/graphql_playground.css DELETED
@@ -1,464 +0,0 @@
1
- html {
2
- font-family: "Open Sans", sans-serif;
3
- overflow: hidden;
4
- }
5
-
6
- body {
7
- margin: 0;
8
- background: #172a3a;
9
- }
10
-
11
- .playgroundIn {
12
- -webkit-animation: playgroundIn 0.5s ease-out forwards;
13
- animation: playgroundIn 0.5s ease-out forwards;
14
- }
15
-
16
- @-webkit-keyframes playgroundIn {
17
- from {
18
- opacity: 0;
19
- -webkit-transform: translateY(10px);
20
- -ms-transform: translateY(10px);
21
- transform: translateY(10px);
22
- }
23
- to {
24
- opacity: 1;
25
- -webkit-transform: translateY(0);
26
- -ms-transform: translateY(0);
27
- transform: translateY(0);
28
- }
29
- }
30
-
31
- @keyframes playgroundIn {
32
- from {
33
- opacity: 0;
34
- -webkit-transform: translateY(10px);
35
- -ms-transform: translateY(10px);
36
- transform: translateY(10px);
37
- }
38
- to {
39
- opacity: 1;
40
- -webkit-transform: translateY(0);
41
- -ms-transform: translateY(0);
42
- transform: translateY(0);
43
- }
44
- }
45
-
46
- .fadeOut {
47
- -webkit-animation: fadeOut 0.5s ease-out forwards;
48
- animation: fadeOut 0.5s ease-out forwards;
49
- }
50
-
51
- @-webkit-keyframes fadeIn {
52
- from {
53
- opacity: 0;
54
- -webkit-transform: translateY(-10px);
55
- -ms-transform: translateY(-10px);
56
- transform: translateY(-10px);
57
- }
58
- to {
59
- opacity: 1;
60
- -webkit-transform: translateY(0);
61
- -ms-transform: translateY(0);
62
- transform: translateY(0);
63
- }
64
- }
65
-
66
- @keyframes fadeIn {
67
- from {
68
- opacity: 0;
69
- -webkit-transform: translateY(-10px);
70
- -ms-transform: translateY(-10px);
71
- transform: translateY(-10px);
72
- }
73
- to {
74
- opacity: 1;
75
- -webkit-transform: translateY(0);
76
- -ms-transform: translateY(0);
77
- transform: translateY(0);
78
- }
79
- }
80
-
81
- @-webkit-keyframes fadeOut {
82
- from {
83
- opacity: 1;
84
- -webkit-transform: translateY(0);
85
- -ms-transform: translateY(0);
86
- transform: translateY(0);
87
- }
88
- to {
89
- opacity: 0;
90
- -webkit-transform: translateY(-10px);
91
- -ms-transform: translateY(-10px);
92
- transform: translateY(-10px);
93
- }
94
- }
95
-
96
- @keyframes fadeOut {
97
- from {
98
- opacity: 1;
99
- -webkit-transform: translateY(0);
100
- -ms-transform: translateY(0);
101
- transform: translateY(0);
102
- }
103
- to {
104
- opacity: 0;
105
- -webkit-transform: translateY(-10px);
106
- -ms-transform: translateY(-10px);
107
- transform: translateY(-10px);
108
- }
109
- }
110
-
111
- @-webkit-keyframes appearIn {
112
- from {
113
- opacity: 0;
114
- -webkit-transform: translateY(0px);
115
- -ms-transform: translateY(0px);
116
- transform: translateY(0px);
117
- }
118
- to {
119
- opacity: 1;
120
- -webkit-transform: translateY(0);
121
- -ms-transform: translateY(0);
122
- transform: translateY(0);
123
- }
124
- }
125
-
126
- @keyframes appearIn {
127
- from {
128
- opacity: 0;
129
- -webkit-transform: translateY(0px);
130
- -ms-transform: translateY(0px);
131
- transform: translateY(0px);
132
- }
133
- to {
134
- opacity: 1;
135
- -webkit-transform: translateY(0);
136
- -ms-transform: translateY(0);
137
- transform: translateY(0);
138
- }
139
- }
140
-
141
- @-webkit-keyframes scaleIn {
142
- from {
143
- -webkit-transform: scale(0);
144
- -ms-transform: scale(0);
145
- transform: scale(0);
146
- }
147
- to {
148
- -webkit-transform: scale(1);
149
- -ms-transform: scale(1);
150
- transform: scale(1);
151
- }
152
- }
153
-
154
- @keyframes scaleIn {
155
- from {
156
- -webkit-transform: scale(0);
157
- -ms-transform: scale(0);
158
- transform: scale(0);
159
- }
160
- to {
161
- -webkit-transform: scale(1);
162
- -ms-transform: scale(1);
163
- transform: scale(1);
164
- }
165
- }
166
-
167
- @-webkit-keyframes innerDrawIn {
168
- 0% {
169
- stroke-dashoffset: 70;
170
- }
171
- 50% {
172
- stroke-dashoffset: 140;
173
- }
174
- 100% {
175
- stroke-dashoffset: 210;
176
- }
177
- }
178
-
179
- @keyframes innerDrawIn {
180
- 0% {
181
- stroke-dashoffset: 70;
182
- }
183
- 50% {
184
- stroke-dashoffset: 140;
185
- }
186
- 100% {
187
- stroke-dashoffset: 210;
188
- }
189
- }
190
-
191
- @-webkit-keyframes outerDrawIn {
192
- 0% {
193
- stroke-dashoffset: 76;
194
- }
195
- 100% {
196
- stroke-dashoffset: 152;
197
- }
198
- }
199
-
200
- @keyframes outerDrawIn {
201
- 0% {
202
- stroke-dashoffset: 76;
203
- }
204
- 100% {
205
- stroke-dashoffset: 152;
206
- }
207
- }
208
-
209
- .hHWjkv {
210
- -webkit-transform-origin: 0px 0px;
211
- -ms-transform-origin: 0px 0px;
212
- transform-origin: 0px 0px;
213
- -webkit-transform: scale(0);
214
- -ms-transform: scale(0);
215
- transform: scale(0);
216
- -webkit-animation: scaleIn 0.25s linear forwards 0.2222222222222222s;
217
- animation: scaleIn 0.25s linear forwards 0.2222222222222222s;
218
- }
219
-
220
- .gCDOzd {
221
- -webkit-transform-origin: 0px 0px;
222
- -ms-transform-origin: 0px 0px;
223
- transform-origin: 0px 0px;
224
- -webkit-transform: scale(0);
225
- -ms-transform: scale(0);
226
- transform: scale(0);
227
- -webkit-animation: scaleIn 0.25s linear forwards 0.4222222222222222s;
228
- animation: scaleIn 0.25s linear forwards 0.4222222222222222s;
229
- }
230
-
231
- .hmCcxi {
232
- -webkit-transform-origin: 0px 0px;
233
- -ms-transform-origin: 0px 0px;
234
- transform-origin: 0px 0px;
235
- -webkit-transform: scale(0);
236
- -ms-transform: scale(0);
237
- transform: scale(0);
238
- -webkit-animation: scaleIn 0.25s linear forwards 0.6222222222222222s;
239
- animation: scaleIn 0.25s linear forwards 0.6222222222222222s;
240
- }
241
-
242
- .eHamQi {
243
- -webkit-transform-origin: 0px 0px;
244
- -ms-transform-origin: 0px 0px;
245
- transform-origin: 0px 0px;
246
- -webkit-transform: scale(0);
247
- -ms-transform: scale(0);
248
- transform: scale(0);
249
- -webkit-animation: scaleIn 0.25s linear forwards 0.8222222222222223s;
250
- animation: scaleIn 0.25s linear forwards 0.8222222222222223s;
251
- }
252
-
253
- .byhgGu {
254
- -webkit-transform-origin: 0px 0px;
255
- -ms-transform-origin: 0px 0px;
256
- transform-origin: 0px 0px;
257
- -webkit-transform: scale(0);
258
- -ms-transform: scale(0);
259
- transform: scale(0);
260
- -webkit-animation: scaleIn 0.25s linear forwards 1.0222222222222221s;
261
- animation: scaleIn 0.25s linear forwards 1.0222222222222221s;
262
- }
263
-
264
- .llAKP {
265
- -webkit-transform-origin: 0px 0px;
266
- -ms-transform-origin: 0px 0px;
267
- transform-origin: 0px 0px;
268
- -webkit-transform: scale(0);
269
- -ms-transform: scale(0);
270
- transform: scale(0);
271
- -webkit-animation: scaleIn 0.25s linear forwards 1.2222222222222223s;
272
- animation: scaleIn 0.25s linear forwards 1.2222222222222223s;
273
- }
274
-
275
- .bglIGM {
276
- -webkit-transform-origin: 64px 28px;
277
- -ms-transform-origin: 64px 28px;
278
- transform-origin: 64px 28px;
279
- -webkit-transform: scale(0);
280
- -ms-transform: scale(0);
281
- transform: scale(0);
282
- -webkit-animation: scaleIn 0.25s linear forwards 0.2222222222222222s;
283
- animation: scaleIn 0.25s linear forwards 0.2222222222222222s;
284
- }
285
-
286
- .ksxRII {
287
- -webkit-transform-origin: 95.98500061035156px 46.510000228881836px;
288
- -ms-transform-origin: 95.98500061035156px 46.510000228881836px;
289
- transform-origin: 95.98500061035156px 46.510000228881836px;
290
- -webkit-transform: scale(0);
291
- -ms-transform: scale(0);
292
- transform: scale(0);
293
- -webkit-animation: scaleIn 0.25s linear forwards 0.4222222222222222s;
294
- animation: scaleIn 0.25s linear forwards 0.4222222222222222s;
295
- }
296
-
297
- .cWrBmb {
298
- -webkit-transform-origin: 95.97162628173828px 83.4900016784668px;
299
- -ms-transform-origin: 95.97162628173828px 83.4900016784668px;
300
- transform-origin: 95.97162628173828px 83.4900016784668px;
301
- -webkit-transform: scale(0);
302
- -ms-transform: scale(0);
303
- transform: scale(0);
304
- -webkit-animation: scaleIn 0.25s linear forwards 0.6222222222222222s;
305
- animation: scaleIn 0.25s linear forwards 0.6222222222222222s;
306
- }
307
-
308
- .Wnusb {
309
- -webkit-transform-origin: 64px 101.97999572753906px;
310
- -ms-transform-origin: 64px 101.97999572753906px;
311
- transform-origin: 64px 101.97999572753906px;
312
- -webkit-transform: scale(0);
313
- -ms-transform: scale(0);
314
- transform: scale(0);
315
- -webkit-animation: scaleIn 0.25s linear forwards 0.8222222222222223s;
316
- animation: scaleIn 0.25s linear forwards 0.8222222222222223s;
317
- }
318
-
319
- .bfPqf {
320
- -webkit-transform-origin: 32.03982162475586px 83.4900016784668px;
321
- -ms-transform-origin: 32.03982162475586px 83.4900016784668px;
322
- transform-origin: 32.03982162475586px 83.4900016784668px;
323
- -webkit-transform: scale(0);
324
- -ms-transform: scale(0);
325
- transform: scale(0);
326
- -webkit-animation: scaleIn 0.25s linear forwards 1.0222222222222221s;
327
- animation: scaleIn 0.25s linear forwards 1.0222222222222221s;
328
- }
329
-
330
- .edRCTN {
331
- -webkit-transform-origin: 32.033552169799805px 46.510000228881836px;
332
- -ms-transform-origin: 32.033552169799805px 46.510000228881836px;
333
- transform-origin: 32.033552169799805px 46.510000228881836px;
334
- -webkit-transform: scale(0);
335
- -ms-transform: scale(0);
336
- transform: scale(0);
337
- -webkit-animation: scaleIn 0.25s linear forwards 1.2222222222222223s;
338
- animation: scaleIn 0.25s linear forwards 1.2222222222222223s;
339
- }
340
-
341
- .iEGVWn {
342
- opacity: 0;
343
- stroke-dasharray: 76;
344
- -webkit-animation: outerDrawIn 0.5s ease-out forwards 0.3333333333333333s, appearIn 0.1s ease-out forwards 0.3333333333333333s;
345
- animation: outerDrawIn 0.5s ease-out forwards 0.3333333333333333s, appearIn 0.1s ease-out forwards 0.3333333333333333s;
346
- -webkit-animation-iteration-count: 1, 1;
347
- animation-iteration-count: 1, 1;
348
- }
349
-
350
- .bsocdx {
351
- opacity: 0;
352
- stroke-dasharray: 76;
353
- -webkit-animation: outerDrawIn 0.5s ease-out forwards 0.5333333333333333s, appearIn 0.1s ease-out forwards 0.5333333333333333s;
354
- animation: outerDrawIn 0.5s ease-out forwards 0.5333333333333333s, appearIn 0.1s ease-out forwards 0.5333333333333333s;
355
- -webkit-animation-iteration-count: 1, 1;
356
- animation-iteration-count: 1, 1;
357
- }
358
-
359
- .jAZXmP {
360
- opacity: 0;
361
- stroke-dasharray: 76;
362
- -webkit-animation: outerDrawIn 0.5s ease-out forwards 0.7333333333333334s, appearIn 0.1s ease-out forwards 0.7333333333333334s;
363
- animation: outerDrawIn 0.5s ease-out forwards 0.7333333333333334s, appearIn 0.1s ease-out forwards 0.7333333333333334s;
364
- -webkit-animation-iteration-count: 1, 1;
365
- animation-iteration-count: 1, 1;
366
- }
367
-
368
- .hSeArx {
369
- opacity: 0;
370
- stroke-dasharray: 76;
371
- -webkit-animation: outerDrawIn 0.5s ease-out forwards 0.9333333333333333s, appearIn 0.1s ease-out forwards 0.9333333333333333s;
372
- animation: outerDrawIn 0.5s ease-out forwards 0.9333333333333333s, appearIn 0.1s ease-out forwards 0.9333333333333333s;
373
- -webkit-animation-iteration-count: 1, 1;
374
- animation-iteration-count: 1, 1;
375
- }
376
-
377
- .bVgqGk {
378
- opacity: 0;
379
- stroke-dasharray: 76;
380
- -webkit-animation: outerDrawIn 0.5s ease-out forwards 1.1333333333333333s, appearIn 0.1s ease-out forwards 1.1333333333333333s;
381
- animation: outerDrawIn 0.5s ease-out forwards 1.1333333333333333s, appearIn 0.1s ease-out forwards 1.1333333333333333s;
382
- -webkit-animation-iteration-count: 1, 1;
383
- animation-iteration-count: 1, 1;
384
- }
385
-
386
- .hEFqBt {
387
- opacity: 0;
388
- stroke-dasharray: 76;
389
- -webkit-animation: outerDrawIn 0.5s ease-out forwards 1.3333333333333333s, appearIn 0.1s ease-out forwards 1.3333333333333333s;
390
- animation: outerDrawIn 0.5s ease-out forwards 1.3333333333333333s, appearIn 0.1s ease-out forwards 1.3333333333333333s;
391
- -webkit-animation-iteration-count: 1, 1;
392
- animation-iteration-count: 1, 1;
393
- }
394
-
395
- .dzEKCM {
396
- opacity: 0;
397
- stroke-dasharray: 70;
398
- -webkit-animation: innerDrawIn 1s ease-in-out forwards 1.3666666666666667s, appearIn 0.1s linear forwards 1.3666666666666667s;
399
- animation: innerDrawIn 1s ease-in-out forwards 1.3666666666666667s, appearIn 0.1s linear forwards 1.3666666666666667s;
400
- -webkit-animation-iteration-count: infinite, 1;
401
- animation-iteration-count: infinite, 1;
402
- }
403
-
404
- .DYnPx {
405
- opacity: 0;
406
- stroke-dasharray: 70;
407
- -webkit-animation: innerDrawIn 1s ease-in-out forwards 1.5333333333333332s, appearIn 0.1s linear forwards 1.5333333333333332s;
408
- animation: innerDrawIn 1s ease-in-out forwards 1.5333333333333332s, appearIn 0.1s linear forwards 1.5333333333333332s;
409
- -webkit-animation-iteration-count: infinite, 1;
410
- animation-iteration-count: infinite, 1;
411
- }
412
-
413
- .hjPEAQ {
414
- opacity: 0;
415
- stroke-dasharray: 70;
416
- -webkit-animation: innerDrawIn 1s ease-in-out forwards 1.7000000000000002s, appearIn 0.1s linear forwards 1.7000000000000002s;
417
- animation: innerDrawIn 1s ease-in-out forwards 1.7000000000000002s, appearIn 0.1s linear forwards 1.7000000000000002s;
418
- -webkit-animation-iteration-count: infinite, 1;
419
- animation-iteration-count: infinite, 1;
420
- }
421
-
422
- #loading-wrapper {
423
- position: absolute;
424
- width: 100vw;
425
- height: 100vh;
426
- display: -webkit-box;
427
- display: -webkit-flex;
428
- display: -ms-flexbox;
429
- display: flex;
430
- -webkit-align-items: center;
431
- -webkit-box-align: center;
432
- -ms-flex-align: center;
433
- align-items: center;
434
- -webkit-box-pack: center;
435
- -webkit-justify-content: center;
436
- -ms-flex-pack: center;
437
- justify-content: center;
438
- -webkit-flex-direction: column;
439
- -ms-flex-direction: column;
440
- flex-direction: column;
441
- }
442
-
443
- .logo {
444
- width: 75px;
445
- height: 75px;
446
- margin-bottom: 20px;
447
- opacity: 0;
448
- -webkit-animation: fadeIn 0.5s ease-out forwards;
449
- animation: fadeIn 0.5s ease-out forwards;
450
- }
451
-
452
- .text {
453
- font-size: 32px;
454
- font-weight: 200;
455
- text-align: center;
456
- color: rgba(255, 255, 255, 0.6);
457
- opacity: 0;
458
- -webkit-animation: fadeIn 0.5s ease-out forwards;
459
- animation: fadeIn 0.5s ease-out forwards;
460
- }
461
-
462
- .dGfHfc {
463
- font-weight: 400;
464
- }