github-migration/linkding
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve mobile layout

Browse Source
This commit is contained in:
Sascha Ißbrücker 2019-07-07 09:22:55 +02:00
parent 7b27862795
commit 2693ba57c8
7 changed files with 57 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
bookmarks/styles/base.scss
View File

@ -1,12 +1,14 @@
body { body {
margin: 20px 0; margin: 20px 10px;
} }
header { header {
margin-bottom: 40px; margin-bottom: 40px;
} }
.navbar-brand { .navbar {
.navbar-brand {
.logo { .logo {
background-color: $primary-color; background-color: $primary-color;
@ -18,6 +20,11 @@ header {
text-transform: uppercase; text-transform: uppercase;
display: inline-block; display: inline-block;
} }
}
.dropdown-toggle {
padding: 0;
}
} }
/* Overrides */ /* Overrides */

2
bookmarks/templates/bookmarks/edit.html
View File

@ -7,7 +7,7 @@
<div class="content-area-header"> <div class="content-area-header">
<h2>Edit bookmark</h2> <h2>Edit bookmark</h2>
</div> </div>
<form action="{% url 'bookmarks:edit' bookmark_id %}" method="post" class="col-6" novalidate> <form action="{% url 'bookmarks:edit' bookmark_id %}" method="post" class="col-6 col-md-12" novalidate>
{% bookmark_form form %} {% bookmark_form form %}
</form> </form>
</section> </section>

4
bookmarks/templates/bookmarks/index.html
View File

@ -6,7 +6,7 @@
<div class="bookmarks-page columns"> <div class="bookmarks-page columns">
{# Bookmark list #} {# Bookmark list #}
<section class="content-area column col-8"> <section class="content-area column col-8 col-md-12">
<div class="content-area-header"> <div class="content-area-header">
<h2>Bookmarks</h2> <h2>Bookmarks</h2>
<div class="spacer"></div> <div class="spacer"></div>
@ -28,7 +28,7 @@
</section> </section>
{# Tag list #} {# Tag list #}
<section class="content-area column col-4"> <section class="content-area column col-4 hide-md">
<div class="content-area-header"> <div class="content-area-header">
<h2>Tags</h2> <h2>Tags</h2>
</div> </div>

30
bookmarks/templates/bookmarks/layout.html
View File

@ -5,6 +5,10 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
<meta name="description" content="Self-hosted bookmark service">
<meta name="robots" content="index,follow">
<meta name="author" content="Sascha Ißbrücker">
<title>linkding</title> <title>linkding</title>
{# Include SASS styles, files are resolved from bookmarks/styles #} {# Include SASS styles, files are resolved from bookmarks/styles #}
<link href="{% sass_src 'index.scss' %}" rel="stylesheet" type="text/css"/> <link href="{% sass_src 'index.scss' %}" rel="stylesheet" type="text/css"/>
@ -21,10 +25,36 @@
{# Only nav items menu when logged in #} {# Only nav items menu when logged in #}
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
<section class="navbar-section"> <section class="navbar-section">
{# Basic menu list #}
<div class="hide-md">
<a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">Add bookmark</a> <a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">Add bookmark</a>
<a href="{% url 'bookmarks:bookmarklet' %}" class="btn btn-link">Bookmarklet</a> <a href="{% url 'bookmarks:bookmarklet' %}" class="btn btn-link">Bookmarklet</a>
<a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a> <a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
<a href="{% url 'logout' %}" class="btn btn-link">Logout</a> <a href="{% url 'logout' %}" class="btn btn-link">Logout</a>
</div>
{# Menu drop-down for smaller devices #}
<div class="show-md">
<div class="dropdown dropdown-right">
<a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
<i class="icon icon-menu icon-2x"></i>
</a>
<!-- menu component -->
<ul class="menu">
<li>
<a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">Add bookmark</a>
</li>
<li>
<a href="{% url 'bookmarks:bookmarklet' %}" class="btn btn-link">Bookmarklet</a>
</li>
<li>
<a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
</li>
<li>
<a href="{% url 'logout' %}" class="btn btn-link">Logout</a>
</li>
</ul>
</div>
</div>
</section> </section>
{% endif %} {% endif %}
</header> </header>

2
bookmarks/templates/bookmarks/new.html
View File

@ -7,7 +7,7 @@
<div class="content-area-header"> <div class="content-area-header">
<h2>New bookmark</h2> <h2>New bookmark</h2>
</div> </div>
<form action="{% url 'bookmarks:new' %}" method="post" class="col-6" novalidate> <form action="{% url 'bookmarks:new' %}" method="post" class="col-6 col-md-12" novalidate>
{% bookmark_form form auto_close %} {% bookmark_form form auto_close %}
</form> </form>
</section> </section>

4
bookmarks/templates/registration/login.html
View File

@ -7,7 +7,7 @@
<div class="login-page"> <div class="login-page">
<div class="columns"> <div class="columns">
<section class="content-area column col-5 col-sm-12"> <section class="content-area column col-5 col-md-12">
<div class="content-area-header"> <div class="content-area-header">
<h2>Login</h2> <h2>Login</h2>
</div> </div>
@ -27,7 +27,7 @@
{{ form.password|add_class:'form-input' }} {{ form.password|add_class:'form-input' }}
</div> </div>
<input type="submit" value="Login" class="btn btn-primary mt-2 col-sm-12"> <input type="submit" value="Login" class="btn btn-primary mt-2 col-md-12">
<input type="hidden" name="next" value="{{ next }}"> <input type="hidden" name="next" value="{{ next }}">
</form> </form>
</section> </section>

2
bookmarks/templates/settings/index.html
View File

@ -13,7 +13,7 @@
<form method="post" enctype="multipart/form-data" action="{% url 'bookmarks:settings.import' %}"> <form method="post" enctype="multipart/form-data" action="{% url 'bookmarks:settings.import' %}">
{% csrf_token %} {% csrf_token %}
<div class="form-group"> <div class="form-group">
<div class="input-group col-8 col-sm-12"> <div class="input-group col-8 col-md-12">
<input class="form-input" type="file" name="import_file"> <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 col-2 btn btn-primary" value="Upload">
</div> </div>