Improve mobile layout

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

View File

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

View File

@ -7,7 +7,7 @@
<div class="content-area-header">
<h2>Edit bookmark</h2>
</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 %}
</form>
</section>

View File

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

View File

@ -5,6 +5,10 @@
<html lang="en">
<head>
<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>
{# Include SASS styles, files are resolved from bookmarks/styles #}
<link href="{% sass_src 'index.scss' %}" rel="stylesheet" type="text/css"/>
@ -21,10 +25,36 @@
{# Only nav items menu when logged in #}
{% if request.user.is_authenticated %}
<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:bookmarklet' %}" class="btn btn-link">Bookmarklet</a>
<a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</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>
{% endif %}
</header>

View File

@ -7,7 +7,7 @@
<div class="content-area-header">
<h2>New bookmark</h2>
</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 %}
</form>
</section>

View File

@ -7,7 +7,7 @@
<div class="login-page">
<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">
<h2>Login</h2>
</div>
@ -27,7 +27,7 @@
{{ form.password|add_class:'form-input' }}
</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 }}">
</form>
</section>

View File

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