From 7bb64ba00641e61129cfca0e310c03f51068964b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= <kasper@kasperrt.no>
Date: Wed, 16 Dec 2015 12:25:01 +0100
Subject: [PATCH] Added help modals and buttons all over the site

---
 index.php            | 14 ++++++++++++++
 php/controller.php   | 12 ++++++++++++
 php/footer.php       |  1 +
 php/nochan.php       | 11 +++++++++++
 static/css/style.css | 14 ++++++++++++++
 5 files changed, 52 insertions(+)

diff --git a/index.php b/index.php
index d3360859..4a5d7704 100755
--- a/index.php
+++ b/index.php
@@ -138,6 +138,20 @@
             </div>
         </nav>
       </div>
+      <div id="help" class="modal">
+        <div class="modal-header-fixed">
+                <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
+            </div>
+            <div class="modal-content">
+                <h4>So you need help?</h4>
+                <p>When listening on a channel, there are some different buttons you can click.</p>
+                <p>If you click the cogwheel, you'll open the settings panel. Here you can change channel settings, decide if you want the computer you're on can be remote-controlled, and import playlists from YouTube.</p>
+                <p>The search-icon, opens up a search inputfield. If you start typing here, the site will automagically search for your input!</p>
+                <p>If you click the button next to the search icon, you'll skip on a song. The one next to that one, is shuffleling of the list. Next one there again is to open the chat.</p>
+                <p>Clicking a song in the playlist, gives it a vote. If you're logged in, you'll have a delete button at your disposal.</p>
+                <p>Also, whenever you're logged in, you'll have two tabs in the top of the playlist thats called "Playlist" and "Suggested". The playlist obviously shows the playlist. But the suggested tab, shows 5 songs that YouTube recommends based on the current song. There might also be user recommended songs. To add any of these, just click them as you'd click a song to vote.</p>
+            </div>
+        </div>
     </header>
     <main class="container center-align main">
         <div id="main-row" class="row">
diff --git a/php/controller.php b/php/controller.php
index 3e3aedd2..6040ddff 100755
--- a/php/controller.php
+++ b/php/controller.php
@@ -13,6 +13,7 @@
                 </a>
                 <a href="//zoff.no" class="brand-logo hide-on-med-and-up">Zöff</a>
                 <ul id="nav-mobile" class="right hide-on-med-and-down">
+                  <li><a class="modal-trigger waves-effect waves-green" title="Need help with the site?" onclick="$('#help').openModal()">Help</a></li>
                   <li><a class="waves-effect green" title="Remote control a Zöff player" href="https://remote.zoff.no">Remote</a></li>
                   <li><a class="modal-trigger waves-effect waves-orange" onclick="$('#about').openModal()">About</a></li>
                   <li><a class="modal-trigger waves-effect waves-yellow" onclick="$('#legal').openModal()">Legal</a></li>
@@ -48,6 +49,17 @@
                 <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
             </div>
         </div>
+        <div id="help" class="modal">
+        <div class="modal-header-fixed">
+                <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
+            </div>
+            <div class="modal-content">
+                <h4>So you need help?</h4>
+                <p>To remote-controll a computer, just type in the ID for that computer. (This can be found in the settings panel on the computer you want to remote controll. There is also a QR code for you to scan.</p>
+                <p>When you've entered the ID for the computer you want to controll, you'll be able to change the volume, have the controlled computer vote for skipping, pause the video or play the video.</p>
+                <p>The inputfield you used to enter the ID (if you entered it), has now changed some. If you type in something here now, the controlled computer will change channel!</p>
+            </div>
+        </div>
     </header>
 
     <main class="center-align container">
diff --git a/php/footer.php b/php/footer.php
index 5c5690f8..83ff71f2 100755
--- a/php/footer.php
+++ b/php/footer.php
@@ -11,6 +11,7 @@
                     <br />
                     Enjoy!
                 </p>
+                <a class="modal-trigger waves-effect help-button-footer" title="Need help with the site?" onclick="$('#help').openModal()">Help, how does this work?!</a>
                 <p id="latest-commit" class="grey-text text-lighten-4 truncate"></p>
             </div>
             <div class="col l4 offset-l2 s12 valign-wrapper">
diff --git a/php/nochan.php b/php/nochan.php
index 9eb90583..094bc40f 100755
--- a/php/nochan.php
+++ b/php/nochan.php
@@ -19,6 +19,7 @@ if(isset($_GET['chan'])){
                 </a>
                 <a href="//zoff.no" class="brand-logo hide-on-med-and-up">Zöff</a>
                 <ul id="nav-mobile" class="right hide-on-med-and-down">
+                    <li><a class="modal-trigger waves-effect waves-green" title="Need help with the site?" onclick="$('#help').openModal()">Help</a></li>
                     <li><a class="waves-effect green" title="Remote control a Zöff player" href="https://remote.zoff.no">Remote</a></li>
                     <li><a class="modal-trigger waves-effect waves-orange" onclick="$('#about').openModal()">About</a></li>
                     <li><a class="modal-trigger waves-effect waves-yellow" onclick="$('#legal').openModal()">Legal</a></li>
@@ -68,6 +69,16 @@ if(isset($_GET['chan'])){
                 <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">I'm awesome! (Close)</a>
             </div>
         </div>
+        <div id="help" class="modal">
+        <div class="modal-header-fixed">
+                <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
+            </div>
+            <div class="modal-content">
+                <h4>So you need help?</h4>
+                <p>At the center of the site, you'll se a input field. This is meant to navigate to new or existing channels. If you input something here that already doesn't exist, a new channel will be create at the blink of an eye! Remember to put a password on the list you've created, so noone else takes it from you! (It's on a first come, first serve basis). When you're ready to proceed, just click the listen button!</p>
+                <p>Underneath the input fields, there are several tiles. These are channels that already exists, and they can be clicked! To enter one of these channels and listen to it's content, it is just to click the tile.</p>
+            </div>
+        </div>
     </header>
 
     <div class="section mega">
diff --git a/static/css/style.css b/static/css/style.css
index 779b770e..bb354438 100755
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -68,6 +68,20 @@ footer{
 }
 
 /* global colors */
+
+.modal-header-fixed{
+  position:fixed;
+  width:100px;
+  right:0px;
+}
+
+.help-button-footer{
+  padding: 10px;
+  background: white;
+  border-radius: 2px;
+  color:#2d2d2d;
+}
+
 footer.page-footer,
 nav, .tabs .tab a,
 .side-nav .collapsible-body li.active,