Style bookmarks page

This commit is contained in:
Sascha Ißbrücker 2019-06-29 19:45:08 +02:00
parent 5fad8b798d
commit 74bcc30821
7 changed files with 176 additions and 39 deletions

View File

@ -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;
}

View File

@ -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%);
}
}
}

View File

@ -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;
}
}
}

View File

@ -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";

View File

@ -0,0 +1,9 @@
.spacer {
flex: 1 1 0;
}
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

View File

@ -2,42 +2,59 @@
{% load shared %} {% load shared %}
{% block content %} {% block content %}
<div> <div class="columns">
<h2>Bookmarks</h2>
<a href="{% url 'bookmarks:new' %}" class="btn btn-primary">Add</a> {# Bookmark list #}
</div> <section class="content-area column col-8">
<div> <div class="content-area-header">
<form method="get"> <h2>Bookmarks</h2>
<div class="input-group"> <div class="spacer"></div>
<input type="search" name="q" placeholder="Search..." value="{{ query }}"> <div class="search">
<input type="submit" value="Search" class="btn input-group-btn"> <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> </div>
</form> <ul class="bookmark-list">
</div> {% for bookmark in bookmarks %}
<ul class="bookmark-list"> <li>
{% for bookmark in bookmarks %} <div class="title truncate">
<li> <a href="{{ bookmark.url }}" target="_blank">{{ bookmark.resolved_title }}</a>
<p> </div>
<a href="{{ bookmark.url }}" target="_blank">{{ bookmark.resolved_title }}</a> {% if bookmark.resolved_description is not None %}
</p> <div class="description truncate">{{ bookmark.resolved_description }}</div>
{% if bookmark.resolved_description is not None %} {% endif %}
<p>{{ bookmark.resolved_description }}</p> <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 %} {% endif %}
<p> {% if bookmarks.has_previous %}
<a href="{% url 'bookmarks:edit' bookmark.id %}">Edit</a> <a href="?{% update_query_string page=bookmarks.previous_page_number %}"
<a href="{% url 'bookmarks:remove' bookmark.id %}" class="btn">Newer ></a>
onclick="return confirm('Do you really want to delete this bookmark?')">Remove</a> {% endif %}
</p> </div>
</li> </section>
{% endfor %}
</ul> {# Tag list #}
<div class="pagination"> <section class="content-area column col-4">
{% if bookmarks.has_next %} <div class="content-area-header">
<a href="?{% update_query_string page=bookmarks.next_page_number %}">< Older</a> <h2>Tags</h2>
{% endif %} </div>
{% if bookmarks.has_previous %} </section>
<a href="?{% update_query_string page=bookmarks.previous_page_number %}">Newer ></a>
{% endif %}
</div> </div>
{% endblock %} {% endblock %}

View File

@ -7,13 +7,25 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>linkdings</title> <title>linkdings</title>
{# Include SASS styles, files are resolved from bookmarks/styles #} {# 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> </head>
<body> <body>
<header> <header class="navbar container grid-lg">
<h1>linkdings</h1> <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> </header>
<div class="content"> <div class="content container grid-lg">
{% block content %} {% block content %}
{% endblock %} {% endblock %}
</div> </div>