mrashidtufail/ubookmark
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Make design somewhat usable

Browse source
This commit is contained in:
Nico Schottelius 2020-04-25 19:44:21 +02:00
parent e812a7a4c6
commit 936a8fb701
3 changed files with 147 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
static/css/sticky-footer-navbar.css Normal file
View 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%;
}

5
ubookmark/settings.py
View file

@ -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

148
ubookmark/templates/ubookmark/bookmarkmodel_list.html
View file

@ -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>
{% autoescape off %}
<p>{{ site_description }}</p>
{% endautoescape %}
<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 %}
{{ site_description }}
{% endautoescape %}
</div>
</div>
<div>
<div class="container">
<ul class="list-group">
{% for bookmark in object_list %}
<li class="list-group-item">
@ -35,46 +85,60 @@
{% 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>
</li>
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.previous_page_number }}">previous</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#">first</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">previous</a>
</li>
{% endif %}
<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">BOTTOM first</a>
</li>
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.previous_page_number }}">previous</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#">first</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">previous</a>
</li>
{% 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">
<a class="page-link" href="#">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</a>
</li>
{% if page_obj.has_next %}
<li class="page-item">
<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 %}
<li class="page-item">
<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>
<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>