shipyard-framework 0.5.56 → 0.5.57
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/assets/javascripts/shipyard.es6 +5 -2
- data/assets/javascripts/shipyard/{alerts.es6 → alert.es6} +2 -2
- data/assets/javascripts/shipyard/core.es6 +7 -0
- data/assets/javascripts/shipyard/modal-trigger.es6 +14 -0
- data/assets/javascripts/shipyard/modal.es6 +20 -0
- data/assets/stylesheets/shipyard/components/_modals.sass +0 -2
- data/assets/stylesheets/shipyard/utilities/_grid.sass +2 -2
- data/lib/shipyard-framework/version.rb +1 -1
- data/styleguide/_assets/css/fonts.sass +2 -0
- data/styleguide/_assets/css/vendor.sass +0 -2
- data/styleguide/_layouts/application.html +4 -2
- data/styleguide/components/modals/_modal.html +19 -0
- data/styleguide/components/modals/example-1.html +6 -0
- data/styleguide/components/modals/index.md +37 -0
- metadata +8 -3
- data/styleguide/components/modals.html +0 -12
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 814d30b3e891a5faf28b9018c49a459b66292b8b
|
|
4
|
+
data.tar.gz: 29de35d4413aa6fd56130558331045fde5e2a2ae
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 6b467c40d2f8d6653b07b4823df4ffd76d5712fa73ff5f5eab5379fc9bf5dec523bad6f817625a9868341e84e3fb54ff810ead34dd650cbc23d6a0e3e9dd98cc
|
|
7
|
+
data.tar.gz: 9b5c9c01b7c2938cc5c148385ace4a66e30c1aea152b415ea76af139ebdd85894430c8c2e22c623deb85ac5250ab3760ddc10b262a7aec429402dbe254d14923
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
//= require ./shipyard/core
|
|
2
2
|
//= require ./shipyard/scroll
|
|
3
3
|
//= require ./shipyard/hamburger
|
|
4
|
-
//= require ./shipyard/
|
|
4
|
+
//= require ./shipyard/alert
|
|
5
|
+
//= require ./shipyard/modal
|
|
6
|
+
//= require ./shipyard/modal-trigger
|
|
5
7
|
|
|
6
8
|
var shipyard = new Shipyard('html')
|
|
7
9
|
var windowScroll = new Scroll(window)
|
|
8
10
|
var hamburger = new Hamburger('[shipyard=hamburger]')
|
|
9
|
-
var
|
|
11
|
+
var shipyardAlert = new Alert('[shipyard=alert]')
|
|
12
|
+
var modalTrigger = new ModalTrigger('[modal-trigger]')
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
class
|
|
1
|
+
class Alert extends Shipyard {
|
|
2
2
|
constructor (el) {
|
|
3
3
|
super(el)
|
|
4
4
|
this.el.forEach((el) => {
|
|
5
|
-
el.querySelector('[shipyard=
|
|
5
|
+
el.querySelector('[shipyard=alert-close]')
|
|
6
6
|
.addEventListener('click', () => { this.close(el) })
|
|
7
7
|
})
|
|
8
8
|
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
class ModalTrigger extends Shipyard {
|
|
2
|
+
constructor (el) {
|
|
3
|
+
super(el)
|
|
4
|
+
this.on('click', () => { this.open() })
|
|
5
|
+
this.el.forEach((el) => {
|
|
6
|
+
let modalName = el.getAttribute('modal-trigger')
|
|
7
|
+
this.modal = new Modal(`[modal=${modalName}]`)
|
|
8
|
+
})
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
open () {
|
|
12
|
+
this.modal.open()
|
|
13
|
+
}
|
|
14
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
class Modal extends Shipyard {
|
|
2
|
+
constructor (el) {
|
|
3
|
+
super(el)
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
open () {
|
|
7
|
+
this.removeClass('display-none')
|
|
8
|
+
this.html.classList.add('modal-open')
|
|
9
|
+
this.el.forEach((el) => {
|
|
10
|
+
el.querySelectorAll('[modal-close]').forEach((btn) => {
|
|
11
|
+
btn.addEventListener('click', () => { this.close() })
|
|
12
|
+
})
|
|
13
|
+
})
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
close () {
|
|
17
|
+
this.addClass('display-none')
|
|
18
|
+
this.html.classList.remove('modal-open')
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -42,8 +42,8 @@ $widths: (5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 75, 80,
|
|
|
42
42
|
display: flex
|
|
43
43
|
flex-wrap: wrap
|
|
44
44
|
+responsive-margin(left right, $divisor: -2)
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
+all-media-sizes
|
|
46
|
+
&-nowrap
|
|
47
47
|
display: flex
|
|
48
48
|
flex-wrap: nowrap
|
|
49
49
|
+responsive-margin(left right, $divisor: -2)
|
|
@@ -2,5 +2,3 @@ $font-family: "museo-sans-rounded", "Museo Sans Rounded", Arial, sans-serif
|
|
|
2
2
|
$font-monospace: 'Roboto Mono', monospace
|
|
3
3
|
@import shipyard
|
|
4
4
|
@import shipyard/components/header
|
|
5
|
-
@import url('https://use.typekit.net/wel6tpj.css')
|
|
6
|
-
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono')
|
|
@@ -12,7 +12,9 @@ navigation:
|
|
|
12
12
|
<meta charset="utf-8" />
|
|
13
13
|
<title>{{ page.title }}</title>
|
|
14
14
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
15
|
-
|
|
15
|
+
<meta name="theme-color" content="#20a5a8" />
|
|
16
|
+
{% css fonts media:screen rel:preload async %}
|
|
17
|
+
{% css application media:screen %}
|
|
16
18
|
</head>
|
|
17
19
|
<body>
|
|
18
20
|
<header class="header">
|
|
@@ -28,7 +30,7 @@ navigation:
|
|
|
28
30
|
</li>
|
|
29
31
|
{% endfor %}
|
|
30
32
|
<li class="header-item header-item-cta">
|
|
31
|
-
<a href="https://github.com/codeship/shipyard" target="_blank" class="header-link-cta">Download</a>
|
|
33
|
+
<a href="https://github.com/codeship/shipyard" target="_blank" class="header-link-cta" rel="noopener">Download</a>
|
|
32
34
|
</li>
|
|
33
35
|
</ul>
|
|
34
36
|
</div>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<div class="modal-container {{ include.css_class }}" modal="example">
|
|
2
|
+
<div class="modal" role="dialog">
|
|
3
|
+
<div class="modal-content">
|
|
4
|
+
<div class="modal-title">
|
|
5
|
+
<h1>Modal Title</h1>
|
|
6
|
+
</div>
|
|
7
|
+
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
|
8
|
+
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
|
9
|
+
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
|
10
|
+
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
|
11
|
+
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
|
12
|
+
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue.</p>
|
|
13
|
+
</div>
|
|
14
|
+
<div class="modal-ctas">
|
|
15
|
+
<button class="btn btn-primary btn-sm btn-x1-md" modal-close>Save & Close</button>
|
|
16
|
+
<button class="btn btn-secondary btn-sm btn-x1-md margin-left-xxs margin-left-x1-xs" modal-close>Cancel</button>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Shipyard Modals
|
|
3
|
+
description: Modals are triggered by applying the following attribute to any button or link (e.g. `modal-trigger="login"`).
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
{% include page-heading.html page=page %}
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
<div class="col-container-x1-nowrap">
|
|
11
|
+
<div class="col col-100">
|
|
12
|
+
<h3 class="col-100">Building Modals</h3>
|
|
13
|
+
<p class="text-light margin-bottom-sm">Useful when you need to draw attention to information that requires additional action.</p>
|
|
14
|
+
</div>
|
|
15
|
+
<div class="col">
|
|
16
|
+
<button class="btn btn-sm btn-x1-md btn-secondary white-space-nowrap" modal-trigger="example">Demo Modal</button>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
```html
|
|
21
|
+
<div class="modal-container">
|
|
22
|
+
<div class="modal" role="dialog">
|
|
23
|
+
<div class="modal-content">
|
|
24
|
+
<div class="modal-title">
|
|
25
|
+
<!-- Modal Title -->
|
|
26
|
+
</div>
|
|
27
|
+
<!-- Modal Content -->
|
|
28
|
+
</div>
|
|
29
|
+
<div class="modal-ctas">
|
|
30
|
+
{% btn Save, :primary %}
|
|
31
|
+
{% btn Cancel, :secondary %}
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
{% include_relative _modal.html css_class="display-none" %}
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: shipyard-framework
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.5.
|
|
4
|
+
version: 0.5.57
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Codeship
|
|
@@ -201,9 +201,11 @@ files:
|
|
|
201
201
|
- assets/icons/tag.svg
|
|
202
202
|
- assets/icons/x.svg
|
|
203
203
|
- assets/javascripts/shipyard.es6
|
|
204
|
-
- assets/javascripts/shipyard/
|
|
204
|
+
- assets/javascripts/shipyard/alert.es6
|
|
205
205
|
- assets/javascripts/shipyard/core.es6
|
|
206
206
|
- assets/javascripts/shipyard/hamburger.es6
|
|
207
|
+
- assets/javascripts/shipyard/modal-trigger.es6
|
|
208
|
+
- assets/javascripts/shipyard/modal.es6
|
|
207
209
|
- assets/javascripts/shipyard/scroll.es6
|
|
208
210
|
- assets/stylesheets/_shipyard.sass
|
|
209
211
|
- assets/stylesheets/shipyard/_components.sass
|
|
@@ -286,6 +288,7 @@ files:
|
|
|
286
288
|
- styleguide/Gemfile
|
|
287
289
|
- styleguide/Gemfile.lock
|
|
288
290
|
- styleguide/_assets/css/application.sass
|
|
291
|
+
- styleguide/_assets/css/fonts.sass
|
|
289
292
|
- styleguide/_assets/css/layout.sass
|
|
290
293
|
- styleguide/_assets/css/vendor.sass
|
|
291
294
|
- styleguide/_assets/css/views.sass
|
|
@@ -303,7 +306,9 @@ files:
|
|
|
303
306
|
- styleguide/components/forms.html
|
|
304
307
|
- styleguide/components/icons.md
|
|
305
308
|
- styleguide/components/index.md
|
|
306
|
-
- styleguide/components/modals.html
|
|
309
|
+
- styleguide/components/modals/_modal.html
|
|
310
|
+
- styleguide/components/modals/example-1.html
|
|
311
|
+
- styleguide/components/modals/index.md
|
|
307
312
|
- styleguide/components/notes.md
|
|
308
313
|
- styleguide/components/tables.md
|
|
309
314
|
- styleguide/components/tooltips.md
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Shipyard Modals
|
|
3
|
-
description: Modals are triggered by applying the following attribute to any button or link (e.g. `modal="login"`).
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
{% include page-heading.html page=page %}
|
|
7
|
-
|
|
8
|
-
<hr />
|
|
9
|
-
|
|
10
|
-
<div class="box-padding align-center">
|
|
11
|
-
{% btn Trigger Modal, :secondary :margin %}
|
|
12
|
-
</div>
|