diff --git a/.gitignore b/.gitignore index 2d4a60d..64fb527 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,7 @@ config.cfg config.prod.cfg *.sqlite -main.css +custom.css tmp log.txt *.rdb diff --git a/app/public/static/bootstrap.css b/app/public/static/bootstrap.css index dc66061..47ac439 100644 --- a/app/public/static/bootstrap.css +++ b/app/public/static/bootstrap.css @@ -11,7 +11,7 @@ * Copyright 2011-2018 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ -@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic"); +/* @import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic"); */ :root { --blue: #375a7f; --indigo: #6610f2; diff --git a/app/public/static/tagselector.js b/app/public/static/tagselector.js index 2c69e6d..5b9af55 100644 --- a/app/public/static/tagselector.js +++ b/app/public/static/tagselector.js @@ -5,13 +5,25 @@ * https://petprojects.googlecode.com/svn/trunk/GPL-LICENSE.txt */ (function($) { + function hide_error(input) { + var err = input.parent().parent().find(".invalid-remaining"); + err.hide(); + } + + function show_error(input, msg) { + var err = input.parent().parent().find(".invalid-remaining"); + console.log(err.length); + err.text(msg); + err.show(); + } + $.fn.selectSelector = function(source, name, select) { return this.each(function() { var selector = $(this), input = $('input[type=text]', this); selector.click(function() { input.focus(); }) - .delegate('.tag a', 'click', function() { + .delegate('.badge a', 'click', function() { var id = $(this).parent().data("id"); for (var i = 0; i < source.length; i++) { if (source[i].id == id) { @@ -23,13 +35,14 @@ }); function addTag(item) { - var tag = $('') + var tag = $('') .text(item.toString() + ' ') .data("id", item.id) .append('x') .insertBefore(input); input.attr("placeholder", null); select.find("option[value=" + item.id + "]").attr("selected", "selected") + hide_error(input); } function recreate() { @@ -42,6 +55,13 @@ } recreate(); + input.focusout(function(e) { + var value = input.val().trim() + if (value != "") { + show_error(input, "Please select an existing tag, it;s not possible to add custom ones."); + } + }) + input.keydown(function(e) { if (e.keyCode === $.ui.keyCode.TAB && $(this).data('ui-autocomplete').menu.active) e.preventDefault(); @@ -92,7 +112,7 @@ } selector.click(function() { input.focus(); }) - .delegate('.tag a', 'click', function() { + .delegate('.badge a', 'click', function() { var id = $(this).parent().data("id"); for (var i = 0; i < selected.length; i++) { if (selected[i] == id) { @@ -113,13 +133,14 @@ } function addTag(id, value) { - var tag = $('') + var tag = $('') .text(value) .data("id", id) .append(' x') .insertBefore(input); input.attr("placeholder", null); + hide_error(input); } function recreate() { @@ -147,6 +168,18 @@ result.change(readFromResult); + input.focusout(function() { + var item = input.val(); + if (item.length == 0) { + input.data("ui-autocomplete").search(""); + } else if (item.match(/^([a-z0-9_]+)$/)) { + selectItem(item); + recreate(); + input.val(""); + } + return true; + }); + input.keydown(function(e) { if (e.keyCode === $.ui.keyCode.TAB && $(this).data('ui-autocomplete').menu.active) e.preventDefault(); @@ -159,7 +192,7 @@ recreate(); input.val(""); } else { - alert("Only lowercase alphanumeric and number names allowed."); + show_error(input, "Only lowercase alphanumeric and number names allowed."); } e.preventDefault(); return true; diff --git a/app/scss/components.scss b/app/scss/components.scss index f19b4c8..4789a79 100644 --- a/app/scss/components.scss +++ b/app/scss/components.scss @@ -38,27 +38,15 @@ white-space: nowrap; background: transparent; } -.bulletselector .tag { - background: #375D81; - border-radius: 3px; - -moz-border-radius: 3px; - color: #FFF; +.bulletselector .badge { float: left; - height: 15px; - padding: 0.1em 0.4em 0.5em; + padding: 0.4em 0.8em; margin-right: 0.3em; - margin-bottom: 0.3em; - vertical-align: baseline; -} -.bulletselector .tag a { - color: #FFF; - cursor: pointer; -} -.bulletselector .tag a:hover { - color: #0099CC; - text-decoration: none; } +.invalid-remaining { + display: none; +} .t-mll tr td:not(:first-child) { text-align: left; diff --git a/app/scss/main.scss b/app/scss/custom.scss similarity index 100% rename from app/scss/main.scss rename to app/scss/custom.scss diff --git a/app/templates/base.html b/app/templates/base.html index c80e080..b49b47d 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -7,7 +7,7 @@