Адаптивный дизайн vamshop1

[gsplanet 0]

Здравствуйте.

Вопросы по теме: Адаптивный дизайн в шаблоне vamshop1 .

1. Как сделать что бы при уменьшении экрана, картинки (логотип например) и другие элементы расположенные в header исчезали, а не становились меньше.

2. По умолчанию, на маленьком экране наверху в итоге оказывается блок с основным контентом, а очень хотелось бы, что бы это был бокс с  разделами.

Если в основном блоке есть даже небольшой текст и блок с новинками, то что бы добраться до бокса Разделы и Статьи и т.д. нужно очень много прокрутки и не у каждого хватит терпения что бы добраться до бокса Разделы.

3. Можно ли в горизонтальном меню  вставлять текст или картинку между домиком и тремя полосками. 

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

Спс.

 

 

 

 

[support 447]

1. В /templates/vamshop1/index.html добавить в шапку стили hidden-phone и hidden-tablet

заменить:

<div id="header">

на:

<div id="header" class="hidden-phone hidden-tablet">

Вот документация по bootstrap 2.3 - http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

2. Не советую так делать. Контент всегда на первом месте должен быть. А для навигации специально сделана оранжевая полоска и иконка-гамбургер.

Нажимаете её и появляется навигация по разделам.

В VamShop 1.83 чуть улучшена будет навигация, выезжать слева будет, а не вниз. Можно посмотреть как будет на http://demo.vamshop.ru

Хотя, принципе, не сложно поменять конечно шаблон, колонки местами, т.е. просто поменять левую и правую колонки в /templates/vamshop1/index.html и удалить стили pull-right и pull-left

Но выглядеть это будет плохо.

Потому что не будет видно основное содежимое магазина, придётся долго вниз листать.

А это плохо для магазина, основной контент должен быть на первом месте.

Вот так меняется порядок колонок в /templates/vamshop1/index.html

		<!-- start: Sidebar -->
		<aside class="span3 sidebar">
         {$box_SEARCH}			
			{$box_CART}
			{$box_DOWNLOADS}
			{$box_CATEGORIES}
			{$box_FILTERS}
			{$box_CONTENT}
			{$box_INFORMATION}
			{$box_LOGIN}
			{$box_ADMIN}
			{$box_ADD_QUICKIE}
			{$box_LAST_VIEWED}
			{$box_REVIEWS}
			{$box_SPECIALS}
			{$box_FEATURED}
			{$box_LATESTNEWS}
			{$box_ARTICLES}
			{$box_ARTICLESNEW}
			{$box_AUTHORS}
			{$box_AFFILIATE}
			{$box_WHATSNEW}
			{$box_NEWSLETTER}
			{$box_BESTSELLERS}
			{$box_INFOBOX}
			{$box_CURRENCIES}
			{$box_LANGUAGES}
			{$box_MANUFACTURERS}
			{$box_MANUFACTURERS_INFO}
			{$box_FAQ}

		</aside>
		<!-- end: Sidebar -->

			<!-- start: Page section -->
			<div class="span9 page-sidebar">
	
			{$main_content}

			</div>
			<!-- end: Page section -->

3. Можно вместо домика написать текст.

Меняйте в html файлах в /templates/vamshop1/

<i class="fa fa-home"></i>

на:

{$smarty.const.STORE_NAME}

Либо вместо текста можно картинку вставить.

Но учтите, что этот текст занимает место в полоске навигации, на десктопе может не хватить места для всего, что выводится в полоску, наверняка придётся что-то убирать из полоски, что б название магазина или логотип влезли вместо домика, а домик специально был вставлен, т.к. занимает мало места.

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

Собственно, магазин на смартфоне так и выглядит.

[gsplanet 0]

Буду пробовать. Спс

[support 447]

Не за что

[SERG25 0]

Как можно свернуть меню в мобильном виде? Если его вызвать не делая скроллинг вниз, то кнопка остается, свернуть можно нормально. Но если скроллить вниз и потом вызвать - убрать очень сложно.

[support 447]

12 минуты назад, SERG25 сказал:

Как можно свернуть меню в мобильном виде? Если его вызвать не делая скроллинг вниз, то кнопка остается, свернуть можно нормально. Но если скроллить вниз и потом вызвать - убрать очень сложно.

Полоска с домом и иконкой-гамбургером по умолчанию ведь прилеплена сверху и она всегда на виду.

Иконка-гамбургер и скрывает меню.

Во всяком случае в демке http://demo.vamshop.ru именно так.

[SERG25 0]

11 минуту назад, VaM сказал:

Полоска с домом и иконкой-гамбургером по умолчанию ведь прилеплена сверху и она всегда на виду.

Иконка-гамбургер и скрывает меню.

Во всяком случае в демке http://demo.vamshop.ru именно так.

Похоже, что не на всех браузерах отображается корректно. На демке на компе из ИЕ, Эдж, Хром и Опера, только на опере полоска была прилеплена после нажатия на гамбургер. На остальных она исчезала. На телефоне на хроме так же исчезает, и свернуть ее не получается.

[support 447]

Так а какое разрешение экрана ставите?!

Если 320x240, то понятное дело, что меню перекроет всё.

Но таких экранов уже нет считай нигде.

Если уж совсем маленькое разрешение и иконки-гамбургера не видно, тогда только в выплывшем меню нажимать какую-то ссылку.

[SERG25 0]

2 минуты назад, VaM сказал:

Так а какое разрешение экрана ставите?!

Если 320x240, то понятное дело, что меню перекроет всё.

Но таких экранов уже нет считай нигде.

Если уж совсем маленькое разрешение и иконки-гамбургера не видно, тогда только в выплывшем меню нажимать какую-то ссылку.

Да, точно, на компе перестарался, все корректно. Но на телефоне перекрывает полностью (см скрин), разрешение 720, пробовал на двух разных.

[support 447]

6 минут назад, SERG25 сказал:

Да, точно, на компе перестарался, все корректно. Но на телефоне перекрывает полностью (см скрин), разрешение 720, пробовал на двух разных.

Само выплывающее меню тожн сильно по ширине не уменьшить ведь, тогда вообще ничего влазить не будет.

Попробуйте в /templates/vamshop1/jpushmenu.css поменять:

  .cbp-spmenu-vertical {
    width: 360px;

например на:

  .cbp-spmenu-vertical {
    width: 300px;

 

 

Но тогда наверное корзина целиком не поместится.

[SERG25 0]

О, теперь гамбургер видно, может лучше сделать ширину меню в процентах от экрана (по статистике 720 и меньше у меня 22% на сайте)? Корзина в принципе нормально отображается, не подскажите где ее ширина меняется?

[support 447]

Попробуйте вместо 300px указать в процентах.

Но есть мнение, что так делать нельзя.

Либо надо на разное разрешение разный размер в процентах указывать.

 

Всё в стилях.

В /templates/vamshop1/stylesheet.css

[SERG25 0]

12 минуты назад, VaM сказал:

Попробуйте вместо 300px указать в процентах.

Но есть мнение, что так делать нельзя.

Либо надо на разное разрешение разный размер в процентах указывать.

 

Всё в стилях.

В /templates/vamshop1/stylesheet.css

Спасибо, все нашел, настроил как мне надо.

[support 447]

Не за что