Design fixes to footer, tags input, and filters snippet

dojo/static/dojo/css/dojo.css

@@ -687,6 +687,19 @@ input#simple_search {
     width: 100%;
 }
 
+.dojo-modals-wrapper {
+    display: none;
+    flex-direction: column;
+    position: fixed;
+    z-index: 1;
+    padding-top: 100px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+}
+
 .footer {
     background-color: #F8F8F8;
     border-top: 1px solid #dcdcdc;
@@ -1020,18 +1033,30 @@ div.custom-search-form {
     #page-wrapper {
         margin: 75px 0 0 0;
     }
+
+    #footer-wrapper {
+        margin: 75px 0 0 0;
+    }
 }
 
 @media (min-width: 359px) {
     #page-wrapper {
         margin: 100px 0 0 0;
     }
+
+    #footer-wrapper {
+        margin: 100px 0 0 0;
+    }
 }
 
 @media (min-width: 600px) {
     #page-wrapper {
         margin: 50px 0 0 0;
     }
+
+    #footer-wrapper {
+        margin: 50px 0 0 0;
+    }
 }
 
 @media (min-width: 768px) {
@@ -1043,6 +1068,11 @@ div.custom-search-form {
         margin: 0 0 0 175px;
     }
 
+    #footer-wrapper {
+        margin: 0 0 0 175px;
+        border-left: 1px solid #e7e7e7;
+    }
+
     li#minimize-menu-li {
         display: inline-block;
         visibility: visible;
@@ -1085,6 +1115,11 @@ div.custom-search-form {
 
     body.min #page-wrapper {
         margin: 0 0 0 50px;
+        border-left: 1px solid #e7e7e7;
+    }
+
+    body.min #footer-wrapper {
+        margin: 0 0 0 50px;
     }
 
     body.min div.navbar-default.sidebar {
@@ -1130,6 +1165,31 @@ div.custom-search-form {
     margin-right: 25px;
 }
 
+.dojo-filter-set.form-inline .filter-form-group {
+    display: flex;
+    flex-wrap: wrap;
+    flex-basis: auto;
+    flex-grow: 4;
+    align-content: stretch;
+    margin-bottom: 10px;
+    vertical-align: middle;
+    margin-right: 25px;
+}
+
+.dojo-filter-set.form-inline .filter-form-input {
+    margin-right: 25px;
+    margin-bottom: 10px;
+}
+
+.dojo-filter-set.form-inline .filter-form-control {
+    width: auto!important;
+    vertical-align: middle;
+}
+
+.dojo-filter-set.form-inline .form-control {
+    height: auto!important;
+}
+
 .report-filter-set {
     padding-left: 10px;
 }

dojo/templates/base.html

@@ -1003,6 +1003,16 @@ <h3 class="no-margin-top" style="padding-bottom: 5px;">
                 <!-- /.container-fluid -->
             </div>
             <!-- /#page-wrapper -->
+
+            <!-- .dojo-modals-wrapper -->
+            <div id="dojo-modals-wrapper" class="dojo-modals-wrapper">
+            {% block modals %}
+            {% endblock %}
+            </div>
+            <!-- /.dojo-modals-wrapper -->
+
+            <!-- #footer-wrapper -->
+            <div id="footer-wrapper">
             {% block footer %}
                 <footer class="footer">
                     <div class="container">
@@ -1035,6 +1045,8 @@ <h3 class="no-margin-top" style="padding-bottom: 5px;">
                     <p id="disable_count" class="hidden">{{ 'DISABLE_ALERT_COUNTER'|setting_enabled }}</p>
                 </footer>
             {% endblock %}
+            </div>
+            <!-- /#footer-wrapper -->
         </div>
 
         <!-- /#wrapper -->

dojo/templates/dojo/ad_hoc_findings.html

@@ -66,13 +66,12 @@ <h4> Github </h4>
         $ = django.jQuery;
         $(function () {
             $("textarea").each(function (index, elem) {
-
                 if (elem.hasAttribute("required")) {
                     elem.removeAttribute("required");
                     elem.id = "req"
                 }
 
-                if (elem.name != 'endpoints_to_add' && elem.name != 'vulnerability_ids') {
+                if (elem.name != 'endpoints_to_add' && elem.name != 'vulnerability_ids' && !$(elem).hasClass('select2-search__field')) {
                     var mde = new EasyMDE({
                         spellChecker: false,
                         element: elem,

dojo/templates/dojo/add_findings.html

@@ -112,29 +112,28 @@ <h4> JIRA </h4>
             {% endif %}
         });
 
-            $("textarea").each(function (index, elem) {
-
-                if (elem.hasAttribute("required")) {
-                    elem.removeAttribute("required");
-                    elem.id = "req"
-                }
+        $("textarea").each(function (index, elem) {
+            if (elem.hasAttribute("required")) {
+                elem.removeAttribute("required");
+                elem.id = "req"
+            }
 
-                if (elem.name != 'endpoints_to_add' && elem.name != 'vulnerability_ids') {
-                    var mde = new EasyMDE({
-                        spellChecker: false,
-                        element: elem,
-                        autofocus: false,
-                        forceSync: true,
-                        toolbar: ["bold", "italic", "heading", "|",
-                            "quote", "unordered-list", "ordered-list", "|",
-                            "link", "image", "|",
-                            "table", "horizontal-rule", "code", "|",
-                            "guide"
-                        ]
-                    });
-                    mde.render();
-                }
-            });
+            if (elem.name != 'endpoints_to_add' && elem.name != 'vulnerability_ids' && !$(elem).hasClass('select2-search__field')) {
+                var mde = new EasyMDE({
+                    spellChecker: false,
+                    element: elem,
+                    autofocus: false,
+                    forceSync: true,
+                    toolbar: ["bold", "italic", "heading", "|",
+                        "quote", "unordered-list", "ordered-list", "|",
+                        "link", "image", "|",
+                        "table", "horizontal-rule", "code", "|",
+                        "guide"
+                    ]
+                });
+                mde.render();
+            }
+        });
 
         $("#add_finding").submit(function () {
             var isFormValid = true;

dojo/templates/dojo/add_group.html

@@ -2,60 +2,62 @@
 {% load display_tags %}
 {% load static %}
 {% block add_css %}
-
-<link rel="stylesheet" href="{% static "easymde/dist/easymde.min.css" %}">
+    <link rel="stylesheet" href="{% static "easymde/dist/easymde.min.css" %}">
 {% endblock %}
 {% block add_styles %}
-.editor-toolbar, .editor-statusbar, .editor-preview-side, .CodeMirror {
-width: 70% !important;
-}
-.chosen-container.chosen-container-multi {
-width: 70% !important;
-}
+    .editor-toolbar, .editor-statusbar, .editor-preview-side, .CodeMirror {
+        width: 70% !important;
+    }
+
+    .chosen-container.chosen-container-multi {
+        width: 70% !important;
+    }
 {% endblock %}
-{% block content %}
 
+{% block content %}
 <form class="form-horizontal" method="post">{% csrf_token %}
-  <fieldset>
-    <legend>Default Information</legend>
-    {% include "dojo/form_fields.html" with form=form %}
-  </fieldset>
-  <fieldset>
-    <legend>Global Role</legend>
-    {% include "dojo/form_fields.html" with form=global_role_form %}
-  </fieldset>
-<div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <input class="btn btn-primary" type="submit" name="add_group" value="Submit"/>
+    <fieldset>
+	    <legend>Default Information</legend>
+	    {% include "dojo/form_fields.html" with form=form %}
+    </fieldset>
+    <fieldset>
+	    <legend>Global Role</legend>
+	    {% include "dojo/form_fields.html" with form=global_role_form %}
+    </fieldset>
+    <div class="form-group">
+        <div class="col-sm-offset-2 col-sm-10">
+            <input class="btn btn-primary" type="submit" name="add_group" value="Submit"/>
+        </div>
     </div>
-  </div>
 </form>
 {% endblock %}
+
 {% block postscript %}
 <script type="application/javascript" src="{% static "easymde/dist/easymde.min.js" %}"></script>
 <script type="application/javascript">
-  $(function () {
-    $("textarea").each(function (index, elem) {
-
-      if (elem.hasAttribute("required")) {
-        elem.removeAttribute("required");
-        elem.id = "req"
-      }
+    $(function () {
+        $("textarea").each(function (index, elem) {
+            if (elem.hasAttribute("required")) {
+                elem.removeAttribute("required");
+                elem.id = "req"
+            }
 
-      var mde = new EasyMDE({
-        spellChecker: false,
-        element: elem,
-        autofocus: false,
-        forceSync: true,
-        toolbar: ["bold", "italic", "heading", "|",
-          "quote", "unordered-list", "ordered-list", "|",
-          "link", "image", "|",
-          "table", "horizontal-rule", "code", "|",
-          "guide"
-        ]
-      });
-      mde.render();
+            if(!$(elem).hasClass('select2-search__field')) {
+                var mde = new EasyMDE({
+                    spellChecker: false,
+                    element: elem,
+                    autofocus: false,
+                    forceSync: true,
+                    toolbar: ["bold", "italic", "heading", "|",
+                        "quote", "unordered-list", "ordered-list", "|",
+                        "link", "image", "|",
+                        "table", "horizontal-rule", "code", "|",
+                        "guide"
+                    ]
+                });
+                mde.render();
+            }
+        });
     });
-  });
 </script>
 {% endblock %}

dojo/templates/dojo/add_template.html

@@ -66,13 +66,12 @@ <h3> {{ name }} {{ template }}</h3>
 
         $(function () {
             $("textarea").each(function (index, elem) {
-
                 if (elem.hasAttribute("required")) {
                     elem.removeAttribute("required");
                     elem.id = "req"
                 }
 
-                if (elem.name != 'vulnerability_ids') {
+                if (elem.name != 'vulnerability_ids' && !$(elem).hasClass('select2-search__field')) {
                     var mde = new EasyMDE({
                         spellChecker: false,
                         element: elem,
@@ -88,6 +87,7 @@ <h3> {{ name }} {{ template }}</h3>
                     mde.render();
                 }
             });
+
             // add req id to input field which enables input length check
             $("input").each(function (index, elem) {
 

dojo/templates/dojo/apply_finding_template.html

@@ -45,13 +45,12 @@ <h3> Apply template to a Finding</h3>
 
         $(function () {
             $("textarea").each(function (index, elem) {
-
                 if (elem.hasAttribute("required")) {
                     elem.removeAttribute("required");
                     elem.id = "req"
                 }
 
-                if (elem.name != 'vulnerability_ids') {
+                if (elem.name != 'vulnerability_ids' && !$(elem).hasClass('select2-search__field')) {
                     var mde = new EasyMDE({
                         spellChecker: false,
                         element: elem,

dojo/templates/dojo/edit_finding.html

@@ -164,13 +164,12 @@ <h4> GitHub </h4>
             });
 
             $("textarea").each(function (index, elem) {
-
                 if (elem.hasAttribute("required")) {
                     elem.removeAttribute("required");
                     elem.id = "req"
                 }
 
-                if (elem.name != 'endpoints_to_add' && elem.name != 'vulnerability_ids') {
+                if (elem.name != 'endpoints_to_add' && elem.name != 'vulnerability_ids' && !$(elem).hasClass('select2-search__field')) {
                     var mde = new EasyMDE({
                         spellChecker: false,
                         element: elem,

dojo/templates/dojo/edit_presets.html

@@ -31,25 +31,26 @@
     <script type="application/javascript">
         $(function () {
             $("textarea").each(function (index, elem) {
-
                 if (elem.hasAttribute("required")) {
                     elem.removeAttribute("required");
                     elem.id = "req"
                 }
 
-                var mde = new EasyMDE({
-                    spellChecker: false,
-                    element: elem,
-                    autofocus: false,
-                    forceSync: true,
-                    toolbar: ["bold", "italic", "heading", "|",
-                        "quote", "unordered-list", "ordered-list", "|",
-                        "link", "image", "|",
-                        "table", "horizontal-rule", "code", "|",
-                        "guide"
-                    ]
-                });
-                mde.render();
+                if(!$(elem).hasClass('select2-search__field')) {
+                    var mde = new EasyMDE({
+                        spellChecker: false,
+                        element: elem,
+                        autofocus: false,
+                        forceSync: true,
+                        toolbar: ["bold", "italic", "heading", "|",
+                            "quote", "unordered-list", "ordered-list", "|",
+                            "link", "image", "|",
+                            "table", "horizontal-rule", "code", "|",
+                            "guide"
+                        ]
+                    });
+                    mde.render();
+                }
             });
 
         });