Skip to content

M
mymusiclist
Commit b6e6051e authored by Deion Menor's avatar Deion Menor
Browse files
Options

Unify css theme across all pages

parent 18f1c709
Hide whitespace changes
Inline Side-by-side
Showing with 110 additions and 35 deletions
files/css/mymusiclist.css
View file @ b6e6051e
......@@ -127,6 +127,7 @@ a, .link{
color: white;
}
@media (max-width:1280px){
.sidebar{
display:none;
......
templates/album.html
View file @ b6e6051e
......@@ -4,18 +4,33 @@
{% block sidebar %}
<img src = "{{result.art}}" alt= "No album art available">
<p>
<b> {{result.album_name}} </b> ({{result.year}}) <br>
{{artist}} <br> <br>
Tags: {{songs.1.genre}}
<div class="w3-card-4 w3-black w3-opacity sidebar w3-round">
<img src = "{{result.art}}" class="w3-round" alt= "No album art available">
<p>
<b> {{result.album_name}} </b> ({{result.year}}) <br>
{{artist}} <br> <br>
Tags: {{songs.1.genre}}
</p>
</div>
{% endblock %}
{% block content %}
<div class = "w3-card-4 main">
<div id="song_list" class = "w3-card-4 main w3-green w3-padding" >
{% for i in songs %}
<h3> {{i.song_name}} </h3>
<a href="javascript:void" style="text-decoration:none"><i class="fa fa-square-o" aria-hidden="true"></i> {{i.song_name}} <br/>
</a>
{% endfor %}
</div>
{% endblock %}
<script>
$(document).ready(function () {
$('i').click(function () {
$(this).find('i').toggleClass('fa-square-o fa-check-square-o');
});
});
</script>
templates/artist.html
View file @ b6e6051e
......@@ -4,6 +4,7 @@
{% block sidebar %}
<div class="w3-card-4 w3-black w3-opacity sidebar w3-round">
<h2> Artist info </h2>
<p>
Artist: {{result.name}} <br>
......@@ -11,13 +12,40 @@
<br>
<h2> Description </h2>
{{result.description}}
</div>
{% endblock %}
{% block content %}
{% for i in albums %}
<div class = "w3-card-4 main w3-margin">
<h3> <a class = "link" href= "/album/{{i.id}}"> {{i.album_name}} </a></h3>
<p> Year: {{i.year}} </p>
<div class = " main w3-margin w3-card w3-hover-shadow w3-animate-opacity ">
<header class="w3-row w3-green">
<div class="w3-col w3-container w3-green" style="width:95%">
<h3 ><a href="/album/{{i.id}}" style="text-decoration:none">{{i.album_name}}</a></h3>
</div>
{% if request.user.is_authenticated %}
<div class="w3-col w3-container w3-green " style="width:5%" >
<div class="w3-dropdown-hover w3-right w3-green">
<button id="search_type" class="w3-button" "><i class="fa fa-plus fa-2x" aria-hidden="true"></i> </button>
<div class="w3-dropdown-content w3-bar-block w3-card-4" style="right:0">
<button class=" w3-bar-item w3-button">Update existing playlist</button>
<button class=" w3-bar-item w3-button">Create new playlist</button>
</div>
</div>
</div>
{% endif %}
</header>
<div class="w3-container w3-opacity w3-black">
<p>
Year: {{i.year}} </p>
</div>
</div>
{% endfor %}
{% endblock %}
templates/base.html
View file @ b6e6051e
......@@ -8,6 +8,8 @@
<link rel="stylesheet" href="/files/css/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
......@@ -66,21 +68,25 @@
<div>
{% block sidebar %}
<div class="w3-card-4 w3-black w3-opacity sidebar">
<h2>Featured Songs</h2>
<img src="/files/images/divide_edsheeran.jpeg" alt="Divide - Ed Sheeran">
Divide - Ed Sheeran
<img src="/files/images/palette_iu.jpeg" alt="Palette - IU">
Palette - IU
<img src="/files/images/rockstar_postmalone21savage.jpeg" alt="Rockstar">
Rockstar
</div>
{% endblock %}
</div>
{% block sidebar %}
<div class="w3-card-4 w3-black w3-opacity sidebar">
<h2>Featured Songs</h2>
<img src="/files/images/divide_edsheeran.jpeg" alt="Divide - Ed Sheeran">
Divide - Ed Sheeran
<img src="/files/images/palette_iu.jpeg" alt="Palette - IU">
Palette - IU
<img src="/files/images/rockstar_postmalone21savage.jpeg" alt="Rockstar">
Rockstar
</div>
{% endblock %}
</header>
......@@ -90,6 +96,9 @@
<script>
function mainA(){
document.getElementById("search_type").innerHTML = "Album Search";
......@@ -119,5 +128,6 @@
document.getElementByID("nav_bar").style.background-color = "white";
}
</script>
</body>
</html>
templates/edit_profile.html
View file @ b6e6051e
......@@ -3,7 +3,7 @@
{% block title %}Edit Profile{% endblock %}
{% block content %}
<div class="boxified main profile">
<div class="w3-card-4 w3-green w3-padding">
{% if request.user.is_authenticated %}
{% if user.username == request.user.username %}
<h2>Edit Profile</h2>
......
templates/home.html
View file @ b6e6051e
......@@ -18,6 +18,8 @@
{% else %}
<div class="w3-display-container" style="width:100em; height:50em;overflow:hidden;">
<div class="hero">
......@@ -27,7 +29,7 @@
<div class="w3-display-middle w3-display-container w3-large">
<div class="w3-panel w3-green w3-padding">
<div class="w3-panel w3-green w3-padding ">
<h1 class="w3-text-white">
<b>Easily keep track of all your favorite artists in one convenient place</b></h1>
</div>
......@@ -62,12 +64,12 @@ function carousel() {
<h2>What is MyMusicList?</h2>
<div class="w3-display-container" style="height:10em;">
<img src="/files/images/logo.jpg"class="w3-display-middle"style="height:10em"/>
<div class="w3-display-container" style="height:30em;">
<img src="/files/images/logo.jpg"class="w3-round w3-card w3-display-middle w3-image"/>
</div>
<p class="text_home">
<p style="font-size:20px">
Do you want to see music like you’ve never before? Do you want to make a playlist without it
feeling lifeless and a hassle? Do you want to show off your hip-and-cool music with your friends?
MyMusicList is the answer.
......@@ -77,8 +79,10 @@ MyMusicList is the answer.
<div class="">
<div class="w3-row-padding w3-blue">
<div class="w3-card-2 w3-col-s4 " style="width:30%">
<div class="w3-row w3-center w3-blue">
<h1>Features</h1>
<div class="w3-card-2 w3-col s4 w3-margin" style="width:30%">
<img src="/files/images/image2.png" alt="playlist" style="width:100%">
<div class="w3-container w3-center">
......@@ -90,7 +94,7 @@ MyMusicList is the answer.
</div>
<div class="w3-card-2 w3-col-s4" style="width:30%">
<div class="w3-card-2 w3-col s4 w3-margin" style="width:30%">
<img src="/files/images/image4.png" alt="playlist" style="width:100%">
<div class="w3-container w3-center">
......@@ -101,7 +105,7 @@ MyMusicList is the answer.
</div>
<div class="w3-card-2 w3-col-s4 " style="width:30%">
<div class="w3-card-2 w3-col s4 w3-margin" style="width:30%">
<img src="/files/images/image3.png" alt="playlist" style="width:100%">
<div class="w3-container w3-center">
......
templates/logged_out.html
View file @ b6e6051e
......@@ -2,8 +2,11 @@
{% block title %}See you!{% endblock %}
{% block sidebar %}
{% endblock %}
{% block content %}
<div class="boxified main logged_out">
<div class="w3-card-4 w3-green w3-center w3-padding">
<h2>Logged out</h2>
<p>
......
templates/login.html
View file @ b6e6051e
......@@ -2,9 +2,12 @@
{% block title %}Login{% endblock %}
{% block sidebar %}
{% endblock %}
{% block content %}
<div class="boxified main login_form">
<div class=" w3-card-4 w3-green w3-center w3-padding">
{% if request.user.is_authenticated %}
<p>You are already logged in as {{request.user.username}}. You need to log out before logging in as a different user.</p>
<p><a href="/logout">Log out</a> or <a href="/">return to the home page</a>.</p>
......
templates/profile.html
View file @ b6e6051e
......@@ -2,8 +2,11 @@
{% block title %}{{profile.username}}'s Profile{% endblock %}
{% block sidebar %}
{% endblock %}
{% block content %}
<div class="boxified main profile">
<div class="w3-card-4 w3-green w3-container w3-padding profile">
{% if request.user.is_authenticated %}
<h2>{{profile.username}}'s Profile</h2>
<ul>
......
templates/search.html
View file @ b6e6051e
......@@ -3,13 +3,16 @@
{% block title %}Song search test{% endblock %}
{% block sidebar %}
<div class="w3-card-4 w3-black w3-opacity sidebar w3-round">
<h2> Search results (by {{type}})</h2>
<p>
You searched for '{{term}}' <br>
Found {{results.count}} results <br>
Source: Local</p>
</div>
{% endblock %}
......@@ -38,10 +41,12 @@
{% endif %}
</header>
<div class="w3-container w3-opacity w3-black">
<p>Artist: <a href="/artist/{{i.artist.id}}">{{i.artist.name}}</a><br>
Year: {{i.year}} </p>
</div>
{% endif %}
......
templates/signup.html
View file @ b6e6051e
{% extends 'base.html' %}
{% block sidebar %}
{% endblock %}
{% block content %}
<div class='boxified main signup_form'>
<div class='w3-card-4 w3-green w3-padding'>
{% if user.is_authenticated %}
<p>You are already logged in as {{user.username}}.</p>
<p><a href="/logout">Log out</a> or <a href="/">return to home page</a>.</p>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment