Шаблон "Alpha"
Случайно образовалось немного свободного времени провести которое решил с пользой и сделать еще один шаблон. В итоге получилось что-то среднее между прошлыми моими шаблонами «Jupiter» и «Inka». Чего-то нового, к сожалению, не придумывалось, поэтому решил просто взять лучшее от обоих и заверстать все это на текущей версии «Developer-Kit».
1. Шапка. Она большая и настраиваемая. Можно выводить просто название сайта с его описанием, можно включить режим превью для топиков и тогда, если у топика имеется превьюшка, то на его странице она будет выведена в шапке, ну и можно включить фоновое изображение в шапке для всех страниц, кроме страниц с превью. Главная навигационная панель в зависимости от шапки меняется. Там же, в шапке, выводится и список блогов, которые задаются самостоятельно.
2. Сайдбар для мелких размеров экранов вынесен вправо, и теперь он не убирается вниз, а выезжает с правой стороны при нажатии стрелки в меню.
3. Список блогов в шапке тоже доработан — он сделан сворачиваемым для небольших экранов.
4. Ну и, конечно же, в шаблоне присутствуют все возможности текущей версии «Developer-Kit». Т.е. в наличии куча настраиваемых лент топиков, изменение вариантов вывода оформления страницы и адаптивность. Да, доработаны миниатюры топиков: теперь, если у топика нет превью, вместо него на фоновых изображениях выводится название и аватар блога (аватар пользователя, если блог персональный).
В целом настроек у шаблона получилось столько, что на выходе можно получить уйму различных видов отображения и найти что-то подходящее под свои нужды. На демке все это отображать не стал, показал только основные моменты. Все что можно делать с лентами топиков можно посмотреть на демке "Developer-Kit".
Теперь о ньюансах. На сегодняшний день мне известно их два и о них я обязан вас предупредить.
Первый: на страницах без контента (пример) при просмотре сайта с небольшого экрана, при разворачивании сайдбара, появляется второй скрол. Не совсем красиво, но, к сожалению, так и не смог победить. Единственное решение — скрывать какие-либо блоки для таких размеров и увеличивать высоту сайта (дополнительные блоки в подвале, например).
Проверено: на Андроиде со скролами все хорошо.
Второй: при использовании шапки с фоновым изображением на мелких дисплеях при разворачивании меню блогов увеличивается фоновое изображение. Тут тоже не получилось сделать что-то более красивое.
Возможно, со временем, я придумаю как решить эти косяки, но имейте ввиду, что они есть.
В планах на ближайшее время — адаптация плагинов необходимых для завершения общей картины. Это такие плагины как: Main Preview, Journal Page, Similar topics, ну и, скорее всего, ТОР топиков. При наличии времени возможно добавлю еще и темку-другую в шаблон.
Демо шаблона.
Описание установки читайте в файле README.md или на соответствующей вкладке на странице шаблона в каталоге. Дополнительные вопросы можно задавать здесь, в блоге.
Внимание! Для корректной работы плагинов с шаблоном их необходимо адаптировать под шаблон.
Итак, что мы имеем в итоге:
1. Шапка. Она большая и настраиваемая. Можно выводить просто название сайта с его описанием, можно включить режим превью для топиков и тогда, если у топика имеется превьюшка, то на его странице она будет выведена в шапке, ну и можно включить фоновое изображение в шапке для всех страниц, кроме страниц с превью. Главная навигационная панель в зависимости от шапки меняется. Там же, в шапке, выводится и список блогов, которые задаются самостоятельно.
2. Сайдбар для мелких размеров экранов вынесен вправо, и теперь он не убирается вниз, а выезжает с правой стороны при нажатии стрелки в меню.
3. Список блогов в шапке тоже доработан — он сделан сворачиваемым для небольших экранов.
4. Ну и, конечно же, в шаблоне присутствуют все возможности текущей версии «Developer-Kit». Т.е. в наличии куча настраиваемых лент топиков, изменение вариантов вывода оформления страницы и адаптивность. Да, доработаны миниатюры топиков: теперь, если у топика нет превью, вместо него на фоновых изображениях выводится название и аватар блога (аватар пользователя, если блог персональный).
В целом настроек у шаблона получилось столько, что на выходе можно получить уйму различных видов отображения и найти что-то подходящее под свои нужды. На демке все это отображать не стал, показал только основные моменты. Все что можно делать с лентами топиков можно посмотреть на демке "Developer-Kit".
Теперь о ньюансах. На сегодняшний день мне известно их два и о них я обязан вас предупредить.
Первый: на страницах без контента (пример) при просмотре сайта с небольшого экрана, при разворачивании сайдбара, появляется второй скрол. Не совсем красиво, но, к сожалению, так и не смог победить. Единственное решение — скрывать какие-либо блоки для таких размеров и увеличивать высоту сайта (дополнительные блоки в подвале, например).
Проверено: на Андроиде со скролами все хорошо.
Второй: при использовании шапки с фоновым изображением на мелких дисплеях при разворачивании меню блогов увеличивается фоновое изображение. Тут тоже не получилось сделать что-то более красивое.
Возможно, со временем, я придумаю как решить эти косяки, но имейте ввиду, что они есть.
В планах на ближайшее время — адаптация плагинов необходимых для завершения общей картины. Это такие плагины как: Main Preview, Journal Page, Similar topics, ну и, скорее всего, ТОР топиков. При наличии времени возможно добавлю еще и темку-другую в шаблон.
Демо шаблона.
Описание установки читайте в файле README.md или на соответствующей вкладке на странице шаблона в каталоге. Дополнительные вопросы можно задавать здесь, в блоге.
Внимание! Для корректной работы плагинов с шаблоном их необходимо адаптировать под шаблон.
23 комментария
1. Меню «Еще» ведет на /blogs. Лучше там выпадашку сделать наверно. Или есть в коробке?
2. На мой взгляд линии под заголовками напоминают прогрессбары, в заблуждение как-то вводит этот элемент что ли.
3. Кнопочки голосования в мобильной версии маленькие, можно легко промахнуться.
1. Выпадашки нету, прикрутить — работа пары минут, но вопрос, что в нее пихать: все блоги не засунеш, их у кого-то может быть очень много, да и в менюшке они вручную прописываются, не все — тогда вопрос сколько. Решил, что такой вариант самый оптимальный.
2. Хз, может фломастеры? Мне показалось, что так лучше: просто серое подчеркивание, как-то слишком блекло, красным все — за слишком. Если поддержит большинство — уберу, если кому-то персонально надо — подскажу где убрать.
3. Ок, покручу, посмотрю стоит ли увеличивать.
2. Идея классная, правится на раз два. Мелочи конечно.
Не поделитесь решением свитчера лент топиков?
— убрать свойство right у #page-wrapper .active
— при «выезде» сайдбара просто затемнить #page-wrapper
— при клике на #page-wrapper убрать сайдбар
Искал ссылку, где я это видел, но так и не вспомнил…
2. Будет в обновлении вместе с адаптациями плагинов.
3. Не силен в js, но если получится, сделаю.
Немного недопонял сразу о чем речь, а когда править начал дошло что предлагаете: сделать чтобы не вся страница уезжала влево, а только сайдбар выезжал над ней, как в Адроиде, верно? Можно и так, покручу, посмотрю что будет лучше, там тоже пара нюансов есть.
Journal Page прикручивайте уже с превьюшками сразу для всех новостей
Согласен, вызывает недоумение :)
Да, обязательно, только вот на нем застрял немного: неделю уже кручу, и раскладки такой чтоб нравилась добиться не могу, кучу перепробовал, но что-то все не то. :)
Вывод блоков, кстати, на главной Journal Page нужен всем? Или может быть без них?