diff --git a/Views/Home/Index.cshtml b/Views/Home/Index.cshtml index b6044b3..ac65c39 100644 --- a/Views/Home/Index.cshtml +++ b/Views/Home/Index.cshtml @@ -3,4 +3,6 @@ ViewData["Title"] = "Home Page"; } - \ No newline at end of file + + +
Saved!
\ No newline at end of file diff --git a/wwwroot/css/site.css b/wwwroot/css/site.css index 58608cb..da2bc1b 100644 --- a/wwwroot/css/site.css +++ b/wwwroot/css/site.css @@ -1,6 +1,7 @@ html { font-size: 14px; height: 100%; + font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } @media (min-width: 768px) { @@ -9,10 +10,6 @@ html { } } -.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { - box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; -} - html { position: relative; min-height: 100%; @@ -27,10 +24,28 @@ textarea { width: 100%; height: 100%; padding: 15px; + margin: 0; + resize: none; color: #444; - font-size: 16px; + font-size: 12px; font-family: Consolas; outline: none; position: absolute; box-sizing: border-box; } + +#saved-indicator { + position: fixed; + bottom: -40px; + right: 10px; + font-size: 12px; + background-color: green; + padding: 10px; + border-radius: 10px 10px 0 0; + color: #fff; + transition: bottom 0.2s; +} + +#saved-indicator.show { + bottom: 0; +} \ No newline at end of file diff --git a/wwwroot/js/site.js b/wwwroot/js/site.js index 2cf24c3..0fb38ad 100644 --- a/wwwroot/js/site.js +++ b/wwwroot/js/site.js @@ -9,7 +9,11 @@ type: 'POST' }).done(function (data) { - // saved! + // show 'saved' indicator + $('#saved-indicator').addClass('show').delay(800).queue(function (next) { + $(this).removeClass('show'); + next(); + }); }).fail(function () { alert('Could not connect to server. Check your internet connection and try again.'); @@ -18,13 +22,16 @@ $(function () { - // bind on blur event - $('textarea').on('blur', function () { - saveContent($(this)); + var timer = null; + $('textarea').keyup(function () { + clearTimeout(timer); + timer = setTimeout(function () { + saveContent(); + }, 500); }); // 20 second interval - setInterval(saveContent, 20000); + setInterval(saveContent, 60000); //onbeforeunload = saveContent();