Improve mobile layout
This commit is contained in:
parent
7b27862795
commit
2693ba57c8
|
@ -1,22 +1,29 @@
|
|||
body {
|
||||
margin: 20px 0;
|
||||
margin: 20px 10px;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
.navbar {
|
||||
|
||||
.logo {
|
||||
background-color: $primary-color;
|
||||
color: $light-color;
|
||||
padding: 14px;
|
||||
.navbar-brand {
|
||||
|
||||
.logo {
|
||||
background-color: $primary-color;
|
||||
color: $light-color;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
.dropdown-toggle {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
<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>
|
||||
{# 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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue