pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Fix + update external modal (#1106) 

* Update external action modal. Uses Micromodal. Closes #1020

* refactor modal handling to isolate loading in modal component

* modal style cleanup

* Remove log

Co-authored-by: Ginger Wong <omqmail@gmail.com>
pull/825/head
Gabe Kangas 4 years ago committed by GitHub
parent
c848c029d5
commit
57674206b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 342 additions and 195 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      build/javascript/package-lock.json
  2. 4
      build/javascript/package.json
  3. 194
      webroot/index.html
  4. 60
      webroot/js/app.js
  5. 125
      webroot/js/components/external-action-modal.js
  6. 8
      webroot/js/web_modules/@videojs/http-streaming/dist/videojs-http-streaming.min.js
  7. 1
      webroot/js/web_modules/import-map.json
  8. 7
      webroot/js/web_modules/micromodal/dist/micromodal.min.js
  9. 133
      webroot/styles/app.css

5
build/javascript/package-lock.json generated
Unescape View File

@ -1240,6 +1240,11 @@
"picomatch": "^2.0.5" "picomatch": "^2.0.5"
} }
}, },
"micromodal": {
"version": "0.4.6",
"resolved": "https://registry.npmjs.org/micromodal/-/micromodal-0.4.6.tgz",
"integrity": "sha512-2VDso2a22jWPpqwuWT/4RomVpoU3Bl9qF9D01xzwlNp5UVsImeA0gY4nSpF44vqcQtQOtkiMUV9EZkAJSRxBsg=="
},
"min-document": { "min-document": {
"version": "2.19.0", "version": "2.19.0",
"resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz", "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",

4
build/javascript/package.json
Unescape View File

@ -9,6 +9,7 @@
"@videojs/themes": "^1.0.1", "@videojs/themes": "^1.0.1",
"htm": "^3.0.4", "htm": "^3.0.4",
"mark.js": "^8.11.1", "mark.js": "^8.11.1",
"micromodal": "^0.4.6",
"preact": "10.5.10", "preact": "10.5.10",
"tailwindcss": "^1.9.6", "tailwindcss": "^1.9.6",
"video.js": "7.12.3" "video.js": "7.12.3"
@ -28,7 +29,8 @@
"htm", "htm",
"preact", "preact",
"mark.js/dist/mark.es6.min.js", "mark.js/dist/mark.es6.min.js",
"tailwindcss/dist/tailwind.min.css" "tailwindcss/dist/tailwind.min.css",
"micromodal/dist/micromodal.min.js"
], ],
"alias": { "alias": {
"video.js": "video.js/core.js" "video.js": "video.js/core.js"

194
webroot/index.html
Unescape View File

@ -1,115 +1,123 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<title>Owncast</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-icon-57x57.png"> <head>
<link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-icon-60x60.png"> <title>Owncast</title>
<link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-icon-72x72.png"> <meta charset="UTF-8" />
<link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-icon-76x76.png"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/img/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff"> <link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-icon-57x57.png">
<meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png"> <link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-icon-60x60.png">
<meta name="theme-color" content="#ffffff"> <link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/img/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link href="/js/web_modules/tailwindcss/dist/tailwind.min.css" rel="stylesheet" /> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link href="/js/web_modules/videojs/video-js.min.css" rel="stylesheet"/> <link href="/js/web_modules/tailwindcss/dist/tailwind.min.css" rel="stylesheet" />
<link href="/js/web_modules/@videojs/themes/fantasy/index.css" rel="stylesheet" />
<link href="./styles/video.css" rel="stylesheet" /> <link href="/js/web_modules/videojs/video-js.min.css" rel="stylesheet" />
<link href="./styles/chat.css" rel="stylesheet" /> <link href="/js/web_modules/@videojs/themes/fantasy/index.css" rel="stylesheet" />
<link href="./styles/user-content.css" rel="stylesheet" />
<link href="./styles/app.css" rel="stylesheet" />
<!-- The following script tags are not required for the app to run, <link href="./styles/video.css" rel="stylesheet" />
<link href="./styles/chat.css" rel="stylesheet" />
<link href="./styles/user-content.css" rel="stylesheet" />
<link href="./styles/app.css" rel="stylesheet" />
<!-- The following script tags are not required for the app to run,
however they will make it load a lot faster (fewer round trips) when HTTP/2 is used. however they will make it load a lot faster (fewer round trips) when HTTP/2 is used.
If you wish to re-generate this list, run the following shell command If you wish to re-generate this list, run the following shell command
(assuming a linux or unix-ish system): (assuming a linux or unix-ish system):
find webroot | grep -E '\.js$' | sed -E 's|webroot(.*)|<script type="preload" src="\1"></script>|' find webroot | grep -E '\.js$' | sed -E 's|webroot(.*)|<script type="preload" src="\1"></script>|'
Don't load/preload chat-only or video-only. Don't load/preload app-standalone-chat.js or app-video-only.js.
--> -->
<script type="preload" src="/js/app.js"></script> <script type="preload" src="/js/components/platform-logos-list.js"></script>
<script type="preload" src="/js/components/chat/chat-input.js"></script> <script type="preload" src="/js/components/chat/chat-input.js"></script>
<script type="preload" src="/js/components/chat/chat.js"></script> <script type="preload" src="/js/components/chat/message.js"></script>
<script type="preload" src="/js/components/chat/chat-message-view.js"></script> <script type="preload" src="/js/components/chat/content-editable.js"></script>
<script type="preload" src="/js/components/chat/content-editable.js"></script> <script type="preload" src="/js/components/chat/chat.js"></script>
<script type="preload" src="/js/components/chat/message.js"></script> <script type="preload" src="/js/components/chat/chat-message-view.js"></script>
<script type="preload" src="/js/components/chat/username.js"></script> <script type="preload" src="/js/components/chat/username.js"></script>
<script type="preload" src="/js/components/platform-logos-list.js"></script> <script type="preload" src="/js/components/external-action-modal.js"></script>
<script type="preload" src="/js/components/player.js"></script> <script type="preload" src="/js/components/player.js"></script>
<script type="preload" src="/js/components/video-poster.js"></script> <script type="preload" src="/js/components/video-poster.js"></script>
<script type="preload" src="/js/utils/chat.js"></script> <script type="preload" src="/js/app.js"></script>
<script type="preload" src="/js/utils/constants.js"></script> <script type="preload" src="/js/web_modules/preact.js"></script>
<script type="preload" src="/js/utils/helpers.js"></script> <script type="preload" src="/js/web_modules/micromodal/dist/micromodal.min.js"></script>
<script type="preload" src="/js/utils/user-colors.js"></script> <script type="preload" src="/js/web_modules/common/core-a6c34bea.js"></script>
<script type="preload" src="/js/utils/websocket.js"></script> <script type="preload" src="/js/web_modules/common/_commonjsHelpers-37fa8da4.js"></script>
<script type="preload" src="/js/web_modules/common/_commonjsHelpers-37fa8da4.js"></script> <script type="preload" src="/js/web_modules/common/core-d14f1e1c.js"></script>
<script type="preload" src="/js/web_modules/common/core-d14f1e1c.js"></script> <script type="preload" src="/js/web_modules/common/core-fed3ccd8.js"></script>
<script type="preload" src="/js/web_modules/common/core-fed3ccd8.js"></script> <script type="preload" src="/js/web_modules/common/core-f87370e0.js"></script>
<script type="preload" src="/js/web_modules/htm.js"></script> <script type="preload" src="/js/web_modules/common/core-d20ff47c.js"></script>
<script type="preload" src="/js/web_modules/@joeattardi/emoji-button.js"></script> <script type="preload" src="/js/web_modules/@videojs/http-streaming/dist/videojs-http-streaming.min.js"></script>
<script type="preload" src="/js/web_modules/markjs/dist/mark.es6.min.js"></script> <script type="preload" src="/js/web_modules/markjs/dist/mark.es6.min.js"></script>
<script type="preload" src="/js/web_modules/preact.js"></script> <script type="preload" src="/js/web_modules/@joeattardi/emoji-button.js"></script>
<script type="preload" src="/js/web_modules/@videojs/http-streaming/dist/videojs-http-streaming.min.js"></script> <script type="preload" src="/js/web_modules/htm.js"></script>
<script type="preload" src="/js/web_modules/videojs/core.js"></script> <script type="preload" src="/js/web_modules/videojs/core.js"></script>
<script type="preload" src="/js/utils/helpers.js"></script>
<script type="preload" src="/js/utils/user-colors.js"></script>
<script type="preload" src="/js/utils/constants.js"></script>
<script type="preload" src="/js/utils/chat.js"></script>
<script type="preload" src="/js/utils/websocket.js"></script>
</head> </head>
<body class="scrollbar-hidden bg-gray-300 text-gray-800"> <body class="scrollbar-hidden bg-gray-300 text-gray-800">
<div id="app"> <div id="app">
<div id="loading-logo-container"> <div id="loading-logo-container">
<img id="loading-logo" src="/logo"> <img id="loading-logo" src="/logo">
</div>
</div> </div>
</div>
<script type="module">
import { h, render } from '/js/web_modules/preact.js';
import htm from '/js/web_modules/htm.js';
const html = htm.bind(h);
<script type="module"> import App from './js/app.js';
import { h, render } from '/js/web_modules/preact.js'; render(html`<${App} />`, document.getElementById("app"), document.getElementById("loading-logo-container"));
import htm from '/js/web_modules/htm.js'; </script>
const html = htm.bind(h);
import App from './js/app.js'; <noscript>
render(html`<${App} />`, document.getElementById("app"), document.getElementById("loading-logo-container")); <style>
</script> .noscript {
text-align: center;
padding: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<noscript> .noscript a {
<style> display: inline;
.noscript { color: blue;
text-align: center; text-decoration: underline;
padding: 30px; }
display: flex; </style>
justify-content: center; <div class="noscript">
align-items: center; <img src="/logo" />
flex-direction: column; <br />
} <p>
This <a href="https://owncast.online" rel="noopener noreferrer" target="_blank">Owncast</a> stream requires
Javascript to play.
</p>
</div>
</noscript>
</body>
.noscript a { </html>
display: inline;
color: blue;
text-decoration: underline;
}
</style>
<div class="noscript">
<img src="/logo" />
<br/>
<p>
This <a href="https://owncast.online" rel="noopener noreferrer" target="_blank">Owncast</a> stream requires Javascript to play.
</p>
</div>
</noscript>
</body>
</html>

60
webroot/js/app.js
Unescape View File

@ -424,9 +424,7 @@ export default class App extends Component {
} }
handleKeyPressed(e) { handleKeyPressed(e) {
if (e.code === 'Escape' && this.state.externalAction !== null) { if (
this.closeExternalActionModal();
} else if (
e.target !== document.getElementById('message-input') && e.target !== document.getElementById('message-input') &&
e.target !== document.getElementById('username-change-input') && e.target !== document.getElementById('username-change-input') &&
e.target !== document.getElementsByClassName('emoji-picker__search')[0] && e.target !== document.getElementsByClassName('emoji-picker__search')[0] &&
@ -456,9 +454,8 @@ export default class App extends Component {
} }
} }
displayExternalAction(index) { displayExternalAction(action) {
const { configData, username } = this.state; const { username } = this.state;
const action = configData.externalActions[index];
if (!action) { if (!action) {
return; return;
} }
@ -475,13 +472,13 @@ export default class App extends Component {
win.focus(); win.focus();
return; return;
} }
action.url = fullUrl;
this.setState({ this.setState({
externalAction: action, externalAction: {
...action,
url: fullUrl,
},
}); });
} }
closeExternalActionModal() { closeExternalActionModal() {
this.setState({ this.setState({
externalAction: null, externalAction: null,
@ -558,32 +555,25 @@ export default class App extends Component {
? null ? null
: html` <${VideoPoster} offlineImage=${logo} active=${streamOnline} /> `; : html` <${VideoPoster} offlineImage=${logo} active=${streamOnline} /> `;
// modal buttons
const externalActionButtons = const externalActionButtons =
externalActions && externalActions.length > 0 externalActions &&
? html`<div html`<div
id="external-actions-container" id="external-actions-container"
class="flex flex-row align-center" class="flex flex-row align-center"
> >
${externalActions.map( ${externalActions.map(
function (action, index) { function (action) {
return html`<${ExternalActionButton} return html`<${ExternalActionButton}
onClick=${this.displayExternalAction} onClick=${this.displayExternalAction}
action=${action} action=${action}
index=${index} />`;
/>`; }.bind(this)
}.bind(this) )}
)} </div>`;
</div>`
: null; // modal component
const externalActionModal = externalAction && html`<${ExternalActionModal} action=${externalAction} onClose=${this.closeExternalActionModal} />`;
const externalActionModal = externalAction
? html`<${ExternalActionModal}
title=${this.state.externalAction.description ||
this.state.externalAction.title}
url=${this.state.externalAction.url}
onClose=${this.closeExternalActionModal}
/>`
: null;
return html` return html`
<div <div

125
webroot/js/components/external-action-modal.js
Unescape View File

@ -1,77 +1,79 @@
import { h } from '/js/web_modules/preact.js'; import { h, Component } from '/js/web_modules/preact.js';
import htm from '/js/web_modules/htm.js'; import htm from '/js/web_modules/htm.js';
import MicroModal from '/js/web_modules/micromodal/dist/micromodal.min.js';
const html = htm.bind(h); const html = htm.bind(h);
export default function ExternalActionModal({ url, title, onClose }) { export default class ExternalActionModal extends Component {
const loading = 'background:url(/img/loading.gif) center center no-repeat;'; constructor(props) {
super(props);
this.state = {
iframeLoaded: false,
};
function loaded() { this.setIframeLoaded = this.setIframeLoaded.bind(this);
document.querySelector('#external-modal-iframe').style = ''; }
componentDidMount() {
// initalize and display Micromodal on mount
try {
MicroModal.init({
awaitCloseAnimation: false,
awaitOpenAnimation: true, // if using css animations to open the modal. This allows it to wait for the animation to finish before focusing on an element inside the modal.
});
MicroModal.show('external-actions-modal', {
onClose: this.props.onClose,
});
} catch (e) {
console.log("micromodal error: ", e);
}
} }
return html` setIframeLoaded() {
<div class="fixed inset-0 overflow-y-auto" style="z-index: 9999"> this.setState({
<div iframeLoaded: true,
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0" });
> }
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div
onClick=${() => onClose()}
class="absolute inset-0 bg-gray-900 bg-opacity-75"
></div>
</div>
<!-- This element is to trick the browser into centering the modal contents. --> render() {
<span const { action } = this.props;
class="hidden sm:inline-block sm:align-middle sm:h-screen" const { url, title, description } = action;
aria-hidden="true" const { iframeLoaded } = this.state;
>&#8203;</span const iframeStyle = iframeLoaded ? null : {
> backgroundImage: 'url(/img/loading.gif)',
<div };
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:align-middle w-screen md:max-w-2xl lg:max-w-2xl" return html`
role="dialog" <div class="modal micromodal-slide" id="external-actions-modal" aria-hidden="true">
aria-modal="true" <div class="modal__overlay" tabindex="-1" data-micromodal-close>
aria-labelledby="modal-headline" <div id="modal-container" class="modal__container rounded-md" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
> <header id="modal-header" class="modal__header flex flex-row justify-between items-center bg-gray-300 p-3 rounded-t-md">
<div class="bg-white "> <h2 class="modal__title text-indigo-600 font-semibold">
<div ${title || description}
class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex justify-between items-center" </h2>
> <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
<h3 class="font-bold hidden md:block">${title}</h3> </header>
<span class="" onclick=${onClose}> <div id="modal-content-content" class="modal-content-content">
<svg <div id="modal-content" class="modal__content text-gray-600 rounded-b-md overflow-y-auto overflow-x-hidden">
class="h-12 w-12 fill-current text-grey hover:text-grey-darkest" <iframe
role="button" id="external-modal-iframe"
xmlns="http://www.w3.org/2000/svg" style=${iframeStyle}
viewBox="0 0 20 20" class="bg-gray-100 bg-center bg-no-repeat"
> width="100%"
<title>Close</title> allowpaymentrequest="true"
<path allowfullscreen="false"
d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
/> src=${url}
</svg> onload=${this.setIframeLoaded}
</span> />
</div>
</div> </div>
<iframe
id="external-modal-iframe"
style=${`${loading}`}
width="100%"
allowpaymentrequest="true"
allowfullscreen="false"
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
src=${url}
onload=${loaded}
/>
</div> </div>
</div> </div>
</div> </div>
</div> `;
`; }
} }
export function ExternalActionButton({ index, action, onClick }) { export function ExternalActionButton({ action, onClick }) {
const { title, icon, color = undefined } = action; const { title, icon, color = undefined } = action;
const logo = const logo =
icon && icon &&
@ -79,11 +81,10 @@ export function ExternalActionButton({ index, action, onClick }) {
<span class="external-action-icon"><img src=${icon} alt="" /></span> <span class="external-action-icon"><img src=${icon} alt="" /></span>
`; `;
const bgcolor = color && { backgroundColor: `${color}` }; const bgcolor = color && { backgroundColor: `${color}` };
const handleClick = () => onClick(index); const handleClick = () => onClick(action);
return html` return html`
<button <button
class="external-action-button rounded-sm flex flex-row justify-center items-center overflow-hidden bg-gray-800" class="external-action-button rounded-sm flex flex-row justify-center items-center overflow-hidden bg-gray-800"
data-index=${index}
onClick=${handleClick} onClick=${handleClick}
style=${bgcolor} style=${bgcolor}
> >

8
webroot/js/web_modules/@videojs/http-streaming/dist/videojs-http-streaming.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
webroot/js/web_modules/import-map.json vendored
Unescape View File

@ -5,6 +5,7 @@
"@videojs/themes/fantasy/index.css": "./@videojs/themes/fantasy/index.css", "@videojs/themes/fantasy/index.css": "./@videojs/themes/fantasy/index.css",
"htm": "./htm.js", "htm": "./htm.js",
"mark.js/dist/mark.es6.min.js": "./markjs/dist/mark.es6.min.js", "mark.js/dist/mark.es6.min.js": "./markjs/dist/mark.es6.min.js",
"micromodal/dist/micromodal.min.js": "./micromodal/dist/micromodal.min.js",
"preact": "./preact.js", "preact": "./preact.js",
"tailwindcss/dist/tailwind.min.css": "./tailwindcss/dist/tailwind.min.css", "tailwindcss/dist/tailwind.min.css": "./tailwindcss/dist/tailwind.min.css",
"video.js": "./video.js/core.js", "video.js": "./video.js/core.js",

7
webroot/js/web_modules/micromodal/dist/micromodal.min.js vendored
View File

File diff suppressed because one or more lines are too long

133
webroot/styles/app.css
Unescape View File

@ -278,6 +278,139 @@ header {
} }
} }
#external-modal-iframe { #external-modal-iframe {
height: 70vh; height: 70vh;
} }
/**************************
Basic Modal Styles
**************************/
/*
External modal styling for use with Micromodal from https://gist.github.com/ghosh/4f94cf497d7090359a5c9f81caf60699
See external-action-modal.js
*/
.modal {
z-index: 100;
}
.modal__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
}
.modal__container {
background-color: transparent;
padding: 0px;
max-width: 740px;
height: 75vh;
width: 50%;
border-radius: 0px;
overflow: hidden;
box-sizing: border-box;
}
.modal__close {
background: transparent;
border: 0;
cursor: pointer;
margin: 0px;
padding: 0px;
outline: none;
cursor: pointer !important;
}
.modal__close:before { content: "\2715"; font-size: 1.25rem; }
@supports (display: flex) {
.modal__header {
display: flex;
justify-content: space-between;
align-items: center;
height:initial;
}
.modal__title {
position: static;
}
.modal__close {
position: static;
}
}
/**************************
Modal Animation Style
**************************/
@keyframes mmfadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes mmfadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes mmslideIn {
from { transform: translateY(15%); }
to { transform: translateY(0); }
}
@keyframes mmslideOut {
from { transform: translateY(0); }
to { transform: translateY(-10%); }
}
.micromodal-slide {
display: none;
}
.micromodal-slide.is-open {
display: block;
}
.micromodal-slide[aria-hidden="false"] .modal__overlay {
animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
.micromodal-slide[aria-hidden="false"] .modal__container {
animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}
.micromodal-slide[aria-hidden="true"] .modal__overlay {
animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
.micromodal-slide[aria-hidden="true"] .modal__container {
animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}
.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
will-change: transform;
}
/* Miromodal mobile styling */
@media only screen and (min-device-width : 600px) and (max-device-width : 480px) {
.modal__container {
width: 90% !important;
min-width: 90% !important;
}
@supports (display: flex) {
.modal__container {
width: 90% !important;
min-width: 90% !important;
height: 85vh;
}
}
.modal__content {
-webkit-overflow-scrolling: touch;
}
}

Write Preview
Loading…
Cancel
Save