Style bookmark form

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,
+                            required=False)
-                            widget=forms.TextInput(attrs={'placeholder': auto_fill_placeholder}))
     description = forms.CharField(required=False,
-                                  widget=forms.Textarea(attrs={'placeholder': auto_fill_placeholder}))
+                                  widget=forms.Textarea())
 
     class Meta:
         model = Bookmark

bookmarks/styles/index.scss

@@ -1,10 +1,10 @@
 // Font sizes
 $html-font-size: 18px !default;
 
-$alternative-color: #f45d00;
+//$alternative-color: #c84e00;
-$alternative-color: #FF84E8;
+//$alternative-color: #FF84E8;
-$alternative-color: #98C1D9;
+//$alternative-color: #98C1D9;
-$alternative-color: #7B287D;
+//$alternative-color: #7B287D;
 $alternative-color: #05a6a3;
 $alternative-color-dark: darken($alternative-color, 5%);
 

bookmarks/templates/bookmarks/edit.html

@@ -2,8 +2,14 @@
 {% load bookmarks %}
 
 {% block content %}
-    <h2>New bookmark</h2>
+    <div class="columns">
-    <form action="{% url 'bookmarks:edit' bookmark_id %}" method="post">
+        <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 %}

bookmarks/templates/bookmarks/form.html

@@ -1,17 +1,26 @@
+{% load widget_tweaks %}
+
 {% csrf_token %}
-<div class="field">
+<div class="form-group {% if form.url.errors %}has-error{% endif %}">
-    <label for="{{ form.url.id_for_label }}">URL</label>
+    <label for="{{ form.url.id_for_label }}" class="form-label">URL</label>
-    {{ form.url }}
+    {{ 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">
+<div class="form-group">
-    <label for="{{ form.title.id_for_label }}">Title</label>
+    <label for="{{ form.title.id_for_label }}" class="form-label">Title</label>
-    {{ form.title }}
+    {{ form.title|add_class:"form-input"|attr:"placeholder: Leave empty to fill from website metadata" }}
     {{ form.title.errors }}
 </div>
-<div class="field">
+<div class="form-group">
-    <label for="{{ form.description.id_for_label }}">Description</label>
+    <label for="{{ form.description.id_for_label }}" class="form-label">Description</label>
-    {{ form.description }}
+    {{ 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>

bookmarks/templates/bookmarks/new.html

@@ -2,8 +2,14 @@
 {% load bookmarks %}
 
 {% block content %}
+    <div class="columns">
+        <section class="content-area column col-12">
+            <div class="content-area-header">
                 <h2>New bookmark</h2>
-    <form action="{% url 'bookmarks:new' %}" method="post">
+            </div>
+            <form action="{% url 'bookmarks:new' %}" method="post" class="col-6" novalidate>
                 {% bookmark_form form %}
             </form>
+        </section>
+    </div>
 {% endblock %}

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

siteroot/settings.py

@@ -37,6 +37,7 @@ INSTALLED_APPS = [
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'sass_processor',
+    'widget_tweaks',
 ]
 
 MIDDLEWARE = [