Можно ли обойтись без дублирования управляющих элементо в js+bootstrap?

Question

[Хайбулла Мусаев]

Делаю небольшой проект для единоверцев - https://clck.ru/9rfbv (линк убрал, чтобы поисковики не слопали домен, там пока только 1 молитва, в прогрессе - около 200)

Использую стандартный bootstrap3-шаблон, Web Audio API и нативный js.
Опыта в этом деле почти нет, поэтому вопрос из серии "как делают бородатые дядьки".

Справа у меня элементы управления плеером - выбор языка, размера шрифта, скорости и громкости звука и главный момент - зацикливание. Все эти компоненты вполне себе смотрятся на всех разрешениях, кроме мобильных (col-xs).

Встал вопрос - куда деть меню, которое мешает читать текст на мобильниках? Кстати, буду благодарен за совет.
Пока решение такое - скрывать весь блок при разрешении col-xs (что и происходит), а другое меню вывести одной строчкой между пунктиром под словом плеер и началом текста. Там, конечно же, элементы управления будут новыми, они будут дублировать функциональность.

Возникает несколько вопросов:
1) Насколько считается нормальной практика дублирования элементов управления?..
2) Если подобная практика считается крайне неприемлемой - то какое решение можно было бы предпринять в моем случае?..
3) Одним из вариантов я вижу не дублирование нового блока, а сокрытие старого блока и раскрытие оного по нажатию на иконку "настройки" или модный ныне "гамбургер". Сам по себе этот вариант видится мне достаточно элегантным, только насколько можно подобное реализовать в рамках bootstrap-шаблона?.. Насколько я знаю, у бутстрапа гамбургер стандартно применим к меню и то рыскрывает его специфически - элементы просто вертикально располагаются...

Как бы Вы реализовали изменение страницы при переходе на мобильную версию?..
Куда бы убрали блок управления плеером?..
Стали бы дублировать элементы управления или применили бы более качественное решение?..

Answer 1

[Глеб Кемарский]

UPD: Дублировать управление - удваивать вероятность ошибки и усложнять сопровождение. Если есть другой путь, то лучше не множить сущности. Например, адаптивный сайт на разных экранах показывает один и тот HTML-код, меняя только стили из CSS.

Перемещать управление можно штатными средствами бутстрапа. Скрывать и открывать настройки - тоже. Например, если сделать

<div class="container">
  <h2>Плеер</h2>
  <div class="row">
    <div class="col-sm-3 col-sm-push-9">управление</div>
    <div class="col-sm-9 col-sm-pull-3">аудиозаписи</div>
  </div>
</div>

то на экранах шире 768px управление будет справа от аудиозаписей, а на экранах уже 768px - между заголовком и аудиозаписями.

Это решает задачу? Что ещё надо учесть?

Comments

[Хайбулла Мусаев]

Фактически, я так и сделал. Спасибо.