Skip to content

M
mymusiclist
Commit a0c03b00 authored by Gink's avatar Gink
Browse files
Options

Design changes fix for issue#1 

- Added mockup of sidebar with songs
- Refactoring css code for more readability
- Minor design changes
parent 5e367cfd
Hide whitespace changes
Inline Side-by-side
Showing with 88 additions and 56 deletions
core/views.py
View file @ a0c03b00
......@@ -16,8 +16,8 @@ def signup(request):
form.save()
username = form.cleaned_data.get('username')
raw_password = form.cleaned_data.get('password1')
user = authenticate(username=username, password=raw_password)
login(request, user)
#user = authenticate(username=username, password=raw_password)
#login(request, user)
return redirect('/')
else:
form = SignUpForm()
......
files/css/mymusiclist.css
View file @ a0c03b00
.signup_form{
/* In css, bottom overrides top, therefore always place generic styles such as 'buttoned' on top
and specific styles such as 'sidebar' in the bottom.*/
/* Body background and default stuff*/
}
#login_submit{
background-color: black;
body {
color: white;
margin-left: 6vw;
font-family: helvetica;
margin: 15px;
margin-top: 70px;
background: url(/files/images/background.jpg) no-repeat center fixed;
background-size: cover;
}
.centered {
margin: 0 auto;
margin-bottom: 30px;
/* Main style is anything on the right side of the website.*/
.main {
float:right;
margin-bottom: 2vh;
text-align: left;
width: 65vw;
padding: 50px;
width: 74vw;
font-size: 15px;
background-color: rgba(0,0,0,0.6);
border-radius: 10px;
}
.centered h2{
.main h2{
color: white;
font-size: 3 0px;
text-align: center;
}
#first_name_id{
font-size: 100px;
}
/* Generic style for clickable shit*/
@font-face {
font-family: 'PalanquinDark';
src: url('../fonts/PalanquinDark-Regular.ttf');
.buttoned{
font-family: PalanquinDark;
background-color: rgba(0,0,0,0);
color: white;
}
/* Generic style for wrapping stuff in a box*/
.boxified{
background-color: rgba(0,0,0,0.6);
border-radius: 10px;
padding: 3vw;
}
/* Nav bar */
#nav_bar{
position:fixed;
width : 100vw;
......@@ -48,6 +54,7 @@ src: url('../fonts/PalanquinDark-Regular.ttf');
margin-top: -70px;
padding: 0px;
height : 58px;
z-index: :0;
}
#nav_bar li, #nav_bar li a {
......@@ -78,16 +85,44 @@ src: url('../fonts/PalanquinDark-Regular.ttf');
text-decoration: none;
}
.nav_bar_tab:hover{
.nav_bar_tab:hover, .nav_bar_tab:active{
background-color: blue;
}
/* Sidebar */
.sidebar{
float:left;
margin-left: 0;
width: 14vw;
text-align: center;
padding: 1vw;
}
body {
color: white;
font-family: helvetica;
margin: 15px;
margin-top: 70px;
background: url(/files/images/background.jpg) no-repeat center fixed;
background-size: cover;
.sidebar img{
width: 13vw;
height: 13vw;
margin-top: 2vh;
}
@media (max-width:1280px){
.sidebar{
display:none;
}
.main{
width:100vw;
}
}
#first_name_id{
font-size: 100px;
}
@font-face {
font-family: 'PalanquinDark';
src: url('../fonts/PalanquinDark-Regular.ttf');
}
mymusiclist/__pycache__/desktop.ini deleted 100644 → 0
View file @ 5e367cfd
[.ShellClassInfo]
InfoTip=This folder is shared online.
IconFile=C:\Program Files\Google\Drive\googledrivesync.exe
IconIndex=12
\ No newline at end of file
templates/base.html
View file @ a0c03b00
......@@ -22,6 +22,15 @@
{% endif %}
</header>
<main>
<div class="boxified 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>
{% block content %}
{% endblock %}
</main>
......
templates/home.html
View file @ a0c03b00
......@@ -3,10 +3,7 @@
{% block title %}MyMusicList{% endblock %}
{% block content %}
<div >
<div id="about" class="centered">
<div class="boxified main">
<h2>What is MyMusicList?</h2>
<p>
MyMusicList is the solution to all your music catalog needs. 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>
......@@ -16,7 +13,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel tristique ris
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.
</p>
</div>
<div id="features" class="centered">
<div class="boxified main">
<h2>Features</h2>
<p>
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>
......@@ -26,7 +23,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel tristique ris
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.
</p>
</div>
<div id="team" class="centered">
<div class="boxified main">
<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>
......@@ -36,8 +33,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel tristique ris
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>
</div>
{% if user.is_authenticated %}
{% endif %}
{% endblock %}
templates/logged_out.html
View file @ a0c03b00
......@@ -3,7 +3,7 @@
{% block title %}See you!{% endblock %}
{% block content %}
<div class="logged_out centered">
<div class="boxified main logged_out">
<h2>Logged out</h2>
<p>
......
templates/login.html
View file @ a0c03b00
......@@ -4,15 +4,15 @@
{% block content %}
<div class="login_form centered">
<div class="boxified main login_form">
<h2 id='login_login'>Login</h2>
<h2>Login</h2>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" id='login_submit'>Login</button>
<button type="submit" class="buttoned">Login</button>
</form>
</div>
{% endblock %}
templates/profile.html
View file @ a0c03b00
......@@ -3,7 +3,7 @@
{% block title %}{{profile.username}}'s Profile{% endblock %}
{% block content %}
<div class="centered profile">
<div class="boxified main profile">
<h2>{{profile.username}}'s Profile</h2>
<ul>
......@@ -11,10 +11,8 @@
<li><strong>Last Name:</strong> {{profile.last_name}}</li>
<li><strong>Email Address:</strong> {{profile.email}}</li>
</ul>
</div>
{% if profile.username == user.username and user.is_authenticated %}
<a href="#">Edit user profile</a>
<a href="#" class="buttoned">Edit user profile</a>
</div>
{% endif %}
{% endblock %}
templates/signup.html
View file @ a0c03b00
......@@ -2,7 +2,7 @@
{% block content %}
<div class='signup_form centered'>
<div class='boxified main signup_form'>
<h2>Create your account</h2>
<p>
Sign up now to start building your music collection with us. <br/> Already have an account? Login
......@@ -10,7 +10,7 @@
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Sign up</button>
<button type="submit" class="buttoned">Sign up</button>
</form>
</div>
{% endblock %}
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