From 74bcc3082145545b58e40bb6189875eaafe8fa42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?=
 <sascha.issbruecker@byteagenten.de>
Date: Sat, 29 Jun 2019 19:45:08 +0200
Subject: [PATCH] Style bookmarks page

---
 bookmarks/styles/base.scss                | 47 ++++++++++++-
 bookmarks/styles/bookmarks.scss           | 23 ++++++
 bookmarks/styles/components.scss          | 14 ++++
 bookmarks/styles/index.scss               | 17 +++++
 bookmarks/styles/util.scss                |  9 +++
 bookmarks/templates/bookmarks/index.html  | 85 ++++++++++++++---------
 bookmarks/templates/bookmarks/layout.html | 20 ++++--
 7 files changed, 176 insertions(+), 39 deletions(-)
 create mode 100644 bookmarks/styles/bookmarks.scss
 create mode 100644 bookmarks/styles/components.scss
 create mode 100644 bookmarks/styles/index.scss
 create mode 100644 bookmarks/styles/util.scss

diff --git a/bookmarks/styles/base.scss b/bookmarks/styles/base.scss
index 4f21edc..a3e3ff6 100644
--- a/bookmarks/styles/base.scss
+++ b/bookmarks/styles/base.scss
@@ -1 +1,46 @@
-@import "../../node_modules/spectre.css/src/spectre";
+body {
+  margin: 20px 0;
+}
+
+header {
+  margin-bottom: 40px;
+}
+
+.navbar-brand {
+
+  .logo {
+    background-color: $primary-color;
+    color: $light-color;
+    padding: 14px;
+  }
+
+  h1 {
+    text-transform: uppercase;
+    display: inline-block;
+  }
+}
+
+/* Overrides */
+
+// Reduce heading sizes
+h1 {
+  font-size: inherit;
+}
+
+h2 {
+  font-size: .85rem;
+  color: $gray-color-dark;
+}
+
+// Button color should not change for anchor elements
+.btn:visited:not(.btn-primary) {
+  color: $primary-color;
+}
+
+// Increase spacing between columns
+.container > .columns > .column {
+}
+
+.container > .columns > .column:not(:first-child) {
+  padding-left: 2rem;
+}
diff --git a/bookmarks/styles/bookmarks.scss b/bookmarks/styles/bookmarks.scss
new file mode 100644
index 0000000..f2adf36
--- /dev/null
+++ b/bookmarks/styles/bookmarks.scss
@@ -0,0 +1,23 @@
+ul.bookmark-list {
+
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  .description {
+    color: $gray-color;
+  }
+
+  .actions .btn-link {
+    color: $gray-color-dark;
+    padding-left: 0;
+    padding-right: 0;
+
+    &:focus,
+    &:hover,
+    &:active,
+    &.active {
+      color: darken($gray-color-dark, 10%);
+    }
+  }
+}
diff --git a/bookmarks/styles/components.scss b/bookmarks/styles/components.scss
new file mode 100644
index 0000000..59c3349
--- /dev/null
+++ b/bookmarks/styles/components.scss
@@ -0,0 +1,14 @@
+section.content-area {
+
+  .content-area-header {
+    border-bottom: solid 1px $border-color;
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    margin-bottom: 16px;
+
+    h2 {
+      line-height: 1.8rem;
+    }
+  }
+}
diff --git a/bookmarks/styles/index.scss b/bookmarks/styles/index.scss
new file mode 100644
index 0000000..e3bf278
--- /dev/null
+++ b/bookmarks/styles/index.scss
@@ -0,0 +1,17 @@
+// Font sizes
+$html-font-size: 18px !default;
+
+// Import Spectre CSS lib
+@import "../../node_modules/spectre.css/src/spectre";
+// Import Spectre icons
+@import "../../node_modules/spectre.css/src/icons/icons-core";
+@import "../../node_modules/spectre.css/src/icons/icons-navigation";
+@import "../../node_modules/spectre.css/src/icons/icons-action";
+@import "../../node_modules/spectre.css/src/icons/icons-object";
+
+
+// Import style modules
+@import "base";
+@import "util";
+@import "components";
+@import "bookmarks";
diff --git a/bookmarks/styles/util.scss b/bookmarks/styles/util.scss
new file mode 100644
index 0000000..2e7991d
--- /dev/null
+++ b/bookmarks/styles/util.scss
@@ -0,0 +1,9 @@
+.spacer {
+  flex: 1 1 0;
+}
+
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/bookmarks/templates/bookmarks/index.html b/bookmarks/templates/bookmarks/index.html
index 6f3d80f..3834210 100644
--- a/bookmarks/templates/bookmarks/index.html
+++ b/bookmarks/templates/bookmarks/index.html
@@ -2,42 +2,59 @@
 {% load shared %}
 
 {% block content %}
