nfg_ui 0.9.21 → 0.9.22

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.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 423409d97cf89a1bf8a09522fb166a59c81cbf9b8a4cdae14553447d3f0096c5
4
- data.tar.gz: 68a1afec5cc27e072aef3ac67ab56c15c289984c557f8df746e91888deec4663
3
+ metadata.gz: 25a27ad9e036828091979c536b6a35934201fc0ee7e950c2a06c0c65a82357b7
4
+ data.tar.gz: c1e07b2bd81581d450c3734f00d065b4acc573b30c9492fc5ec10dd8c93bd1d3
5
5
  SHA512:
6
- metadata.gz: 784851e753616711c6dd400c25f231ca9aaba721b85e3f798cb6488a515d36081b3043bba618fd62e25bdcd071ad70183e929838c7fa542698d38b2460d5359c
7
- data.tar.gz: 427fb9dbc7479345cfea016465014365e2c7022edf24352b40cdda21e591da88e3a731f428ab5a18c8946a90a0227f292bcd43d87d44dacd540af6859126d68b
6
+ metadata.gz: e2744e53200870105de580fde6f47f23611abdb8c8a9d9a9ffbd1a25e642368a519f11b1f8b4b5c6944e70d7b4461df24983eb4c6fc06586845611975326ca1d
7
+ data.tar.gz: d41e231ad870d99804f5ea7abd74accdd2a43943456fe722a7273ebbe558248a0fc2722788dc02688f5191f06c004713ebda61d6633bac0e45909f13e32b236b
@@ -253,17 +253,19 @@ $box-shadow-lg: 0 0 50px 0 transparentize($black, 0.9);
253
253
  // $transition-fade: opacity .15s linear !default;
254
254
  // $transition-collapse: height .35s ease !default;
255
255
 
256
- // $embed-responsive-aspect-ratios: () !default;
256
+ $embed-responsive-aspect-ratios: () !default;
257
257
  // stylelint-disable-next-line scss/dollar-variable-default
258
- // $embed-responsive-aspect-ratios: join(
259
- // (
260
- // (21 9),
261
- // (16 9),
262
- // (3 4),
263
- // (1 1),
264
- // ),
265
- // $embed-responsive-aspect-ratios
266
- // );
258
+ $embed-responsive-aspect-ratios: join(
259
+ (
260
+ (21 9),
261
+ (16 9),
262
+ (9 16),
263
+ (4 3),
264
+ (3 4),
265
+ (1 1),
266
+ ),
267
+ $embed-responsive-aspect-ratios
268
+ );
267
269
 
268
270
  // Fonts
269
271
  //
@@ -5,6 +5,7 @@
5
5
  @import 'custom/content_section_buttons';
6
6
  @import 'custom/custom_questions_questionnaire';
7
7
  @import 'custom/custom_receipt_language';
8
+ @import 'custom/device_preview';
8
9
  @import 'custom/email_preview';
9
10
  @import 'custom/illustration';
10
11
  @import 'custom/interaction';
@@ -0,0 +1,54 @@
1
+ // Styles used for showing content (or iframes) in a tablet or mobile device.
2
+ // Note: these are best used with bs4's embed-reponsive ratio classes.
3
+
4
+ .device-preview { // set device width (explicit or percentage) on this container
5
+ position: relative;
6
+ margin: auto;
7
+
8
+ // Device Details
9
+ &.device-preview-tablet, &.device-preview-mobile {
10
+ border: 16px solid $white;
11
+ border-top-width: 60px;
12
+ border-bottom-width: 60px;
13
+ border-radius: 24px;
14
+ box-shadow: $box-shadow-sm;
15
+ &::before, &::after {
16
+ position: absolute;
17
+ left: 50%;
18
+ display: block;
19
+ content: '';
20
+ transform: translate(-50%, -50%);
21
+ border: 1px solid $border-color;
22
+ }
23
+ &::before {
24
+ top: -30px;
25
+ width: 60px;
26
+ height: 6px;
27
+ border-radius: 3px;
28
+ }
29
+ &::after {
30
+ bottom: -65px;
31
+ width: 36px;
32
+ height: 36px;
33
+ border-radius: 50%;
34
+ }
35
+ }
36
+
37
+ // Wrapping scrollable screen (used with embed-responsive ratio classes to get proper height -- set width on .device-preview container)
38
+ .device-screen {
39
+ width: 100%;
40
+ background-color: $border-color;
41
+ overflow-x: hidden;
42
+ overflow-y: scroll;
43
+ }
44
+
45
+ // For content that isn't an iframe
46
+ .device-content {
47
+ position: absolute;
48
+ top: 0;
49
+ bottom: 0;
50
+ left: 0;
51
+ width: 100%;
52
+ height: 100%;
53
+ }
54
+ }
@@ -49,7 +49,7 @@ module NfgUi
49
49
  end
50
50
 
51
51
  def allowed_aspect_ratios
52
- %w[21:9 16:9 4:3 1:1]
52
+ %w[21:9 16:9 9:16 4:3 3:4 1:1]
53
53
  end
54
54
 
55
55
  def default_aspect_ratio
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module NfgUi
4
- VERSION = '0.9.21'
4
+ VERSION = '0.9.22'
5
5
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: nfg_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.9.21
4
+ version: 0.9.22
5
5
  platform: ruby
6
6
  authors:
7
7
  - Jonathan Roehm
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2019-10-22 00:00:00.000000000 Z
12
+ date: 2019-10-25 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: bootstrap
@@ -407,6 +407,7 @@ files:
407
407
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_content_section_buttons.scss
408
408
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_custom_questions_questionnaire.scss
409
409
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_custom_receipt_language.scss
410
+ - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_device_preview.scss
410
411
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_email_preview.scss
411
412
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_illustration.scss
412
413
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_interaction.scss