Desktop and mobile use the same search

server/public/assets/css/style.css

@@ -894,12 +894,6 @@ margin:-1px;
     background: rgba(255, 255, 255, 0.2) !important;
 }
 
-.room-namer::-webkit-input-placeholder{
-    /*color:rgb(155, 155, 155) !important;*/
-    -webkit-transition:opacity 0.5s;
-    color: rgb(255, 255, 255) !important;
-}
-
 .mega h5{
     color: rgb(255, 255, 255);   cursor: default;   display: inline;
     font-size: 50px;
@@ -965,17 +959,9 @@ margin:-1px;
     padding-left: 69px !important;
 }
 
-.mega ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+
-    opacity: 0.72;
+.label-for-mobile-frontpage {
-}
+    display: none;
-.mega :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-    opacity: 0.72;
-}
-.mega ::-moz-placeholder { /* Mozilla Firefox 19+ */
-    opacity: 0.72;
-}
-.mega :-ms-input-placeholder { /* Internet Explorer 10-11 */
-    opacity: 0.72;
 }
 
 .listen-button {
@@ -1138,21 +1124,31 @@ margin:-1px;
 }
 
 .room-namer.autocomplete{
-    margin-left: 3px !important;
+    /*margin-left: 72px !important;*/
     margin-top: -1px !important;
 }
 
