Various CSS improvements (#514)

* Replace flexbox grid with CSS grid

* Update new and edit forms

* Update settings views

* Update auth views

* Fix margin in menu

* Remove unused Spectre modules

* Simplify navbar

* Reuse CSS variables

* Fix grid gap on small screen sizes

* Simplify grid system

* Improve section headers

* Restructure SASS files

* Cleanup base styles

* Update test

bookmarks/templates/bookmarks/archive.html

@@ -4,19 +4,20 @@
 {% load bookmarks %}
 
 {% block content %}
-  <div class="bookmarks-page columns"
+  <div class="bookmarks-page grid columns-md-1"
        ld-bulk-edit
        ld-bookmark-page
        bookmarks-url="{% url 'bookmarks:partials.bookmark_list.archived' %}"
        tags-url="{% url 'bookmarks:partials.tag_cloud.archived' %}">
 
     {# Bookmark list #}
-    <section class="content-area column col-8 col-md-12">
-      <div class="content-area-header">
+    <section class="content-area col-2">
+      <div class="content-area-header mb-0">
         <h2>Archived bookmarks</h2>
-        <div class="spacer"></div>
-        {% bookmark_search bookmark_list.filters tag_cloud.tags mode='archived' %}
-        {% include 'bookmarks/bulk_edit/toggle.html' %}
+        <div class="d-flex">
+          {% bookmark_search bookmark_list.filters tag_cloud.tags mode='archived' %}
+          {% include 'bookmarks/bulk_edit/toggle.html' %}
+        </div>
       </div>
 
       <form class="bookmark-actions" action="{% url 'bookmarks:action' %}?return_url={{ bookmark_list.return_url }}"
@@ -31,7 +32,7 @@
     </section>
 
     {# Tag cloud #}
-    <section class="content-area column col-4 hide-md">
+    <section class="content-area col-1 hide-md">
       <div class="content-area-header">
         <h2>Tags</h2>
       </div>

bookmarks/templates/bookmarks/edit.html

@@ -2,15 +2,13 @@
 {% load bookmarks %}
 
 {% block content %}
-  <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 %}?return_url={{ return_url|urlencode }}" method="post"
-            class="col-6 col-md-12" novalidate>
-        {% bookmark_form form return_url bookmark_id %}
-      </form>
-    </section>
-  </div>
+  <section class="content-area">
+    <div class="content-area-header">
+      <h2>Edit bookmark</h2>
+    </div>
+    <form action="{% url 'bookmarks:edit' bookmark_id %}?return_url={{ return_url|urlencode }}" method="post"
+          class="width-50 width-md-100" novalidate>
+      {% bookmark_form form return_url bookmark_id %}
+    </form>
+  </section>
 {% endblock %}

bookmarks/templates/bookmarks/index.html

@@ -4,19 +4,20 @@
 {% load bookmarks %}
 
 {% block content %}
-  <div class="bookmarks-page columns"
+  <div class="bookmarks-page grid columns-md-1"
        ld-bulk-edit
        ld-bookmark-page
        bookmarks-url="{% url 'bookmarks:partials.bookmark_list.active' %}"
        tags-url="{% url 'bookmarks:partials.tag_cloud.active' %}">
 
     {# Bookmark list #}
-    <section class="content-area column col-8 col-md-12">
-      <div class="content-area-header">
+    <section class="content-area col-2">
+      <div class="content-area-header mb-0">
         <h2>Bookmarks</h2>
-        <div class="spacer"></div>
-        {% bookmark_search bookmark_list.filters tag_cloud.tags %}
-        {% include 'bookmarks/bulk_edit/toggle.html' %}
+        <div class="d-flex">
+          {% bookmark_search bookmark_list.filters tag_cloud.tags %}
+          {% include 'bookmarks/bulk_edit/toggle.html' %}
+        </div>
       </div>
 
       <form class="bookmark-actions" action="{% url 'bookmarks:action' %}?return_url={{ bookmark_list.return_url }}"
@@ -31,8 +32,8 @@
     </section>
 
     {# Tag cloud #}
-    <section class="content-area column col-4 hide-md">
-      <div class="content-area-header">
+    <section class="content-area col-1 hide-md">
+      <div class="content-area-header mb-4">
         <h2>Tags</h2>
       </div>
       <div class="tag-cloud-container">

bookmarks/templates/bookmarks/layout.html

@@ -30,9 +30,9 @@
   {% endif %}
 </head>
 <body ld-global-shortcuts>
-<header>
+<header class="container">
   {% if has_toasts %}
-    <div class="toasts container grid-lg">
+    <div class="toasts">
       <form action="{% url 'bookmarks:toasts.acknowledge' %}?return_url={{ request.path | urlencode }}" method="post">
         {% csrf_token %}
         {% for toast in toast_messages %}
@@ -44,27 +44,21 @@
       </form>
     </div>
   {% endif %}
-  <div class="navbar container grid-lg">
-    <section class="navbar-section">
-      <a href="{% url 'bookmarks:index' %}" class="navbar-brand text-bold">
-        <img class="logo" src="{% static 'logo.png' %}" alt="Application logo">
-        <h1>linkding</h1>
-      </a>
-    </section>
+  <div class="d-flex justify-between">
+    <a href="{% url 'bookmarks:index' %}" class="d-flex align-center">
+      <img class="logo" src="{% static 'logo.png' %}" alt="Application logo">
+      <h1>LINKDING</h1>
+    </a>
     {% if request.user.is_authenticated %}
       {# Only show nav items menu when logged in #}
-      <section class="navbar-section">
-        {% include 'bookmarks/nav_menu.html' %}
-      </section>
+      {% include 'bookmarks/nav_menu.html' %}
     {% elif has_public_shares %}
       {# Otherwise show link to shared bookmarks if there are publicly shared bookmarks #}
-      <section class="navbar-section">
-        <a href="{% url 'bookmarks:shared' %}" class="btn btn-link">Shared bookmarks</a>
-      </section>
+      <a href="{% url 'bookmarks:shared' %}" class="btn btn-link">Shared bookmarks</a>
     {% endif %}
   </div>
 </header>
-<div class="content container grid-lg">
+<div class="content container">
   {% block content %}
   {% endblock %}
 </div>

bookmarks/templates/bookmarks/new.html

@@ -2,14 +2,12 @@
 {% load bookmarks %}
 
 {% block content %}
-  <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 col-md-12" novalidate>
-        {% bookmark_form form return_url auto_close=auto_close %}
-      </form>
-    </section>
-  </div>
+  <section class="content-area">
+    <div class="content-area-header">
+      <h2>New bookmark</h2>
+    </div>
+    <form action="{% url 'bookmarks:new' %}" method="post" class="width-50 width-md-100" novalidate>
+      {% bookmark_form form return_url auto_close=auto_close %}
+    </form>
+  </section>
 {% endblock %}

bookmarks/templates/bookmarks/shared.html

@@ -4,16 +4,15 @@
 {% load bookmarks %}
 
 {% block content %}
-  <div class="bookmarks-page columns"
+  <div class="bookmarks-page grid columns-md-1"
        ld-bookmark-page
        bookmarks-url="{% url 'bookmarks:partials.bookmark_list.shared' %}"
        tags-url="{% url 'bookmarks:partials.tag_cloud.shared' %}">
 
     {# Bookmark list #}
-    <section class="content-area column col-8 col-md-12">
+    <section class="content-area col-2">
       <div class="content-area-header">
         <h2>Shared bookmarks</h2>
-        <div class="spacer"></div>
         {% bookmark_search bookmark_list.filters tag_cloud.tags mode='shared' %}
       </div>
 
@@ -28,7 +27,7 @@
     </section>
 
     {# Filters #}
-    <section class="content-area column col-4 hide-md">
+    <section class="content-area col-1 hide-md">
       <div class="content-area-header">
         <h2>User</h2>
       </div>

bookmarks/templates/django_registration/registration_complete.html

@@ -4,13 +4,5 @@
 {% block title %}Registration complete{% endblock %}
 
 {% block content %}
-
-    <div class="auth-page">
-        <div class="columns">
-            <section class="content-area column col-12">
-                <p>Registration complete. You can now use the application.</p>
-            </section>
-        </div>
-    </div>
-
+  <p>Registration complete. You can now use the application.</p>
 {% endblock %}

bookmarks/templates/django_registration/registration_form.html

@@ -4,41 +4,35 @@
 {% block title %}Registration{% endblock %}
 
 {% block content %}
-
-    <div class="auth-page">
-        <div class="columns">
-            <section class="content-area column col-5 col-md-12">
-                <div class="content-area-header">
-                    <h2>Register</h2>
-                </div>
-                <form method="post" action="{% url 'django_registration_register' %}">
-                    {% csrf_token %}
-                    <div class="form-group  {% if form.errors.username %}has-error{% endif %}">
-                        <label class="form-label" for="{{ form.username.id_for_label }}">Username</label>
-                        {{ form.username|add_class:'form-input' }}
-                        <div class="form-input-hint">{{ form.errors.username }}</div>
-                    </div>
-                    <div class="form-group {% if form.errors.email %}has-error{% endif %}">
-                        <label class="form-label" for="{{ form.email.id_for_label }}">Email</label>
-                        {{ form.email|add_class:'form-input' }}
-                        <div class="form-input-hint">{{ form.errors.email }}</div>
-                    </div>
-                    <div class="form-group {% if form.errors.password1 %}has-error{% endif %}">
-                        <label class="form-label" for="{{ form.password1.id_for_label }}">Password</label>
-                        {{ form.password1|add_class:'form-input' }}
-                        <div class="form-input-hint">{{ form.errors.password1 }}</div>
-                    </div>
-                    <div class="form-group {% if form.errors.password2 %}has-error{% endif %}">
-                        <label class="form-label" for="{{ form.password2.id_for_label }}">Confirm Password</label>
-                        {{ form.password2|add_class:'form-input' }}
-                        <div class="form-input-hint">{{ form.errors.password2 }}</div>
-                    </div>
-                    <br/>
-                    <input type="submit" value="Register" class="btn btn-primary col-md-12">
-                    <input type="hidden" name="next" value="{{ next }}">
-                </form>
-            </section>
-        </div>
+  <section class="content-area mx-auto width-50 width-md-100">
+    <div class="content-area-header">
+      <h2>Register</h2>
     </div>
-
+    <form method="post" action="{% url 'django_registration_register' %}" novalidate>
+      {% csrf_token %}
+      <div class="form-group  {% if form.errors.username %}has-error{% endif %}">
+        <label class="form-label" for="{{ form.username.id_for_label }}">Username</label>
+        {{ form.username|add_class:'form-input'|attr:"placeholder: " }}
+        <div class="form-input-hint">{{ form.errors.username }}</div>
+      </div>
+      <div class="form-group {% if form.errors.email %}has-error{% endif %}">
+        <label class="form-label" for="{{ form.email.id_for_label }}">Email</label>
+        {{ form.email|add_class:'form-input'|attr:"placeholder: " }}
+        <div class="form-input-hint">{{ form.errors.email }}</div>
+      </div>
+      <div class="form-group {% if form.errors.password1 %}has-error{% endif %}">
+        <label class="form-label" for="{{ form.password1.id_for_label }}">Password</label>
+        {{ form.password1|add_class:'form-input'|attr:"placeholder: " }}
+        <div class="form-input-hint">{{ form.errors.password1 }}</div>
+      </div>
+      <div class="form-group {% if form.errors.password2 %}has-error{% endif %}">
+        <label class="form-label" for="{{ form.password2.id_for_label }}">Confirm Password</label>
+        {{ form.password2|add_class:'form-input'|attr:"placeholder: " }}
+        <div class="form-input-hint">{{ form.errors.password2 }}</div>
+      </div>
+      <br/>
+      <input type="submit" value="Register" class="btn btn-primary btn-wide">
+      <input type="hidden" name="next" value="{{ next }}">
+    </form>
+  </section>
 {% endblock %}

bookmarks/templates/registration/login.html

@@ -4,46 +4,35 @@
 {% block title %}Login{% endblock %}
 
 {% block content %}
-
-    <div class="auth-page">
-        <div class="columns">
-            <section class="content-area column col-5 col-md-12">
-                <div class="content-area-header">
-                    <h2>Login</h2>
-                </div>
-                <form method="post" action="{% url 'login' %}">
-                    {% csrf_token %}
-                    {% if form.errors %}
-                        <div class="form-group has-error">
-                            <p class="form-input-hint">Your username and password didn't match. Please try again.</p>
-                        </div>
-                    {% endif %}
-                    <div class="form-group">
-                        <label class="form-label" for="{{ form.username.id_for_label }}">Username</label>
-                        {{ form.username|add_class:'form-input'|attr:"placeholder: " }}
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label" for="{{ form.password.id_for_label }}">Password</label>
-                        {{ form.password|add_class:'form-input'|attr:"placeholder: " }}
-                    </div>
-
-                    <br/>
-                    <div class="columns">
-                        <div class="column col-3">
-                            <input type="submit" value="Login" class="btn btn-primary">
-                            <input type="hidden" name="next" value="{{ next }}">
-                        </div>
-                        {% if allow_registration %}
-                        <div class="column col-auto col-ml-auto">
-                            <a href="{% url 'django_registration_register' %}" class="btn btn-link">Register</a>
-                        </div>
-                        {% endif %}
-                    </div>
-
-                </form>
-            </section>
-        </div>
+  <section class="content-area mx-auto width-50 width-md-100">
+    <div class="content-area-header">
+      <h2>Login</h2>
     </div>
+    <form method="post" action="{% url 'login' %}">
+      {% csrf_token %}
+      {% if form.errors %}
+        <div class="form-group has-error">
+          <p class="form-input-hint">Your username and password didn't match. Please try again.</p>
+        </div>
+      {% endif %}
+      <div class="form-group">
+        <label class="form-label" for="{{ form.username.id_for_label }}">Username</label>
+        {{ form.username|add_class:'form-input'|attr:"placeholder: " }}
+      </div>
+      <div class="form-group">
+        <label class="form-label" for="{{ form.password.id_for_label }}">Password</label>
+        {{ form.password|add_class:'form-input'|attr:"placeholder: " }}
+      </div>
 
+      <br/>
+      <div class="d-flex justify-between">
+        <input type="submit" value="Login" class="btn btn-primary btn-wide">
+        <input type="hidden" name="next" value="{{ next }}">
+        {% if allow_registration %}
+          <a href="{% url 'django_registration_register' %}" class="btn btn-link">Register</a>
+        {% endif %}
+      </div>
 
+    </form>
+  </section>
 {% endblock %}

bookmarks/templates/registration/password_change_done.html

@@ -4,18 +4,12 @@
 {% block title %}Password changed{% endblock %}
 
 {% block content %}
-
-    <div class="auth-page">
-        <div class="columns">
-            <section class="content-area column col-5 col-md-12">
-                <div class="content-area-header">
-                    <h2>Password Changed</h2>
-                </div>
-                <p class="text-success">
-                    Your password was changed successfully.
-                </p>
-            </section>
-        </div>
+  <section class="content-area mx-auto width-50 width-md-100">
+    <div class="content-area-header">
+      <h2>Password Changed</h2>
     </div>
-
+    <p class="text-success">
+      Your password was changed successfully.
+    </p>
+  </section>
 {% endblock %}

bookmarks/templates/registration/password_change_form.html

@@ -4,52 +4,42 @@
 {% block title %}Change Password{% endblock %}
 
 {% block content %}
-
-    <div class="auth-page">
-        <div class="columns">
-            <section class="content-area column col-5 col-md-12">
-                <div class="content-area-header">
-                    <h2>Change Password</h2>
-                </div>
-                <form method="post" action="{% url 'change_password' %}">
-                    {% csrf_token %}
-                    <div class="form-group {% if form.old_password.errors %}has-error{% endif %}">
-                        <label class="form-label" for="{{ form.old_password.id_for_label }}">Old password</label>
-                        {{ form.old_password|add_class:'form-input'|attr:"placeholder: " }}
-                        {% if form.old_password.errors %}
-                            <div class="form-input-hint">
-                                {{ form.old_password.errors }}
-                            </div>
-                        {% endif %}
-                    </div>
-                    <div class="form-group {% if form.new_password1.errors %}has-error{% endif %}">
-                        <label class="form-label" for="{{ form.new_password1.id_for_label }}">New password</label>
-                        {{ form.new_password1|add_class:'form-input'|attr:"placeholder: " }}
-                        {% if form.new_password1.errors %}
-                            <div class="form-input-hint">
-                                {{ form.new_password1.errors }}
-                            </div>
-                        {% endif %}
-                    </div>
-                    <div class="form-group {% if form.new_password2.errors %}has-error{% endif %}">
-                        <label class="form-label" for="{{ form.new_password2.id_for_label }}">Confirm new password</label>
-                        {{ form.new_password2|add_class:'form-input'|attr:"placeholder: " }}
-                        {% if form.new_password2.errors %}
-                            <div class="form-input-hint">
-                                {{ form.new_password2.errors }}
-                            </div>
-                        {% endif %}
-                    </div>
-
-                    <br/>
-                    <div class="columns">
-                        <div class="column col-3">
-                            <input type="submit" value="Change Password" class="btn btn-primary">
-                        </div>
-                    </div>
-                </form>
-            </section>
-        </div>
+  <section class="content-area mx-auto width-50 width-md-100">
+    <div class="content-area-header">
+      <h2>Change Password</h2>
     </div>
+    <form method="post" action="{% url 'change_password' %}">
+      {% csrf_token %}
+      <div class="form-group {% if form.old_password.errors %}has-error{% endif %}">
+        <label class="form-label" for="{{ form.old_password.id_for_label }}">Old password</label>
+        {{ form.old_password|add_class:'form-input'|attr:"placeholder: " }}
+        {% if form.old_password.errors %}
+          <div class="form-input-hint">
+            {{ form.old_password.errors }}
+          </div>
+        {% endif %}
+      </div>
+      <div class="form-group {% if form.new_password1.errors %}has-error{% endif %}">
+        <label class="form-label" for="{{ form.new_password1.id_for_label }}">New password</label>
+        {{ form.new_password1|add_class:'form-input'|attr:"placeholder: " }}
+        {% if form.new_password1.errors %}
+          <div class="form-input-hint">
+            {{ form.new_password1.errors }}
+          </div>
+        {% endif %}
+      </div>
+      <div class="form-group {% if form.new_password2.errors %}has-error{% endif %}">
+        <label class="form-label" for="{{ form.new_password2.id_for_label }}">Confirm new password</label>
+        {{ form.new_password2|add_class:'form-input'|attr:"placeholder: " }}
+        {% if form.new_password2.errors %}
+          <div class="form-input-hint">
+            {{ form.new_password2.errors }}
+          </div>
+        {% endif %}
+      </div>
 
+      <br/>
+      <input type="submit" value="Change Password" class="btn btn-primary btn-wide">
+    </form>
+  </section>
 {% endblock %}

bookmarks/templates/settings/general.html

@@ -16,14 +16,14 @@
         {% csrf_token %}
         <div class="form-group">
           <label for="{{ form.theme.id_for_label }}" class="form-label">Theme</label>
-          {{ form.theme|add_class:"form-select col-2 col-sm-12" }}
+          {{ form.theme|add_class:"form-select width-25 width-sm-100" }}
           <div class="form-input-hint">
             Whether to use a light or dark theme, or automatically adjust the theme based on your system's settings.
           </div>
         </div>
         <div class="form-group">
           <label for="{{ form.bookmark_date_display.id_for_label }}" class="form-label">Bookmark date format</label>
-          {{ form.bookmark_date_display|add_class:"form-select col-2 col-sm-12" }}
+          {{ form.bookmark_date_display|add_class:"form-select width-25 width-sm-100" }}
           <div class="form-input-hint">
             Whether to show bookmark dates as relative (how long ago), or as absolute dates. Alternatively the date can
             be hidden.
@@ -50,14 +50,14 @@
         </div>
         <div class="form-group">
           <label for="{{ form.bookmark_link_target.id_for_label }}" class="form-label">Open bookmarks in</label>
-          {{ form.bookmark_link_target|add_class:"form-select col-2 col-sm-12" }}
+          {{ form.bookmark_link_target|add_class:"form-select width-25 width-sm-100" }}
           <div class="form-input-hint">
             Whether to open bookmarks a new page or in the same page.
           </div>
         </div>
         <div class="form-group">
           <label for="{{ form.tag_search.id_for_label }}" class="form-label">Tag search</label>
-          {{ form.tag_search|add_class:"form-select col-2 col-sm-12" }}
+          {{ form.tag_search|add_class:"form-select width-25 width-sm-100" }}
           <div class="form-input-hint">
             In strict mode, tags must be prefixed with a hash character (#).
             In lax mode, tags can also be searched without the hash character.
@@ -92,7 +92,7 @@
         <div class="form-group">
           <label for="{{ form.web_archive_integration.id_for_label }}" class="form-label">Internet Archive
             integration</label>
-          {{ form.web_archive_integration|add_class:"form-select col-2 col-sm-12" }}
+          {{ form.web_archive_integration|add_class:"form-select width-25 width-sm-100" }}
           <div class="form-input-hint">
             Enabling this feature will automatically create snapshots of bookmarked websites on the <a
               href="https://web.archive.org/" target="_blank" rel="noopener">Internet Archive Wayback
@@ -155,9 +155,9 @@
           </div>
         </div>
         <div class="form-group">
-          <div class="input-group col-8 col-md-12">
+          <div class="input-group width-75 width-md-100">
             <input class="form-input" type="file" name="import_file">
-            <input type="submit" class="input-group-btn col-2 btn btn-primary" value="Upload">
+            <input type="submit" class="input-group-btn btn btn-primary" value="Upload">
           </div>
           {% if import_success_message %}
             <div class="has-success">

bookmarks/templates/settings/integrations.html

@@ -33,7 +33,7 @@
             <p>The following token can be used to authenticate 3rd-party applications against the REST API:</p>
             <div class="form-group">
                 <div class="columns">
-                    <div class="column col-6 col-md-12">
+                    <div class="column width-50 width-md-100">
                         <input class="form-input" value="{{ api_token }}" readonly>
                     </div>
                 </div>