Worked on the /admin page.

app/client/app.css

@@ -377,21 +377,6 @@ main {
     margin-top: 10%;
 }
 
-#croom_container, #calert_container {
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 10px;
-    width: 304px !important;
-}
-
-.croom_label, .calert_label {
-    color: white;
-}
-
-.croom, .calert {
-    width: 304px !important;
-}
-
 #calert-priority > option {
     color: black;
 }
@@ -408,9 +393,14 @@ main {
     margin-top: 10%;
 }
 
-.modal-content {
-    background-color: rgb(107, 197, 164);
-    color: white;
+.modal-content, .modal-footer {
+    background-color: rgb(107, 197, 164) !important;
+    color: white !important;
+}
+
+.modal-close {
+    background-color: #fff;
+    color: #53e3a6;
 }
 
 .song-input-label {
@@ -903,46 +893,6 @@ nav form input[type="image"]{
 .song-panel-room{
     float: right;
 }
-/*Credit to: http://thecodeplayer.com/walkthrough/custom-animated-checkbox-inputs-using-css-iconfonts*/
-#two-label {
-    position: relative;
-    padding-left: 30px;
-    font-size: 14px;
-    cursor: pointer;
-    margin-bottom: 15px;
-    color: white;
-    padding-top: 3px;
-}
-#two-label:before, #two-label:after {
-    font-family: FontAwesome;
-    font-size: 21px;
-    /*absolutely positioned*/
-    position: absolute; top: 0; left: 0;
-}
-#two-label:before {
-    content: '\f096'; /*unchecked*/
-}
-#two-label:after {
-    content: '\f046'; /*checked*/
-    /*checked icon will be hidden by default by using 0 max-width and overflow hidden*/
-    max-width: 0;
-    overflow: hidden;
-    opacity: 0.5;
-    /*CSS3 transitions for animated effect*/
-    transition: all 0.35s;
-}
-
-/*hiding the original checkboxes*/
-input[type="checkbox"] {
-    display: none;
-}
-/*when the user checks the checkbox the checked icon will animate in*/
-input[type="checkbox"]:checked + #two-label:after {
-    max-width: 25px; /*an arbitratry number more than the icon's width*/
-    opacity: 1; /*for fade in effect*/
-}
-#two+label:before, #two+label:after {color: hsl(180, 45%, 40%);}
-/*End of checkbox awesomeness!*/
 
 #chat-tab, #global-chat-tab {
     -webkit-transition: background-color 500ms linear;

app/client/checkboxes.css

