]> git.lizzy.rs Git - cheatdb.git/commitdiff
Improve package creation form
authorrubenwardy <rw@rubenwardy.com>
Sat, 22 Dec 2018 11:23:58 +0000 (11:23 +0000)
committerrubenwardy <rw@rubenwardy.com>
Sat, 22 Dec 2018 12:00:20 +0000 (12:00 +0000)
.gitignore
app/public/static/bootstrap.css
app/public/static/tagselector.js
app/scss/components.scss
app/scss/custom.scss [new file with mode: 0644]
app/scss/main.scss [deleted file]
app/templates/base.html
app/templates/macros/forms.html
app/templates/packages/create_edit.html

index 2d4a60d3948968e584f51400df4dad09cc13c48c..64fb527bee145e496260f7c6e7d976843981b205 100644 (file)
@@ -1,7 +1,7 @@
 config.cfg
 config.prod.cfg
 *.sqlite
-main.css
+custom.css
 tmp
 log.txt
 *.rdb
index dc66061f9108fa5a64be3ed60724030c9c9a6781..47ac439a9ea7cca4b51fa6b5ccbefed71dc5e2bd 100644 (file)
@@ -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;
index 2c69e6d583dd6e0ec8e27b1575b51dcb698e2b57..5b9af55598c1795074874e64da4a603bdcebbbd4 100644 (file)
@@ -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) {
                                        });
 
                                function addTag(item) {
-                                       var tag = $('<span class="tag"/>')
+                                       var tag = $('<span class="badge badge-pill badge-primary"/>')
                                                .text(item.toString() + ' ')
                                                .data("id", item.id)
                                                .append('<a>x</a>')
                                                .insertBefore(input);
                                        input.attr("placeholder", null);
                                        select.find("option[value=" + item.id + "]").attr("selected", "selected")
+                                       hide_error(input);
                                }
 
                                function recreate() {
                                }
                                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();
                                }
 
                                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) {
                                }
 
                                function addTag(id, value) {
-                                       var tag = $('<span class="tag"/>')
+                                       var tag = $('<span class="badge badge-pill badge-primary"/>')
                                                .text(value)
                                                .data("id", id)
                                                .append(' <a>x</a>')
                                                .insertBefore(input);
 
                                        input.attr("placeholder", null);
+                                       hide_error(input);
                                }
 
                                function recreate() {
 
                                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();
                                                                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;
index f19b4c8de1380a094026ddee5414fc114d94c3ba..4789a79791132cae917e5bd395b5dcacac5212cf 100644 (file)
        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/custom.scss b/app/scss/custom.scss
new file mode 100644 (file)
index 0000000..c95ebfd
--- /dev/null
@@ -0,0 +1,22 @@
+@import "components.scss";
+@import "packages.scss";
+@import "packagegrid.scss";
+@import "comments.scss";
+
+.dropdown:hover .dropdown-menu {
+   display: block;
+}
+
+.nav-link > img {
+       max-height: 1em;
+}
+
+.jumbotron {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.alert .btn {
+    text-decoration: none;
+}
diff --git a/app/scss/main.scss b/app/scss/main.scss
deleted file mode 100644 (file)
index c95ebfd..0000000
+++ /dev/null
@@ -1,22 +0,0 @@
-@import "components.scss";
-@import "packages.scss";
-@import "packagegrid.scss";
-@import "comments.scss";
-
-.dropdown:hover .dropdown-menu {
-   display: block;
-}
-
-.nav-link > img {
-       max-height: 1em;
-}
-
-.jumbotron {
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
-}
-
-.alert .btn {
-    text-decoration: none;
-}
index c80e0805b6c0c9adcd9f30ff882b11335c67b960..b49b47d1c77e5abf85b87f2423b736718a39ad97 100644 (file)
@@ -7,7 +7,7 @@
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{% block title %}title{% endblock %} - {{ config.USER_APP_NAME }}</title>
        <link rel="stylesheet" type="text/css" href="/static/bootstrap.css">
-       <link rel="stylesheet" type="text/css" href="/static/main.css">
+       <link rel="stylesheet" type="text/css" href="/static/custom.css">
        {% block headextra %}{% endblock %}
 </head>
 
                <a href="{{ url_for('flatpage', path='help/reporting') }}">Report / DMCA</a>
        </footer>
 
-       <script src="static/jquery.min.js"></script>
-       <script src="static/popper.min.js"></script>
-       <script src="static/bootstrap.min.js"></script>
+       <script src="/static/jquery.min.js"></script>
+       <script src="/static/popper.min.js"></script>
+       <script src="/static/bootstrap.min.js"></script>
+       {% block scriptextra %}{% endblock %}
 </body>
 </html>
index 66f305b26978710c3c57c092ce616157a6e11ac1..e53beece196e0eb857acdc1128826099c5424e87 100644 (file)
@@ -2,7 +2,7 @@
        <div class="form-group {% if field.errors %}has-error{% endif %} {{ kwargs.pop('class_', '') }}">
                {% if field.type != 'HiddenField' and label_visible %}
                        {% if not label %}{% set label=field.label.text %}{% endif %}
-                       <label for="{{ field.id }}" class="control-label">{{ label|safe }}</label>
+                       <label for="{{ field.id }}">{{ label|safe }}</label>
                {% endif %}
                {{ field(class_='form-control', **kwargs) }}
                {% if field.errors %}
@@ -13,9 +13,8 @@
        </div>
 {%- endmacro %}
 
-{% macro form_includes() -%}
+{% macro form_scripts() -%}
        <link href="/static/jquery-ui.min.css" rel="stylesheet" type="text/css">
-       <script src="/static/jquery.min.js"></script>
        <script src="/static/jquery-ui.min.js"></script>
        <script src="/static/tagselector.js"></script>
 {% endmacro %}
        <div class="form-group {% if field.errors %}has-error{% endif %} {{ kwargs.pop('class_', '') }}">
                {% if field.type != 'HiddenField' and label_visible %}
                        {% if not label %}{% set label=field.label.text %}{% endif %}
-                       <label for="{{ field.id }}" class="control-label">{{ label|safe }}</label>
+                       <label for="{{ field.id }}">{{ label|safe }}</label>
                {% endif %}
-               <div class="multichoice_selector bulletselector">
+               <div class="multichoice_selector bulletselector form-control">
                        <input type="text" placeholder="Start typing to see suggestions">
                        <div class="clearboth"></div>
                </div>
+               <div class="invalid-remaining invalid-feedback"></div>
                {{ field(class_='form-control', **kwargs) }}
                {% if field.errors %}
                        {% for e in field.errors %}
-                               <p class="help-block">{{ e }}</p>
+                               <div class="invalid-feedback">{{ e }}</div>
                        {% endfor %}
                {% endif %}
        </div>
        <div class="form-group {% if field.errors %}has-error{% endif %} {{ kwargs.pop('class_', '') }}">
                {% if field.type != 'HiddenField' and label_visible %}
                        {% if not label %}{% set label=field.label.text %}{% endif %}
-                       <label for="{{ field.id }}" class="control-label">{{ label|safe }}</label>
+                       <label for="{{ field.id }}">{{ label|safe }}</label>
                {% endif %}
-               <div class="metapackage_selector bulletselector">
+               <div class="metapackage_selector bulletselector form-control">
                        <input type="text" placeholder="Comma-seperated values">
                        <div class="clearboth"></div>
                </div>
                {{ field(class_='form-control', **kwargs) }}
+               <div class="invalid-remaining invalid-feedback"></div>
                {% if field.errors %}
                        {% for e in field.errors %}
                                <p class="help-block">{{ e }}</p>
        <div class="form-group {% if field.errors %}has-error{% endif %} {{ kwargs.pop('class_', '') }}">
                {% if field.type != 'HiddenField' and label_visible %}
                        {% if not label %}{% set label=field.label.text %}{% endif %}
-                       <label for="{{ field.id }}" class="control-label">{{ label|safe }}</label>
+                       <label for="{{ field.id }}">{{ label|safe }}</label>
                {% endif %}
-               <div class="deps_selector bulletselector">
+               <div class="deps_selector bulletselector form-control">
                        <input type="text" placeholder="Comma-seperated values">
                        <div class="clearboth"></div>
                </div>
                {{ field(class_='form-control', **kwargs) }}
+               <div class="invalid-remaining invalid-feedback"></div>
                {% if field.errors %}
                        {% for e in field.errors %}
                                <p class="help-block">{{ e }}</p>
 {% macro render_submit_field(field, label=None, tabindex=None) -%}
        {% if not label %}{% set label=field.label.text %}{% endif %}
        {#<button type="submit" class="form-control btn btn-default btn-primary">{{label}}</button>#}
-       <input type="submit" value="{{label}}"
+       <input type="submit" value="{{label}}" class="btn btn-primary"
                   {% if tabindex %}tabindex="{{ tabindex }}"{% endif %}
                   >
 {%- endmacro %}
index 7e9392ee9a95791207db0b656d5244d0fd92b98e..be61b1c03d30d1d2012804a60cc420365134f05b 100644 (file)
@@ -7,6 +7,31 @@
        {% endif %}
 {% endblock %}
 
+{% from "macros/forms.html" import render_field, render_submit_field, form_scripts, render_multiselect_field, render_mpackage_field, render_deps_field, package_lists %}
+
+{% block scriptextra %}
+       {{ form_scripts() }}
+
+       <script src="/static/simplemde.min.js"></script>
+       <link rel="stylesheet" type="text/css" href="/static/simplemde.min.css">
+       <script>
+               var simplemde = new SimpleMDE({ element: $("#desc")[0] });
+       </script>
+
+       {% if enable_wizard %}
+               <script src="/static/url.min.js"></script>
+               <script src="/static/polltask.js"></script>
+               <script src="/static/package_create.js"></script>
+               <noscript>
+                       <div class="box box_grey alert alert-warning">
+                               <span class="icon_message"></span>
+                               Javascript is needed to automatically import metadata from VCS.
+                       </div>
+               </noscript>
+       {% endif %}
+       <script src="/static/package_edit.js"></script>
+{% endblock %}
+
 {% block content %}
        <h1>Create Package</h1>
 
        </div>
 
 
-       {% from "macros/forms.html" import render_field, render_submit_field, form_includes, render_multiselect_field, render_mpackage_field, render_deps_field, package_lists %}
-       {{ form_includes() }}
        {{ package_lists() }}
 
        <form method="POST" action="" class="tableform">
                {{ form.hidden_tag() }}
 
-               <h2 class="pkg_meta">Package</h2>
-
-               {{ render_field(form.type, class_="pkg_meta") }}
-               {{ render_field(form.name, class_="pkg_meta") }}
-               {{ render_field(form.title, class_="pkg_meta") }}
-               {{ render_field(form.shortDesc, class_="pkg_meta") }}
-               {{ render_field(form.desc, class_="pkg_meta") }}
-               {{ render_multiselect_field(form.tags, class_="pkg_meta") }}
-               <div class="pkg_meta">
-                       {{ render_field(form.license, class_="not_txp") }}
-               </div>
-               {{ render_field(form.media_license, class_="pkg_meta") }}
+               <fieldset>
+                       <legend>Package</legend>
+
+                       {{ render_field(form.type, class_="pkg_meta") }}
+                       {{ render_field(form.name, class_="pkg_meta") }}
+                       {{ render_field(form.title, class_="pkg_meta") }}
+                       {{ render_field(form.shortDesc, class_="pkg_meta") }}
+                       {{ render_field(form.desc, class_="pkg_meta") }}
+                       {{ render_multiselect_field(form.tags, class_="pkg_meta") }}
+                       <div class="pkg_meta">
+                               {{ render_field(form.license, class_="not_txp") }}
+                       </div>
+                       {{ render_field(form.media_license, class_="pkg_meta") }}
+               </fieldset>
 
-               <div class="pkg_meta">
-                       <h2 class="not_txp">Dependency Info</h2>
+               <fieldset class="pkg_meta">
+                       <legend class="not_txp">Package</legend>
 
                        {{ render_mpackage_field(form.provides_str, class_="not_txp", placeholder="Comma separated list") }}
                        {{ render_deps_field(form.harddep_str, class_="not_txp not_game", placeholder="Comma separated list") }}
                        {{ render_deps_field(form.softdep_str, class_="not_txp not_game", placeholder="Comma separated list") }}
-               </div>
+               </fieldset>
 
-               <h2 class="pkg_meta">Repository and Links</h2>
+               <fieldset>
+                       <legend class="pkg_meta">Repository and Links</legend>
 
-               <div class="pkg_wiz_1">
-                       <p>Enter the repo URL for the package.
-                       If the repo uses git then the metadata will be automatically imported.</p>
+                       <div class="pkg_wiz_1">
+                               <p>Enter the repo URL for the package.
+                               If the repo uses git then the metadata will be automatically imported.</p>
 
-                       <p>Leave blank if you don't have a repo. Click skip if the import fails.</p>
-               </div>
+                               <p>Leave blank if you don't have a repo. Click skip if the import fails.</p>
+                       </div>
 
-               {{ render_field(form.repo, class_="pkg_repo") }}
+                       {{ render_field(form.repo, class_="pkg_repo") }}
 
-               <div class="pkg_wiz_1">
-                       <a id="pkg_wiz_1_next" class="btn btn-primary">Next (Autoimport)</a>
-                       <a id="pkg_wiz_1_skip" class="btn btn-default">Skip Autoimport</a>
-               </div>
 
-               <div class="pkg_wiz_2">
-                       Importing... (This may take a while)
-               </div>
+                       <div class="pkg_wiz_1">
+                               <a id="pkg_wiz_1_next" class="btn btn-primary">Next (Autoimport)</a>
+                               <a id="pkg_wiz_1_skip" class="btn btn-default">Skip Autoimport</a>
+                       </div>
 
-               {{ render_field(form.website, class_="pkg_meta") }}
-               {{ render_field(form.issueTracker, class_="pkg_meta") }}
-               {{ render_field(form.forums, class_="pkg_meta") }}
-               <div class="pkg_meta">{{ render_submit_field(form.submit) }}</div>
-       </form>
+                       <div class="pkg_wiz_2">
+                               Importing... (This may take a while)
+                       </div>
 
-       <script src="/static/simplemde.min.js"></script>
-       <link rel="stylesheet" type="text/css" href="/static/simplemde.min.css">
-       <script>
-               var simplemde = new SimpleMDE({ element: $("#desc")[0] });
-       </script>
+                       {{ render_field(form.website, class_="pkg_meta") }}
+                       {{ render_field(form.issueTracker, class_="pkg_meta") }}
+                       {{ render_field(form.forums, class_="pkg_meta") }}
+               </fieldset>
 
-       {% if enable_wizard %}
-               <script src="/static/url.min.js"></script>
-               <script src="/static/polltask.js"></script>
-               <script src="/static/package_create.js"></script>
-               <noscript>
-                       <div class="box box_grey alert alert-warning">
-                               <span class="icon_message"></span>
-                               Javascript is needed to automatically import metadata from VCS.
-                       </div>
-               </noscript>
-       {% endif %}
-       <script src="/static/package_edit.js"></script>
+               <div class="pkg_meta">{{ render_submit_field(form.submit) }}</div>
+       </form>
 {% endblock %}