Перейти к содержимому


Поставить По Центру Фото Товаров В 1 И 2 Режиме Отображения Товаров


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 32

#21 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 21 Май 2015 - 02:40

1. Лупа сейчас у всех режимов стоит на фото, актуален ли вопрос? Также:
.tovars-block .zoom {
  right: 17px;
}
замените на:
.goods-table .zoom {
  right: 17px;
}
чтобы лупа двигалась только в первом режиме просмотра товаров.

2.В main.css найдите:
.table_mini figure .goodsListImg {
  height: auto;
  position: relative;
  width: 10%;
}
замените на:
.table_mini figure .goodsListImg {
  height: auto;
  min-width: 90px;
  position: relative;
  width: 10%;
}

далее найдите:
.table_mini figure .goodsListContent {
  float: right;
  margin-top: -5px;
  padding-left: 5px;
  width: 90%;
}
замените на:
.table_mini figure .goodsListContent {
  float: right;
  margin-top: -5px;
  padding-left: 5px;
  width: 89%;
}

далее в main.css найдите:
@media screen and (max-width: 980px) {
	.sectionblock-container {
		width: 84%;
	}
замените на:
@media screen and (max-width: 1100px) {
	.table_mini figure .goodsListContent {
	 width: 89%;
	}
}
@media screen and (max-width: 980px) {
	.sectionblock-container {
		width: 84%;
	}
.table_mini figure .goodsListContent {
	 width: 87%;
	}


далее найдите:
@media screen and (max-width: 320px) {
	.listCart.show {
		margin-top:0px;
	}
}

замените на:
@media screen and (max-width: 320px) {
	.listCart.show {
		margin-top:0px;
	}
.table_mini figure .goodsListContent {
  width: 69%;
}
}
также напомните пожалуйста с какого разрешения блок с кнопками должен опускаться под описание товара?


3-5. В шаблоне Поиск, все же советую переделать шаблон со структурой как в товарах, тем более, что у них одинаковые переменные.
В данном шаблоне найдите:
{% IF GOODS_VIEW_TYPE=2 %}
												<li><a href="?q={SEARCH_QUERY | urlencode}&amp;goods_view_type=2" class="btn table current"></a></li>
												<li><a href="?q={SEARCH_QUERY | urlencode}&amp;goods_view_type=1" class="btn list "></a></li>
											{% ELSE %}
												<li><a href="?q={SEARCH_QUERY | urlencode}&amp;goods_view_type=2" class="btn table "></a></li>
												<li><a href="?q={SEARCH_QUERY | urlencode}&amp;goods_view_type=1" class="btn list current"></a></li>
											{% ENDIF %}
замените на:
{% IF GOODS_VIEW_TYPE=1 %}
											   <li><a href="?q={SEARCH_QUERY | urlencode}&amp;goods_view_type=2" class="btn table "></a></li>
												<li><a href="?q={SEARCH_QUERY | urlencode}&amp;goods_view_type=1" class="btn list current"></a></li>
											{% ELSE %}
			<li><a href="?q={SEARCH_QUERY | urlencode}&amp;goods_view_type=2" class="btn table current"></a></li>
												<li><a href="?q={SEARCH_QUERY | urlencode}&amp;goods_view_type=1" class="btn list "></a></li>
											{% ENDIF %}

если переделывать под шаблон Товары результаты поиска не будите, тогда в шаблоне Поиск найдите:
<div class="tovars-block">
замените на:
<div class="tovars-block search_item">
далее в main.css найдите:
.goods-table .goodsTableImg > a img {
  display: table-cell;
  height: 245px;
  width: 100%;
}

после него расположите:
.search_item .goods-table .goodsTableImg > a img {
  width: auto;
}

найдите:
.goodsListContent {
  display: inline-block;
  float: right;
  height: 100%;
  width: 70%;
}

после него вставьте:
.search_item .goodsListImg {
  width: 22%;
}
.search_item .goodsListContent {
  width: 77%;
}

после:
@media screen and (max-width: 768px) {

вставьте:
.goods-list .goodsListImgBlcok {
  width: auto;
}
.goods-list .goodsListImgBlcok > a img {
  width: 100%;
}


#22 Andrew S.

Andrew S.

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 21 Май 2015 - 03:22

Просмотр сообщенияVaccina (21 Май 2015 - 02:40) писал:

1. Лупа сейчас у всех режимов стоит на фото, актуален ли вопрос? Также:
.tovars-block .zoom {
right: 17px;
}
замените на:
.goods-table .zoom {
right: 17px;
}
чтобы лупа двигалась только в первом режиме просмотра товаров.

2.В main.css найдите:
.table_mini figure .goodsListImg {
height: auto;
position: relative;
width: 10%;
}
замените на:
.table_mini figure .goodsListImg {
height: auto;
min-width: 90px;
position: relative;
width: 10%;
}

далее найдите:
.table_mini figure .goodsListContent {
float: right;
margin-top: -5px;
padding-left: 5px;
width: 90%;
}
замените на:
.table_mini figure .goodsListContent {
float: right;
margin-top: -5px;
padding-left: 5px;
width: 89%;
}

далее в main.css найдите:
@media screen and (max-width: 980px) {
.sectionblock-container {
	 width: 84%;
}
замените на:
@media screen and (max-width: 1100px) {
.table_mini figure .goodsListContent {
	 width: 89%;
}
}
@media screen and (max-width: 980px) {
.sectionblock-container {
	 width: 84%;
}
.table_mini figure .goodsListContent {
	 width: 87%;
}


далее найдите:
@media screen and (max-width: 320px) {
.listCart.show {
	 margin-top:0px;
}
}

замените на:
@media screen and (max-width: 320px) {
.listCart.show {
	 margin-top:0px;
}
.table_mini figure .goodsListContent {
width: 69%;
}
}
также напомните пожалуйста с какого разрешения блок с кнопками должен опускаться под описание товара?


3-5. В шаблоне Поиск, все же советую переделать шаблон со структурой как в товарах, тем более, что у них одинаковые переменные.
В данном шаблоне найдите:
{% IF GOODS_VIEW_TYPE=2 %}
											 <li><a href="?q={SEARCH_QUERY | urlencode}&amp;goods_view_type=2" class="btn table current"></a></li>
											 <li><a href="?q={SEARCH_QUERY | urlencode}&amp;goods_view_type=1" class="btn list "></a></li>
										 {% ELSE %}
											 <li><a href="?q={SEARCH_QUERY | urlencode}&amp;goods_view_type=2" class="btn table "></a></li>
											 <li><a href="?q={SEARCH_QUERY | urlencode}&amp;goods_view_type=1" class="btn list current"></a></li>
										 {% ENDIF %}
замените на:
{% IF GOODS_VIEW_TYPE=1 %}
											 <li><a href="?q={SEARCH_QUERY | urlencode}&amp;goods_view_type=2" class="btn table "></a></li>
											 <li><a href="?q={SEARCH_QUERY | urlencode}&amp;goods_view_type=1" class="btn list current"></a></li>
										 {% ELSE %}
		 <li><a href="?q={SEARCH_QUERY | urlencode}&amp;goods_view_type=2" class="btn table current"></a></li>
											 <li><a href="?q={SEARCH_QUERY | urlencode}&amp;goods_view_type=1" class="btn list "></a></li>
										 {% ENDIF %}

если переделывать под шаблон Товары результаты поиска не будите, тогда в шаблоне Поиск найдите:
<div class="tovars-block">
замените на:
<div class="tovars-block search_item">
далее в main.css найдите:
.goods-table .goodsTableImg > a img {
display: table-cell;
height: 245px;
width: 100%;
}

после него расположите:
.search_item .goods-table .goodsTableImg > a img {
width: auto;
}

найдите:
.goodsListContent {
display: inline-block;
float: right;
height: 100%;
width: 70%;
}

после него вставьте:
.search_item .goodsListImg {
width: 22%;
}
.search_item .goodsListContent {
width: 77%;
}

после:
@media screen and (max-width: 768px) {

вставьте:
.goods-list .goodsListImgBlcok {
width: auto;
}
.goods-list .goodsListImgBlcok > a img {
width: 100%;
}

1. С лупой всё правильно сделали. Спасибо! Ок.

2. А я не понял какой блок с кнопками куда должен опускаться...
Тут вроде уже всё получилось... Ок.

3. Стал вставать правильный бэкграунд при поисковой выдаче. Ок.

4. Первый режим в поиске сделали. Ок.

5. Второй режим в поиске сделали. Ок.

6. Сейчас пытаюсь переустановить браузер в телефоне. Телефон ночью стал глючить, снёс систему и поставил оперу заново. Не уверен, но по-моему перестал раскрываться каталог, так что я даже проверить сейчас не могу работу адаптивной версии.

В следующем вопросе всё опишу по адаптивному.

Радует то, что в обычном шаблоне всё сделали! На удивление!

#23 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 21 Май 2015 - 03:29

2. Мне почему-то казалось, что в адаптивном варианте 3го режима просмотра правый блок с кнопками должен был под описание опускаться, а не справа стоять, по сему и задавала вопрос выше =)

#24 Andrew S.

Andrew S.

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 21 Май 2015 - 03:36

1. Не пойму только почему планшет на хроме занижает правый блок. Может он не понимает "margin-top"? Это в третьем режиме отображения каталога.

21052015005.jpg

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

Просмотр сообщенияVaccina (21 Май 2015 - 03:29) писал:

2. Мне почему-то казалось, что в адаптивном варианте 3го режима просмотра правый блок с кнопками должен был под описание опускаться, а не справа стоять, по сему и задавала вопрос выше =)

2. Если бы он там начал опускаться, было бы хорошо. Я думал об этом, но не знал реализуемо ли это!

3. Сейчас буду пытаться понять что с адаптивным случилось. Может проблема из-за того, что Вы лишили возможности адаптивному шаблону расширяться.

Сообщение отредактировал Andrew S.: 21 Май 2015 - 03:37


#25 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 21 Май 2015 - 03:51

После:
@media screen and (max-width: 768px) {

пропишите:
.table_mini figure .goodsListContent {
  width: 84%;
}
.table_mini figure .goodsListPriceBlock {
  float: none;
  margin-top: 1px;
  padding: 0;
  width: 100%;
}
.table_mini figure .info {
  float: none;
  margin-right: 0;
  min-width: 470px;
  padding-right: 0;
  width: 100%;
}

после данного изменения при разрешении меньше 768 блок с кнопками должен будет опустится под описание

#26 Andrew S.

Andrew S.

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 21 Май 2015 - 03:58

Просмотр сообщенияVaccina (21 Май 2015 - 03:51) писал:

После:
@media screen and (max-width: 768px) {

пропишите:
.table_mini figure .goodsListContent {
width: 84%;
}
.table_mini figure .goodsListPriceBlock {
float: none;
margin-top: 1px;
padding: 0;
width: 100%;
}
.table_mini figure .info {
float: none;
margin-right: 0;
min-width: 470px;
padding-right: 0;
width: 100%;
}

после данного изменения при разрешении меньше 768 блок с кнопками должен будет опустится под описание

1. У меня к вам другое предложение. Не руки и сердца, а убрать ВООБЩЕ в адаптивном 2 и 3 режим отображения каталога вместе с кнопками выбора этих режимов. И чтобы он правильно запускался первый режим. А в нормальном шаблоне оставить автоматическую загрузку у нового пользователя второго режима при первом посещении. Можно так сделать?
P.S. Он и так так опускался под описание. Коряво.

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

3. Техническая ошибка в шаблоне адаптивном в опере мини. Не раскрывается каталог.

Вот я балбес. Зачем смотреть всё в мобильном если можно просто увеличить масштаб тут в браузере.

4. Подскажите как быть с планшетом? Там где правая часть ниже стоит. Почему планшет не позиционирует по margin-top её?

Сообщение отредактировал Andrew S.: 21 Май 2015 - 04:10


#27 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 21 Май 2015 - 04:33

1. К сожалению, так нельзя сделать, причиной являются условия в самой структуре шаблона. Да и даже если бы мы скрыли 2 варианта отображения, а клиент находился на одном из них и уменьшил экран, то это отображение бы сохранилось. По возможности, можно скрыть только кнопки переключения вида.

2. После:
@media screen and (max-width: 768px) {

попробуйте добавить:
.goods-table .goodsTableImg > a img {
  width: auto;
}

на счет проверки адаптивности, в Mozilla: Инструменты - Веб-разработка - Адаптивный дизайн, Opera\Chrome: Разработка - Инструменты разработчика(или правой кнопкой мыши по странице - просмотреть код элемента)

4. Можете проверить поведение этого блока на других устройствах(планшетах), чтобы понять, проблема в одном устройстве или в общей стилистике?

#28 Andrew S.

Andrew S.

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 21 Май 2015 - 04:44

Просмотр сообщенияVaccina (21 Май 2015 - 04:33) писал:

1. К сожалению, так нельзя сделать, причиной являются условия в самой структуре шаблона. Да и даже если бы мы скрыли 2 варианта отображения, а клиент находился на одном из них и уменьшил экран, то это отображение бы сохранилось. По возможности, можно скрыть только кнопки переключения вида.

2. После:
@media screen and (max-width: 768px) {

попробуйте добавить:
.goods-table .goodsTableImg > a img {
width: auto;
}

на счет проверки адаптивности, в Mozilla: Инструменты - Веб-разработка - Адаптивный дизайн, Opera\Chrome: Разработка - Инструменты разработчика(или правой кнопкой мыши по странице - просмотреть код элемента)

4. Можете проверить поведение этого блока на других устройствах(планшетах), чтобы понять, проблема в одном устройстве или в общей стилистике?

1. Тогда давайте сделаем так, чтобы во втором режиме в адаптивном фото товара не перекрывало текст.

А в третьем режиме поставить размер фото как в первом и чтобы всё что после фото переносилось на следующую строчку.

#29 Andrew S.

Andrew S.

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 21 Май 2015 - 05:16

Полюбуйтесь:

Polyubujtes'.png

Просто скриншот. И благодарность Вам!!! Шрифты загрузил только ttf. У кого недобраузеры - их проблемы. Будут обычные шрифты загружаться.

#30 Andrew S.

Andrew S.

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 21 Май 2015 - 05:29

Понял в чём причина видимой неровности!

Nazakaz.png

Помогите только в третьем режиме строку о наличии подвинуть вроде на 2 пикселя вверх. Всё что ниже пусть вслед за ней поднимется - не вопрос.

#31 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 21 Май 2015 - 05:47

Просмотр сообщенияAndrew S. (21 Май 2015 - 04:44) писал:

1. Тогда давайте сделаем так, чтобы во втором режиме в адаптивном фото товара не перекрывало текст.

А в третьем режиме поставить размер фото как в первом и чтобы всё что после фото переносилось на следующую строчку.

также после:
@media screen and (max-width: 768px) {

вставьте:
div.goods-list:not(.table_mini) .goodsListImgBlcok, div.goods-list:not(.table_mini) .goodsListImgBlcok a, div.goods-list:not(.table_mini) .goodsListImgBlcok a img {
  display: block;
  height: auto;
  width: 100%;
}

на всякий случай проверьте, не навредит ли это 3му режиму, по сути не должен из-за условия :not(.table_mini)

Просмотр сообщенияAndrew S. (21 Май 2015 - 05:16) писал:

Просто скриншот. И благодарность Вам!!! Шрифты загрузил только ttf. У кого недобраузеры - их проблемы. Будут обычные шрифты загружаться.
Это вам спасибо за терпение =)

Просмотр сообщенияAndrew S. (21 Май 2015 - 05:29) писал:

Помогите только в третьем режиме строку о наличии подвинуть вроде на 2 пикселя вверх. Всё что ниже пусть вслед за ней поднимется - не вопрос.
В main.css найдите:
.goods-list.table_mini .goodsListPriceBlock .availability {
  display: block;
  font-family: Roboto-Light,arial,Helvetica CY,Nimbus Sans L,sans-serif,Helvetica;
  font-size: 14px;
}

замените на:
.goods-list.table_mini .goodsListPriceBlock .availability {
  display: block;
  font-family: Roboto-Light,arial,Helvetica CY,Nimbus Sans L,sans-serif,Helvetica;
  font-size: 14px;
  margin-top: -2px;
}


#32 Andrew S.

Andrew S.

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 21 Май 2015 - 05:53

Просмотр сообщенияVaccina (21 Май 2015 - 05:47) писал:

также после:
@media screen and (max-width: 768px) {

вставьте:
div.goods-list:not(.table_mini) .goodsListImgBlcok, div.goods-list:not(.table_mini) .goodsListImgBlcok a, div.goods-list:not(.table_mini) .goodsListImgBlcok a img {
display: block;
height: auto;
width: 100%;
}

на всякий случай проверьте, не навредит ли это 3му режиму, по сути не должен из-за условия :not(.table_mini)


Это вам спасибо за терпение =)


В main.css найдите:
.goods-list.table_mini .goodsListPriceBlock .availability {
display: block;
font-family: Roboto-Light,arial,Helvetica CY,Nimbus Sans L,sans-serif,Helvetica;
font-size: 14px;
}

замените на:
.goods-list.table_mini .goodsListPriceBlock .availability {
display: block;
font-family: Roboto-Light,arial,Helvetica CY,Nimbus Sans L,sans-serif,Helvetica;
font-size: 14px;
margin-top: -2px;
}

Адаптивный буду проверять позже, нужно котировкой заняться, а то не успею!

#33 Andrew S.

Andrew S.

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 29 Май 2015 - 08:20

В адаптивном уже на 1024на768 уже проблемы. Скоро покажу.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных