Style bookmarks page
This commit is contained in:
Sascha Ißbrücker
parent
5fad8b798d
commit
74bcc30821
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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";
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
.spacer {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
@ -2,42 +2,59 @@
|
|||
{% load shared %}
|
||||
|
||||
{% block content %}
|
||||
<div>
|
||||
<div class="columns">
|
||||
|
||||
{# Bookmark list #}
|
||||
<section class="content-area column col-8">
|
||||
<div class="content-area-header">
|
||||
<h2>Bookmarks</h2>
|
||||
<a href="{% url 'bookmarks:new' %}" class="btn btn-primary">Add</a>
|
||||
</div>
|
||||
<div>
|
||||
<form method="get">
|
||||
<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>
|
||||
<ul class="bookmark-list">
|
||||
{% for bookmark in bookmarks %}
|
||||
<li>
|
||||
<p>
|
||||
<div class="title truncate">
|
||||
<a href="{{ bookmark.url }}" target="_blank">{{ bookmark.resolved_title }}</a>
|
||||
</p>
|
||||
</div>
|
||||
{% if bookmark.resolved_description is not None %}
|
||||
<p>{{ bookmark.resolved_description }}</p>
|
||||
<div class="description truncate">{{ bookmark.resolved_description }}</div>
|
||||
{% endif %}
|
||||
<p>
|
||||
<a href="{% url 'bookmarks:edit' bookmark.id %}">Edit</a>
|
||||
<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>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="pagination">
|
||||
{% if bookmarks.has_next %}
|
||||
<a href="?{% update_query_string page=bookmarks.next_page_number %}">< Older</a>
|
||||
<a href="?{% update_query_string page=bookmarks.next_page_number %}"
|
||||
class="btn mr-2">< Older</a>
|
||||
{% endif %}
|
||||
{% if bookmarks.has_previous %}
|
||||
<a href="?{% update_query_string page=bookmarks.previous_page_number %}">Newer ></a>
|
||||
<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 %}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue