The video script that I’m using has a keyword search function and also displays videos by category.
I got help with modifying the search function so that keywords can be searched within categories, which works successfully.
The problem I’m trying to get help with is that the modification’s mobile view needs improvement.
As you can see in the image named desktopView, just as a reference, it shows the search field and the drop-down side by side, when viewing the site by pc.
In the image named mobileView1, it shows how the search field currently looks, where you simply select the magnifying glass to search, via a mobile device view.
The image named mobileView2, you can see what the search field looked like prior to the modification, after selecting the magnifying glass, via a mobile device view (it displays a white horizontal area with “Search for videos” inside of it).
The image named mobileMod-View shows currently what the mobile view looks like - after selecting the magnifying glass. It shows another magnifying glass (which I’d like to get help to remove) which might help move the “Search for videos” up. But I’d also like help with moving the drop-down horizontal (with the word “All” in it) to be above the video thumbnail (or side by side with the horizontal search field).
Here is the code below. I look forward to any help (without affecting the pc view)
<?php
$categories[0] = 'All';
foreach($pt->categories as $key => $category){
$categories[$key] = $category;
}
?>
<nav class="navbar navbar-findcond navbar-fixed-top header-layout">
<div class="container <?php echo ($pt->page == 'watch') ? 'watch-container' : '';?>">
<div class="navbar-header pull-left">
<a class="navbar-brand logo-img" href="{{LINK }}" itemprop="url"><img itemprop="logo" src="{{CONFIG theme_url}}/img/<?php echo ($pt->mode != 'night') ? 'logo' : 'logo-light';?>.png" alt="{{CONFIG title}}"></a>
<form class="navbar-form navbar-left search-header" role="search" action="{{LINK search}}" method="GET" id="search-form">
<div class="form-group">
<input type="text" class="form-control" id="search-bar" name="keyword" placeholder="{{LANG search_keyword}}" autocomplete="off" value="{{SEARCH_KEYWORD}}">
<select class="form-control" name="category_id" id="category_id">
<?php foreach($categories as $key => $category) { ?>
<option value="<?php echo $key; ?>" <?php echo ($_GET['category_id'] == $key ? 'selected' :' ')?> ><?php echo $category ;?> </option>
<?php }?>
</select>
<?php
if (!empty($_GET['is_channel'])) {
?>
<input type="hidden" name="is_channel" value="true">
<?php } ?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search" onclick="javascript:$('.search-header input').focus();"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</div>
<div class="search-dropdown hidden"></div>
</form>
</div>
<div class="pull-right">
<ul class="nav navbar-nav navbar-right">
<?php if ($pt->config->night_mode == 'both' || $pt->config->night_mode == 'night_default'): ?>
<li class="toggle-mode hidden-xs pull-left top-header">
<label class="switch" data-toggle="tooltip" data-placement="bottom" title="{{LANG mode}}">
<input type="checkbox" {{MODE}} id="toggle-mode">
<span class="slider round">
<svg fill="#009da0" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" class="feather feather-bulb"><path d="M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z" /></svg>
</span>
</label>
</li>
<?php endif; ?>
<li class="show-in-mobile pull-left top-header">
<a href="#" class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> </a>
</li>
<?php if (IS_LOGGED): ?>
<li class="hide-from-mobile pull-left top-header">
<a href="{{LINK messages}}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
<span id="new-messages"></span>
</a>
</li>
<li class="hide-from-mobile dropdown pull-left top-header">
<a href="javascript:void(0);" id="get-notifications" class=" dropdown-toggle" data-toggle="dropdown">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"></path></svg>
<span id="new-notifications"></span>
</a>
<ul class="dropdown-menu notfi-dropdown" id="notifications">
<li>
<h5>
<b id="all-notifications"></b> {{LANG notifications}}
<i class="fa fa-circle-o-notch spin hidden"></i>
</h5>
</li>
<li>
<ul id="notifications-list"></ul>
</li>
</ul>
</li>
<?php endif; ?>
{{SIDE_HEADER}}
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-findcond navbar-fixed-top header-layout hidden search-bar" style="margin-top: 49px;">
<div class="container <?php echo ($pt->page == 'watch') ? 'watch-container' : '';?>">
<div class="navbar-header">
<form class="search-header-mobile" role="search" action="{{LINK search}}" method="GET" id="search-form">
<div class="form-group">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search" onclick="javascript:$('.search-header input').focus();"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg><input type="text" class="form-control" id="search-bar-mobile" name="keyword" placeholder="{{LANG search_keyword}}" autocomplete="off" value="{{SEARCH_KEYWORD}}">
<select class="form-control" name="category_id" id="category_id">
<?php foreach($categories as $key => $category) { ?>
<option value="<?php echo $key; ?>" <?php echo ($_GET['category_id'] == $key ? 'selected' :' ')?> ><?php echo $category ;?> </option>
<?php }?>
</select>
<?php
if (!empty($_GET['is_channel'])) {
?>
<input type="hidden" name="is_channel" value="true">
<?php } ?>
</div>
<div class="search-dropdown hidden"></div>
</form>
</div>
</div>
</nav>
<?php if ($pt->page != 'login') { ?>
<nav class="navbar navbar-findcond navbar-default second-header-layout">
<div class="container <?php echo ($pt->page == 'watch') ? 'watch-container' : '';?>">
<div class="navbar-inner" id="navbar">
<ul class="nav navbar-nav">
<li class="hide-from-mobile <?php echo ($pt->page == 'home') ? 'active': '';?>">
<a href="{{LINK }}"> {{LANG home}}</a>
</li>
<li class="hide-from-mobile <?php echo ($pt->page == 'latest') ? 'active': '';?>">
<a href="{{LINK videos/latest}}">{{LANG latest_videos}}</a>
</li>
<li class="hide-from-mobile <?php echo ($pt->page == 'top') ? 'active': '';?>">
<a href="{{LINK videos/top}}">{{LANG top_videos}}</a>
</li>
<li class="hide-from-mobile <?php echo ($pt->page == 'trending') ? 'active': '';?>">
<a href="{{LINK videos/trending}}">{{LANG trending}}</a>
</li>
<li class="dropdown hide-from-mobile <?php echo ($pt->page == 'category') ? 'active': '';?>">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{LANG categories}} <span class="caret"></span></a>
<ul class="dropdown-menu categories-drop-down" role="menu">
<?php foreach($pt->categories as $key => $category) {
if (1) { ?>
<li class="hide-from-mobile">
<a class="category" href="{{LINK videos/category/<?php echo $key?>}}"><?php echo $category?></a>
</li>
<?php } }?>
</ul>
</li>
<?php if ($pt->config->article_system == 'on'): ?>
<li class="hide-from-mobile <?php echo ($pt->page == 'articles') ? 'active': '';?>">
<a href="{{LINK articles}}">{{LANG articles}}</a>
</li>
<?php endif ?>
</ul>
<ul class="nav navbar-nav pull-right">
<?php if ($pt->config->upload_system == 'on') { ?>
<li class="hide-from-mobile">
<a href="{{LINK upload-video}}" class="btn upload-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
<span class="hide-in-mobile">{{LANG upload}}</span>
</a>
</li>
<?php } ?>
<?php if ($pt->config->import_system == 'on') { ?>
<li class="hide-from-mobile">
<a href="{{LINK import-video}}" class="btn import-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download-cloud"><polyline points="8 17 12 21 16 17"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"></path></svg>
<span class="hide-in-mobile">{{LANG import}}</span>
</a>
</li>
<?php } ?>
</ul>
</div>
</div>
</nav>
<?php } ?>
<?php if (IS_LOGGED): ?>
<script>
jQuery(document).ready(function($) {
pt_get_notifications({type:'new'});
$("#get-notifications").click(function(event) {
if ($('#notifications').css('display') == 'none') {
var notfi_cont = $("ul.notfi-dropdown");
if ($("span#new-notifications").html() != '') {
$(this).find('span#new-notifications').empty();
}
pt_get_notifications({sa:1});
}
});
setInterval(function(){
pt_get_notifications({type:'new'});
}, 6000);
});
function pt_get_notifications(args){
if (!args) {
args = {};
}
var notfi_cont = $("ul.notfi-dropdown");
var notfi_set = $("ul#notifications");
defparams = {
type: false,
sa:false
}
options = Object.assign(defparams,args);
data = {'hash':$('.main_session').val()};
if (options['type']) {
data['t'] = options['type'];
}
if (options['sa']) {
data['sa'] = options['sa'];
notfi_set.find('i.spin').removeClass('hidden');
}
$.ajax({
url: '{{LINK aj/get_notifications}}',
type: 'GET',
dataType: 'json',
data:data
})
.done(function(data) {
if (data.status == 200) {
if (data.new) {
$("span#new-notifications").html($('<b>',{
text:data.new
}));
}
else{
notfi_set.find('b').text(data.len);
notfi_set.find('ul').html(data.html);
}
}
else if(data.status == 304 && options['sa']){
notfi_set.find('ul').html($("<li>",{
class:'no-notifications',
text: "{{LANG no_notifications}}"
}));
}
if (data.count_messages > 0) {
$('#new-messages').html('<b>' + data.count_messages + '</b>');
} else {
$('#new-messages').html('');
}
if (options['sa']) {notfi_set.find('i.spin').addClass('hidden');}
})
.fail(function() {
console.log("error");
});
}
</script>
<?php endif ?>
<script>
$('.search-icon').on('click', function(event) {
event.preventDefault();
$('.search-bar').toggleClass('hidden');
});
$('#search-bar').keyup(function(event) {
var search_value = $(this).val();
var search_dropdown = $('.search-dropdown');
if (search_value == '') {
search_dropdown.addClass('hidden');
search_dropdown.empty();
return false;
} else {
search_dropdown.removeClass('hidden');
}
$.post('{{LINK aj/search}}', {search_value: search_value}, function(data, textStatus, xhr) {
if (data.status == 200) {
search_dropdown.html(data.html);
} else {
search_dropdown.addClass('hidden');
search_dropdown.empty();
return false;
}
});
});
$('#category_id').change(function(){
$('#search-form').submit();
});
</script>
