Помогите с мобильным просмотром

Видеоскрипт, который я использую, имеет функцию поиска по ключевым словам, а также отображает видео по категориям.

Мне помогли изменить функцию поиска, чтобы ключевые слова можно было искать в категориях, и это работает успешно.

Проблема, с которой я пытаюсь помочь, заключается в том, что мобильное представление модификации нуждается в улучшении.

Как вы можете видеть на изображении с именем DesktopView, в качестве справки оно показывает поле поиска и раскрывающийся список рядом при просмотре сайта на компьютере.

На изображении под названием mobileView1 показано, как в настоящее время выглядит поле поиска, где вы просто выбираете увеличительное стекло для поиска с помощью представления мобильного устройства.

Изображение с именем mobileView2. Вы можете увидеть, как выглядело поле поиска до изменения, после выбора увеличительного стекла, через представление мобильного устройства (оно отображает белую горизонтальную область с надписью «Поиск видео» внутри нее).

Изображение с именем mobileMod-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="{{название КОНФИГА}}"></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="[URL='https://lumtu.com/yti/dwccwdmdodHRwOi8vdzMub3JnLzIwMDAvDMw']http://www.w3.org/2000/svg[/URL]" 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="{{Режим языка}}">


<input type="checkbox" {{MODE}} id="toggle-mode">


<span class="slider round">






<svg fill="#009da0" height="24" viewBox="0 0 24 24" width="24" xmlns="[URL='https://lumtu.com/yti/dwccwdmdodHRwOi8vdzMub3JnLzIwMDAvDMw']http://www.w3.org/2000/svg[/URL]" 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="[URL='https://lumtu.com/yti/dwccwdmdodHRwOi8vdzMub3JnLzIwMDAvDMw']http://www.w3.org/2000/svg[/URL]" 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="[URL='https://lumtu.com/yti/dwccwdmdodHRwOi8vdzMub3JnLzIwMDAvDMw']http://www.w3.org/2000/svg[/URL]" 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="[URL='https://lumtu.com/yti/dwccwdmdodHRwOi8vdzMub3JnLzIwMDAvDMw']http://www.w3.org/2000/svg[/URL]" 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="[URL='https://lumtu.com/yti/dwccwdmdodHRwOi8vdzMub3JnLzIwMDAvDMw']http://www.w3.org/2000/svg[/URL]" 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="[URL='https://lumtu.com/yti/dwccwdmdodHRwOi8vdzMub3JnLzIwMDAvDMw']http://www.w3.org/2000/svg[/URL]" 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="[URL='https://lumtu.com/yti/dwccwdmdodHRwOi8vdzMub3JnLzIwMDAvDMw']http://www.w3.org/2000/svg[/URL]" 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>

HTML:

Ах, чушь, если когда-либо существовал список того, как НЕ следует создавать веб-сайт после крушения поезда, посмотрите сейчас дальше.



Вот подсказка: если платформа HTML/CSS использует JavaScript для отображения/скрытия поведения мобильных устройств или просит вас дважды написать одну и ту же область заголовка в разметке — один раз для мобильных устройств, один раз для настольных компьютеров — это 100. % неумело разработанной ерунды, созданной людьми, у которых НУЛЕВОЙ провальный бизнес, рассказывающими вам, как создать веб-сайт.





Бесконечный бессмысленный DIV просто так, бессмысленные теги NAV, написание одной и той же базовой вещи дважды, потому что «ура-дуррс, мы не знаем, как два CSS», разбитые на несуществующую сематнику — вряд ли это шок, вы, вероятно, тратите 11 КБ разметки, чтобы сделать 2 КБ. крутая работа! Если остальная часть вашей страницы так же заблокирована, я бы посоветовал выбросить ее в корзину и начать все сначала.

Особенно, когда даже такая простая вещь, как «Заполнитель FFS НЕ ЯВЛЯЕТСЯ ЭТИКЕТКОЙ», наносит ущерб удобству использования и доступности.

А еще было бы в миллиард раз проще, если бы у вас там не было этого дерьма в виде руля.

Используя современные методы - то есть все, что не старше 8 лет с точки зрения использования (злоупотреблений?) входных данных для обработки состояний переключения, и все, что новее 1997 года с точки зрения семантики, нет НИКАКОЙ законной причины для использования того, что вы опубликовали.

гораздо больше разметки, чем эта:

 


<input type="checkbox" id="toggle_nightDay"<?=


$logicForIfNightOrDay ? ' checked' : ''


?> class="toggle" hidden>


<!-- the above input should be right after <body> -->


<div id="top">


<h1><a href="/">TUBE</a></h1>


<label for="toggle_nightDay"></label>


<input type="checkbox" id="toggle_search" class="toggle" hidden>


<label for="toggle_search"></label>


<input type="checkbox" id="toggle_categoryMenu" class="toggle" hidden>


<label for="toggle_categoryMenu"></label>


<form action="{{LINK search }}" method="get" id="search">


<fieldset>


<input type="text" name="keyword" id="search_keyword" required>


<label for="search_keyword">{{SEARCH_KEYWORD}}</label>


<select name="category" id="search_category">


<?php


foreach ($categories as $key->categories} echo '


<option value=', $key, '"', (


(


array_key_exists('category_id', $_GET) &&


$_GET['category_id'] == $key


) ? ' selected' : ''


), '>', $category, '</option>';


?>


</select>


<label for="search_category">Category</label>


<input type="hidden" name="is_channel" value="true">


<button>Go</button>


</fieldset>


</form>


<ul id="categoryMenu">


<li<?=


$pt->page == 'home' ? ' class="current"': ''


?>><a href="{{LINK }}">{{LANG home}}</a></li>


<li<?=


$pt->page == 'latest' ? 'class="current" : ''


?>><a href="{{LINK videos/latest}}">{{LANG latest_videos}}</a></li>


<li<?=


($pt->page == 'top') ? 'class="current" : ''


?>><a href="{{LINK videos/top}}">{{LANG top_videos}}</a></li>


<li<?=


($pt->page == 'trending') ? 'class="current" : ''


?>><a href="{{LINK videos/trending}}">{{LANG trending}}</a></li>


<li class="dropdown<?=


$pt->page == 'category' ? 'class="current" : ''


?>>


<input type="checkbox" id="toggle_menuCategories" class="toggle">


<label for="toggle_menuCategories">{{LANG categories}}</label>


<ul>


<?php


foreach ($pt->categories as $key => $category) echo '


<li class="hide-from-mobile">


<a href="{{LINK videos/category/', $key, '">', $category, '</a>


</li>';


?>


</ul>


</li>


<?php


/* not sure what handlebar style crap you're using, might not work here */


if ($pt->config->article_system == 'on') echo '


<li', $pt->page == 'articles' ? ' class="current" : '', '>


<a href="{{LINK articles}}">{{LANG articles}}</a>


</li>';


?>


</ul>


<!-- #top --></div>

Код (разметка): почти шестая часть кода, который вы используете.

Вот насколько ошеломляюще глуп тот идиотский бред, в который тебя втянули. Следовательно, ваши проблемы лежат гораздо глубже, чем просто ваш «мобильный» внешний вид, и если бы вы принесли этот шаблон мне как клиенту, я бы посоветовал вам выбросить его в мусорное ведро и начать все сначала.

Без фреймворков, без статических изображений, внедренных в разметку, и С правильным отделением представления от контента, использованием семантики и позволяя CSS выполнять тяжелую работу по мобильному поведению.