Working on new layout for Musare using Google's Material design with Materialize CSS.

app/.meteor/packages

@@ -18,7 +18,6 @@ ecmascript              # Enable ECMAScript2015+ syntax in app code
 accounts-password
 accounts-github
 service-configuration
-twbs:bootstrap
 jquery
 iron:router
 ejson
@@ -31,3 +30,4 @@ momentjs:moment
 emojione:emojione
 utilities:avatar
 matb33:collection-hooks
+materialize:materialize

app/.meteor/versions

@@ -57,6 +57,7 @@ livedata@1.0.15
 localstorage@1.0.5
 logging@1.0.8
 matb33:collection-hooks@0.8.1
+materialize:materialize@0.97.5
 meteor@1.1.10
 meteor-base@1.0.1
 meteorhacks:async@1.0.0
@@ -92,7 +93,6 @@ standard-minifiers@1.0.2
 templating@1.1.5
 templating-tools@1.0.0
 tracker@1.0.9
-twbs:bootstrap@3.3.5
 ui@1.0.8
 underscore@1.0.4
 url@1.0.5

app/client/app.css

@@ -1,165 +1,5 @@
 @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
 
-/*!
- * Slider for Bootstrap
- *
- * Copyright 2012 Stefan Petre
- * Licensed under the Apache License v2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- */
-.slider {
-    display: inline-block;
-    vertical-align: middle;
-    position: relative;
-}
-
-.slider.slider-horizontal {
-    width: 210px;
-    height: 20px;
-}
-
-.slider.slider-horizontal .slider-track {
-    height: 10px;
-    width: 100%;
-    margin-top: -5px;
-    top: 50%;
-    left: 0;
-}
-
-.slider.slider-horizontal .slider-selection {
-    height: 100%;
-    top: 0;
-    bottom: 0;
-}
-
-.slider.slider-horizontal .slider-handle {
-    margin-left: -10px;
-    margin-top: -5px;
-}
-
-.slider.slider-horizontal .slider-handle.triangle {
-    border-width: 0 10px 10px 10px;
-    width: 0;
-    height: 0;
-    border-bottom-color: #0480be;
-    margin-top: 0;
-}
-
-.slider.slider-vertical {
-    height: 210px;
-    width: 20px;
-}
-
-.slider.slider-vertical .slider-track {
-    width: 10px;
-    height: 100%;
-    margin-left: -5px;
-    left: 50%;
-    top: 0;
-}
-
-.slider.slider-vertical .slider-selection {
-    width: 100%;
-    left: 0;
-    top: 0;
-    bottom: 0;
-}
-
-.slider.slider-vertical .slider-handle {
-    margin-left: -5px;
-    margin-top: -10px;
-}
-
-.slider.slider-vertical .slider-handle.triangle {
-    border-width: 10px 0 10px 10px;
-    width: 1px;
-    height: 1px;
-    border-left-color: #0480be;
-    margin-left: 0;
-}
-
-.slider input {
-    display: none;
-}
-
-.slider .tooltip-inner {
-    white-space: nowrap;
-}
-
-.slider-track {
-    position: absolute;
-    cursor: pointer;
-    background-color: #f7f7f7;
-    background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
-    background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
-    background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
-    background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
-    background-repeat: repeat-x;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
-    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
-}
-
-.slider-selection {
-    position: absolute;
-    background-color: #f7f7f7;
-    background-image: -moz-linear-gradient(top, #f9f9f9, #f5f5f5);
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#f5f5f5));
-    background-image: -webkit-linear-gradient(top, #f9f9f9, #f5f5f5);
-    background-image: -o-linear-gradient(top, #f9f9f9, #f5f5f5);
-    background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5);
-    background-repeat: repeat-x;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
-    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-    -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
-}
-
-.slider-handle {
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    background-color: #0e90d2;
-    background-image: -moz-linear-gradient(top, #149bdf, #0480be);
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
-    background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
-    background-image: -o-linear-gradient(top, #149bdf, #0480be);
-    background-image: linear-gradient(to bottom, #149bdf, #0480be);
-    background-repeat: repeat-x;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
-    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
-    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
-    opacity: 0.8;
-    border: 0px solid transparent;
-}
-
-.slider-handle.round {
-    -webkit-border-radius: 20px;
-    -moz-border-radius: 20px;
-    border-radius: 20px;
-}
-
-.slider-handle.triangle {
-    background: transparent none;
-}
-
-/*
-* End of slider css
-*/
-
 * {
     box-sizing: border-box;
     margin: 0;
@@ -179,67 +19,8 @@ body {
     font-weight: 300;
 }
 
-body ::-webkit-input-placeholder {
-    /* WebKit browsers */
-    font-family: 'Source Sans Pro', sans-serif;
-    font-weight: 300;
-}
-
-body :-moz-placeholder {
-    /* Mozilla Firefox 4 to 18 */
-    font-family: 'Source Sans Pro', sans-serif;
-    opacity: 1;
-    font-weight: 300;
-}
-
-body ::-moz-placeholder {
-    /* Mozilla Firefox 19+ */
-    font-family: 'Source Sans Pro', sans-serif;
-    opacity: 1;
-    font-weight: 300;
-}
-
-body :-ms-input-placeholder {
-    /* Internet Explorer 10+ */
-    font-family: 'Source Sans Pro', sans-serif;
-    font-weight: 300;
-}
-
-ul {
-    list-style: none;
-}
-
-.navbar {
-    background-color: transparent;
-    border: none;
-}
-
-.navbar a {
-    color: white !important;
-    font-size: 1.3em;
-}
-
-.navbar-default .navbar-nav > .active > a,
-.navbar-default .navbar-nav > .active > a:hover,
-.navbar-default .navbar-nav > .active > a:focus {
-    background-color: transparent;
-    font-weight: 900;
-}
-
-.homepage {
-    background: #50a3a2;
-    background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
-    background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
-    /*top: 20%;*/
-    width: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-    /*padding-bottom: 60px;*/
-
-    min-height: 100%;
-    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
-    height: 100%;
-    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
+.brand-logo {
+  margin-left: 10px;
 }
 
 .landing {
@@ -326,42 +107,6 @@ ul {
     font-weight: 200;
 }
 
-form {
-    padding: 20px 0;
-    position: relative;
-    z-index: 2;
-}
-
-form input, .croom, .calert {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    outline: 0;
-    border: 1px solid rgba(255, 255, 255, 0.4);
-    background-color: rgba(255, 255, 255, 0.2);
-    width: 304px;
-    border-radius: 3px;
-    padding: 10px 15px;
-    margin: 0 auto 10px auto;
-    display: block;
-    text-align: center;
-    font-size: 18px;
-    color: white;
-    -webkit-transition-duration: 0.25s;
-    transition-duration: 0.25s;
-    font-weight: 300;
-}
-
-form input:hover {
-    background-color: rgba(255, 255, 255, 0.4);
-}
-
-form input:focus {
-    /*opacity: 0.4;*/
-    width: 354px;
-    color: white;
-}
-
 .g-recaptcha {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -378,40 +123,6 @@ form input:focus {
     font-weight: 300;
 }
 
-form button {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    outline: 0;
-    background-color: white;
-    border: 0;
-    padding: 10px 15px;
-    color: #53e3a6;
-    border-radius: 3px;
-    width: 304px;
-    cursor: pointer;
-    font-size: 18px;
-    -webkit-transition-duration: 0.25s;
-    transition-duration: 0.25s;
-}
-
-::-webkit-input-placeholder {
-    color: white;
-}
-
-::-moz-placeholder {
-    /* Firefox 19+ */
-    color: white;
-}
-
-:-ms-input-placeholder {
-    color: white;
-}
-
-form button:hover {
-    background-color: #f5f7f9;
-}
-
 .bg-bubbles {
     top: 0;
     left: 0;

app/client/head.html

@@ -6,9 +6,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name=viewport content='width=700'>
-	<meta name="keywords" content="music, musare, lisen, app, meteor, edm, rooms, party, good, mus, are, pop">
+	  <meta name="keywords" content="music, musare, lisen, app, meteor, edm, rooms, party, good, mus, are, pop">
     <meta name="description" content="Musare is a website where you can enjoy genre specific playlists with lots of songs! The same song plays for everyone at the same time in the same station, so you can also listen to it with friends!">
-	<meta name="copyright" content="Copyright © 2015 All Right Reserved">
+	  <meta name="copyright" content="Copyright © 2015 All Right Reserved">
     <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
     <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
     <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
@@ -26,9 +26,9 @@
     <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
     <meta name="theme-color" content="#ffffff">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
+    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href='http://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
-    <script src="/bootstrap-slider.min.js"></script>
     <script src="/jquery.textcomplete.min.js"></script>
     <script src="/emojidropdown.js"></script>
     <script src="https://connect.soundcloud.com/sdk-2.0.0.js"></script>
@@ -42,7 +42,7 @@
         }
 
         // Doorbell Initialising
-        window.doorbellOptions = {
+        /*window.doorbellOptions = {
             strings: {
                 'email-input-placeholder': 'Your email address (optional)'
             },
@@ -50,7 +50,7 @@
         };
         (function(d, t) {
             var g = d.createElement(t);g.id = 'doorbellScript';g.type = 'text/javascript';g.async = true;g.src = 'https://embed.doorbell.io/button/2408?t='+(new Date().getTime());(d.getElementsByTagName('head')[0]||d.getElementsByTagName('body')[0]).appendChild(g);
-        }(document, 'script'));
+        }(document, 'script'));*/
 
         // YouTube Iniialising
         Session.set("YTLoaded", false);

app/client/scripts/main.js

@@ -47,6 +47,12 @@ Handlebars.registerHelper("initials", function(argument){
         return "";
     }
 });
+
+/* Global collection helpers */
+Handlebars.registerHelper("rooms", function(){
+    return Rooms.find({});
+});
+
 Handlebars.registerHelper('active', function(path) {
     return curPath() == path ? 'active' : '';
 });

app/client/scripts/routes.js

@@ -33,7 +33,7 @@ Router.route("/login", {
     }
 });
 
-Router.route("/signup", {
+Router.route("/register", {
     action: function() {
         var user = Meteor.user();
         if (user === undefined || user === null) {

app/client/templates/banned.html

@@ -10,6 +10,4 @@
             <h3 class="text text-center">Reason: {{bannedReason}}</h3>
         </div>
     </div>
-
-    {{> bubbles}}
-</template>
+</template>

app/client/templates/bubbles.html

@@ -1,14 +0,0 @@
-<template name="bubbles">
-    <ul class="bg-bubbles">
-        <li><img src="/Snowflake.png"/></li>
-        <li><img src="/Snowflake.png"/></li>
-        <li><img src="/Snowflake.png"/></li>
-        <li><img src="/Snowflake.png"/></li>
-        <li><img src="/Snowflake.png"/></li>
-        <li><img src="/Snowflake.png"/></li>
-        <li><img src="/Snowflake.png"/></li>
-        <li><img src="/Snowflake.png"/></li>
-        <li><img src="/Snowflake.png"/></li>
-        <li><img src="/Snowflake.png"/></li>
-    </ul>
-</template>

app/client/templates/footer.html

@@ -3,9 +3,7 @@
         <p>Copyright © 2015 All Right Reserved</p>
         <a href="/faq" class="footerButtons" id="FAQButton">FAQ |</a>
         <a href="/terms" class="footerButtons" id="termsButton">Terms |</a>
-        <a href="/privacy" class="footerButtons" id="privacyButton">Privacy |</a>
-        <a href="/about" class="footerButtons" id="aboutButton">About |</a>
-        <a href="/contact" class="footerButtons" id="contactButton">Contact</a>
+        <a href="/privacy" class="footerButtons" id="privacyButton">Privacy</a>
         <br>
         <a class="social-link" href="https://www.facebook.com/MusareMusic" target="_blank"><i class="fa fa-facebook"></i></a>
         <a class="social-link" href="https://twitter.com/musareapp" target="_blank"><i class="fa fa-twitter"></i></a>

app/client/templates/home.html

@@ -1,19 +1,27 @@
 <template name="home">
     {{> alerts}}
-    <div class="homepage">
-        <!--<div class="alert alert-success alert-dismissible" role="alert" style="margin-bottom: 0">-->
-            <!--<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true"><i class="fa fa-times"></i></span></button>-->
-            <!--<strong>Hey there!</strong> Welcome to Musare - a modern, open-source, collaborative music app.-->
-        <!--</div>-->
-        {{> header}}
-        {{#if currentUser}}
-            {{> dashboard}}
-        {{else}}
-            {{> dashboard}}
-        {{/if}}
-        <div class="push"></div>
+    {{> header}}
+    <div class="col s12 m10 l8">
+      <div class="row">
+        {{#each rooms}}
+        <div class="col s12 m5 l2">
+          <div class="card">
+            <div class="card-image waves-effect waves-block waves-light">
+              <a href="/{{type}}"><img src={{currentSong.song.img}}></a>
+            </div>
+            <div class="card-content">
+              <span class="card-title activator grey-text text-darken-4">{{display}}<i class="material-icons right">more_vert</i></span>
+              <p><a href="/{{type}}">Join Room</a></p>
+            </div>
+            <div class="card-reveal">
+              <span class="card-title grey-text text-darken-4">EDM Room<i class="material-icons right">close</i></span>
+              <p>The EDM room provides music similar to...</p>
+            </div>
+          </div>
+        </div>
+        {{/each}}
+      </div>
     </div>
+    <!--{{> dashboard}}-->
     {{> footer}}
-
-    {{> bubbles}}
 </template>

app/client/templates/loading.html

@@ -3,6 +3,5 @@
         <div id="spinner-container">
             <i class="fa fa-spinner fa-pulse" id="spinner"></i>
         </div>
-        {{> bubbles}}
     </div>
-</template>
+</template>

app/client/templates/login.html

@@ -11,8 +11,5 @@
         </form>
         <button class="btn-social" id="github-login"><i class="fa fa-github pull-left"></i>Login with Github</button>
     </div>
-
-      {{> bubbles}}
-
   </div>
 </template>

app/client/templates/profile.html

@@ -84,6 +84,5 @@
             {{> loading}}
         {{/if}}
       </div>
-        {{> bubbles}}
     </div>
 </template>

app/client/templates/register.html

@@ -2,17 +2,32 @@
     {{> alerts}}
     <div class="landing">
         {{> header}}
-        <div class="container">
+          <div class="col s8">
             <h1>Sign Up</h1>
-            <form class="form">
-                <input id="usernameInput" type="text" autocorrect="off" name="registerUsername" placeholder="Enter a username" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter a username'" required/>
-                <input id="emailInput" type="email" name="registerEmail" placeholder="Enter your email" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter your email'" required>
-                <input type="password" name="registerPassword" placeholder="Enter a password" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter a password'" required/> {{> reCAPTCHA}}
+            <div class="row">
+              <form class="col s12">
+                <div class="row">
+                  <div class="input-field col s6">
+                    <input placeholder="Username" id="user_name" type="text" class="validate">
+                    <label for="first_name">Username</label>
+                  </div>
+                  <div class="input-field col s6">
+                    <input id="email" type="email" class="validate">
+                    <label for="last_name">Email</label>
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="input-field col s12">
+                    <input id="password" type="password" class="validate">
+                    <label for="password">Password</label>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
+              <!--{{> reCAPTCHA}}
                 <p>By registering, you agree to the Terms and Conditions and Privacy Policy.</p>
                 <button type="submit">Sign Up</button>
-            </form>
-            <button class="btn-social" id="github-login"><i class="fa fa-github pull-left"></i>Signup with Github</button>
+            <button class="btn-social" id="github-login"><i class="fa fa-github pull-left"></i>Signup with Github</button>-->
         </div>
-        {{> bubbles}}
-    </div>
 </template>

app/client/templates/room.html

@@ -495,8 +495,6 @@
                     </div>
                 </div>
             </div>
-
-            {{> bubbles}}
         </div>
     {{else}}
         {{> loading}}

app/client/templates/settings.html

@@ -27,5 +27,4 @@
             </div>
         </div>
     </div>
-    {{> bubbles}}
-</template>
+</template>