Skip to content

Egor Iuganov / website

Go to a project
Commit b6f85a73 by Егор Юганов
Options

lesson 28 completed, navbar added

1 parent 121d6d28
Expand all
Inline Side-by-side
Showing with 120 additions and 39 deletions
music/static/music/style.css
body{ body{
background: white url("images/background.jpg"); background: white url("images/background.jpg");
}
.navbar{
border-radius: 0;
}
.navbar-brand{
font-family: 'Satisfy', cursive;
} }
\ No newline at end of file
music/templates/music/base.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}Viberr{% endblock %}</title> <!--if we don't specify the title it is Viberr by default-->
<!-- Loads the path to your static files -->
{% load staticfiles %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet" type="text/css" %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'music/style.css' %}"/><!--should be here so that bootstrap doesn't override our styles-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script><!-- to make it nice when the window is small-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse"><!-- inverse to change color to black, could be default-->
<div class="container-fluid">
<!-- Header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topNavBar"><!-- all comes with bootstrap; topNavBar is the name of the container for all buttons on the top-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'music:index' %}">Viberr</a>
</div>
<!-- Items -->
<div class="collapse navbar-collapse" id="topNavBar"><!--this section is collapsable, because it also has id=topNavBar like the button above-->
<ul class="nav navbar-nav">
<li class=""> <!--if class="active" the button lookes like it's "pressed"-->
<a href="{% url 'music:index' %}">
<span class="glyphicon glyphicon-cd" aria-hidden="true"></span>&nbsp;<!-- CD-disc icon; nbsp is space -->
Albums
</a>
</li>
<li class="">
<a href="#">
<span class="glyphicon glyphicon-music" aria-hidden="true"></span>&nbsp;
Songs
</a>
</li>
</ul>
<form class="navbar-form navbar-left" role="search" method="get" action="#">
<div class="form-group">
<input type="text" class="form-control" name="q" value=""><!--q is for query-->
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="#">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp; Add Album
</a>
</li>
<li class="">
<a href="#">
<span class="glyphicon glyphicon-off" aria-hidden="true"></span>&nbsp; Logout
</a>
</li>
</ul>
</div>
</div>
</nav>
{% block body %} <!--here we want to include a block of code, see index.html -->
{% endblock %}
</body>
</html>
\ No newline at end of file
music/templates/music/detail.html
<img src="{{ album.album_logo }}" height="42" width="42"> {% extends 'music/base.html' %}
<h1>{{ album.album_title }}</h1>
<h2>{{ album.artist }}</h2>
<!-- <ul> {% block body %} <!--here we want to include a block of code, see index.html -->
{% for song in album.song_set.all %} <img src="{{ album.album_logo }}" height="42" width="42">
<li>{{ song.song_title }} - {{ song.file_type }}</li>
{% endfor %}
</ul> -->
{% if error_message %} <h1>{{ album.album_title }}</h1>
<p><strong>{{ error_message }}</strong></p> <h2>{{ album.artist }}</h2>
{% endif %}
<form action="{% url 'music:favorite' album.id %}" method="post"> <!-- <ul>
{% csrf_token %} {% for song in album.song_set.all %}
{% for song in album.song_set.all %} <li>{{ song.song_title }} - {{ song.file_type }}</li>
<input type="radio" id="song{{ forloop.counter }}" name="song" value="{{ song.id }}"> <!-- auto-incremented each time it prints a song --> {% endfor %}
<label for="song{{ forloop.counter }}"> </ul> -->
{{ song.song_title }}
{% if song.is_favorite %} {% if error_message %}
<img src="http://grumpygaycritic.co.uk/wp-content/uploads/2015/06/Crystal_Clear_action_bookmark.png" height="16" width="16"> <p><strong>{{ error_message }}</strong></p>
{% endif %} {% endif %}
</label><br>
{% endfor %} <form action="{% url 'music:favorite' album.id %}" method="post">
<input type="submit" value="Favorite"> {% csrf_token %}
</form> {% for song in album.song_set.all %}
\ No newline at end of file <input type="radio" id="song{{ forloop.counter }}" name="song" value="{{ song.id }}"> <!-- auto-incremented each time it prints a song -->
<label for="song{{ forloop.counter }}">
{{ song.song_title }}
{% if song.is_favorite %}
<img src="http://grumpygaycritic.co.uk/wp-content/uploads/2015/06/Crystal_Clear_action_bookmark.png" height="16" width="16">
{% endif %}
</label><br>
{% endfor %}
<input type="submit" value="Favorite">
</form>
{% endblock %}
music/templates/music/index.html
<!-- Loads the path to your static files --> {% extends 'music/base.html' %}
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'music/style.css' %}" />
{% if all_albums %} {% block body %}
<h3>Here are all my Albums</h3>
<ul> {% if all_albums %}
{% for album in all_albums %} <h3>Here are all my Albums</h3>
<li><a href="{% url 'music:detail' album.id %}">{{ album.album_title }}</a></li> <ul>
{% endfor %} {% for album in all_albums %}
</ul> <li><a href="{% url 'music:detail' album.id %}">{{ album.album_title }}</a></li>
{% else %} {% endfor %}
<h3>You don't have any albums</h3> </ul>
{% endif %} {% else %}
\ No newline at end of file <h3>You don't have any albums</h3>
{% endif %}
{% endblock %}
\ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!