Make design somewhat usable
This commit is contained in:
Nico Schottelius
parent
e812a7a4c6
commit
936a8fb701
3 changed files with 147 additions and 43 deletions
37
static/css/sticky-footer-navbar.css
Normal file
37
static/css/sticky-footer-navbar.css
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
/* Sticky footer styles
|
||||||
|
-------------------------------------------------- */
|
||||||
|
html {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
/* Margin bottom by footer height */
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
/* Set the fixed height of the footer here */
|
||||||
|
height: 60px;
|
||||||
|
line-height: 60px; /* Vertically center the text there */
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Custom page CSS
|
||||||
|
-------------------------------------------------- */
|
||||||
|
/* Not required for template or sticky footer method. */
|
||||||
|
|
||||||
|
body > .container {
|
||||||
|
padding: 60px 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer > .container {
|
||||||
|
padding-right: 15px;
|
||||||
|
padding-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
@ -22,7 +22,10 @@ BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
|
||||||
SECRET_KEY=get_random_secret_key()
|
SECRET_KEY=get_random_secret_key()
|
||||||
|
|
||||||
|
|
||||||
ALLOWED_HOSTS = []
|
ALLOWED_HOSTS = [ "line.schottelius.org",
|
||||||
|
"ipv6-blog.place7.ungleich.ch",
|
||||||
|
"localhost:8001",
|
||||||
|
"localhost" ]
|
||||||
|
|
||||||
|
|
||||||
# Application definition
|
# Application definition
|
||||||
|
|
|
||||||
|
|
@ -9,20 +9,70 @@
|
||||||
|
|
||||||
<!-- Bootstrap CSS -->
|
<!-- Bootstrap CSS -->
|
||||||
<link rel="stylesheet" href="{% static '/bootstrap/css/bootstrap.min.css' %}">
|
<link rel="stylesheet" href="{% static '/bootstrap/css/bootstrap.min.css' %}">
|
||||||
|
<link rel="stylesheet" href="{% static '/css/sticky-footer-navbar.css' %}">
|
||||||
|
|
||||||
|
|
||||||
<title>{{ site_name }} powered by ubookmark</title>
|
<title>{{ site_name }} powered by ubookmark</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>{{ site_name }}</h1>
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||||
<div>
|
<a class="navbar-brand" href="#">{{ site_name }}</a>
|
||||||
{% autoescape off %}
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
<p>{{ site_description }}</p>
|
<span class="navbar-toggler-icon"></span>
|
||||||
{% endautoescape %}
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||||
|
<ul class="navbar-nav mr-auto">
|
||||||
|
{% if page_obj.has_previous %}
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="?page=1">first</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="?page={{ page_obj.previous_page_number }}">previous</a>
|
||||||
|
</li>
|
||||||
|
{% else %}
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link disabled" href="#">first</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link disabled" href="#">previous</a>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<li class="nav-item active">
|
||||||
|
<a class="nav-link" href="#">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</a>
|
||||||
|
</li>
|
||||||
|
{% if page_obj.has_next %}
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="?page={{ page_obj.next_page_number }}">next</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="?page={{ page_obj.paginator.num_pages }}">last</a>
|
||||||
|
</li>
|
||||||
|
{% else %}
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link disabled" href="#">next</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link disabled" href="#">last</a>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="/login">Login</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
{% autoescape off %}
|
||||||
|
{{ site_description }}
|
||||||
|
{% endautoescape %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div>
|
<div class="container">
|
||||||
<ul class="list-group">
|
<ul class="list-group">
|
||||||
{% for bookmark in object_list %}
|
{% for bookmark in object_list %}
|
||||||
<li class="list-group-item">
|
<li class="list-group-item">
|
||||||
|
|
@ -35,46 +85,60 @@
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<!--
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 offset-md-3">
|
||||||
|
|
||||||
<nav aria-label="Page navigation example">
|
<nav aria-label="Page navigation example">
|
||||||
<ul class="pagination">
|
<ul class="pagination">
|
||||||
{% if page_obj.has_previous %}
|
{% if page_obj.has_previous %}
|
||||||
<li class="page-item">
|
<li class="page-item">
|
||||||
<a class="page-link" href="?page=1">first</a>
|
<a class="page-link" href="?page=1">BOTTOM first</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="page-item">
|
<li class="page-item">
|
||||||
<a class="page-link" href="?page={{ page_obj.previous_page_number }}">previous</a>
|
<a class="page-link" href="?page={{ page_obj.previous_page_number }}">previous</a>
|
||||||
</li>
|
</li>
|
||||||
{% else %}
|
{% else %}
|
||||||
<li class="page-item disabled">
|
<li class="page-item disabled">
|
||||||
<a class="page-link" href="#">first</a>
|
<a class="page-link" href="#">first</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="page-item disabled">
|
<li class="page-item disabled">
|
||||||
<a class="page-link" href="#">previous</a>
|
<a class="page-link" href="#">previous</a>
|
||||||
</li>
|
</li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
<li class="page-item disabled">
|
||||||
|
<a class="page-link" href="#">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
<li class="page-item disabled">
|
{% if page_obj.has_next %}
|
||||||
<a class="page-link" href="#">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</a>
|
<li class="page-item">
|
||||||
</li>
|
<a class="page-link" href="?page={{ page_obj.next_page_number }}">next</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item">
|
||||||
|
<a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">last</a>
|
||||||
|
</li>
|
||||||
|
{% else %}
|
||||||
|
<li class="page-item disabled">
|
||||||
|
<a class="page-link" href="#">next</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item disabled">
|
||||||
|
<a class="page-link" href="#">last</a>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
|
||||||
{% if page_obj.has_next %}
|
<footer class="footer">
|
||||||
<li class="page-item">
|
<div class="container">
|
||||||
<a class="page-link" href="?page={{ page_obj.next_page_number }}">next</a>
|
<span class="text-muted"><a href="http://ungleich.ch/u/projects/ubookmark">ubookmark</a>
|
||||||
</li>
|
is a FOSS product created by <a href="https://ungleich.ch">ungleich</a>.</span>
|
||||||
<li class="page-item">
|
</div>
|
||||||
<a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">last</a>
|
</footer>
|
||||||
</li>
|
|
||||||
{% else %}
|
|
||||||
<li class="page-item disabled">
|
|
||||||
<a class="page-link" href="#">next</a>
|
|
||||||
</li>
|
|
||||||
<li class="page-item disabled">
|
|
||||||
<a class="page-link" href="#">last</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<script src="{% static '/bootstrap/js/bootstrap.min.js' %}"</script>
|
<script src="{% static '/bootstrap/js/bootstrap.min.js' %}"</script>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue