graphql_playground-rails 2.0.1 → 2.1.0

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 (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
- }