Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Feb 2008
    Posts
    289
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Help with mobile view

    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)

    Code:
    <?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>

    -desktopview-jpg-mobilemod-view-jpg
    Attached Thumbnails Attached Thumbnails -mobileview2-png   -mobileview1-jpg  
    Last edited by chrisjchrisj; Jan 6th, 2019 at 02:01 AM.

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,910
    Thanks
    36
    Thanked 1,057 Times in 1,053 Posts
    Help us out chrisjchrisj, Please run your code and post the results. Why - you have PHP in the HTML that we can't work that with and what react(?) which we can't work with either. Running the code will give you and us a HTML document we can work with.

    PLUS: what you want is done in CSS and you did not include that. Please post both the HTML and the CSS.
    Thank you
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •