Search form improvements

netbox/netbox/forms.py

@@ -33,7 +33,7 @@ OBJ_TYPE_CHOICES = (
 
 class SearchForm(BootstrapMixin, forms.Form):
     q = forms.CharField(
-        label='Query'
+        label='Query', widget=forms.TextInput(attrs={'style': 'width: 350px'})
     )
     obj_type = forms.ChoiceField(
         choices=OBJ_TYPE_CHOICES, required=False, label='Type'

netbox/templates/home.html

@@ -2,15 +2,7 @@
 {% load render_table from django_tables2 %}
 
 {% block content %}
-<div class="row home-search" style="padding: 15px 0px 20px">
-    <div class="col-md-12 text-right">
-        <form action="{% url 'search' %}" method="get" class="form form-inline">
-            {{ search_form.q }}
-            {{ search_form.obj_type }}
-            <button type="submit" class="btn btn-primary">Search</button>
-        </form>
-    </div>
-</div>
+{% include 'search_form.html' %}
 <div class="row">
     <div class="col-sm-6 col-md-4">
         <div class="panel panel-default">

netbox/templates/search.html

@@ -3,52 +3,43 @@
 
 {% block content %}
     {% if request.GET.q %}
-        <div class="row">
-            <div class="col-md-4 col-md-offset-4">
-                {# Compressed search form #}
-                <form action="{% url 'search' %}" method="get" class="form form-inline pull-right">
-                    {{ form.q }}
-                    {{ form.obj_type }}
-                    <button type="submit" class="btn btn-primary">
-                        <span class="fa fa-search" aria-hidden="true"></span> Search
-                    </button>
-                </form>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-md-10">
-                {% for obj_type in results %}
-                    <h3 id="{{ obj_type.name }}">{{ obj_type.name|title }}</h3>
-                    {% include 'table.html' with table=obj_type.table %}
-                    {% if obj_type.total > obj_type.table.rows|length %}
-                        <a href="{{ obj_type.url }}" class="btn btn-primary pull-right">
-                            <span class="fa fa-search" aria-hidden="true"></span>
-                            All {{ obj_type.total }} results
-                        </a>
-                    {% endif %}
-                <div class="clearfix"></div>
-                {% empty %}
-                    <h3 class="text-muted">No results found</h3>
-                {% endfor %}
-            </div>
-            <div class="col-md-2" style="padding-top: 20px;">
-                {% if results %}
-                    <div class="panel panel-default">
-                        <div class="panel-heading">
-                            <strong>Search Results</strong>
-                        </div>
-                        <div class="list-group">
-                            {% for obj_type in results %}
-                                <a href="#{{ obj_type.name }}" class="list-group-item">
-                                    {{ obj_type.name|title }}
-                                    <span class="badge">{{ obj_type.total }}</span>
-                                </a>
-                            {% endfor %}
+        {% include 'search_form.html' with search_form=form %}
+        {% if results %}
+            <div class="row">
+                <div class="col-md-10">
+                    {% for obj_type in results %}
+                        <h3 id="{{ obj_type.name }}">{{ obj_type.name|title }}</h3>
+                        {% include 'table.html' with table=obj_type.table %}
+                        {% if obj_type.total > obj_type.table.rows|length %}
+                            <a href="{{ obj_type.url }}" class="btn btn-primary pull-right">
+                                <span class="fa fa-search" aria-hidden="true"></span>
+                                All {{ obj_type.total }} results
+                            </a>
+                        {% endif %}
+                    <div class="clearfix"></div>
+                    {% endfor %}
+                </div>
+                <div class="col-md-2" style="padding-top: 20px;">
+                    {% if results %}
+                        <div class="panel panel-default">
+                            <div class="panel-heading">
+                                <strong>Search Results</strong>
+                            </div>
+                            <div class="list-group">
+                                {% for obj_type in results %}
+                                    <a href="#{{ obj_type.name }}" class="list-group-item">
+                                        {{ obj_type.name|title }}
+                                        <span class="badge">{{ obj_type.total }}</span>
+                                    </a>
+                                {% endfor %}
+                            </div>
                         </div>
-                    </div>
-                {% endif %}
+                    {% endif %}
+                </div>
             </div>
-        </div>
+        {% else %}
+            <h3 class="text-muted text-center">No results found</h3>
+        {% endif %}
     {% else %}
         {# Larger search form #}
         <div class="row" style="margin-top: 150px;">

netbox/templates/search_form.html

@@ -0,0 +1,9 @@
+<div class="row" style="padding-bottom: 20px">
+    <div class="col-md-12 text-center">
+        <form action="{% url 'search' %}" method="get" class="form-inline">
+            {{ search_form.q }}
+            {{ search_form.obj_type }}
+            <button type="submit" class="btn btn-primary">Search</button>
+        </form>
+    </div>
+</div>