@@ -1,251 +0,0 @@
-.checkbox {
-    padding-left: 20px;
-}
-.checkbox label {
-    display: inline-block;
-    vertical-align: middle;
-    position: relative;
-    padding-left: 5px;
-}
-.checkbox label::before {
-    content: "";
-    display: inline-block;
-    position: absolute;
-    width: 17px;
-    height: 17px;
-    left: 0;
-    margin-left: -20px;
-    border: 1px solid #cccccc;
-    border-radius: 3px;
-    background-color: #fff;
-    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-    transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-}
-.checkbox label::after {
-    display: inline-block;
-    position: absolute;
-    width: 16px;
-    height: 16px;
-    left: 0;
-    top: 0;
-    margin-left: -20px;
-    padding-left: 3px;
-    padding-top: 1px;
-    font-size: 11px;
-    color: #555555;
-}
-.checkbox input[type="checkbox"],
-.checkbox input[type="radio"] {
-    opacity: 0;
-    z-index: 1;
-}
-.checkbox input[type="checkbox"]:focus + label::before,
-.checkbox input[type="radio"]:focus + label::before {
-    outline: thin dotted;
-    outline: 5px auto -webkit-focus-ring-color;
-    outline-offset: -2px;
-}
-.checkbox input[type="checkbox"]:checked + label::after,
-.checkbox input[type="radio"]:checked + label::after {
-    font-family: "FontAwesome";
-    content: "\f00c";
-}
-.checkbox input[type="checkbox"]:disabled + label,
-.checkbox input[type="radio"]:disabled + label {
-    opacity: 0.65;
-}
-.checkbox input[type="checkbox"]:disabled + label::before,
-.checkbox input[type="radio"]:disabled + label::before {
-    background-color: #eeeeee;
-    cursor: not-allowed;
-}
-.checkbox.checkbox-circle label::before {
-    border-radius: 50%;
-}
-.checkbox.checkbox-inline {
-    margin-top: 0;
-}
-
-.checkbox-primary input[type="checkbox"]:checked + label::before,
-.checkbox-primary input[type="radio"]:checked + label::before {
-    background-color: #337ab7;
-    border-color: #337ab7;
-}
-.checkbox-primary input[type="checkbox"]:checked + label::after,
-.checkbox-primary input[type="radio"]:checked + label::after {
-    color: #fff;
-}
-
-.checkbox-danger input[type="checkbox"]:checked + label::before,
-.checkbox-danger input[type="radio"]:checked + label::before {
-    background-color: #d9534f;
-    border-color: #d9534f;
-}
-.checkbox-danger input[type="checkbox"]:checked + label::after,
-.checkbox-danger input[type="radio"]:checked + label::after {
-    color: #fff;
-}
-
-.checkbox-info input[type="checkbox"]:checked + label::before,
-.checkbox-info input[type="radio"]:checked + label::before {
-    background-color: #5bc0de;
-    border-color: #5bc0de;
-}
-.checkbox-info input[type="checkbox"]:checked + label::after,
-.checkbox-info input[type="radio"]:checked + label::after {
-    color: #fff;
-}
-
-.checkbox-warning input[type="checkbox"]:checked + label::before,
-.checkbox-warning input[type="radio"]:checked + label::before {
-    background-color: #f0ad4e;
-    border-color: #f0ad4e;
-}
-.checkbox-warning input[type="checkbox"]:checked + label::after,
-.checkbox-warning input[type="radio"]:checked + label::after {
-    color: #fff;
-}
-
-.checkbox-success input[type="checkbox"]:checked + label::before,
-.checkbox-success input[type="radio"]:checked + label::before {
-    background-color: #5cb85c;
-    border-color: #5cb85c;
-}
-.checkbox-success input[type="checkbox"]:checked + label::after,
-.checkbox-success input[type="radio"]:checked + label::after {
-    color: #fff;
-}
-
-.radio {
-    padding-left: 20px;
-}
-.radio label {
-    display: inline-block;
-    vertical-align: middle;
-    position: relative;
-    padding-left: 5px;
-}
-.radio label::before {
-    content: "";
-    display: inline-block;
-    position: absolute;
-    width: 17px;
-    height: 17px;
-    left: 0;
-    margin-left: -20px;
-    border: 1px solid #cccccc;
-    border-radius: 50%;
-    background-color: #fff;
-    -webkit-transition: border 0.15s ease-in-out;
-    -o-transition: border 0.15s ease-in-out;
-    transition: border 0.15s ease-in-out;
-}
-.radio label::after {
-    display: inline-block;
-    position: absolute;
-    content: " ";
-    width: 11px;
-    height: 11px;
-    left: 3px;
-    top: 3px;
-    margin-left: -20px;
-    border-radius: 50%;
-    background-color: #555555;
-    -webkit-transform: scale(0, 0);
-    -ms-transform: scale(0, 0);
-    -o-transform: scale(0, 0);
-    transform: scale(0, 0);
-    -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-    -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-    -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-    transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-}
-.radio input[type="radio"] {
-    opacity: 0;
-    z-index: 1;
-}
-.radio input[type="radio"]:focus + label::before {
-    outline: thin dotted;
-    outline: 5px auto -webkit-focus-ring-color;
-    outline-offset: -2px;
-}
-.radio input[type="radio"]:checked + label::after {
-    -webkit-transform: scale(1, 1);
-    -ms-transform: scale(1, 1);
-    -o-transform: scale(1, 1);
-    transform: scale(1, 1);
-}
-.radio input[type="radio"]:disabled + label {
-    opacity: 0.65;
-}
-.radio input[type="radio"]:disabled + label::before {
-    cursor: not-allowed;
-}
-.radio.radio-inline {
-    margin-top: 0;
-}
-
-.radio-primary input[type="radio"] + label::after {
-    background-color: #337ab7;
-}
-.radio-primary input[type="radio"]:checked + label::before {
-    border-color: #337ab7;
-}
-.radio-primary input[type="radio"]:checked + label::after {
-    background-color: #337ab7;
-}
-
-.radio-danger input[type="radio"] + label::after {
-    background-color: #d9534f;
-}
-.radio-danger input[type="radio"]:checked + label::before {
-    border-color: #d9534f;
-}
-.radio-danger input[type="radio"]:checked + label::after {
-    background-color: #d9534f;
-}
-
-.radio-info input[type="radio"] + label::after {
-    background-color: #5bc0de;
-}
-.radio-info input[type="radio"]:checked + label::before {
-    border-color: #5bc0de;
-}
-.radio-info input[type="radio"]:checked + label::after {
-    background-color: #5bc0de;
-}
-
-.radio-warning input[type="radio"] + label::after {
-    background-color: #f0ad4e;
-}
-.radio-warning input[type="radio"]:checked + label::before {
-    border-color: #f0ad4e;
-}
-.radio-warning input[type="radio"]:checked + label::after {
-    background-color: #f0ad4e;
-}
-
-.radio-success input[type="radio"] + label::after {
-    background-color: #5cb85c;
-}
-.radio-success input[type="radio"]:checked + label::before {
-    border-color: #5cb85c;
-}
-.radio-success input[type="radio"]:checked + label::after {
-    background-color: #5cb85c;
-}
-
-input[type="checkbox"].styled:checked + label:after,
-input[type="radio"].styled:checked + label:after {
-    font-family: 'FontAwesome';
-    content: "\f00c";
-}
-input[type="checkbox"] .styled:checked + label::before,
-input[type="radio"] .styled:checked + label::before {
-    color: #fff;
-}
-input[type="checkbox"] .styled:checked + label::after,
-input[type="radio"] .styled:checked + label::after {
-    color: #fff;
-}