-    <div>
-        <h2>Bookmarks</h2>
-        <a href="{% url 'bookmarks:new' %}" class="btn btn-primary">Add</a>
-    </div>
-    <div>
-        <form method="get">
-            <div class="input-group">
-                <input type="search" name="q" placeholder="Search..." value="{{ query }}">
-                <input type="submit" value="Search" class="btn input-group-btn">
+    <div class="columns">
+
+        {# Bookmark list #}
+        <section class="content-area column col-8">
+            <div class="content-area-header">
+                <h2>Bookmarks</h2>
+                <div class="spacer"></div>
+                <div class="search">
+                    <form action="{% url 'bookmarks:index' %}" method="get">
+                        <div class="input-group">
+                            <input type="search" name="q" placeholder="Search..." value="{{ query }}">
+                            <input type="submit" value="Search" class="btn input-group-btn">
+                        </div>
+                    </form>
+                </div>
             </div>
-        </form>
-    </div>
-    <ul class="bookmark-list">
-        {% for bookmark in bookmarks %}
-            <li>
-                <p>
-                    <a href="{{ bookmark.url }}" target="_blank">{{ bookmark.resolved_title }}</a>
-                </p>
-                {% if bookmark.resolved_description is not None %}
-                    <p>{{ bookmark.resolved_description }}</p>
+            <ul class="bookmark-list">
+                {% for bookmark in bookmarks %}
+                    <li>
+                        <div class="title truncate">
+                            <a href="{{ bookmark.url }}" target="_blank">{{ bookmark.resolved_title }}</a>
+                        </div>
+                        {% if bookmark.resolved_description is not None %}
+                            <div class="description truncate">{{ bookmark.resolved_description }}</div>
+                        {% endif %}
+                        <div class="actions">
+                            <a href="{% url 'bookmarks:edit' bookmark.id %}"
+                               class="btn btn-link">Edit</a>
+                            <a href="{% url 'bookmarks:remove' bookmark.id %}"
+                               class="btn btn-link"
+                               onclick="return confirm('Do you really want to delete this bookmark?')">Remove</a>
+                        </div>
+                    </li>
+                {% endfor %}
+            </ul>
+            <div class="pagination">
+                {% if bookmarks.has_next %}
+                    <a href="?{% update_query_string page=bookmarks.next_page_number %}"
+                       class="btn mr-2">< Older</a>
                 {% endif %}
-                <p>
-                    <a href="{% url 'bookmarks:edit' bookmark.id %}">Edit</a>
-                    <a href="{% url 'bookmarks:remove' bookmark.id %}"
-                       onclick="return confirm('Do you really want to delete this bookmark?')">Remove</a>
-                </p>
-            </li>
-        {% endfor %}
-    </ul>
-    <div class="pagination">
-        {% if bookmarks.has_next %}
-            <a href="?{% update_query_string page=bookmarks.next_page_number %}">< Older</a>
-        {% endif %}
-        {% if bookmarks.has_previous %}
-            <a href="?{% update_query_string page=bookmarks.previous_page_number %}">Newer ></a>
-        {% endif %}
+                {% if bookmarks.has_previous %}
+                    <a href="?{% update_query_string page=bookmarks.previous_page_number %}"
+                       class="btn">Newer ></a>
+                {% endif %}
+            </div>
+        </section>
+
+        {# Tag list #}
+        <section class="content-area column col-4">
+            <div class="content-area-header">
+                <h2>Tags</h2>
+            </div>
+        </section>
     </div>
 
 {% endblock %}
diff --git a/bookmarks/templates/bookmarks/layout.html b/bookmarks/templates/bookmarks/layout.html
index 473e46d..04c028e 100644
--- a/bookmarks/templates/bookmarks/layout.html
+++ b/bookmarks/templates/bookmarks/layout.html
@@ -7,13 +7,25 @@
     <meta charset="UTF-8">
     <title>linkdings</title>
     {# Include SASS styles, files are resolved from bookmarks/styles #}
-    <link href="{% sass_src 'base.scss' %}" rel="stylesheet" type="text/css" />
+    <link href="{% sass_src 'index.scss' %}" rel="stylesheet" type="text/css" />
 </head>
 <body>
-<header>
-    <h1>linkdings</h1>
+<header class="navbar container grid-lg">
+    <section class="navbar-section">
+        <a href="/" class="navbar-brand text-bold">
+            <i class="logo icon icon-link s-circle"></i>
+
+            <h1>linkdings</h1>
+        </a>
+    </section>
+    <section class="navbar-section">
+        <a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">Add bookmark</a>
+        <a href="/bookmarks" class="btn btn-link">Bookmarks</a>
+        <a href="/settings" class="btn btn-link">Settings</a>
+        <a href="/logout" class="btn btn-link">Logout</a>
+    </section>
 </header>
-<div class="content">
+<div class="content container grid-lg">
     {% block content %}
     {% endblock %}
 </div>