Add banner for uncompatible browsers

src/dgenies/static/css/dgenies.css

@@ -4,6 +4,25 @@ body {
     padding-top: 50px;
 }
 
+#main-error {
+    display: none;
+    width: 100%;
+    min-height: 60px;
+    background: #ff351a;
+    color: white;
+    font-size: 14pt;
+    font-weight: bold;
+    text-align: center;
+}
+
+#main-error a {
+    color: #fff75a;
+}
+
+#main-error span.big {
+    font-size: 20pt;
+}
+
 #body {
     max-width: 850px;
 }

src/dgenies/static/css/dgenies.min.css

-body{font-size:14px;font-family:sans-serif;padding-top:50px}#body{max-width:850px}.navbar-brand{padding-left:45px;background:url(images/logo.svg) no-repeat 0 5px;background-size:40px 40px}#legend{width:100%;height:230px;border:none;margin-bottom:10px;margin-left:10px;margin-top:40px}label.input-checkbox-label input[type=checkbox]{position:relative;vertical-align:middle;bottom:1px}#main-bar-title{background-color:black;color:white;padding-left:10px;margin-bottom:5px}#main-bar-title h1{margin-top:0;margin-bottom:0;margin-left:10px;padding-top:10px;padding-bottom:10px}#main-bar-title h1,#main-bar-title img{display:inline-block;vertical-align:middle;width:auto}#legend .draw{width:100%;height:200px}#legend .title{width:60%;height:30px;text-align:center;font-size:12pt;font-weight:bold;font-family:sans-serif;text-decoration:underline}#legend .draw{width:60%}#draw,#sidebar{display:table-cell;vertical-align:top}#sidebar{min-width:120px;max-width:165px}#sidebar input[type=number]{width:100px}#sidebar label{font-weight:normal!important}#sidebar input[type=button],#sidebar input[type=range],#sidebar input[type=number],#sidebar label{width:100%!important}#supdraw{width:auto;height:auto;position:relative;margin-top:5px}#draw{width:850px}.mylabel{font-size:18pt;font-weight:bold;font-family:FreeSans,sans-serif;top:10pt;position:absolute}#restore-all{width:5%!important;height:5%!important;top:0;right:0;position:absolute;background:#fff url(images/reset.svg) no-repeat 6.5px 7.5px;background-size:65% 65%;cursor:pointer;border:solid 1px black;border-radius:0 15px 0 0}#restore-all:hover{background:#000 url(images/reset_hover.svg) no-repeat 6.5px 7.5px;background-size:65% 65%}#loading{position:absolute;left:calc(50% - 140px);top:calc(50% - 48px)}#loading .label{color:black;display:inline-block;padding-left:55px;padding-right:5px;margin-left:-30px;height:50px;width:180px;background:white;border:1px solid black;border-radius:25px;font-size:20pt;font-weight:bold;vertical-align:middle}.cssload-container{position:relative;display:inline-block;padding-top:-20px;vertical-align:middle}.cssload-whirlpool,.cssload-whirlpool::before,.cssload-whirlpool::after{position:absolute;top:50%;left:50%;border:1px solid rgb(204,204,204);border-left-color:rgb(0,0,0);border-radius:674px;-o-border-radius:674px;-ms-border-radius:674px;-webkit-border-radius:674px;-moz-border-radius:674px}.cssload-whirlpool{margin:-17px 0 0 -17px;height:34px;width:34px;animation:cssload-rotate 1150ms linear infinite;-o-animation:cssload-rotate 1150ms linear infinite;-ms-animation:cssload-rotate 1150ms linear infinite;-webkit-animation:cssload-rotate 1150ms linear infinite;-moz-animation:cssload-rotate 1150ms linear infinite}.cssload-whirlpool::before{content:"";margin:-16px 0 0 -16px;height:30px;width:30px;animation:cssload-rotate 1150ms linear infinite;-o-animation:cssload-rotate 1150ms linear infinite;-ms-animation:cssload-rotate 1150ms linear infinite;-webkit-animation:cssload-rotate 1150ms linear infinite;-moz-animation:cssload-rotate 1150ms linear infinite}.cssload-whirlpool::after{content:"";margin:-20px 0 0 -20px;height:38px;width:38px;animation:cssload-rotate 2300ms linear infinite;-o-animation:cssload-rotate 2300ms linear infinite;-ms-animation:cssload-rotate 2300ms linear infinite;-webkit-animation:cssload-rotate 2300ms linear infinite;-moz-animation:cssload-rotate 2300ms linear infinite}@keyframes cssload-rotate{100%{transform:rotate(360deg)}}@-o-keyframes cssload-rotate{100%{-o-transform:rotate(360deg)}}@-ms-keyframes cssload-rotate{100%{-ms-transform:rotate(360deg)}}@-webkit-keyframes cssload-rotate{100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes cssload-rotate{100%{-moz-transform:rotate(360deg)}}@media screen and (-webkit-min-device-pixel-ratio:0){Body{font-size:16px}}.form-group,.form-group input{margin-bottom:5px!important}div.submit-form fieldset{margin-bottom:10px}h2.title-launch{margin-bottom:20px}.form-group input[type=text],.form-group input[type=email]{width:300px}#body{margin-left:15px;margin-top:10px}.errors-submit ul li{background-color:#ff756b;border:solid 2px #7c0000;margin-bottom:5px;padding:3px;list-style-type:none;font-weight:bold}.errors-submit ul{padding:0;width:460px}html,body{height:100%}#main-wrapper{position:relative;padding-bottom:55px;min-height:100%}footer{position:absolute;bottom:0;height:55px;background:white}footer hr{margin-top:0}.notifyjs-corner{top:50px!important}div.top-forms{position:relative;width:810px}form#select-zone{margin-bottom:5px;margin-left:40px}div.top-forms select,div.top-forms input{height:28px}form#select-zone div.chosen-widget,form#select-zone input[type=button]{display:inline-block;vertical-align:middle}form#select-zone input[type=button]{line-height:100%}div.chosen-container{width:200px!important}a.chosen-single{height:30px!important;line-height:30px!important;font-size:11pt!important}a.chosen-single div b{background-position-y:4px!important}form#form-parameters{margin-top:20px;margin-left:15px}form#export{position:absolute;top:0;right:0}span.tip{position:absolute;z-index:2;display:none;font-size:12pt;height:auto;padding:10px;border-radius:3px;box-shadow:0 1px 2px #666;background:#ededed}table.drawtooltip td.tt-label{padding-right:5px;vertical-align:middle;font-weight:bold}#body-container{max-width:100%!important}div.navbar{background-image:linear-gradient(to bottom,#2B3044 0,#141a30 100%)}div.submit-form table td{padding-bottom:8px;vertical-align:bottom}div.submit-form table td label{padding-right:20px}div.submit-form table input#id_job,div.submit-form table input#email{width:410px}.input-group{display:inline-block}.input-group .input-group-btn,.input-group input{display:inline-block!important;position:relative!important;float:none!important}.input-group button{padding-top:0}div.input-group{padding-left:15px!important}.upload-btn-wrapper{position:relative;height:30px;width:42px;overflow:hidden;display:inline-block}button.btn-file{height:30px;width:42px}div.in-label{position:relative;display:inline-block;width:300px;height:30px;vertical-align:middle}div.progress{width:300px;height:30px;position:absolute;top:0;left:0;z-index:5!important;background:white;margin-bottom:0!important;box-shadow:none}div.progress .bar{height:100%;background:#33b234;z-index:5!important}select.select-type-input,.input-group button,.input-group input{height:30px;line-height:30px}input.show-file{padding-left:2px;padding-right:2px;width:auto;z-index:10!important;background:none!important;color:black}div.hidden-input-files{display:none}label.error{color:red}div.loading-file{display:inline-block;vertical-align:middle;width:30px;height:30px;background:url(images/loading1.gif) no-repeat 0 0;background-size:30px 30px}div.upload-success{display:inline-block;vertical-align:middle;width:30px;height:30px;background:url(images/success.svg) no-repeat 0 0;background-size:30px 30px}div.file-size{display:inline-block;vertical-align:middle;margin-left:10px}div#uploading-loading{height:30px;line-height:30px;width:200px;font-size:14pt;font-weight:bold;text-align:center;color:black}div.progress,input.show-file{width:100%!important}div.in-label{width:300px}div.submit-form table input[type=text],div.submit-form table input[type=email]{border:1px solid #A9A9A9;border-image:none}div.submit-form table input,div.submit-form button,div.submit-form select{border-radius:5px!important;-moz-border-radius:5px!important;-webkit-border-radius:5px!important;height:30px;outline:none!important}div.submit-form select:hover{border-radius:5px 5px 0 0!important;-moz-border-radius:5px 5px 0 0!important;-webkit-border-radius:5px 5px 0 0!important;outline:none!important}.beta-warning{height:30px;line-height:30px;text-align:center;color:white;background-color:#6e0000}.beta-warning a{color:white;font-weight:bold}h2.status{font-size:18pt;margin-bottom:15px;margin-top:10px}.status-body{margin-top:25px;margin-bottom:30px}.progress-status{position:relative;width:500px;height:30px;border:solid 1px black;margin-left:55px;margin-bottom:100px}.progress-status-bar .inner{background:linear-gradient(90deg,rgb(255,254,80) 0%,rgba(16,128,6,1) 100%);width:500px;height:100%}.progress-status-bar{position:absolute;width:0;height:28px;top:0;left:0;overflow:hidden}.progress-status-bar.getfiles,.progress-status-bar.getfiles-waiting{width:3.7%}.progress-status-bar.waiting{width:7%}.progress-status-bar.preparing,.progress-status-bar.prepare-scheduled,.progress-status-bar.preparing-cluster{width:10.7%}.progress-status-bar.prepared{width:20.4%}.progress-status-bar.scheduled{width:30.3%}.progress-status-bar.starting,.progress-status-bar.scheduled-cluster{width:35.2%}.progress-status-bar.started{width:40.3%}.progress-status-bar.merging{width:80.4%}.progress-status-bar.success,.progress-status-bar.fail,.progress-status-bar.no-match{width:100%}.progress-status-bar.fail .inner{background:rgb(195,16,18)}.progress-status .tick{position:absolute;top:29px;width:1px;height:10px;border:solid 1px black}.progress-status .tick p{transform:rotate(-45deg);margin-left:-70px;margin-top:35px;text-align:right;display:block;width:80px;overflow:hidden}.progress-status .tick.submitted{left:-1px}.progress-status .tick.prepared{left:20%}.progress-status .tick.scheduled{left:30%}.progress-status .tick.started{left:40%}.progress-status .tick.merging{left:80%}.progress-status .tick.success{right:-1px}h2.status,div.status-body{margin-left:55px}div#sidebar{position:relative}div#sidebar p.bottom{position:absolute;bottom:0;right:0;width:100px}div#sidebar p.bottom input#delete-job{background:#ffbba8!important}ul.nav ul.dropdown-menu{max-height:300px;overflow-y:auto}
\ No newline at end of file
+body{font-size:14px;font-family:sans-serif;padding-top:50px}#main-error{display:none;width:100%;min-height:60px;background:#ff351a;color:white;font-size:14pt;font-weight:bold;text-align:center}#main-error a{color:#fff75a}#main-error span.big{font-size:20pt}#body{max-width:850px}.navbar-brand{padding-left:45px;background:url(images/logo.svg) no-repeat 0 5px;background-size:40px 40px}#legend{width:100%;height:230px;border:none;margin-bottom:10px;margin-left:10px;margin-top:40px}label.input-checkbox-label input[type=checkbox]{position:relative;vertical-align:middle;bottom:1px}#main-bar-title{background-color:black;color:white;padding-left:10px;margin-bottom:5px}#main-bar-title h1{margin-top:0;margin-bottom:0;margin-left:10px;padding-top:10px;padding-bottom:10px}#main-bar-title h1,#main-bar-title img{display:inline-block;vertical-align:middle;width:auto}#legend .draw{width:100%;height:200px}#legend .title{width:60%;height:30px;text-align:center;font-size:12pt;font-weight:bold;font-family:sans-serif;text-decoration:underline}#legend .draw{width:60%}#draw,#sidebar{display:table-cell;vertical-align:top}#sidebar{min-width:120px;max-width:165px}#sidebar input[type=number]{width:100px}#sidebar label{font-weight:normal!important}#sidebar input[type=button],#sidebar input[type=range],#sidebar input[type=number],#sidebar label{width:100%!important}#supdraw{width:auto;height:auto;position:relative;margin-top:5px}#draw{width:850px}.mylabel{font-size:18pt;font-weight:bold;font-family:FreeSans,sans-serif;top:10pt;position:absolute}#restore-all{width:5%!important;height:5%!important;top:0;right:0;position:absolute;background:#fff url(images/reset.svg) no-repeat 6.5px 7.5px;background-size:65% 65%;cursor:pointer;border:solid 1px black;border-radius:0 15px 0 0}#restore-all:hover{background:#000 url(images/reset_hover.svg) no-repeat 6.5px 7.5px;background-size:65% 65%}#loading{position:absolute;left:calc(50% - 140px);top:calc(50% - 48px)}#loading .label{color:black;display:inline-block;padding-left:55px;padding-right:5px;margin-left:-30px;height:50px;width:180px;background:white;border:1px solid black;border-radius:25px;font-size:20pt;font-weight:bold;vertical-align:middle}.cssload-container{position:relative;display:inline-block;padding-top:-20px;vertical-align:middle}.cssload-whirlpool,.cssload-whirlpool::before,.cssload-whirlpool::after{position:absolute;top:50%;left:50%;border:1px solid rgb(204,204,204);border-left-color:rgb(0,0,0);border-radius:674px;-o-border-radius:674px;-ms-border-radius:674px;-webkit-border-radius:674px;-moz-border-radius:674px}.cssload-whirlpool{margin:-17px 0 0 -17px;height:34px;width:34px;animation:cssload-rotate 1150ms linear infinite;-o-animation:cssload-rotate 1150ms linear infinite;-ms-animation:cssload-rotate 1150ms linear infinite;-webkit-animation:cssload-rotate 1150ms linear infinite;-moz-animation:cssload-rotate 1150ms linear infinite}.cssload-whirlpool::before{content:"";margin:-16px 0 0 -16px;height:30px;width:30px;animation:cssload-rotate 1150ms linear infinite;-o-animation:cssload-rotate 1150ms linear infinite;-ms-animation:cssload-rotate 1150ms linear infinite;-webkit-animation:cssload-rotate 1150ms linear infinite;-moz-animation:cssload-rotate 1150ms linear infinite}.cssload-whirlpool::after{content:"";margin:-20px 0 0 -20px;height:38px;width:38px;animation:cssload-rotate 2300ms linear infinite;-o-animation:cssload-rotate 2300ms linear infinite;-ms-animation:cssload-rotate 2300ms linear infinite;-webkit-animation:cssload-rotate 2300ms linear infinite;-moz-animation:cssload-rotate 2300ms linear infinite}@keyframes cssload-rotate{100%{transform:rotate(360deg)}}@-o-keyframes cssload-rotate{100%{-o-transform:rotate(360deg)}}@-ms-keyframes cssload-rotate{100%{-ms-transform:rotate(360deg)}}@-webkit-keyframes cssload-rotate{100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes cssload-rotate{100%{-moz-transform:rotate(360deg)}}@media screen and (-webkit-min-device-pixel-ratio:0){Body{font-size:16px}}.form-group,.form-group input{margin-bottom:5px!important}div.submit-form fieldset{margin-bottom:10px}h2.title-launch{margin-bottom:20px}.form-group input[type=text],.form-group input[type=email]{width:300px}#body{margin-left:15px;margin-top:10px}.errors-submit ul li{background-color:#ff756b;border:solid 2px #7c0000;margin-bottom:5px;padding:3px;list-style-type:none;font-weight:bold}.errors-submit ul{padding:0;width:460px}html,body{height:100%}#main-wrapper{position:relative;padding-bottom:55px;min-height:100%}footer{position:absolute;bottom:0;height:55px;background:white}footer hr{margin-top:0}.notifyjs-corner{top:50px!important}div.top-forms{position:relative;width:810px}form#select-zone{margin-bottom:5px;margin-left:40px}div.top-forms select,div.top-forms input{height:28px}form#select-zone div.chosen-widget,form#select-zone input[type=button]{display:inline-block;vertical-align:middle}form#select-zone input[type=button]{line-height:100%}div.chosen-container{width:200px!important}a.chosen-single{height:30px!important;line-height:30px!important;font-size:11pt!important}a.chosen-single div b{background-position-y:4px!important}form#form-parameters{margin-top:20px;margin-left:15px}form#export{position:absolute;top:0;right:0}span.tip{position:absolute;z-index:2;display:none;font-size:12pt;height:auto;padding:10px;border-radius:3px;box-shadow:0 1px 2px #666;background:#ededed}table.drawtooltip td.tt-label{padding-right:5px;vertical-align:middle;font-weight:bold}#body-container{max-width:100%!important}div.navbar{background-image:linear-gradient(to bottom,#2B3044 0,#141a30 100%)}div.submit-form table td{padding-bottom:8px;vertical-align:bottom}div.submit-form table td label{padding-right:20px}div.submit-form table input#id_job,div.submit-form table input#email{width:410px}.input-group{display:inline-block}.input-group .input-group-btn,.input-group input{display:inline-block!important;position:relative!important;float:none!important}.input-group button{padding-top:0}div.input-group{padding-left:15px!important}.upload-btn-wrapper{position:relative;height:30px;width:42px;overflow:hidden;display:inline-block}button.btn-file{height:30px;width:42px}div.in-label{position:relative;display:inline-block;width:300px;height:30px;vertical-align:middle}div.progress{width:300px;height:30px;position:absolute;top:0;left:0;z-index:5!important;background:white;margin-bottom:0!important;box-shadow:none}div.progress .bar{height:100%;background:#33b234;z-index:5!important}select.select-type-input,.input-group button,.input-group input{height:30px;line-height:30px}input.show-file{padding-left:2px;padding-right:2px;width:auto;z-index:10!important;background:none!important;color:black}div.hidden-input-files{display:none}label.error{color:red}div.loading-file{display:inline-block;vertical-align:middle;width:30px;height:30px;background:url(images/loading1.gif) no-repeat 0 0;background-size:30px 30px}div.upload-success{display:inline-block;vertical-align:middle;width:30px;height:30px;background:url(images/success.svg) no-repeat 0 0;background-size:30px 30px}div.file-size{display:inline-block;vertical-align:middle;margin-left:10px}div#uploading-loading{height:30px;line-height:30px;width:200px;font-size:14pt;font-weight:bold;text-align:center;color:black}div.progress,input.show-file{width:100%!important}div.in-label{width:300px}div.submit-form table input[type=text],div.submit-form table input[type=email]{border:1px solid #A9A9A9;border-image:none}div.submit-form table input,div.submit-form button,div.submit-form select{border-radius:5px!important;-moz-border-radius:5px!important;-webkit-border-radius:5px!important;height:30px;outline:none!important}div.submit-form select:hover{border-radius:5px 5px 0 0!important;-moz-border-radius:5px 5px 0 0!important;-webkit-border-radius:5px 5px 0 0!important;outline:none!important}.beta-warning{height:30px;line-height:30px;text-align:center;color:white;background-color:#6e0000}.beta-warning a{color:white;font-weight:bold}h2.status{font-size:18pt;margin-bottom:15px;margin-top:10px}.status-body{margin-top:25px;margin-bottom:30px}.progress-status{position:relative;width:500px;height:30px;border:solid 1px black;margin-left:55px;margin-bottom:100px}.progress-status-bar .inner{background:linear-gradient(90deg,rgb(255,254,80) 0%,rgba(16,128,6,1) 100%);width:500px;height:100%}.progress-status-bar{position:absolute;width:0;height:28px;top:0;left:0;overflow:hidden}.progress-status-bar.getfiles,.progress-status-bar.getfiles-waiting{width:3.7%}.progress-status-bar.waiting{width:7%}.progress-status-bar.preparing,.progress-status-bar.prepare-scheduled,.progress-status-bar.preparing-cluster{width:10.7%}.progress-status-bar.prepared{width:20.4%}.progress-status-bar.scheduled{width:30.3%}.progress-status-bar.starting,.progress-status-bar.scheduled-cluster{width:35.2%}.progress-status-bar.started{width:40.3%}.progress-status-bar.merging{width:80.4%}.progress-status-bar.success,.progress-status-bar.fail,.progress-status-bar.no-match{width:100%}.progress-status-bar.fail .inner{background:rgb(195,16,18)}.progress-status .tick{position:absolute;top:29px;width:1px;height:10px;border:solid 1px black}.progress-status .tick p{transform:rotate(-45deg);margin-left:-70px;margin-top:35px;text-align:right;display:block;width:80px;overflow:hidden}.progress-status .tick.submitted{left:-1px}.progress-status .tick.prepared{left:20%}.progress-status .tick.scheduled{left:30%}.progress-status .tick.started{left:40%}.progress-status .tick.merging{left:80%}.progress-status .tick.success{right:-1px}h2.status,div.status-body{margin-left:55px}div#sidebar{position:relative}div#sidebar p.bottom{position:absolute;bottom:0;right:0;width:100px}div#sidebar p.bottom input#delete-job{background:#ffbba8!important}ul.nav ul.dropdown-menu{max-height:300px;overflow-y:auto}
\ No newline at end of file

