diff options
| -rw-r--r-- | webapp/root.html | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/webapp/root.html b/webapp/root.html index 3fc9dfa59..70cf47cc3 100644 --- a/webapp/root.html +++ b/webapp/root.html @@ -34,10 +34,52 @@ <!-- CSS Should always go first --> <link rel='stylesheet' class='code_theme'> + <style> + .error-screen { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + padding-top: 50px; + max-width: 750px; + font-size: 14px; + color: #333333; + margin: auto; + display: none; + line-height: 1.5; + } + .error-screen h2 { + font-size: 30px; + font-weight: normal; + line-height: 1.2; + } + + .error-screen ul { + padding-left: 15px; + line-height: 1.7; + margin-top: 0; + margin-bottom: 10px; + } + + .error-screen hr { + color: #ddd; + margin-top: 20px; + margin-bottom: 20px; + border: 0; + border-top: 1px solid #eee; + } + + .error-screen-visible { + display: block; + } + </style> </head> <body> <div id='root'> + <div class='error-screen'> + <h2>Cannot connect to Mattermost</h2> + <hr/> + <p>We’re having trouble connecting to Mattermost. If refreshing this page (Ctrl+R or Command+R) does not work, please verify that your computer is connected to the internet.</p> + <br/> + </div> <div class='loading-screen' style='position: relative' @@ -50,6 +92,9 @@ </div> </div> <script> + if (typeof window.setup_root !== 'function') { + document.querySelector('.error-screen').classList.add('error-screen-visible'); + } window.setup_root(); </script> <noscript> |