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()
|
||||
|
||||
|
||||
ALLOWED_HOSTS = []
|
||||
ALLOWED_HOSTS = [ "line.schottelius.org",
|
||||
"ipv6-blog.place7.ungleich.ch",
|
||||
"localhost:8001",
|
||||
"localhost" ]
|
||||
|
||||
|
||||
# Application definition
|
||||
|
|
|
|||
|
|
@ -9,20 +9,70 @@
|
|||
|
||||
<!-- Bootstrap 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>
|
||||
</head>
|
||||
<body>
|
||||
<h1>{{ site_name }}</h1>
|
||||
<div>
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<a class="navbar-brand" href="#">{{ site_name }}</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</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 %}
|
||||
<p>{{ site_description }}</p>
|
||||
{{ site_description }}
|
||||
{% endautoescape %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<div class="container">
|
||||
<ul class="list-group">
|
||||
{% for bookmark in object_list %}
|
||||
<li class="list-group-item">
|
||||
|
|
@ -35,12 +85,16 @@
|
|||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<!--
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 offset-md-3">
|
||||
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination">
|
||||
{% if page_obj.has_previous %}
|
||||
<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 class="page-item">
|
||||
<a class="page-link" href="?page={{ page_obj.previous_page_number }}">previous</a>
|
||||
|
|
@ -54,7 +108,6 @@
|
|||
</li>
|
||||
{% endif %}
|
||||
|
||||
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</a>
|
||||
</li>
|
||||
|
|
@ -75,6 +128,17 @@
|
|||
</li>
|
||||
{% endif %}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<span class="text-muted"><a href="http://ungleich.ch/u/projects/ubookmark">ubookmark</a>
|
||||
is a FOSS product created by <a href="https://ungleich.ch">ungleich</a>.</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="{% static '/bootstrap/js/bootstrap.min.js' %}"</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue