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 98 additions and 17 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 -->
<img src="{{ album.album_logo }}" height="42" width="42">
<h1>{{ album.album_title }}</h1>
<h2>{{ album.artist }}</h2>
<!-- <ul>
{% for song in album.song_set.all %} {% for song in album.song_set.all %}
<li>{{ song.song_title }} - {{ song.file_type }}</li> <li>{{ song.song_title }} - {{ song.file_type }}</li>
{% endfor %} {% endfor %}
</ul> --> </ul> -->
{% if error_message %} {% if error_message %}
<p><strong>{{ error_message }}</strong></p> <p><strong>{{ error_message }}</strong></p>
{% endif %} {% endif %}
<form action="{% url 'music:favorite' album.id %}" method="post"> <form action="{% url 'music:favorite' album.id %}" method="post">
{% csrf_token %} {% csrf_token %}
{% for song in album.song_set.all %} {% for song in album.song_set.all %}
<input type="radio" id="song{{ forloop.counter }}" name="song" value="{{ song.id }}"> <!-- auto-incremented each time it prints a song --> <input type="radio" id="song{{ forloop.counter }}" name="song" value="{{ song.id }}"> <!-- auto-incremented each time it prints a song -->
...@@ -25,4 +29,5 @@ ...@@ -25,4 +29,5 @@
</label><br> </label><br>
{% endfor %} {% endfor %}
<input type="submit" value="Favorite"> <input type="submit" value="Favorite">
</form> </form>
\ No newline at end of file {% 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 %}
{% if all_albums %}
<h3>Here are all my Albums</h3> <h3>Here are all my Albums</h3>
<ul> <ul>
{% for album in all_albums %} {% for album in all_albums %}
<li><a href="{% url 'music:detail' album.id %}">{{ album.album_title }}</a></li> <li><a href="{% url 'music:detail' album.id %}">{{ album.album_title }}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>
{% else %} {% else %}
<h3>You don't have any albums</h3> <h3>You don't have any albums</h3>
{% endif %} {% endif %}
\ No newline at end of file {% 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!