From 3b753a601f6b6bf72700ce9800b10a15e34d7427 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?=
 <sascha.issbruecker@byteagenten.de>
Date: Mon, 1 Jul 2019 21:03:27 +0200
Subject: [PATCH] Style bookmark form

---
 bookmarks/models.py                     |  5 ++--
 bookmarks/styles/index.scss             |  8 +++----
 bookmarks/templates/bookmarks/edit.html | 14 +++++++----
 bookmarks/templates/bookmarks/form.html | 31 ++++++++++++++++---------
 bookmarks/templates/bookmarks/new.html  | 14 +++++++----
 requirements.txt                        |  1 +
 siteroot/settings.py                    |  1 +
 7 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/bookmarks/models.py b/bookmarks/models.py
index 8878de5..44ee27e 100644
--- a/bookmarks/models.py
+++ b/bookmarks/models.py
@@ -55,10 +55,9 @@ class BookmarkForm(forms.ModelForm):
     url = forms.URLField()
     # Do not require title and description in form as we fill these automatically if they are empty
     title = forms.CharField(max_length=512,
-                            required=False,
-                            widget=forms.TextInput(attrs={'placeholder': auto_fill_placeholder}))
+                            required=False)
     description = forms.CharField(required=False,
-                                  widget=forms.Textarea(attrs={'placeholder': auto_fill_placeholder}))
+                                  widget=forms.Textarea())
 
     class Meta:
         model = Bookmark
diff --git a/bookmarks/styles/index.scss b/bookmarks/styles/index.scss
index b804513..408f411 100644
--- a/bookmarks/styles/index.scss
+++ b/bookmarks/styles/index.scss
@@ -1,10 +1,10 @@
 // Font sizes
 $html-font-size: 18px !default;
 
-$alternative-color: #f45d00;
-$alternative-color: #FF84E8;
-$alternative-color: #98C1D9;
-$alternative-color: #7B287D;
+//$alternative-color: #c84e00;
+//$alternative-color: #FF84E8;
+//$alternative-color: #98C1D9;
+//$alternative-color: #7B287D;
 $alternative-color: #05a6a3;
 $alternative-color-dark: darken($alternative-color, 5%);
 
diff --git a/bookmarks/templates/bookmarks/edit.html b/bookmarks/templates/bookmarks/edit.html
index 56cd3da..fd15693 100644
--- a/bookmarks/templates/bookmarks/edit.html
+++ b/bookmarks/templates/bookmarks/edit.html
@@ -2,8 +2,14 @@
 {% load bookmarks %}
 
 {% block content %}
-    <h2>New bookmark</h2>
-    <form action="{% url 'bookmarks:edit' bookmark_id %}" method="post">
-        {% bookmark_form form %}
-    </form>
+    <div class="columns">
+        <section class="content-area column col-12">
+            <div class="content-area-header">
+                <h2>Edit bookmark</h2>
+            </div>
+            <form action="{% url 'bookmarks:edit' bookmark_id %}" method="post" class="col-6" novalidate>
+                {% bookmark_form form %}
+            </form>
+        </section>
+    </div>
 {% endblock %}
diff --git a/bookmarks/templates/bookmarks/form.html b/bookmarks/templates/bookmarks/form.html
index bdd57e8..01daa99 100644
--- a/bookmarks/templates/bookmarks/form.html
+++ b/bookmarks/templates/bookmarks/form.html
@@ -1,17 +1,26 @@
+{% load widget_tweaks %}
+
 {% csrf_token %}
-<div class="field">
-    <label for="{{ form.url.id_for_label }}">URL</label>
-    {{ form.url }}
-    {{ form.url.errors }}
+<div class="form-group {% if form.url.errors %}has-error{% endif %}">
+    <label for="{{ form.url.id_for_label }}" class="form-label">URL</label>
+    {{ form.url|add_class:"form-input"|attr:"autofocus" }}
+    {% if form.url.errors %}
+        <div class="form-input-hint">
+            {{ form.url.errors }}
+        </div>
+    {% endif %}
 </div>
-<div class="field">
-    <label for="{{ form.title.id_for_label }}">Title</label>
-    {{ form.title }}
+<div class="form-group">
+    <label for="{{ form.title.id_for_label }}" class="form-label">Title</label>
+    {{ form.title|add_class:"form-input"|attr:"placeholder: Leave empty to fill from website metadata" }}
     {{ form.title.errors }}
 </div>
-<div class="field">
-    <label for="{{ form.description.id_for_label }}">Description</label>
-    {{ form.description }}
+<div class="form-group">
+    <label for="{{ form.description.id_for_label }}" class="form-label">Description</label>
+    {{ form.description|add_class:"form-input"|attr:"placeholder: Leave empty to fill from website metadata" }}
     {{ form.description.errors }}
 </div>
-<input type="submit" value="Save">
+<div class="form-group mt-2">
+    <input type="submit" value="Save" class="btn btn-primary mr-2">
+    <a href="{% url 'bookmarks:index' %}" class="btn">Nevermind</a>
+</div>
diff --git a/bookmarks/templates/bookmarks/new.html b/bookmarks/templates/bookmarks/new.html
index 2b24726..b7ee771 100644
--- a/bookmarks/templates/bookmarks/new.html
+++ b/bookmarks/templates/bookmarks/new.html
@@ -2,8 +2,14 @@
 {% load bookmarks %}
 
 {% block content %}
-    <h2>New bookmark</h2>
-    <form action="{% url 'bookmarks:new' %}" method="post">
-        {% bookmark_form form %}
-    </form>
+    <div class="columns">
+        <section class="content-area column col-12">
+            <div class="content-area-header">
+                <h2>New bookmark</h2>
+            </div>
+            <form action="{% url 'bookmarks:new' %}" method="post" class="col-6" novalidate>
+                {% bookmark_form form %}
+            </form>
+        </section>
+    </div>
 {% endblock %}
diff --git a/requirements.txt b/requirements.txt
index b9f9146..3197c6c 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -6,6 +6,7 @@ django-appconf==1.0.3
 django-compressor==2.3
 django-picklefield==2.0
 django-sass-processor==0.7.3
+django-widget-tweaks==1.4.5
 idna==2.8
 libsass==0.19.2
 pytz==2019.1
diff --git a/siteroot/settings.py b/siteroot/settings.py
index 5e9011c..fe47206 100644
--- a/siteroot/settings.py
+++ b/siteroot/settings.py
@@ -37,6 +37,7 @@ INSTALLED_APPS = [
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'sass_processor',
+    'widget_tweaks',
 ]
 
 MIDDLEWARE = [