Started to work on FAQ

app/client/stylesheets/app.css

@@ -256,3 +256,12 @@ textarea{
     float: left;
     height: 10%;
 }
+body {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+}
+
+.container {
+    flex: 1 0 auto;
+}

app/client/templates/faq.html

@@ -1,42 +1,106 @@
 <template name="faq">
     {{> header}}
-    <div class="text-center row">
-        <div class="col l6 m6 s12 offset-l3 offset-m3">
-            <h3>FAQ
-                <small class="thin">Frequently Asked Questions</small>
-            </h3>
+    <div class="container">
+            <h3>FAQ <small class="thin">Frequently Asked Questions</small></h3>
             <hr/>
-            <h4>How can I add a song?</h4>
-            <p class="flow-text">You can add a song if you are logged in, by clicking on the Add Song button under the
-                video in
-                the station you want to add your song in. That will open up a modal where you can search search for a song by putting a search query there or by putting a link in there and clicking the Search Song button. You can then
-                edit
-                some more information, like the artist and title. It's helpful for us if you fill those in so we don't
-                have to
-                research every song, but you are not required to. You can also import playlists from YouTube.</p>
-            <h4>Can I skip a song?</h4>
-            <p class="flow-text">Yes, and no. You can vote on skipping a song. You can click the blue skip button. When
-                the
-                counter hits 3, the song will be skipped. Admins and mods can skip songs without needing to vote, but
-                please do
-                not ask us to skip songs.</p>
-            <h4>I added a song but I can't find it in the Playlist, where is it?</h4>
-            <p class="flow-text">When you request a song to be added to a playlist, an admin or moderator first needs to
-                review,
-                edit and then either accept or deny that song.</p>
-            <h4>How do I use emoji's in chat?</h4>
-            <p class="flow-text">In chat, you can see emoji's by typing the ':' in chat and then a keyword or some
-                letters of an
-                emoji. That opens a dropdown box from where you can choose emoji's to put in chat. You can also just
-                type it
-                manually. You can find the full list of emoji's at <a href="http://emoji.codes/"
-                                                                      target="_blank">www.emoji.codes</a>.</p>
-            <h4>Is there an API?</h4>
-            <p class="flow-text">No, sorry. But we will add one soon&trade;!</p>
-            <h4>Are there chat commands?</h4>
-            <p class="flow-text">Yes! Just type /commands or /help in chat and it will show you all of the available
-                chat commands.</p>
+            <ul class="collapsible popout" data-collapsible="accordion">
+                <h5>Account Access & Login</h5>
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>How do I log in or sign up?</div>
+                    <div class="collapsible-body"><p>TO ADD</p></div>
+                </li>
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>What happens to my old username if I change it?</div>
+                    <div class="collapsible-body"><p>When you change your username your old username will be available for someone else to use, so choose wisely!</p></div>
+                </li>
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>I cannot access my account and/or I don’t remember my password. How do I regain access to my account?</div>
+                    <div class="collapsible-body"><p>TO ADD</p></div>
+                </li>
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>How do I reset my password?</div>
+                    <div class="collapsible-body"><p>TO ADD</p></div>
+                </li>
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>What are the username requirements?</div>
+                    <div class="collapsible-body"><p>TO ADD</p></div>
+                </li>
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>Can I change my username?</div>
+                    <div class="collapsible-body"><p>TO ADD</p></div>
+                </li>
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>How can I deactivate my account?</div>
+                    <div class="collapsible-body"><p>TO ADD</p></div>
+                </li>
+                <h5>Chat</h5>
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>Why do some people have Badges?</div>
+                    <div class="collapsible-body"><p>TO ADD</p></div>
+                </li>
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>How can I add those little pictures/faces (emoji) into my chat messages?</div>
+                    <div class="collapsible-body"><p>TO ADD</p></div>
+                </li>
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>What are chat mentions? How can I mention someone?</div>
+                    <div class="collapsible-body"><p>TO ADD</p></div>
+                </li>
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>How do I access the chat?</div>
+                    <div class="collapsible-body"><p>TO ADD</p></div>
+                </li>
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>Are there chat commands?</div>
+                    <div class="collapsible-body"><p>Yes! Just type /commands or /help in chat and it will show you all of the available chat commands.</p></div>
+                </li>
+                <h5>The people on Musare</h5>
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>Who are the Musare staff?</div>
+                    <div class="collapsible-body"><p>TO ADD</p></div>
+                </li><li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>How do I become a staff member?</div>
+                    <div class="collapsible-body"><p>TO ADD</p></div>
+                </li>
+                <h5>Profile</h5>
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>What are Profile Pages?</div>
+                    <div class="collapsible-body"><p>TO ADD</p></div>
+                </li><li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>How can I edit my profile?</div>
+                    <div class="collapsible-body"><p>TO ADD</p></div>
+                </li>
+                <h5>Playlist</h5>
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>I added a song but I can't find it in the Playlist, where is it?</div>
+                    <div class="collapsible-body"><p>When you request a song to be added to a playlist, an admin or moderator first needs to review, edit and then either accept or deny that song.</p></div>
+                </li>
+                <li>
+                    <div class="collapsible-header active"><i class="material-icons">help</i>How can I add a song?</div>
+                    <div class="collapsible-body"><p>You can add a song if you are logged in, by clicking on the Add Song button under the video in the station you want to add your song in. That will open up a modal where you can search search for a song by putting a search query there or by putting a link in there and clicking the Search Song button. You can then edit some more information, like the artist and title. It's helpful for us if you fill those in so we don't have to research every song, but you are not required to. You can also import playlists from YouTube.</p></div>
+                </li>
+                <h5>Social Media</h5>
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>Where else can I connect with the musare community?</div>
+                    <div class="collapsible-body"><p>TO ADD</p></div>
+                </li>
+                <h5>Usage:</h5>
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>Can I skip a song?</div>
+                    <div class="collapsible-body"><p>Yes, and no. You can vote on skipping a song. You can click the blue skip button. When the counter hits 3, the song will be skipped. Admins and mods can skip songs without needing to vote, but please do not ask us to skip songs.</p></div>
+                </li>
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>Is there an API?</div>
+                    <div class="collapsible-body"><p>No, sorry. But we will add one soon™!</p></div>
+                </li>
+            </ul>
         </div>
-    </div>
     {{> footer}}
+    <script>
+        $(document).ready(function(){
+        $('.collapsible').collapsible({
+            accordion : true
+        });
+    });
+    </script>
 </template>

app/client/templates/profile.html

@@ -1,7 +1,5 @@
 <template name="profile">
-    {{> alerts}}
     {{> header}}
-    {{#if loaded}}
         <!--{{> avatar userId=profileUserId shape="circle" class="profile-img" initials=initials}}-->
         <h1 id="profile-name" class="center-align black-text thin">{{username}}</h1>
         <div class="row hack-container">
@@ -49,7 +47,4 @@
                 </div>
             </div>
         </div>
-    {{else}}
-        {{> loading}}
-    {{/if}}
 </template>