app/client/templates/admin.html

@@ -2,74 +2,91 @@
     {{> alerts}}
     <div class="landing">
         {{> header}}
-          <div class="row" style="margin-top: 20px; height: 100%;">
-            <div class="col-md-6 col-md-offset-1 admin-container" style="height: 80%;">
-              <div>
-                <h1>Stations</h1><a href="#" data-toggle="modal" data-target="#addStation">(+)</a>
-              </div>
-              {{#each playlists}}
-                <p>{{display}}</p>
-                <table class="table" style="border-bottom: 1px solid white;">
-                  <tr>
-                    <th>Songs</th>
-                    <th>Users</th>
-                    <th>Admins</th>
-                    <th>Reports</th>
-                    <th>Queue</th>
-                  </tr>
-                  <tr>
-                    <td>{{songs.length}}</td>
-                    <td>{{roomUserNum}}</td>
-                    <td></td>
-                    <td>{{reportsCount display}}</td>
-                    <td>{{queueCount display}}</td>
-                    <td><a href="/admin/stations" id={{display}}>Edit</a></td>
-                  </tr>
-                </table>
-              {{/each}}
-              <button class="btn btn-danger col-md-6 col-md-offset-3" id="rrating" data-toggle="modal" data-target="#confirmModal">Reset All Ratings</button>
+        <div class="row" style="margin-top: 20px; height: 100%;">
+            <div class="col s12 l6 m10 offset-l1 offset-m1 card-panel teal accent-3 white-text" style="height: 80%;">
+                <div>
+                    <h2 class="center-align">Stations</h2>
+                </div>
+                    <p>{{display}}</p>
+                    <table>
+                        <thead>
+                        <tr>
+                            <th>Type</th>
+                            <th>Songs</th>
+                            <th>Users</th>
+                            <th>Admins</th>
+                            <th>Reports</th>
+                            <th>Queue</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                            {{#each playlists}}
+                                <tr>
+                                    <td>{{display}}</td>
+                                    <td>{{songs.length}}</td>
+                                    <td>{{roomUserNum}}</td>
+                                    <td></td>
+                                    <td>{{reportsCount display}}</td>
+                                    <td>{{queueCount display}}</td>
+                                    <td><a href="/{{type}}/manage" class="btn right" id="manage-{{display}}">Manage</a></td> <!-- TODO Make this redirect to playlist -->
+                                </tr>
+                            {{/each}}
+                        </tbody>
+                    </table>
+                <div class="row">
+                    <button class="btn col m6 s6 l6 waves-effect waves-light" id="rrating" data-toggle="modal"
+                            data-target="#confirmModal">Reset All Ratings
+                    </button>
+                    <a class="waves-effect waves-light btn col m6 s6 l6 modal-trigger" id="new_room" href="#addStation"> <!-- TODO Make this actually open the new room modal  -->
+                        Add Room
+                    </a>
+                </div>
             </div>
-            <div class="col-md-3 col-md-offset-1 admin-container" style="height: 80%;">
-              <div>
-                <h1>Site statistics</h1>
-              </div>
-              <p>Total Users Online: {{usersOnline}}</p>
-              <p>Total Registered Users: {{allUsers}}</p>
-              <a href="/admin/queues">Edit the queues</a>
+            <div class="col s12 m8 l3 offset-l1 offset-m2 card-panel teal accent-3 white-text" style="height: 80%;">
+                <div>
+                    <h2 class="center-align">Site statistics</h2>
+                </div>
+                <div class="section">
+                    <p class="flow-text">Total Users Online: {{usersOnline}}</p>
+                    <p class="flow-text">Total Registered Users: {{allUsers}}</p>
+                </div>
+                <div class="row">
+                    <a class="btn col l12 s12 m12 waves-effect waves-light" href="/admin/queues">Manage Queues</a> <!-- TODO Make this redirect to the queues -->
+                </div>
             </div>
-          </div>
-          <div id="addStation" class="modal fade" role="dialog">
-              <div class="modal-dialog">
-
-                  <!-- Modal content-->
-                  <div class="modal-content">
-                      <div class="modal-header">
-                          <button type="button" class="close" data-dismiss="modal">&times;</button>
-                          <h4 class="modal-title">Create new station</h4>
-                      </div>
-                      <div class="modal-body">
-                        <div id="croom_container">
-                          <label for="croom_display" class="croom_label">Room Display Name (eg 'Edm'):</label>
-                          <div class="input-group">
-                            <input type="text" class="croom" id="croom_display" name="croom" required />
-                          </div>
-                          <label for="croom_tag" class="croom_label">Room Tag Name (eg 'edm'):</label>
-                          <div class="input-group">
-                            <input type="text" class="croom" id="croom_tag" name="croom" required />
-                          </div>
-                          <input type="checkbox" name="two" id="two"/>
-                          <label id="two-label" for="two">Make Room Private?</label>
-                          <button class="btn btn-warning btn-block" id="croom_create">Create</button>
-                        </div>
-                      </div>
-                      <div class="modal-footer">
-                          <button id="close-modal-a" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                      </div>
-                  </div>
-
-              </div>
-          </div>
+        </div>
+        <div id="addStation" class="modal">
+            <!-- Modal content-->
+            <div class="modal-content">
+                <div class="modal-body">
+                    <h4>Add Room</h4>
+                    <div class="input-field">
+                        <input type="text" class="croom" id="croom_display" name="croom" required/>
+                        <label for="croom_display" class="white-text">Room Display Name</label>
+                    </div>
+                    <div class="input-field">
+                        <input type="text" class="croom" id="croom_tag" name="croom" required/>
+                        <label for="croom_tag" class="white-text">Room Tag</label>
+                    </div>
+                    <input type="checkbox" name="croom_private" id="croom_private"/>
+                    <label for="croom_private" class="white-text">Make Room Private?</label>
+                    <div class="section">
+                        <button class="btn btn-warning btn-block waves-effect waves-light" id="croom_create">Create</button>
+                    </div>
+                    <div class="divider"></div>
+                </div>
+                <div class="modal-footer">
+                    <a href="#!" class=" modal-action modal-close waves-effect waves-light btn-flat">Close</a>
+                </div>
+            </div>
+        </div>
     </div>
+    <script>
+        $(document).ready(function(){
+            // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
+            $('#new_room').leanModal();
+        });
+    </script>
 
     <div id="confirmModal" class="modal fade" role="dialog">
         <div class="modal-dialog">
@@ -81,10 +98,10 @@
                 </div>
                 <div class="modal-body">
                     <h3 style="margin-top: 0">Are you sure you want to reset all likes and dislikes?</h3>
-                    <button id="rreset_confirm" class="btn btn-danger">Reset All Ratings</button>
+                    <button id="rreset_confirm" class="btn btn-danger waves-effect waves-light">Reset All Ratings</button>
                 </div>
                 <div class="modal-footer">
-                    <button id="close-modal" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    <button id="close-modal" type="button" class="btn btn-default waves-effect waves-light" data-dismiss="modal">Close</button>
                 </div>
             </div>
         </div>