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{ ...@@ -127,6 +127,7 @@ a, .link{
color: white; color: white;
} }
@media (max-width:1280px){ @media (max-width:1280px){
.sidebar{ .sidebar{
display:none; display:none;
......
templates/album.html
View file @ b6e6051e
...@@ -4,18 +4,33 @@ ...@@ -4,18 +4,33 @@
{% block sidebar %} {% block sidebar %}
<img src = "{{result.art}}" alt= "No album art available"> <div class="w3-card-4 w3-black w3-opacity sidebar w3-round">
<p>
<b> {{result.album_name}} </b> ({{result.year}}) <br> <img src = "{{result.art}}" class="w3-round" alt= "No album art available">
{{artist}} <br> <br> <p>
Tags: {{songs.1.genre}} <b> {{result.album_name}} </b> ({{result.year}}) <br>
{{artist}} <br> <br>
Tags: {{songs.1.genre}}
</p>
</div>
{% endblock %} {% endblock %}
{% block content %} {% 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 %} {% 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 %} {% endfor %}
</div> </div>
{% endblock %} {% 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 @@ ...@@ -4,6 +4,7 @@
{% block sidebar %} {% block sidebar %}
<div class="w3-card-4 w3-black w3-opacity sidebar w3-round">
<h2> Artist info </h2> <h2> Artist info </h2>
<p> <p>
Artist: {{result.name}} <br> Artist: {{result.name}} <br>
...@@ -11,13 +12,40 @@ ...@@ -11,13 +12,40 @@
<br> <br>
<h2> Description </h2> <h2> Description </h2>
{{result.description}} {{result.description}}
</div>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
{% for i in albums %} {% 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> </div>
{% endfor %} {% endfor %}
{% endblock %} {% endblock %}
templates/base.html
View file @ b6e6051e
...@@ -8,6 +8,8 @@ ...@@ -8,6 +8,8 @@
<link rel="stylesheet" href="/files/css/font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="/files/css/font-awesome-4.7.0/css/font-awesome.min.css">
</head> </head>
<body> <body>
<header> <header>
...@@ -66,21 +68,25 @@ ...@@ -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> </header>
...@@ -90,6 +96,9 @@ ...@@ -90,6 +96,9 @@
<script> <script>
function mainA(){ function mainA(){
document.getElementById("search_type").innerHTML = "Album Search"; document.getElementById("search_type").innerHTML = "Album Search";
...@@ -119,5 +128,6 @@ ...@@ -119,5 +128,6 @@
document.getElementByID("nav_bar").style.background-color = "white"; document.getElementByID("nav_bar").style.background-color = "white";
} }
</script> </script>
</body> </body>
</html> </html>
templates/edit_profile.html
View file @ b6e6051e
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
{% block title %}Edit Profile{% endblock %} {% block title %}Edit Profile{% endblock %}
{% block content %} {% block content %}
<div class="boxified main profile"> <div class="w3-card-4 w3-green w3-padding">
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
{% if user.username == request.user.username %} {% if user.username == request.user.username %}
<h2>Edit Profile</h2> <h2>Edit Profile</h2>
......
templates/home.html
View file @ b6e6051e
...@@ -18,6 +18,8 @@ ...@@ -18,6 +18,8 @@
{% else %} {% else %}
<div class="w3-display-container" style="width:100em; height:50em;overflow:hidden;"> <div class="w3-display-container" style="width:100em; height:50em;overflow:hidden;">
<div class="hero"> <div class="hero">
...@@ -27,7 +29,7 @@ ...@@ -27,7 +29,7 @@
<div class="w3-display-middle w3-display-container w3-large"> <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"> <h1 class="w3-text-white">
<b>Easily keep track of all your favorite artists in one convenient place</b></h1> <b>Easily keep track of all your favorite artists in one convenient place</b></h1>
</div> </div>
...@@ -62,12 +64,12 @@ function carousel() { ...@@ -62,12 +64,12 @@ function carousel() {
<h2>What is MyMusicList?</h2> <h2>What is MyMusicList?</h2>
<div class="w3-display-container" style="height:10em;"> <div class="w3-display-container" style="height:30em;">
<img src="/files/images/logo.jpg"class="w3-display-middle"style="height:10em"/> <img src="/files/images/logo.jpg"class="w3-round w3-card w3-display-middle w3-image"/>
</div> </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 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? feeling lifeless and a hassle? Do you want to show off your hip-and-cool music with your friends?
MyMusicList is the answer. MyMusicList is the answer.
...@@ -77,8 +79,10 @@ MyMusicList is the answer. ...@@ -77,8 +79,10 @@ MyMusicList is the answer.
<div class=""> <div class="">
<div class="w3-row-padding w3-blue"> <div class="w3-row w3-center w3-blue">
<div class="w3-card-2 w3-col-s4 " style="width:30%">
<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%"> <img src="/files/images/image2.png" alt="playlist" style="width:100%">
<div class="w3-container w3-center"> <div class="w3-container w3-center">
...@@ -90,7 +94,7 @@ MyMusicList is the answer. ...@@ -90,7 +94,7 @@ MyMusicList is the answer.
</div> </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%"> <img src="/files/images/image4.png" alt="playlist" style="width:100%">
<div class="w3-container w3-center"> <div class="w3-container w3-center">
...@@ -101,7 +105,7 @@ MyMusicList is the answer. ...@@ -101,7 +105,7 @@ MyMusicList is the answer.
</div> </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%"> <img src="/files/images/image3.png" alt="playlist" style="width:100%">
<div class="w3-container w3-center"> <div class="w3-container w3-center">
......
templates/logged_out.html
View file @ b6e6051e
...@@ -2,8 +2,11 @@ ...@@ -2,8 +2,11 @@
{% block title %}See you!{% endblock %} {% block title %}See you!{% endblock %}
{% block sidebar %}
{% endblock %}
{% block content %} {% block content %}
<div class="boxified main logged_out"> <div class="w3-card-4 w3-green w3-center w3-padding">
<h2>Logged out</h2> <h2>Logged out</h2>
<p> <p>
......
templates/login.html
View file @ b6e6051e
...@@ -2,9 +2,12 @@ ...@@ -2,9 +2,12 @@
{% block title %}Login{% endblock %} {% block title %}Login{% endblock %}
{% block sidebar %}
{% endblock %}
{% block content %} {% block content %}
<div class="boxified main login_form"> <div class=" w3-card-4 w3-green w3-center w3-padding">
{% if request.user.is_authenticated %} {% 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>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> <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 @@ ...@@ -2,8 +2,11 @@
{% block title %}{{profile.username}}'s Profile{% endblock %} {% block title %}{{profile.username}}'s Profile{% endblock %}
{% block sidebar %}
{% endblock %}
{% block content %} {% block content %}
<div class="boxified main profile"> <div class="w3-card-4 w3-green w3-container w3-padding profile">
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
<h2>{{profile.username}}'s Profile</h2> <h2>{{profile.username}}'s Profile</h2>
<ul> <ul>
......
templates/search.html
View file @ b6e6051e
...@@ -3,13 +3,16 @@ ...@@ -3,13 +3,16 @@
{% block title %}Song search test{% endblock %} {% block title %}Song search test{% endblock %}
{% block sidebar %} {% block sidebar %}
<div class="w3-card-4 w3-black w3-opacity sidebar w3-round">
<h2> Search results (by {{type}})</h2> <h2> Search results (by {{type}})</h2>
<p> <p>
You searched for '{{term}}' <br> You searched for '{{term}}' <br>
Found {{results.count}} results <br> Found {{results.count}} results <br>
Source: Local</p> Source: Local</p>
</div>
{% endblock %} {% endblock %}
...@@ -38,10 +41,12 @@ ...@@ -38,10 +41,12 @@
{% endif %} {% endif %}
</header> </header>
<div class="w3-container w3-opacity w3-black"> <div class="w3-container w3-opacity w3-black">
<p>Artist: <a href="/artist/{{i.artist.id}}">{{i.artist.name}}</a><br> <p>Artist: <a href="/artist/{{i.artist.id}}">{{i.artist.name}}</a><br>
Year: {{i.year}} </p> Year: {{i.year}} </p>
</div> </div>
{% endif %} {% endif %}
......
templates/signup.html
View file @ b6e6051e
{% extends 'base.html' %} {% extends 'base.html' %}
{% block sidebar %}
{% endblock %}
{% block content %} {% block content %}
<div class='boxified main signup_form'> <div class='w3-card-4 w3-green w3-padding'>
{% if user.is_authenticated %} {% if user.is_authenticated %}
<p>You are already logged in as {{user.username}}.</p> <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> <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