KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Desktop and mobile use the same search

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2017-11-14 14:48:52 +01:00
parent 8219c25e42
commit fdfe832ef9
5 changed files with 113 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
server/public/assets/css/style.css
View File

@@ -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;
}
.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;
.label-for-mobile-frontpage {
display: none;
}
.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 {

21
server/public/assets/js/frontpage.js
View File

@@ -117,8 +117,8 @@ var Frontpage = {
data[options_list[x]._id] = null;
}
var to_autocomplete = "input.desktop-search";
if(Helper.mobilecheck()) to_autocomplete = "input.mobile-search";
var to_autocomplete = "input.autocomplete";
//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) {

4
server/public/layouts/frontpage.handlebars
View File

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

8
server/public/partials/frontpage/search/desktop.handlebars → server/public/partials/frontpage/search.handlebars
View File

@@ -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">
<div class="input-field">
<form class="channel-finder row">
<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>

19
server/public/partials/frontpage/search/mobile.handlebars
View File

@@ -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>