diff --git a/resources/css/snackbar.min.css b/resources/css/snackbar.min.css new file mode 100644 index 0000000..e74cee7 --- /dev/null +++ b/resources/css/snackbar.min.css @@ -0,0 +1 @@ +.snackbar-container{transition:all .5s ease;transition-property:top,right,bottom,left,opacity;font-family:Roboto,sans-serif;font-size:14px;min-height:14px;background-color:#070b0e;position:fixed;display:flex;justify-content:space-between;align-items:center;color:#fff;line-height:22px;padding:18px 24px;bottom:-100px;top:-100px;opacity:0;z-index:9999}.snackbar-container .action{background:inherit;display:inline-block;border:none;font-size:inherit;text-transform:uppercase;color:#4caf50;margin:0 0 0 24px;padding:0;min-width:min-content;cursor:pointer}@media (min-width:640px){.snackbar-container{min-width:288px;max-width:568px;display:inline-flex;border-radius:2px;margin:24px}}@media (max-width:640px){.snackbar-container{left:0;right:0;width:100%}}.snackbar-pos.bottom-center{top:auto!important;bottom:0;left:50%;transform:translate(-50%,0)}.snackbar-pos.bottom-left{top:auto!important;bottom:0;left:0}.snackbar-pos.bottom-right{top:auto!important;bottom:0;right:0}.snackbar-pos.top-left{bottom:auto!important;top:0;left:0}.snackbar-pos.top-center{bottom:auto!important;top:0;left:50%;transform:translate(-50%,0)}.snackbar-pos.top-right{bottom:auto!important;top:0;right:0}@media (max-width:640px){.snackbar-pos.bottom-center,.snackbar-pos.top-center{left:0;transform:none}} \ No newline at end of file diff --git a/resources/css/style.css b/resources/css/style.css index 3a532ac..a71826c 100644 --- a/resources/css/style.css +++ b/resources/css/style.css @@ -166,3 +166,23 @@ body::after { line-height: 60px; background-color: #f5f5f5; } + +/* Small devices (landscape phones, 576px and up) */ +@media (min-width: 576px) { + +} + +/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */ +@media (min-width: 768px) { + +} + +/* Large devices (desktops, 992px and up) */ +@media (min-width: 992px) { + +} + +/* Extra large devices (large desktops, 1200px and up) */ +@media (min-width: 1200px) { + +} diff --git a/resources/index.html b/resources/index.html index 3f1f229..023d7ee 100644 --- a/resources/index.html +++ b/resources/index.html @@ -19,6 +19,7 @@ + @@ -29,7 +30,10 @@ - + + + + @@ -93,7 +97,7 @@
-
Leaderboard
+
Leaderboard
@@ -366,6 +370,5 @@
- \ No newline at end of file diff --git a/resources/js/script.js b/resources/js/script.js index 446f500..df965f7 100644 --- a/resources/js/script.js +++ b/resources/js/script.js @@ -61,33 +61,52 @@ $( document ).ready( () => { $('#dsj1000_submit').hide(); $( "#ulysses16_submit" ).click(function() { - upload_leaderboard('ulysses16'); - disable_btn($('#ulysses16_submit')); + if (check_submit_info()) + { + upload_leaderboard('ulysses16'); + disable_btn($('#ulysses16_submit')); + } + }); $( "#att48_submit" ).click(function() { - upload_leaderboard('att48'); - disable_btn($('#att48_submit')); + if (check_submit_info()) + { + upload_leaderboard('att48'); + disable_btn($('#att48_submit')); + } }); $( "#st70_submit" ).click(function() { - upload_leaderboard('st70'); - disable_btn($('#st70_submit')); + if (check_submit_info()) + { + upload_leaderboard('st70'); + disable_btn($('#st70_submit')); + } }); $( "#a280_submit" ).click(function() { - upload_leaderboard('a280'); - disable_btn($('#a280_submit')); + if (check_submit_info()) + { + upload_leaderboard('a280'); + disable_btn($('#a280_submit')); + } }); $( "#pcb442_submit" ).click(function() { - upload_leaderboard('pcb442'); - disable_btn($('#pcb442_submit')); + if (check_submit_info()) + { + upload_leaderboard('pcb442'); + disable_btn($('#pcb442_submit')); + } }); $( "#dsj1000_submit" ).click(function() { - upload_leaderboard('dsj1000'); - disable_btn($('#dsj1000_submit')); + if (check_submit_info()) + { + upload_leaderboard('dsj1000'); + disable_btn($('#dsj1000_submit')); + } }); // Initialize file uploader @@ -116,7 +135,11 @@ $( document ).ready( () => { var fileName = e.target.files[0].name; if(fileName !== "my_model.py") { - alert('Please upload my_model.py'); + Snackbar.show({ + text: 'Please only upload my_model.py.', + pos: 'bottom-right', + duration: 10000 + }); $('#btnSubmit').prop('disabled', true); } else @@ -134,6 +157,30 @@ $( document ).ready( () => { }); }) +function check_submit_info() { + if(!$("#submit_name").val()) + { + Snackbar.show({ + text: 'Please tell us your name.', + pos: 'bottom-right', + duration: 10000 + }); + $("#submit_name").focus(); + return false; + } + if(!$("#submit_desc").val()) + { + Snackbar.show({ + text: 'You forget to leave some comment.', + pos: 'bottom-right', + duration: 10000 + }); + $("#submit_desc").focus(); + return false; + } + return true; +} + function disable_btn(btn) { btn.show(); btn.removeClass('btn-primary'); diff --git a/resources/js/snackbar.min.js b/resources/js/snackbar.min.js new file mode 100644 index 0000000..1e191a3 --- /dev/null +++ b/resources/js/snackbar.min.js @@ -0,0 +1,17 @@ +/*! + * Snackbar v0.1.14 + * http://polonel.com/Snackbar + * + * Copyright 2018 Chris Brame and other contributors + * Released under the MIT license + * https://github.com/polonel/Snackbar/blob/master/LICENSE + */ +!function(a,b){"use strict";"function"==typeof define&&define.amd?define([],function(){return a.Snackbar=b()}):"object"==typeof module&&module.exports?module.exports=a.Snackbar=b():a.Snackbar=b()}(this,function(){var a={};a.current=null;var b={text:"Default Text",textColor:"#FFFFFF",width:"auto",showAction:!0,actionText:"Dismiss",actionTextAria:"Dismiss, Description for Screen Readers",alertScreenReader:!1,actionTextColor:"#4CAF50",showSecondButton:!1,secondButtonText:"",secondButtonAria:"Description for Screen Readers",secondButtonTextColor:"#4CAF50",backgroundColor:"#323232",pos:"bottom-left",duration:5e3,customClass:"",onActionClick:function(a){a.style.opacity=0},onSecondButtonClick:function(a){},onClose:function(a){}};a.show=function(d){var e=c(!0,b,d);a.current&&(a.current.style.opacity=0,setTimeout(function(){var a=this.parentElement;a&& +// possible null if too many/fast Snackbars +a.removeChild(this)}.bind(a.current),500)),a.snackbar=document.createElement("div"),a.snackbar.className="snackbar-container "+e.customClass,a.snackbar.style.width=e.width;var f=document.createElement("p");if(f.style.margin=0,f.style.padding=0,f.style.color=e.textColor,f.style.fontSize="14px",f.style.fontWeight=300,f.style.lineHeight="1em",f.innerHTML=e.text,a.snackbar.appendChild(f),a.snackbar.style.background=e.backgroundColor,e.showSecondButton){var g=document.createElement("button");g.className="action",g.innerHTML=e.secondButtonText,g.setAttribute("aria-label",e.secondButtonAria),g.style.color=e.secondButtonTextColor,g.addEventListener("click",function(){e.onSecondButtonClick(a.snackbar)}),a.snackbar.appendChild(g)}if(e.showAction){var h=document.createElement("button");h.className="action",h.innerHTML=e.actionText,h.setAttribute("aria-label",e.actionTextAria),h.style.color=e.actionTextColor,h.addEventListener("click",function(){e.onActionClick(a.snackbar)}),a.snackbar.appendChild(h)}e.duration&&setTimeout(function(){a.current===this&&(a.current.style.opacity=0, +// When natural remove event occurs let's move the snackbar to its origins +a.current.style.top="-100px",a.current.style.bottom="-100px")}.bind(a.snackbar),e.duration),e.alertScreenReader&&a.snackbar.setAttribute("role","alert"),a.snackbar.addEventListener("transitionend",function(b,c){"opacity"===b.propertyName&&"0"===this.style.opacity&&("function"==typeof e.onClose&&e.onClose(this),this.parentElement.removeChild(this),a.current===this&&(a.current=null))}.bind(a.snackbar)),a.current=a.snackbar,document.body.appendChild(a.snackbar);getComputedStyle(a.snackbar).bottom,getComputedStyle(a.snackbar).top;a.snackbar.style.opacity=1,a.snackbar.className="snackbar-container "+e.customClass+" snackbar-pos "+e.pos},a.close=function(){a.current&&(a.current.style.opacity=0)}; +// Pure JS Extend +// http://gomakethings.com/vanilla-javascript-version-of-jquery-extend/ +var c=function(){var a={},b=!1,d=0,e=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(b=arguments[0],d++);for(var f=function(d){for(var e in d)Object.prototype.hasOwnProperty.call(d,e)&&(b&&"[object Object]"===Object.prototype.toString.call(d[e])?a[e]=c(!0,a[e],d[e]):a[e]=d[e])};d { // Update Leaderboard Table socket.on('leaderboard', (obj) => { - console.log(obj); + // console.log(obj); $(".leaderboard-table").find("tr:not(:first):not(:last)").remove(); if(obj.ulysses16.length != 0) { obj.ulysses16.forEach(element => {