new color, better submit buttons, book detail img title overlay fix, permission denied screen beautified

This commit is contained in:
Stefan Udit 2020-07-12 22:45:49 -03:00
commit ee7a0bfc32
8 changed files with 136 additions and 77 deletions

Binary file not shown.

View File

@ -3,6 +3,7 @@
<head> <head>
{% block title %}<title>Local Library</title>{% endblock %} {% block title %}<title>Local Library</title>{% endblock %}
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -13,28 +14,34 @@
<!-- Compiled and minified JavaScript --> <!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<style> <style>
table { table {
width:100%; width: 100%;
table-layout:fixed; table-layout: fixed;
} }
th {
text-align: center; th {
} text-align: center;
.title { }
width: 40%;
} .title {
.author { width: 40%;
width: 20%; }
}
.rating { .author {
width: 5%; width: 20%;
} }
.tags {
width: 15%; .rating {
} width: 5%;
.added { }
width: 20%;
} .tags {
width: 15%;
}
.added {
width: 20%;
}
</style> </style>
</head> </head>
@ -42,10 +49,10 @@
<div class="navbar-fixed"> <div class="navbar-fixed">
<nav> <nav>
<div class="nav-wrapper row green darken-4"> <div class="nav-wrapper row green darken-1">
<ul class="right"> <ul class="right">
{% if user.is_authenticated %} {% if user.is_authenticated %}
<li class="active"><a href="{{user.get_absolute_url}}"> {{ user.get_username }}</a></li> <li class="active"><a href="{{user.get_absolute_url}}"> {{ user.get_username }}</a></li>
<li><a href="{% url 'logout'%}?next={{request.path}}">Logout</a></li> <li><a href="{% url 'logout'%}?next={{request.path}}">Logout</a></li>
</ul> </ul>
@ -53,9 +60,12 @@
<ul class="left"> <ul class="left">
<li><a href="{% url 'search' %}">Search</a></li> <li><a href="{% url 'search' %}">Search</a></li>
<li><a href="{% url 'books' %}">Books</a></li> <li><a href="{% url 'books' %}">Books</a></li>
<li><a class="dropdown-trigger" href="#!" data-target="dropdown-authors">Authors<i class="material-icons right">arrow_drop_down</i></a></li> <li><a class="dropdown-trigger" href="#!" data-target="dropdown-authors">Authors<i
<li><a class="dropdown-trigger" href="#!" data-target="dropdown-ratings">Ratings<i class="material-icons right">arrow_drop_down</i></a></li> class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger" href="#!" data-target="dropdown-tags">Tags<i class="material-icons right">arrow_drop_down</i></a></li> <li><a class="dropdown-trigger" href="#!" data-target="dropdown-ratings">Ratings<i
class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger" href="#!" data-target="dropdown-tags">Tags<i
class="material-icons right">arrow_drop_down</i></a></li>
</ul> </ul>
<ul id="dropdown-authors" class="dropdown-content"> <ul id="dropdown-authors" class="dropdown-content">
{% for author in unique_authors %} {% for author in unique_authors %}
@ -74,18 +84,44 @@
</ul> </ul>
{% else %} {% else %}
<li><a href="{% url 'sign-up'%}?next={{request.path}}">Sign up</a></li> <li><a href="{% url 'sign-up'%}?next={{request.path}}">Sign up</a></li>
<li><a href="{% url 'login'%}?next={{request.path}}">Login</a></li> <li><a href="{% url 'login'%}?next={{request.path}}">Login</a></li>
</ul> </ul>
{% endif %} {% endif %}
</div> </div>
</nav> </nav>
</div> </div>
<script> <script>
$(".dropdown-trigger").dropdown({hover: true, constrainWidth: false, coverTrigger: false}); $(".dropdown-trigger").dropdown({
hover: true,
constrainWidth: false,
coverTrigger: false
});
</script> </script>
{% block content %} {% endblock %}
{% if user.is_authenticated %}
{% block content %} {% endblock %}
{% else %}
<div class="valign-wrapper" style="width:100%;height:100%;position: absolute;">
<div class="valign" style="width:100%;">
<div class="container">
<div class="row">
<div class="col s12 m6 offset-m3">
<div class="card">
<div class="card-content center">
<p>You don't have permission to view this.</p>
</div>
<div class="card-action center">
<a class="waves-effect waves-light btn-large green accent-4" href="{% url 'login'%}?next={{request.path}}">Login</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
<script> <script>
function sortTable(n) { function sortTable(n) {

View File

@ -1,6 +1,22 @@
{% if user.is_authenticated %} {% if user.is_authenticated %}
{% else %} {% else %}
<h1>You don't have permission to view this.</h1> <div class="valign-wrapper" style="width:100%;height:100%;position: absolute;">
<li><a href="{% url 'login'%}?next={{request.path}}">Login</a></li> <div class="valign" style="width:100%;">
<div class="container">
<div class="row">
<div class="col s12 m6 offset-m3">
<div class="card">
<div class="card-content center">
<p>You don't have permission to view this.</p>
</div>
<div class="card-action center">
<a class="waves-effect waves-light btn-large green accent-4" href="{% url 'login'%}?next={{request.path}}">Login</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %} {% endif %}

View File

@ -1,47 +1,54 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
{% load static %}
<div class="row"> <div class="col s12 m7">
<div class="col s4"><a href="{{download}}"><img src="{{imgpath}}" alt="download" srcset=""></a></div> <div class="card z-depth-0 horizontal">
<div class="col s8"> <div class="card-image">
<h1> {{book.title}}</h1> <a style="padding-top:15%" href="{{download}}"><img src=" {% static "" %}{{imgpath}}" alt="download" srcset=""></a>
<h4> by </div>
{% if book.authors %} <div class="card-stacked">
{% for author in book.authors.all %} <div class="card-content">
<a href="{{author.get_absolute_url}}">{{author.name}}</a> <h1> {{book.title}}</h1>
{%endfor%} <h4> by
{% else %} {% if book.authors %}
{{book.author_sort}} {% for author in book.authors.all %}
{%endif%} <a href="{{author.get_absolute_url}}">{{author.name}}</a>
<br> {%endfor%}
Published by {% else %}
{% if book.publishers %} {{book.author_sort}}
{% for pub in book.publishers.all %} {%endif%}
<a href="{{pub.get_absolute_url}}">{{pub.name}}</a> <br>
{%endfor%} Published by
{% else %} {% if book.publishers %}
Unknown {% for pub in book.publishers.all %}
{%endif%} <a href="{{pub.get_absolute_url}}">{{pub.name}}</a>
<br> {%endfor%}
Tags: {% else %}
{% if book.tags %} Unknown
{% for tag in book.tags.all %} {%endif%}
<a href="{{tag.get_absolute_url}}">{{tag.name}}</a>, <br>
{%endfor%} Tags:
{% else %} {% if book.tags %}
{%endif%} {% for tag in book.tags.all %}
<br> <a href="{{tag.get_absolute_url}}">{{tag.name}}</a>,
Rating: {%endfor%}
{% if book.ratings %} {% else %}
{% for rating in book.ratings.all %} {%endif%}
<a href="{{rating.get_absolute_url}}">{{rating}}</a> <br>
{%endfor%} Rating:
{% else %} {% if book.ratings %}
{%endif%} {% for rating in book.ratings.all %}
<br> <a href="{{rating.get_absolute_url}}">{{rating}}</a>
<a href="{{book.publisher.get_absolute_url}}">{{book.publisher}}</a> {%endfor%}
</h4> {% else %}
{%endif%}
<br>
<a href="{{book.publisher.get_absolute_url}}">{{book.publisher}}</a>
</h4>
</div>
</div>
</div> </div>
</div> </div>

View File

@ -30,7 +30,7 @@
{% endif %} {% endif %}
</div> </div>
<input type="submit" value="login" /> <button class="waves-effect waves-light btn green accent-4" type="submit">login</button>
<input type="hidden" name="next" value="{{ next }}" /> <input type="hidden" name="next" value="{{ next }}" />
</form> </form>

View File

@ -3,7 +3,7 @@
{% block content %} {% block content %}
<form method="post"> <form method="post">
{% csrf_token %} {{form.as_p}} <input type="submit" value="Sign up"></form> {% csrf_token %} {{form.as_p}} <button class="waves-effect waves-light btn green accent-4" type="submit">sign up</button></form>

View File

@ -8,7 +8,7 @@
<input id="title" type="text" name="title" value=""> <input id="title" type="text" name="title" value="">
<label for="author">Author: </label> <label for="author">Author: </label>
<input id="author" type="text" name="author" value=""> <input id="author" type="text" name="author" value="">
<input type="submit" value="search"> <button class="waves-effect waves-light btn green accent-4" type="submit">search</button>
</form> </form>
</div> </div>

View File

@ -18,7 +18,7 @@
<div class="navbar-fixed"> <div class="navbar-fixed">
<nav> <nav>
<div class="nav-wrapper row green darken-4"> <div class="nav-wrapper row green darken-1">
<ul class="right"> <ul class="right">
{% if user.is_authenticated %} {% if user.is_authenticated %}