Merge remote-tracking branch 'origin/february_release' into february_release

app/client/app.css

@@ -1068,3 +1068,13 @@ input[type="checkbox"]:checked + #two-label:after {
 .scroll-fix{
     margin-right: 20px;
 }
+
+.profile-card{
+    min-width: 300px;
+    max-height: 500px;
+}
+
+.profile-card-song{
+    overflow-y: scroll;
+}
+

app/client/scripts/events.js

@@ -244,8 +244,8 @@ Template.login.events({
     "submit form": function(e){
         e.preventDefault();
         Session.set("github", false);
-        var username = e.target.loginUsername.value;
-        var password = e.target.loginPassword.value;
+        var username = $("#username").val()
+        var password = $("#password").val();
         Meteor.loginWithPassword(username, password, function(err) {
             if (err) {
                 var errAlert = $('<div style="margin-bottom: 0" class="alert alert-danger" role="alert"><strong>Oh Snap!</strong> ' + err.reason + '</div>');

app/client/templates/footer.html

@@ -2,10 +2,10 @@
     <footer class="page-footer teal accent-4">
         <div class="container row">
             <div class="col l6 s12">
-                <h5 class="white-text">Footer Content</h5>
-
-                <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer
-                    content.</p>
+                <h5 class="white-text">Stay Connected</h5>
+                <p class="grey-text text-lighten-4">Keep up with news and updates about Musare on social media!</p>
+                <a href="https://www.facebook.com/MusareMusic" target="_blank" class="waves-effect waves-light btn blue darken-3">Facebook</a>
+                <a href="https://twitter.com/musareapp" target="_blank" class="waves-effect waves-light btn light-blue accent-2">Twitter</a>
             </div>
             <div class="col l4 offset-l2 s12">
                 <h5 class="white-text">Links</h5>
@@ -18,7 +18,7 @@
         </div>
         <div class="footer-copyright">
             <div class="container">
-               Musare | © 2015 Copyright
+               Copyright &copy; 2016 Musare
             </div>
         </div>
     </footer>

app/client/templates/header.html

@@ -1,71 +1,101 @@
 <template name="header">
-  <header>
-    <!-- Dropdown Structure -->
-    <ul id="contributeDrop" class="dropdown-content">
-      <li><a href="https://www.github.com/Musare/Musare" target="_blank">Github</a></li>
-      <li><a href="donate.html">Donate</a></li>
-    </ul>
-    <ul id="aboutDrop" class="dropdown-content">
-      <li><a href="/project">The Project</a></li>
-      <li><a href="/team">The Team</a></li>
-      <li><a href="/contact">Contact Us</a></li>
-    </ul>
-    <ul id="accountDrop" class="dropdown-content">
-      {{#if currentUser}}
-        <li><a href="#!">Profile</a></li>
-        <li><a href="#!">Settings</a></li>
-        <li class="divider"></li>
-        <li><a href="#!">Logout</a></li>
-        {{else}}
-        <li><a href="/login">Login</a></li>
-        <li><a href="/register">Register</a></li>
-        {{/if}}
-      </ul>
-      <nav>
-        <div class="nav-wrapper teal accent-4">
-          <a href="/" class="brand-logo">Musare</a>
-          <a href="#" data-activates="mobile-navi" class="button-collapse"><i class="material-icons">menu</i></a>
-          <ul class="right hide-on-med-and-down scroll-fix">
-            <li><a href="feedback.html">Feedback</a></li>
-            <li><a class="dropdown-button" href="#!" data-activates="contributeDrop">Contribute<i class="material-icons right">arrow_drop_down</i></a></li>
-            <li><a class="dropdown-button" href="#!" data-activates="aboutDrop">About<i class="material-icons right">arrow_drop_down</i></a></li>
-            <li><a class="dropdown-button" href="#!" data-activates="accountDrop">Account<i class="material-icons right">arrow_drop_down</i></a></li>
-          </ul>
-          <ul class="side-nav" id="mobile-navi" style="width: 240px;">
-            <li><a href="#">Feedback</a></li>
-            <ul class="collapsible" data-collapsible="accordion">
-              <li>
-                <div class="collapsible-header black-text"><i class="material-icons">filter_drama</i>First</div>
-                <div class="collapsible-body black-text"><p>Lorem ipsum dolor sit amet.</p></div>
-              </li>
-              <li>
-                <div class="collapsible-header black-text"><i class="material-icons">place</i>Second</div>
-                <div class="collapsible-body black-text"><p>Lorem ipsum dolor sit amet.</p></div>
-              </li>
-              <li>
-                <div class="collapsible-header black-text"><i class="material-icons">whatshot</i>Third</div>
-                <div class="collapsible-body black-text"><p>Lorem ipsum dolor sit amet.</p></div>
-              </li>
-            </ul>
-            <!--<li><a class="mobile-dropdown" href="#!" data-activates="contributeDrop">Contribute<i class="material-icons right">arrow_drop_down</i></a></li>
-            <li><a class="mobile-dropdown" href="#!" data-activates="aboutDrop">About<i class="material-icons right">arrow_drop_down</i></a></li>
-            <li><a class="mobile-dropdown" href="#!" data-activates="accountDrop">Account<i class="material-icons right">arrow_drop_down</i></a></li>
-          --></ul>
-        </div>
-      </nav>
-      <script>
-      $(function() {
-        $(".dropdown-button").dropdown({
-          inDuration: 300,
-          outDuration: 225,
-          hover: true,
-          belowOrigin: true
-        });
-        $(".button-collapse").sideNav();
-        $('.collapsible').collapsible({
-          accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
-        });
-      });
-      </script>
-  </header>
+    <header>
+        <!-- Dropdown Structure -->
+        <ul id="contributeDrop" class="dropdown-content">
+            <li><a href="https://www.github.com/Musare/Musare" target="_blank">Github</a></li>
+            <li><a href="donate.html">Donate</a></li>
+        </ul>
+        <ul id="aboutDrop" class="dropdown-content">
+            <li><a href="/project">The Project</a></li>
+            <li><a href="/team">The Team</a></li>
+            <li><a href="/contact">Contact Us</a></li>
+        </ul>
+        <ul id="accountDrop" class="dropdown-content">
+            {{#if currentUser}}
+                <li><a href="/u/{{currentUser.username}}">Profile</a></li>
+                <li><a href="/settings">Settings</a></li>
+                <li class="divider"></li>
+                <li class="logout"><a>Logout</a></li>
+            {{else}}
+                <li><a href="/login">Login</a></li>
+                <li><a href="/register">Register</a></li>
+            {{/if}}
+        </ul>
+        <nav>
+            <div class="nav-wrapper teal accent-4">
+                <a href="/" class="brand-logo">Musare</a>
+                <a href="#" data-activates="mobile-navi" class="button-collapse"><i class="material-icons">menu</i></a>
+                <ul class="right hide-on-med-and-down scroll-fix">
+                    <li><a href="feedback.html">Feedback</a></li>
+                    <li><a class="dropdown-button" href="#!" data-activates="contributeDrop">Contribute<i
+                            class="material-icons right">arrow_drop_down</i></a></li>
+                    <li><a class="dropdown-button" href="#!" data-activates="aboutDrop">About<i
+                            class="material-icons right">arrow_drop_down</i></a></li>
+                    <li><a class="dropdown-button" href="#!" data-activates="accountDrop">
+                        {{#if currentUser}}
+                            {{currentUser.username}}
+                        {{else}}
+                            Account
+                        {{/if}}
+                        <i class="material-icons right">arrow_drop_down</i></a></li>
+                </ul>
+                <ul class="side-nav" id="mobile-navi" style="width: 240px;">
+                    <ul class="collapsible" data-collapsible="accordion">
+                        <li>
+                            <a href="/feedback">Feedback</a>
+                        </li>
+                        <li>
+                            <div class="collapsible-header black-text"><i class="material-icons">arrow_drop_down</i>
+                                Contribute
+                            </div>
+                            <div class="collapsible-body black-text">
+                                <a href="https://www.github.com/Musare/Musare" target="_blank">Github</a>
+                                <a href="donate.html">Donate</a>
+                            </div>
+                        </li>
+                        <li>
+                            <div class="collapsible-header black-text"><i class="material-icons">arrow_drop_down</i>
+                                About
+                            </div>
+                            <div class="collapsible-body black-text">
+                                <a href="/project">The Project</a>
+                                <a href="/team">The Team</a>
+                                <a href="/contact">Contact Us</a>
+                            </div>
+                        </li>
+                        <li>
+                            <div class="collapsible-header black-text"><i class="material-icons">arrow_drop_down</i>
+                                {{#if currentUser}}
+                                    {{currentUser.username}}
+                                {{else}}
+                                    Account
+                                {{/if}}
+                            </div>
+                            <div class="collapsible-body black-text">
+                                <a href="/login">Login</a>
+                                <a href="/register">Register</a>
+                            </div>
+                        </li>
+                    </ul>
+                    <!--<li><a class="mobile-dropdown" href="#!" data-activates="contributeDrop">Contribute<i class="material-icons right">arrow_drop_down</i></a></li>
+                    <li><a class="mobile-dropdown" href="#!" data-activates="aboutDrop">About<i class="material-icons right">arrow_drop_down</i></a></li>
+                    <li><a class="mobile-dropdown" href="#!" data-activates="accountDrop">Account<i class="material-icons right">arrow_drop_down</i></a></li>
+                  --></ul>
+            </div>
+        </nav>
+        <script>
+            $(function () {
+                $(".dropdown-button").dropdown({
+                    inDuration: 300,
+                    outDuration: 225,
+                    hover: true,
+                    belowOrigin: true
+                });
+                $(".button-collapse").sideNav();
+                $('.collapsible').collapsible({
+                    accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
+                });
+            });
+        </script>
+    </header>
 </template>

app/client/templates/login.html

@@ -1,26 +1,26 @@
 <template name="login">
-  {{> header}}
-  <main>
-    <div class="container row">
-      <form class="col s12 offset-s3">
-        <h1>Login</h1>
-        <div class="row">
-          <div class="input-field col s6">
-            <input id="username" type="text" class="validate">
-            <label for="first_name">Username</label>
-          </div>
+    {{> header}}
+    <main>
+        <div class="container row">
+            <form class="col s12">
+                <h1>Login</h1>
+                <div class="row">
+                    <div class="input-field col s6">
+                        <input id="username" type="text" class="validate">
+                        <label for="first_name">Username</label>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="input-field col s6">
+                        <input id="password" type="password" class="validate">
+                        <label for="password">Password</label>
+                    </div>
+                </div>
+                <button class="btn waves-effect waves-light" type="submit" name="action">Submit
+                    <i class="material-icons right">send</i>
+                </button>
+            </form>
         </div>
-        <div class="row">
-          <div class="input-field col s6">
-            <input id="password" type="password" class="validate">
-            <label for="password">Password</label>
-          </div>
-        </div>
-        <button class="btn waves-effect waves-light" type="submit" name="action">Submit
-          <i class="material-icons right">send</i>
-        </button>
-      </form>
-    </div>
-  </main>
-  {{> footer}}
+    </main>
+    {{> footer}}
 </template>

app/client/templates/profile.html

@@ -1,88 +1,55 @@
 <template name="profile">
     {{> alerts}}
-    <div class="landing">
-      {{> header}}
-      <div class="row">
-        {{#if loaded}}
-            {{> avatar userId=profileUserId shape="circle" class="profile-img" initials=initials}}
-            <h1 id="profile-name">{{username}}</h1>
-
-            <div class="col-md-4">
-                <div class="panel panel-primary">
-                    <div class="panel-heading">Basic Info</div>
-                    <div class="panel-body">
-                        <ul>
-                            {{#if isUser}}
-                                <a href="#" id="cancel-edit" class="profile-action" style="display:none;">Cancel</a>
-                            {{/if}}
-                            <li class="user-stat" id="name">Name: {{real_name}} <i class="fa fa-pencil" id="edit-name" style="font-size: 14px; cursor: pointer;"></i></li>
-                            <div id="name-div" style="display: none">
-                                <input type="text" id="input-name"><button id="submit-name" class="btn btn-primary btn-sm">Submit</button>
-                            </div>
-                            {{#if isUser}}
-                                <a href="#" id="cancel-username" class="profile-action" style="display:none;">Cancel</a>
-                            {{/if}}
-                            <li class="user-stat" id="username">Username: {{username}} <i class="fa fa-pencil" id="edit-username" style="font-size: 14px; cursor: pointer;"></i></li>
-                            <div id="username-div" style="display: none">
-                                <input type="text" id="input-username"><button id="submit-username" class="btn btn-primary btn-sm">Submit</button>
-                            </div>
-                            <li class="user-stat">Joined: {{first_joined}}</li>
-                            {{#if isAdmin}}
-                              <a href="#" id="cancel-rank" class="profile-action" style="display:none;">Cancel</a>
-                              <li class="user-stat" id="rank">Rank: {{rank}} <i class="fa fa-pencil" id="edit-rank" style="font-size: 14px; cursor: pointer;"></i></li>
-                              <div class="user-stat" id="rank-div" style="display: none">
-                                Rank:
-                                <select id="select-rank">
-                                  <option value="default">Default</option>
-                                  <option value="moderator">Moderator</option>
-                                  <option value="admin">Admin</option>
-                                </select>
-                                <button id="submit-rank" class="btn btn-primary btn-sm">Submit</button>
-                              </div>
-                            {{else}}
-                              {{#if isUser}}
-                                <li class="user-stat">Rank: {{rank}}</li>
-                                {{/if}}
-                            {{/if}}
-                        </ul>
+    {{> header}}
+    {{#if loaded}}
+        <!--{{> avatar userId=profileUserId shape="circle" class="profile-img" initials=initials}}-->
+        <h1 id="profile-name" class="black-text thin">{{username}}</h1>
+        <div class="row">
+            <div class="col s12 m6 l4">
+                <div class="card blue-grey darken-1 profile-card">
+                    <div class="card-content white-text">
+                        <span class="card-title">User Info</span>
+                        <p>Name: {{real_name}}</p>
+                        <p>Username: {{username}}</p>
+                        <p>First Joined: {{first_joined}}</p>
+                        <p>Rank: {{rank}}</p>
                     </div>
                 </div>
             </div>
-            <div class="col-md-4">
-                <div class="panel panel-success">
-                    <div class="panel-heading">Liked Songs</div>
-                    <div class="panel-body song-panel">
-                        <ul>
-                            {{#each likedSongs}}
-                                <li>
-                                    <p class="song-panel-room">{{room}}</p>
-                                    <h4>{{title}}</h4>
-                                    <h5>{{artist}}</h5>
-                                </li>
-                            {{/each}}
-                        </ul>
+            <div class="col s12 m6 l4">
+                <div class="card teal accent-3 profile-card">
+                    <div class="card-content white-text">
+                        <span class="card-title">Liked Songs</span>
+                        {{#each likedSongs}}
+                            <div class="profile-card-song">
+                                <div class="section">
+                                    <h5>Title</h5>
+                                    <p>Artist</p>
+                                </div>
+                                <div class="divider"></div>
+                            </div>
+                        {{/each}}
                     </div>
                 </div>
             </div>
-            <div class="col-md-4">
-                <div class="panel panel-danger">
-                    <div class="panel-heading">Disliked Songs</div>
-                    <div class="panel-body song-panel">
-                        <ul>
-                            {{#each dislikedSongs}}
-                                <li>
-                                    <p class="song-panel-room">{{room}}</p>
-                                    <h4>{{title}}</h4>
-                                    <h5>{{artist}}</h5>
-                                </li>
-                            {{/each}}
-                        </ul>
+            <div class="col s12 m6 l4">
+                <div class="card red darken-2 profile-card">
+                    <div class="card-content white-text">
+                        <span class="card-title">Disliked Songs</span>
+                        {{#each dislikedSongs}}
+                            <div class="profile-card-song">
+                                <div class="section">
+                                    <h5>Title</h5>
+                                    <p>Artist</p>
+                                </div>
+                                <div class="divider"></div>
+                            </div>
+                        {{/each}}
                     </div>
                 </div>
             </div>
-        {{else}}
-            {{> loading}}
-        {{/if}}
-      </div>
-    </div>
+        </div>
+    {{else}}
+        {{> loading}}
+    {{/if}}
 </template>

app/client/templates/settings.html

@@ -1,30 +1,28 @@
 <template name="settings">
-    <div id="head"></div>
     {{> header}}
     <div class="row">
-        <h1 id="profile-name">{{username}}</h1>
-        <div class="col-md-4 col-md-offset-4">
-            <div class="panel panel-primary">
-                <div class="panel-heading">General Settings</div>
-                <div class="panel-body">
-                    <!--h3 class="text text-warning text-center">Unfortunately, there is currently nothing for you to edit.</h3-->
-                    <p class="settings-option">Liked & disliked songs</p>
-                    <div class="checkbox">
-                        <input class="checkbox-box" type="checkbox" id="showRating">
-                        <label for="showRating" class="settings-label">
-                            Show your likes/dislikes on your public profile
-                        </label>
-                    </div>
-                    <button class="btn btn-success btn-block" id="save-settings">Save</button>
-                    <p class="settings-option">Change Password</p>
-                    <input type="password" id="old-password" class="form-control settings-input" placeholder="Old password">
-                    <input type="password" id="new-password" class="form-control settings-input" placeholder="New password">
-                    <input type="password" id="confirm-password" class="form-control settings-input" placeholder="Re-enter new password">
-                    <button class="btn btn-warning btn-block" id="change-password">Change Password</button>
-                    <p class="settings-option">Delete Account</p>
-                    <button class="btn btn-danger btn-block" id="delete-account">Delete</button>
-                </div>
-            </div>
+        <h1 id="profile-name" class="black-text thin">Settings</h1>
+        <h4 class="thin">Liked & disliked songs</h4>
+        <p>
+            <input type="checkbox" id="showRating"/>
+            <label for="showRating">Show liked and disliked song on profile?</label>
+        </p>
+        <button class="btn" id="save-settings">Save</button>
+        <h4 class="thin">Change Password</h4>
+        <div class="input-field">
+            <input type="password" id="old-password" class="validate">
+            <label for="old-password">Old Password</label>
         </div>
+        <div class="input-field">
+            <input type="password" id="new-password" class="validate">
+            <label for="new-password">New Password</label>
+        </div>
+        <div class="input-field">
+            <input type="password" id="confirm-password" class="validate">
+            <label for="confirm-password">Re-enter New Password</label>
+        </div>
+        <button class="btn" id="change-password">Change Password</button>
+        <h4 class="thin">Delete Account</h4>
+        <button class="btn red darken-4" id="delete-account">Delete</button>
     </div>
 </template>