Skip to content

M
mymusiclist
Commit d74fad45 authored by Brian Guadalupe's avatar Brian Guadalupe
Browse files
Options

Merge branch 'master' into 'createplaylistactualwip' 

# Conflicts:
#   templates/base.html
#   templates/profile.html
#   templates/search.html
parents f4d630dd e45f1ff1
Hide whitespace changes
Inline Side-by-side
Showing with 312 additions and 155 deletions
core/migrations/0001_initial.py
View file @ d74fad45
# -*- coding: utf-8 -*-
# Generated by Django 1.11.5 on 2017-11-04 13:55
# Generated by Django 1.11.5 on 2017-11-19 11:12
from __future__ import unicode_literals
from django.db import migrations, models
......@@ -20,6 +20,7 @@ class Migration(migrations.Migration):
('id', models.AutoField(primary_key=True, serialize=False)),
('album_name', models.CharField(max_length=64)),
('year', models.DecimalField(decimal_places=0, max_digits=4)),
('art', models.URLField(blank=True, null=True)),
],
),
migrations.CreateModel(
......@@ -30,22 +31,6 @@ class Migration(migrations.Migration):
('description', models.TextField()),
],
),
migrations.CreateModel(
name='MusicEntry',
fields=[
('id', models.AutoField(primary_key=True, serialize=False)),
('order_in_playlist', models.PositiveSmallIntegerField()),
('rating', models.DecimalField(choices=[(0, '1'), (1, '2'), (2, '3'), (3, '4'), (4, '5'), (5, '6'), (6, '7'), (7, '8'), (8, '9'), (9, '10')], decimal_places=0, max_digits=1)),
],
),
migrations.CreateModel(
name='MusicPlaylist',
fields=[
('id', models.AutoField(primary_key=True, serialize=False)),
('playlist_name', models.CharField(max_length=32)),
('is_public', models.BooleanField(default=False)),
],
),
migrations.CreateModel(
name='Song',
fields=[
......@@ -58,38 +43,6 @@ class Migration(migrations.Migration):
('artist', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='core.Artist')),
],
),
migrations.CreateModel(
name='Tag',
fields=[
('id', models.AutoField(primary_key=True, serialize=False)),
('name', models.CharField(max_length=32)),
('tag', models.ManyToManyField(to='core.MusicEntry')),
],
),
migrations.CreateModel(
name='UserAccount',
fields=[
('id', models.AutoField(primary_key=True, serialize=False)),
('first_name', models.CharField(max_length=64)),
('last_name', models.CharField(max_length=64)),
('email', models.CharField(max_length=64)),
],
),
migrations.AddField(
model_name='musicplaylist',
name='user',
field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='core.UserAccount'),
),
migrations.AddField(
model_name='musicentry',
name='playlist',
field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='core.MusicPlaylist'),
),
migrations.AddField(
model_name='musicentry',
name='song',
field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='core.Song'),
),
migrations.AddField(
model_name='album',
name='artist',
......
files/css/mymusiclist.css
View file @ d74fad45
......@@ -21,6 +21,7 @@ body {
font-size: 15px;
}
.main h2{
color: white;
font-size: 3 0px;
......@@ -126,6 +127,7 @@ a, .link{
color: white;
}
@media (max-width:1280px){
.sidebar{
display:none;
......
files/images/hero1.jpg 0 → 100644
View file @ d74fad45
This diff is collapsed.
files/images/hero2.jpg 0 → 100644
View file @ d74fad45
This diff is collapsed.
templates/album.html
View file @ d74fad45
......@@ -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 = "boxified 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 %}
\ No newline at end of file
{% 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 @ d74fad45
......@@ -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 @ d74fad45
......@@ -6,6 +6,10 @@
<link rel="stylesheet" href="/files/css/mymusiclist.css">
<link rel="stylesheet" href="/files/css/w3.css">
<link rel="stylesheet" href="/files/css/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
......@@ -15,19 +19,33 @@
<div class="w3-bar w3-black w3-large">
<a href="/" id="logo-nav" class="w3-bar-item w3-button w3-blue-gray">MyMusicList</a>
<a href="/" id="logo-nav" class="w3-bar-item w3-button w3-blue-gray"><i class="fa fa-headphones" aria-hidden="true"></i> MyMusicList</a>
{% if request.user.is_authenticated %}
<a class="w3-bar-item w3-button" href="/profile/{{request.user.username}}"><i class="fa fa-user-circle-o" aria-hidden="true"></i> Hi, {{request.user.username}}</a>
<a class="w3-bar-item w3-button" href="{% url 'logout' %}" style="float:right">>Logout</a>
<!-- <a class="w3-bar-item w3-button" href="/profile/{{request.user.username}}" style="float:right" ><i class="fa fa-user-circle-o" aria-hidden="true"></i></a> -->
<!-- <a class="w3-bar-item w3-button" href="{% url 'logout' %}" style="float:right">Logout</a> -->
<div class="w3-dropdown-hover" style="float:right;">
<button id="user_dropdown" class="w3-button" ><i class="fa fa-user-circle-o" aria-hidden="true"></i> {{request.user.username}}</a></button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="/profile/{{request.user.username}}" class=" w3-bar-item w3-button">View Profile</a>
<a href="{% url 'logout' %}" class=" w3-bar-item w3-button">Logout</a>
</div>
</div>
{% else %}
<a href="{% url 'login' %}" class="w3-bar-item w3-button">Login</a>
<a href="{% url 'signup' %}" class="w3-bar-item w3-button">Sign Up</a>
<div style="float:right; ">
<a href="{% url 'login' %}" class="w3-bar-item w3-button">Login</a>
<a href="{% url 'signup' %}" class="w3-bar-item w3-button">Sign Up</a>
</div>
{% endif %}
<form action="{% url 'search' %}" method="get">
<div class="wrap">
<div class="search">
<input type="text" class="w3-bar-item w3-input w3-black" name="search" placeholder="Search..">
<input type="text" class="w3-bar-item w3-input w3-black" name="search" style="width:30vw;" placeholder="Search..">
<input id="searchbytype" type="hidden" name="searchtype" value="album">
<button class="w3-bar-item w3-button w3-green"> <i class="fa fa-search" aria-hidden="true"></i></button>
</div>
......@@ -50,20 +68,26 @@
<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>
<div class="w3-card-4 w3-green sidebar" style="position:fixed">
{% block 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
{% endblock %}
</div>
</header>
......@@ -103,5 +127,6 @@
document.getElementByID("nav_bar").style.background-color = "white";
}
</script>
</body>
</html>
templates/edit_profile.html
View file @ d74fad45
......@@ -2,8 +2,13 @@
{% block title %}Edit Profile{% endblock %}
{% block sidebar %}
{% 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 @ d74fad45
......@@ -2,51 +2,142 @@
{% block title %}MyMusicList{% endblock %}
{% block sidebar %}
{% endblock %}
{% block content %}
<div class="boxified main">
{% if request.user.is_authenticated %}
<div class="w3-panel w3-green w3-padding">
<h1 class="w3-text-white">
<b>Welcome to MyMusicList</b></h1>
</div>
{% else %}
<div class="w3-display-container" style="width:100em; height:50em;overflow:hidden;">
<div class="hero">
<img class="mySlides w3-animate-fade" src="/files/images/hero1.jpg" style="width:100%">
<img class="mySlides w3-animate-fade" src="/files/images/hero2.jpg" style="width:100%">
</div>
<div class="w3-display-middle w3-display-container w3-large">
<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>
<div class="w3-display-bottom">
<a href="{% url 'signup' %}" class="w3-btn w3-white w3-padding-up ">Sign Up Now</a>
</div>
</div>
</div>
<script>
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 5000); // Change image every 2 seconds
}
</script>
<div class="w3-panel w3-display-container w3-white w3-center" style="height:50em">
<div class="w3-margin w3-display-middle">
<h2>What is MyMusicList?</h2>
<p>
<img src="/files/images/logo.jpg" /> </br> </br>
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.
<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 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.
</p>
</div>
</div>
<div class="boxified main">
<h2>Features</h2>
<p>
<div class="img-container">
<img src="/files/images/image2.png" />
<p>
“Playlist Manager”</br>
MyMusicList features a simplistic playlist manager that is created for the user’s convenience but still allows a lot of features without overwhelming the user. With MyMusicList’s playlist manager, one can manage multiple playlists, organize music entries, and so much more.
</p>
</div>
<div class="img-container">
<img src="/files/images/image3.png" />
<p>“Customizable Tags”</br>
MyMusicList features customizable tags that you can attach to any music entry. It makes making playlists more personal and makes organizing music easier.
<div class="">
</p>
</div>
<div class="img-container">
<img src="/files/images/image4.png" />
<p>“S.S. Integration”</br>
Your MyMusicList account can be integrated with your selected social media accounts, so you can share your playlists with your friends and followers. You don’t have to leave the site to listen to your playlist because MyMusicList is integrated with your preferred music streaming service.
</p>
<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">
<p>
“Playlist Manager”</br>
MyMusicList features a simplistic playlist manager that is created for the user’s convenience but still allows a lot of features without overwhelming the user. With MyMusicList’s playlist manager, one can manage multiple playlists, organize music entries, and so much more.
</p>
</div>
</p>
</div>
<div class="boxified main">
<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">
<p>“S.S. Integration”</br>
Your MyMusicList account can be integrated with your selected social media accounts, so you can share your playlists with your friends and followers. You don’t have to leave the site to listen to your playlist because MyMusicList is integrated with your preferred music streaming service.
</p>
</div>
</div>
<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">
<p>“Customizable Tags”</br>
MyMusicList features customizable tags that you can attach to any music entry. It makes making playlists more personal and makes organizing music easier.
</p>
</div>
</div>
</div>
</div>
<div class="w3-panel w3-teal">
<h2>Meet The Team</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus magna eros. Nulla non mauris non mi ornare mattis vel vel diam. Suspendisse malesuada lacus at venenatis sollicitudin. Sed et ultrices ex. Praesent feugiat bibendum nibh. Sed commodo elementum turpis. Morbi faucibus nunc sagittis, rutrum nisl quis, fermentum orci.</br></br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus magna eros. Nulla non mauris non mi ornare mattis vel vel diam. Suspendisse malesuada lacus at venenatis sollicitudin. Sed et ultrices ex. Praesent feugiat bibendum nibh. Sed commodo elementum turpis. Morbi faucibus nunc sagittis, rutrum nisl quis, fermentum orci.</br></br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel tristique risus. Cras molestie pretium urna, a lobortis diam dictum aliquet. Pellentesque non fermentum dolor, sed aliquet dolor. Etiam mauris ex, congue vehicula eleifend vel, hendrerit fermentum velit. In ac tempus justo. Aliquam nec rutrum nibh. Sed pulvinar ex sed ex tincidunt tempor. Praesent tristique semper mauris, vel pretium sapien congue a.</br></br>
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris suscipit nec velit non egestas. Quisque auctor viverra urna, at euismod turpis ornare id. Aliquam pharetra purus quis dui blandit tincidunt. Quisque massa ligula, malesuada vel leo eu, accumsan vulputate nulla. Integer faucibus malesuada pharetra. Duis varius sapien sit amet justo malesuada fringilla. Integer eget ex sed urna auctor vestibulum. Aliquam sit amet molestie velit, a pretium ligula. Mauris gravida turpis vitae scelerisque finibus.
</div>
{% if request.user.is_authenticated %}
{% endif %}
<!--
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer> -->
{% endif %}
{% endblock %}
templates/logged_out.html
View file @ d74fad45
......@@ -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 @ d74fad45
......@@ -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 @ d74fad45
......@@ -2,7 +2,11 @@
{% block title %}{{profile.username}}'s Profile{% endblock %}
{% block sidebar %}
{% endblock %}
{% block content %}
<div class="w3-card-4 w3-green w3-container w3-padding profile">
{% if request.user.is_authenticated %}
<div class="boxified main profile">
<h2>{{profile.username}}'s Profile</h2>
......
templates/search.html
View file @ d74fad45
......@@ -3,53 +3,77 @@
{% 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 %}
{% block content %}
{% for i in results %}
<div class = " main w3-margin w3-card-4">
<div class = " main w3-margin w3-card w3-hover-shadow w3-animate-opacity ">
{% if type == "album" %}
<header class="w3-container w3-green">
<h3><a href="/album/{{i.id}}">{{i.album_name}}</a></h3>
<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-black">
<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>
<!-- ... -->
{% if request.user.is_authenticated %}
<!-- ... -->
<div class="w3-dropdown-hover">
<button id="search_type" class="w3-button" style="width:200px; text-align: left;"><i class="fa fa-caret-down"></i> </button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<button class=" w3-bar-item w3-button">Update existing playlist</button>
<button onclick="alert('{{type}} id is {{i.id}}')">Show {{type}}</button>
<button class=" w3-bar-item w3-button">Create new playlist</button>
</div>
</div>
<!-- ... -->
{% endif %}
<!-- ... -->
{% endif %}
{% if type == "artist" %}
<header class="w3-container w3-blue">
<h3><a href="/artist/{{i.id}}">{{i.name}}</a></h3>
<header class="w3-row w3-green">
<div class="w3-col w3-container w3-green" style="width:95%">
<h3 ><a href="/artist/{{i.id}}" style="text-decoration:none">{{i.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">
<div class="w3-container w3-opacity w3-black">
{% for j in albums %}
<p> <tab>
{% if j.artist.name == i.name %}
......@@ -57,32 +81,33 @@
{% endif %} </p>
{% endfor %}
</div>
<!-- ... -->
{% if request.user.is_authenticated %}
<!-- ... -->
<div class="w3-dropdown-hover">
<button id="search_type" class="w3-button" style="width:200px; text-align: left;"><i class="fa fa-caret-down"></i> </button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<button class=" w3-bar-item w3-button">Update existing playlist</button>
<button onclick="alert('{{type}} id is {{i.id}}')">Show {{type}}</button>
<button class=" w3-bar-item w3-button">Create new playlist</button>
</div>
</div>
<!-- ... -->
{% endif %}
<!-- ... -->
{% endif %}
{% if type == "song" %}
<header class="w3-container w3-green">
<h3>{{i.song_name}}</h3>
<header class="w3-row w3-green">
<div class="w3-col w3-container w3-green" style="width:95%">
<h3>{{i.song_name}}</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-indigo">
<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">
<div class="w3-container w3-opacity w3-black">
<h3><a href="/album/{{i.album.id}}">{{i.album.album_name}}</a></h3>
<p>Artist: <a href="/artist/{{i.artist.id}}">{{i.artist.name}}</a><br>
Year: {{i.album.year}} </p>
......
templates/signup.html
View file @ d74fad45
{% 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