Search CSS tweaks

* A couple of other minor things

thoughts/static/thoughts/main.css

@@ -52,6 +52,9 @@ button, input[type="button"], input[type="submit"], .button {
     outline: none;
     font-size: 13px;
 }
+form input[type="submit"] {
+    font-size: 15px;
+}
 button:hover, button:focus,
 input[type="button"]:hover, input[type="button"]:focus,
 input[type="submit"]:hover, input[type="submit"]:focus,
@@ -61,8 +64,8 @@ input[type="submit"]:hover, input[type="submit"]:focus,
 }
 
 /* Textbox/textarea styles */
-textarea, input[type="text"], input[type="password"] {
+textarea, input[type="text"], input[type="search"], input[type="password"] {
-    padding: 0 5px;
+    padding: 0 2px;
     outline: none;
     resize: none;
     background: none;
@@ -73,13 +76,20 @@ textarea, input[type="text"], input[type="password"] {
     border-bottom: 1px solid var(--accent-color);
     border-radius: 0;
     overflow-x: hidden;
-    display: block;
+    display: inline-block;
     line-height: 1.5;
 }
 textarea::placeholder, input[type="text"]::placeholder {
     color: var(--text-color);
     opacity: 50%;
 }
+textarea {
+    display: block;
+}
+
+form {
+    margin-bottom: 4em;
+}
 
 .text, .thought-end {
     max-width: 100%;

thoughts/templates/thoughts/post.html

@@ -29,7 +29,6 @@
     </div>
 
     <input type="submit" id="post-button" value="{% if editing %}Update{% else %}Submit{% endif %}">
-    {{ form.submit }}
 </form>
 
 {% endblock %}

thoughts/templates/thoughts/search/search.html

@@ -10,57 +10,39 @@
 {% endblock %}
 
 {% block main %}
-    <form method="get" action="search">
+<form method="get" action="search">
-        <table>
+    {{ form.q }}
-            {{ form.as_table }}
-            <tr>
-                <td>&nbsp;</td>
-                <td>
-                    <input type="submit" value="Search">
-                </td>
-            </tr>
-        </table>
 
-        {% if query %}
+    <input type="submit" id="post-button" value="{% if editing %}Update{% else %}Submit{% endif %}">
-            {% load tz %}
+</form>
 
-            <h3>Results</h3>
+    {% if query %}
+    {% load tz %}
 
-            {% for thought in page.object_list %}
+        {% for thought in page.object_list %}
-                <div class="thought" id="{{ thought.uuid }}">
+            <div class="thought" id="{{ thought.uuid }}">
-                    <div class="main">
+                <div class="main">
-                        <span class="main-text text">{{ thought.object.text|urlize }}</span>
+                    <span class="main-text text">{{ thought.object.text|urlize }}</span>
 
-                        <a href="/?show={{thought.object.uuid}}" class="button show-more">Show</a>
+                    <a href="/?show={{thought.object.uuid}}" class="button show-more">Show</a>
-                    </div>
-
-                    <div class="thought-end">
-                        <span class="timestamp">
-                            {% timezone thought.object.get_timezone %}
-                                {{ thought.object.posted|time:"g:i a" }}
-                                {{ thought.object.posted|date:"M d, Y" }},
-
-                                UTC{{ thought.object.get_offset_hours }}
-                                {{ thought.object.get_season }}
-                            {% endtimezone %}
-                        </span>
-                    </div>
-
-                    <hr>
                 </div>
-            {% empty %}
-                <p>No results found.</p>
-            {% endfor %}
 
-            <!-- {% if page.has_previous or page.has_next %}
+                <div class="thought-end">
-                <div>
+                    <span class="timestamp">
-                    {% if page.has_previous %}<a href="?q={{ query }}&amp;page={{ page.previous_page_number }}">{% endif %}&laquo; Previous{% if page.has_previous %}</a>{% endif %}
+                        {% timezone thought.object.get_timezone %}
-                    |
+                            {{ thought.object.posted|time:"g:i a" }}
-                    {% if page.has_next %}<a href="?q={{ query }}&amp;page={{ page.next_page_number }}">{% endif %}Next &raquo;{% if page.has_next %}</a>{% endif %}
+                            {{ thought.object.posted|date:"M d, Y" }},
+
+                            UTC{{ thought.object.get_offset_hours }}
+                            {{ thought.object.get_season }}
+                        {% endtimezone %}
+                    </span>
                 </div>
-            {% endif %} -->
+
-        {% else %}
+                <hr>
-            {# Show some example queries to run, maybe query syntax, something else? #}
+            </div>
-        {% endif %}
+        {% empty %}
-    </form>
+            <p>No results found.</p>
+        {% endfor %}
+    {% endif %}
 {% endblock %}

thoughts/views.py

@@ -5,18 +5,18 @@ import base64
 
 import magic
 
+from django import forms
 from django.shortcuts import render, redirect
 from django.utils.crypto import constant_time_compare
 
-from whispermaphone import settings
-from .models import Thought, ThoughtForm, ALLOWED_MEDIA_TYPES
-
-from .pagination import get_all_pages, get_page_slug
-
 from haystack.views import SearchView, search_view_factory
 from haystack.query import SearchQuerySet
 from haystack.forms import SearchForm
 
+from whispermaphone import settings
+from .models import Thought, ThoughtForm, ALLOWED_MEDIA_TYPES
+from .pagination import get_all_pages, get_page_slug
+
 def check_authenticated(request):
     authenticated = False
     try:
@@ -175,9 +175,18 @@ def about(request):
         "authenticated": check_authenticated(request)
     })
 
+class ThoughtsSearchForm(SearchForm):
+    q = forms.CharField(
+        required=False,
+        widget=forms.TextInput(attrs={"type": "search", "placeholder": "Search query"}),
+    )
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+
 search = search_view_factory(
     template="thoughts/search/search.html",
     view_class=SearchView,
-    form_class=SearchForm,
+    form_class=ThoughtsSearchForm,
     searchqueryset=SearchQuerySet().order_by("-posted")
 )