Styling and shit

php/controller.php

@@ -56,6 +56,30 @@
     </div>
         <div class="section">
 
+            <!--<p class="range-field">
+                <input type="range" title="Volume" id="volume-control" style="display:none;" min="0" value="100" max="100" />
+            </p>-->
+
+            <form class="row" id="base" onsubmit="window.location.href = '/remote/'+this.chan.value;return false;">
+                    <div class="input-field col s12">
+                        <input
+                            class="input-field"
+                            type="text"
+                            id="search"
+                            name="chan"
+                            title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
+                            autocomplete="off"
+                            list="searches"
+                            required pattern="[a-zA-Z0-9]+"
+                            spellcheck="false"
+                            maxlength="8"
+                            autocomplete
+                            length="8"
+                        />
+                        <label for="search" id="forsearch">Type ID of host to be controlled (it can be found under settings on a channel)</label>
+                </div>
+            </form>
+
             <div id="remote-controls" style="display:none;">
                 <a class="chan-link waves-effect btn green" onclick="play();">
                     <i id="remote_play" class="mdi-av-play-arrow"></i>
@@ -68,32 +92,11 @@
                 </a>
             </div>
             
-            <div id="volume-control" style="display:none;"></div>
+            <i class="mdi-av-volume-up slider-vol"></i>
+            <div id="volume-control" style="display:none;" title="Volume">
                 
-            <!--<p class="range-field">
-                <input type="range" title="Volume" id="volume-control" style="display:none;" min="0" value="100" max="100" />
-            </p>-->
-
-            <form class="row" id="base" onsubmit="window.location.href = '/remote/'+this.chan.value;return false;">
-                    <div class="input-field col s12">
-                        <input
-                            class="input-field"
-                            type="text"
-                            id="search"
-                            name="id"
-                            title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
-                            autocomplete="off"
-                            list="searches"
-                            required pattern="[a-zA-Z0-9]+"
-                            spellcheck="false"
-                            maxlength="8"
-                            autocomplete
-                            length="8"
-                            value="<?php /*if(isset($_GET('id'))echo($_GET('id'));*/?>"
-                        />
-                        <label for="search" id="forsearch">Type ID of host to be controlled (it can be found under settings on a channel)</label>
             </div>
-            </form>
+
 
             <!--<p class="range-field" onclick="console.log('test');">
                 <input type="range" id="volume-control" style="display:none;" min="0" value="100" max="100" />
@@ -101,7 +104,7 @@
             
         </div>
 
-        <div class="section">
+        <div class="section about-remote">
             <b>Here you can control another Zöff player from any device.</b>
             <br>
             To find the ID of your player, click the Conf <i class="mdi-action-settings"></i> icon on the top right of the player page, then "Remote Control".

php/panel.php

@@ -104,43 +104,8 @@
                             <img id="code-qr" alt="QR code for control" title="Link to control this Zöff player">
                             <h4 id="code-text">ABBADUR</h4>
                         </a>   
-                    <span>You can control this Zöff instance from another device by going to <b>http://zoff.no/remote</b><span>        
+                        <a>You can control this Zöff instance from another device by going to <b>http://zoff.no/remote</b><a>        
                     </li>
-                    <!--
-                    <li>
-                    <form class="row" id="base" onsubmit="controll();return false;">
-                        <div class="input-field">
-                            <input
-                                class="input-field"
-                                type="text"
-                                id="code-input"
-                                name="chan"
-                                title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
-                                autocomplete="off"
-                                list="searches"
-                                required pattern="[a-zA-Z0-9]+"
-                                spellcheck="false"
-                                maxlength="8"
-                                autocomplete
-                                length="8"
-                            />
-                            <label for="code-input" id="forcode">Type ID of host to be controlled</label>
-                        </div>
-                    </form>
-                    </li>
-                    <li>
-                    <div id="remote-controls" style="display:none;">
-                      <i id="remote_play" class="mdi-av-play-arrow"></i>
-                      <i id="remote_pause" class="mdi-av-pause"></i>
-                      <i id="remote_skip" class="mdi-av-skip-next"></i>
-                    </div>
-                    </li>
-                    <li>
-                    <p class="range-field">
-                      <input type="range" id="volume-control" style="display:none;" min="0" max="100" />
-                    </p>
-                    </li>
-                    -->
                 </ul>
             </div>
         </li>

static/css/style.css

@@ -771,11 +771,11 @@ ul #chat-log{
 }
 
 
-#code-link + span{
+#code-link + a{
   line-height: normal;
   color: black;
   text-align: center;
-
+}
 #volume-control {
     cursor:pointer;
   float:left;
@@ -802,10 +802,21 @@ ul #chat-log{
 
 #volume-control .ui-slider-handle {
   height: 15px;
-    width:5px;
+  width: 36px;
-    background-color:black;
+  background-color: rgb(255, 44, 44);
   position: absolute;
   cursor: pointer;
   outline: none;
   border: none;
+  border-radius: 17px;
+  margin-left: -17px;
+}
+
+.slider-vol{
+  float: left;
+  font-size: 22px;
+}
+
+.about-remote{
+  padding-top: 50px;
 }

static/js/remotecontroller.js

@@ -32,16 +32,12 @@ document.getElementById("volume-control").addEventListener("click", function()
 {
    socket.emit("id", [id, "volume", $("#volume-control").val()]);
 });*/
->>>>>>> 126fe2fec4a1d36ec179e889d4d7162118b4fc49
 
 function control()
 {
-  console.log("Start controlling")
   if(start)
   {
-    if($("#code-input").val())
+    if(!id)id = $("#code-input").val().toLowerCase();
-      id = $("#code-input").val().toLowerCase();
-    console.log("id="+id)
     $("#code-input").val("");
     start = false;
 
@@ -74,5 +70,5 @@ function control()
     socket.emit("id", [id, "channel", $("#search").val().toLowerCase()]);
     $("#search").val("");
   }
-  return false;
+
 }