Commit 0173c48b79cbde1e8ac112225fce0958e72331a7
give modals the ability to have classNames, don't let them cover tabs
mix irving committed on 6/14/2018, 11:28:44 PMParent: 9417449ceabd2b014ad5b6b00c2551006c3f1c26
Files changed
| app/html/modal.js | changed |
| app/html/modal.mcss | changed |
| app/styles/mcss/markdown.mcss | changed |
| app/html/modal.js | ||
|---|---|---|
| @@ -3,18 +3,18 @@ | ||
| 3 | 3 … | |
| 4 | 4 … | exports.gives = nest('app.html.modal') |
| 5 | 5 … | |
| 6 | 6 … | exports.create = (api) => { |
| 7 | - return nest('app.html.modal', (content, { isOpen, onClose } = {}) => { | |
| 7 … | + return nest('app.html.modal', (content, { isOpen, onClose, className = '' } = {}) => { | |
| 8 | 8 … | if (typeof isOpen !== 'function') isOpen = Value(false) |
| 9 | 9 … | |
| 10 | 10 … | const openMe = () => isOpen.set(true) |
| 11 | 11 … | const closeMe = () => { |
| 12 | 12 … | isOpen.set(false) |
| 13 | 13 … | if (typeof onClose === 'function') onClose() |
| 14 | 14 … | } |
| 15 | 15 … | |
| 16 | - const lb = h('Modal', { className: when(isOpen, '-open', '-close'), 'ev-click': closeMe }, | |
| 16 … | + const lb = h('Modal', { classList: [when(isOpen, '-open', '-close'), className], 'ev-click': closeMe }, | |
| 17 | 17 … | h('div.content', {'ev-click': (ev) => ev.stopPropagation()}, [ |
| 18 | 18 … | content |
| 19 | 19 … | ])) |
| 20 | 20 … | |
| app/html/modal.mcss | |||
|---|---|---|---|
| @@ -2,14 +2,14 @@ | |||
| 2 | 2 … | display: flex | |
| 3 | 3 … | flex-direction: row | |
| 4 | 4 … | position: fixed | |
| 5 | 5 … | z-index: 90 | |
| 6 | - width: 100% | ||
| 7 | - height: 100% | ||
| 8 | 6 … | text-align: center | |
| 9 | - top: 0 | ||
| 7 … | + top: 2.5rem | ||
| 8 … | + right: 0 | ||
| 9 … | + bottom: 0 | ||
| 10 | 10 … | left: 0 | |
| 11 | - background: rgba(0,0,0,0.1) | ||
| 11 … | + background: rgba(15, 0, 25, 0.78) | ||
| 12 | 12 … | ||
| 13 | 13 … | div.content { | |
| 14 | 14 … | max-width: 90vw | |
| 15 | 15 … | max-height: 90vh | |
| @@ -47,6 +47,12 @@ | |||
| 47 | 47 … | ||
| 48 | 48 … | -close { | |
| 49 | 49 … | display: none | |
| 50 | 50 … | } | |
| 51 … | + | ||
| 52 … | + -dark { | ||
| 53 … | + div.content { | ||
| 54 … | + background: #000 | ||
| 55 … | + } | ||
| 56 … | + } | ||
| 51 | 57 … | } | |
| 52 | 58 … | ||
| app/styles/mcss/markdown.mcss | ||
|---|---|---|
| @@ -2,16 +2,16 @@ | ||
| 2 | 2 … | p, ul, ol { |
| 3 | 3 … | } |
| 4 | 4 … | |
| 5 | 5 … | // center images (non-emoji) |
| 6 | - p { | |
| 7 | - a { | |
| 8 | - img { | |
| 9 | - display: block | |
| 10 | - margin: auto | |
| 11 | - } | |
| 12 | - } | |
| 13 | - } | |
| 6 … | + // p { | |
| 7 … | + // a { | |
| 8 … | + // img { | |
| 9 … | + // display: block | |
| 10 … | + // margin: auto | |
| 11 … | + // } | |
| 12 … | + // } | |
| 13 … | + // } | |
| 14 | 14 … | |
| 15 | 15 … | hr { |
| 16 | 16 … | height: 0 |
| 17 | 17 … | border: solid #ddd |
Built with git-ssb-web