src/dgenies/templates/base.html

@@ -72,6 +72,10 @@
             </div>
         </div>
 
+        <div id="main-error">
+
+        </div>
+
         <div class="container theme-showcase" id="body-container" role="main">
 
             {% block content %}
@@ -88,5 +92,18 @@
         </div> <!-- /container -->
     </div>
 {% endblock %}
+
+<script type="text/javascript">
+            var supportsTemplateLiterals = false;
+            try {
+                eval("`foo`");
+                supportsTemplateLiterals = true;
+            }
+            catch (e) {
+            }
+            if (!supportsTemplateLiterals) {
+                $("#main-error").html("<span class='big'>Your browser is not supported!</span><br/>Please use a compatible browser like <a href=\"https://www.mozilla.org/firefox\">Firefox</a> or <a href=\"https://www.google.com/chrome/\">Google Chrome / Chromium</a>").show();
+            }
+        </script>
 </body>
 </html>
\ No newline at end of file

src/dgenies/templates/index.html

 {% extends 'base.html' %}
 {% block content %}
     <!-- Jumbotron -->
-      <div class="jumbotron" style="margin-top:-25px;text-align:justify">
+      <div class="jumbotron" style="margin-top:10px; padding-top: 20px;text-align:justify">
         <h1>D-Genies</h1>
           <p class="description lead">D-GENIES &#150; for <strong>D</strong>otplot large <strong>Gen</strong>omes in an <strong>I</strong>nteractive, <strong>E</strong>fficient and <strong>S</strong>imple way &#150; is an online tool
         designed to compare two genomes. It supports large genome and you can interact with the dot plot to improve the visualisation.</p>