change layout of the application

This commit is contained in:
Fred Pauchet 2016-05-02 13:45:25 +02:00
parent 7134cdda00
commit 52dfe7cada
10 changed files with 185 additions and 17 deletions

View File

@ -85,3 +85,4 @@ USE_TZ = True
# https://docs.djangoproject.com/en/1.8/howto/static-files/
STATIC_URL = '/static/'

View File

@ -26,4 +26,8 @@ DATABASES = {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
}
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]

View File

@ -0,0 +1,82 @@
html {
position: relative;
min-height: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
/* Margin bottom by footer height */
margin-bottom: 4em;
}
.user-avatar {
width: 1.5em;
height: 1.5em;
border-radius: .75em;
}
.slimg {
width: auto;
height: 270px;
max-height: 270px;
vertical-align: middle;
}
.project-card-description {
height: 3em;
overflow: hidden;
}
.base-header {
width: 100%;
max-height: 200px;
margin-top: 5px;
vertical-align: bottom;
}
#nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index:10;
}
.nav-wrapper
{
min-height:70px;
}
#home-logo {
width: 100%;
text-align: center;
background-image:linear-gradient(white, #BBBBBB);
}
#home-logo-image {
width: 50%;
margin: auto;
height: auto;
max-height: 120px;
max-width: 243px;
overflow: hidden;
}
.navbar-shadow{
-webkit-box-shadow: 0px 9px 43px -4px rgba(61,61,61,0.5);
-moz-box-shadow: 0px 9px 43px -4px rgba(61,61,61,0.5);
box-shadow: 0px 9px 43px -4px rgba(61,61,61,0.5);
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/*Set the fixed height of the footer here */
height: 4em;
padding-top: 1em;
border-top: 1px solid #f5f5f5;
}
.footer a {
color: #5b94c5;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 657 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 570 B

View File

@ -0,0 +1,5 @@
$('#nav').affix({
offset: {
top: $('header').height()
}
});

View File

@ -0,0 +1,3 @@
<div class="container">
Copylefted '16
</div>

View File

@ -0,0 +1,14 @@
<ul class="nav navbar-nav">
<li class="">
<a href="#">
<i class="fa fa-calendar"></i> Mes listes
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="#">
<i class="fa fa-user"></i> Login / Register
</a>
</li>
</ul>

64
gwift/templates/base.html Normal file
View File

@ -0,0 +1,64 @@
{% load staticfiles %}
<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<link rel="icon" href="{% static 'img/favicon.ico' %}" />
<title>Gwift</title>
</head>
<body class="base-body">
<!-- navigation -->
<div class="nav-wrapper">
<div id="nav">
<nav class="navbar navbar-default navbar-static-top navbar-shadow">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menuNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<img src="{% static 'img/gwift-20x20.png' %}" />
</a>
</div>
<div class="collapse navbar-collapse" id="menuNavbar">
{% include "_menu_items.html" %}
</div>
</div>
</nav>
</div>
</div>
<!-- end navigation -->
<!-- content -->
<div class="container">
<div class="row">
<div class="col-md-8">
{% block content %}{% endblock %}
</div>
</div>
</div>
<!-- end content -->
<!-- footer -->
<footer class="footer">
{% include "_footer.html" %}
</footer>
<!-- end footer -->
<!--<script src="/static/js/navbar.js"></script>-->
</body>
</html>

View File

@ -1,16 +1,11 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
</head>
<body>
<p>Mes listes de souhaits</p>
<ul>
{% for wishlist in wishlists %}
<li>{{ wishlist.name }}: {{ wishlist.description }}</li>
{% endfor %}
</ul>
</body>
</html>
{% extends "base.html" %}
{% block content %}
<p>Mes listes de souhaits</p>
<ul>
{% for wishlist in wishlists %}
<li>{{ wishlist.name }}: {{ wishlist.description }}</li>
{% endfor %}
</ul>
{% endblock %}