+.channel-finder {
+    margin-bottom: 0px !important;
+}
+
 .channel-finder .input-field{
     display: flex;
-    /* width: 69%; */
+    margin-left: 0px !important;
+    width: max-content !important;
     justify-content: center;
+    padding:0;
+}
+
+.room-namer {
+    margin-left: 0px !important;
 }
 
 .channel-finder .input-field .prefix{
     color:white;
     font-size:17px;
     left: 5px;
-    top: -8px;
+    top: -9px;
 }
 
 .autocomplete-content li .highlight {
@@ -2320,6 +2316,12 @@ nav ul li:hover, nav ul li.active {
     cursor: pointer;
 }
 
+.room-namer::-webkit-input-placeholder{
+    /*color:rgb(155, 155, 155) !important;*/
+    -webkit-transition:opacity 0.5s;
+    color: lightgrey !important;
+}
+
 .hamburger-sidenav {
     width: 24px;
     height: 24px;
@@ -2723,11 +2725,83 @@ nav ul li:hover, nav ul li.active {
         padding-top: 0em;
     }
 
+    .label-for-mobile-frontpage {
+        display: initial;
+        width: auto !important;
+        margin-left: auto !important;
+    }
+
+    .mega {
+        background: white;
+        margin-top: 0px;
+    }
     #bar{
         background-color:rgba(0,0,0,1);
     }
 
-    .mega {display:none;}
+    .row .col.s12 {
+        width: 100% !important;
+    }
+
+    .channel-finder .input-field {
+        padding: 0 .75rem;
+    }
+
+    .mega form {
+        display: block;
+        width: auto;
+        margin-bottom: 0px;
+    }
+
+    .mega input {
+        color: black;
+        text-shadow: none;
+        margin-left: 0px !important;
+        padding-left: 0px !important;
+    }
+
+    .room-namer.autocomplete {
+        margin-left: 0px !important;
+        margin-top: auto !important;
+    }
+
+    #autocomplete-input {
+        width: 100%;
+        border-bottom: 1px solid #9e9e9e !important;
+    }
+
+    #autocomplete-input::-webkit-input-placeholder { /* WebKit browsers */
+        color:    #FFF;
+    }
+    #autocomplete-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+        color:    #FFF;
+        opacity:  1;
+    }
+    #autocomplete-input::-moz-placeholder { /* Mozilla Firefox 19+ */
+        color:    #FFF;
+        opacity:  1;
+    }
+    #autocomplete-input:-ms-input-placeholder { /* Internet Explorer 10+ */
+        color:    #FFF;
+    }
+
+    .room-namer::-webkit-input-placeholder{
+        /*color:rgb(155, 155, 155) !important;*/
+        -webkit-transition:opacity 0.5s;
+        color: transparent !important;
+    }
+
+    #mega-background, .mega h5, #snow, .pitch, .channel-finder .input-field .prefix, .listen-button {
+        display: none !important;
+    }
+
+    .channel-finder .input-field{
+        display: initial;
+        /* width: 69%; */
+        justify-content: center;
+    }
+
+    /*.mega {display:none;}*/
     .mobile-search{display:block;}
 
     .toast {

server/public/assets/js/frontpage.js

@@ -117,8 +117,8 @@ var Frontpage = {
             data[options_list[x]._id] = null;
         }
 
-        var to_autocomplete = "input.desktop-search";
+        var to_autocomplete = "input.autocomplete";
-        if(Helper.mobilecheck()) to_autocomplete = "input.mobile-search";
+        //if(Helper.mobilecheck()) to_autocomplete = "input.mobile-search";
 
         $(to_autocomplete).autocomplete({
             data: data,
@@ -183,9 +183,10 @@ var Frontpage = {
             setTimeout(function(){
                 if(frontpage){
                     $("#mega-background").css("background", "url(data:image/png;base64,"+Frontpage.blob_list[i]+")");
-                    $("#mega-background").css("background-size" , "200%");
+                    $("#mega-background").css("background-size" , "cover");
+                    $("#mega-background").css("background-repeat" , "no-repeat");
                     $("#mega-background").css("opacity", 1);
-                    $(".desktop-search").attr("placeholder", list[i]._id);
+                    $(".autocomplete").attr("placeholder", list[i]._id);
                     //$(".room-namer").css("opacity", 1);
                 }
             },500);
@@ -205,18 +206,20 @@ var Frontpage = {
                     success: function(data){
                         setTimeout(function(){
                             $("#mega-background").css("background", "url(/assets/images/thumbnails/"+data+")");
-                            $("#mega-background").css("background-size" , "200%");
+                            $("#mega-background").css("background-size" , "cover");
+                            $("#mega-background").css("background-repeat" , "no-repeat");
                             $("#mega-background").css("opacity", 1);
-                            $(".desktop-search").attr("placeholder", list[i]._id);
+                            $(".autocomplete").attr("placeholder", list[i]._id);
                         },500);
                     }
                 });
             };
             img.onload = function(){ // Loaded successfully
                 $("#mega-background").css("background", "url("+img.src+")");
-                $("#mega-background").css("background-size" , "200%");
+                $("#mega-background").css("background-size" , "cover");
+                $("#mega-background").css("background-repeat" , "no-repeat");
                 $("#mega-background").css("opacity", 1);
-                $(".desktop-search").attr("placeholder", list[i]._id);
+                $(".autocomplete").attr("placeholder", list[i]._id);
             };
 
         }
@@ -472,7 +475,7 @@ function initfp() {
     }
 
     if(Helper.mobilecheck()){
-        $('input#searchFrontpage').characterCounter();
+        $('input#autocomplete-input').characterCounter();
     }
 
     window['__onGCastApiAvailable'] = function(loaded, errorInfo) {

server/public/layouts/frontpage.handlebars

@@ -1,7 +1,7 @@
 <div id="main-container">
     {{> frontpage/header}}
-    {{> frontpage/search/desktop}}
+    {{> frontpage/search}}
-    {{> frontpage/search/mobile}}
+
     <div id="channel-load" class="progress">
         <div class="indeterminate" id="channel-load-move"></div>
     </div>

server/public/partials/frontpage/search.handlebars

@@ -1,15 +1,14 @@
 <div class="section mega">
     <div id="mega-background"></div>
     <h5>Create a radio channel, collaborate and listen</h5>
-    <form class="channel-finder">
+    <form class="channel-finder row">
-        <div class="input-field">
+        <div class="input-field col s12">
             <p class="prefix">zoff.me/</p>
             <input
-            class="room-namer autocomplete desktop-search"
+            class="room-namer autocomplete"
             type="text"
             id="autocomplete-input"
             name="chan"
-            placeholder="chill"
             title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
             autocomplete="off"
             autofocus
@@ -18,6 +17,7 @@
             spellcheck="false"
             maxlength="18"
             />
+            <label for="autocomplete-input" class="noselect label-for-mobile-frontpage">Find or create radio channel</label>
             <button class="listen-button btn waves-effect waves-light white-text col s2">Listen</button>
         </div>
     </form>

server/public/partials/frontpage/search/mobile.handlebars

@@ -1,19 +0,0 @@
-<div class="section mobile-search">
-    <form class="channel-finder-mobile row" id="base">
-        <div class="input-field col s12">
-            <input
-            class="autocomplete mobile-search"
-            type="text"
-            id="searchFrontpage"
-            name="chan"
-            title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
-            autocomplete="off"
-            required pattern="[a-zA-Z0-9]+"
-            spellcheck="false"
-            maxlength="18"
-            data-length="18"
-            />
-            <label for="searchFrontpage" class="noselect">Find or create radio channel</label>
-        </div>
-    </form>
-</div>