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


Создать Отображение Уменьшенного Списка Товаров Мелкой Таблицей

Автор Andrew S., 14 марта 2015 00:39

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

#21 Vaccina

Vaccina

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

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

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

1. Данные кнопки и вообще структура сделана блоками div, попробуйте задать ширину форме, внутри которой находится кнопка покупки и поле для ввода количества:
.table_mini figure .goodsListForm {
  float: left;
  width: auto;
}
2. Простите, изначально неправильно вас поняла, думала, вам необходимо подвинуть кнопки переключения вида, а необходимо иконки внутри них, для этого в main.css найдите примерно следующий код:
a.btn.table {
  background: url("http://design.sait.ru/sprites2.png?design=snow") no-repeat scroll -25px -28px #fff;
}
a.btn.list {
  background: url("http://design.sait.ru/sprites2.png?design=snow") no-repeat scroll 1px -28px #fff;
}
a.btn.table_mini {
  background: url("http://design.sair.ru/sprites3.png?design=snow") no-repeat scroll -25px -28px #fff;
}

увеличьте в них все первые значения в цифровом формате, например:
a.btn.table {
  background: url("http://design.sait.ru/sprites2.png?design=snow") no-repeat scroll -24px -28px #fff;
}
a.btn.list {
  background: url("http://design.sait.ru/sprites2.png?design=snow") no-repeat scroll 2px -28px #fff;
}
a.btn.table_mini {
  background: url("http://design.sair.ru/sprites3.png?design=snow") no-repeat scroll -24px -28px #fff;
}

#22 Andrew S.

Andrew S.

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

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

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

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

1. Данные кнопки и вообще структура сделана блоками div, попробуйте задать ширину форме, внутри которой находится кнопка покупки и поле для ввода количества:
.table_mini figure .goodsListForm {
float: left;
width: auto;
}
2. Простите, изначально неправильно вас поняла, думала, вам необходимо подвинуть кнопки переключения вида, а необходимо иконки внутри них, для этого в main.css найдите примерно следующий код:
a.btn.table {
background: url("http://design.sait.ru/sprites2.png?design=snow") no-repeat scroll -25px -28px #fff;
}
a.btn.list {
background: url("http://design.sait.ru/sprites2.png?design=snow") no-repeat scroll 1px -28px #fff;
}
a.btn.table_mini {
background: url("http://design.sair.ru/sprites3.png?design=snow") no-repeat scroll -25px -28px #fff;
}

увеличьте в них все первые значения в цифровом формате, например:
a.btn.table {
background: url("http://design.sait.ru/sprites2.png?design=snow") no-repeat scroll -24px -28px #fff;
}
a.btn.list {
background: url("http://design.sait.ru/sprites2.png?design=snow") no-repeat scroll 2px -28px #fff;
}
a.btn.table_mini {
background: url("http://design.sair.ru/sprites3.png?design=snow") no-repeat scroll -24px -28px #fff;
}

1. Не помогает. Поле с выбором количества всё также внизу (( Может какое-то фиксированное значение задать?

2. Не могу найти в чём причина того, что на мини-режиме проблема:

a.btn.table_mini1.png
Когда активен мини-режим, значок сдвинут на 1 пиксель влево.

a.btn.table_mini2.png
Когда навожу мышкой - встаёт ровно.

a.btn.table_mini3.png
В пассивном режиме у неё и у всех остальных кнопок стало всё нормально.

Нашёл код для задания положения current.

Сейчас нужно в адаптивном чтобы кнопки ровно встали. Всё враскоряк теперь. Тут лечим, там покалечили ((

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

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

#23 Andrew S.

Andrew S.

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

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

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

1. Поле с выбором не влазит:

Pole-s-vyborom-koliochestva-1.png
Pole-s-vyborom-koliochestva-2.png

2. Значки смещены теперь в адаптивном шаблоне.

Значок 1 в пассивном режиме смещён на 1 пиксель вниз и на 1 пиксель вправо, нужно вернуть на место.
Значок 2 в пассивном режиме смещён на 1 пиксель вниз и на 1 пиксель вправо, нужно вернуть на место.
Значок 3 в пассивном режиме смещён на 1 пиксель вниз и на 1 пиксель вправо, нужно вернуть на место.

Значок 1 в активном режиме смещён на 1 пиксель вниз и на 1 пиксель вправо, нужно вернуть на место.
Значок 2 в активном режиме смещён на 1 пиксель вниз и на 1 пиксель вправо, нужно вернуть на место.
Значок 3 в активном режиме смещён на 1 пиксель вниз, нужно вернуть на место.

Как видно, один значок смещён по-другому: третий новый значок при активном режиме.

Screen87.jpg Screen89.jpg Screen90.jpg

3. Добавить/убрать в избранное и добавить/убрать из сравнения в новом мини-режиме - так и обрезаются, не влазят на строку. Я уже прикреплял скриншот, на котором показано, что нужно, чтобы эти надписи переносились на следующую строку, чтобы они помещались.

4. Слишком большое расстояние между 1 и 2 значком в адаптивном!

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

#24 Vaccina

Vaccina

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

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

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

1. Для проверки попробуйте следующее, в main.css найдите:
.goodsList .btnToCart {
  float: none;
}

замените на:
.goodsList .btnToCart {
  float: left;
}

кнопка "в корзину" будет слева, проверить необходимо встанет ли она в одну строку с полем количества.

2. В main.css найдите:
a.btn.list {
	background: url('{ASSETS_IMAGES_PATH}sprites2.png?design=snow') no-repeat 2px -28px #FFF;
}
a.btn.list.current,a.btn.list:hover {
	background-position: 2px -1px;
	transition-duration: 300s;
}

.btn.table_mini.current {background-position: 1px -1px;}

a.btn.table {
	background: url('{ASSETS_IMAGES_PATH}sprites2.png?design=snow') no-repeat 11px 9px #fff;
	background-position: -24px -28px;
}
a.btn.table_mini.current {
  background-position: -24px -1px;
}
a.btn.table_mini {
background: url('{ASSETS_IMAGES_PATH}sprites3.png?design=snow') no-repeat 11px 9px #fff;
background-position: -24px -28px;
}
a.btn.table.current,a.btn.table:hover, a.btn.table_mini:hover {
background-position: -24px -1px;
}

замените на:
a.btn.table {
	background: url('{ASSETS_IMAGES_PATH}sprites2.png?design=snow') no-repeat #fff;
	background-position: -23px -27px;
}
a.btn.list {
	background: url('{ASSETS_IMAGES_PATH}sprites2.png?design=snow') no-repeat #FFF;
background-position: 1px -27px;
}
a.btn.table_mini {
background: url('{ASSETS_IMAGES_PATH}sprites3.png?design=snow') no-repeat #fff;
background-position: -23px -27px;
}
a.btn.table.current,a.btn.table:hover,  {
background-position: -25px -2px;
transition-duration: 300s;
}
a.btn.list.current,a.btn.list:hover {
	background-position: 1px -2px;
transition-duration: 300s;
}
a.btn.table_mini.current, a.btn.table_mini:hover {
  background-position: -24px -2px;
transition-duration: 300s;
}

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

#25 Andrew S.

Andrew S.

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

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

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

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

1. Для проверки попробуйте следующее, в main.css найдите:
.goodsList .btnToCart {
float: none;
}

замените на:
.goodsList .btnToCart {
float: left;
}

кнопка "в корзину" будет слева, проверить необходимо встанет ли она в одну строку с полем количества.

2. В main.css найдите:
a.btn.list {
background: url('{ASSETS_IMAGES_PATH}sprites2.png?design=snow') no-repeat 2px -28px #FFF;
}
a.btn.list.current,a.btn.list:hover {
background-position: 2px -1px;
transition-duration: 300s;
}

.btn.table_mini.current {background-position: 1px -1px;}

a.btn.table {
background: url('{ASSETS_IMAGES_PATH}sprites2.png?design=snow') no-repeat 11px 9px #fff;
background-position: -24px -28px;
}
a.btn.table_mini.current {
background-position: -24px -1px;
}
a.btn.table_mini {
background: url('{ASSETS_IMAGES_PATH}sprites3.png?design=snow') no-repeat 11px 9px #fff;
background-position: -24px -28px;
}
a.btn.table.current,a.btn.table:hover, a.btn.table_mini:hover {
background-position: -24px -1px;
}

замените на:
a.btn.table {
background: url('{ASSETS_IMAGES_PATH}sprites2.png?design=snow') no-repeat #fff;
background-position: -23px -27px;
}
a.btn.list {
background: url('{ASSETS_IMAGES_PATH}sprites2.png?design=snow') no-repeat #FFF;
background-position: 1px -27px;
}
a.btn.table_mini {
background: url('{ASSETS_IMAGES_PATH}sprites3.png?design=snow') no-repeat #fff;
background-position: -23px -27px;
}
a.btn.table.current,a.btn.table:hover, {
background-position: -25px -2px;
transition-duration: 300s;
}
a.btn.list.current,a.btn.list:hover {
background-position: 1px -2px;
transition-duration: 300s;
}
a.btn.table_mini.current, a.btn.table_mini:hover {
background-position: -24px -2px;
transition-duration: 300s;
}

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

1. Помог почему-то флоат райт. Но теперь вот такая вот проблема наблюдается в режиме номер 2:

Float.png

Всё влияет друг на друга... Это полный пипец...

2. Всё стояло ровно хотя бы в обычном шаблоне.

Сейчас эти три кнопки напоминают трёхглазого косоглазого человека. Там даже скриншот прикреплять не надо, и так всё видно.

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

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

#26 Vaccina

Vaccina

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

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

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

1. В main.css найдите:
.goodsList .btnToCart {
float: right;
}
замените на:
.goodsList .btnToCart {
float: none;
}
.table_mini .goodsList .btnToCart {
float: right;
}

2. Изменения позиций иконок были произведены по вашим текстовым условиям, вы можете самостоятельно подрегулировать расположение иконки в background-position, первый параметр отвечает за горизонтальное положение иконки, второй за вертикальное.

#27 Andrew S.

Andrew S.

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

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

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

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

1. В main.css найдите:
.goodsList .btnToCart {
float: right;
}
замените на:
.goodsList .btnToCart {
float: none;
}
.table_mini .goodsList .btnToCart {
float: right;
}

2. Изменения позиций иконок были произведены по вашим текстовым условиям, вы можете самостоятельно подрегулировать расположение иконки в background-position, первый параметр отвечает за горизонтальное положение иконки, второй за вертикальное.

Ок, только для начала - первая кнопка не подсвечивается вообще при наведении и при активном режиме.

#28 Vaccina

Vaccina

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

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

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

a.btn.table.current,a.btn.table:hover,  {
background-position: -25px -2px;
transition-duration: 300s;
}

замените на:
a.btn.table.current, a.btn.table:hover  {
background-position: -25px -2px;
transition-duration: 300s;
}

#29 Andrew S.

Andrew S.

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

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

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

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

a.btn.table.current,a.btn.table:hover, {
background-position: -25px -2px;
transition-duration: 300s;
}

замените на:
a.btn.table.current, a.btn.table:hover {
background-position: -25px -2px;
transition-duration: 300s;
}

1. Пока подскажите ещё как 1 и 2 значки расположить на таком же расстоянии в адаптивном как и между 2 и 3.

2. И как сделать так, чтобы в адаптивном режиме при 3 режиме переносились на следующую строку "Добавить к сравнению и добавить в избранное. На это вообще внимания вроде не обратили.

3. И чтобы в адаптивном не загружалась кнопка прокрутки вверх. Она там непонятная появляется, никакущая.

Сообщение отредактировал Andrew S.: 06 Май 2015 - 05:25

#30 Vaccina

Vaccina

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

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

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

1. В main.css найдите и удалите:
.cort .left ul li:first-child {
  margin-right: 10px;
}

2.

Цитата

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

3. Перед:
@media screen and (max-width: 1180px) {

пропишите:
@media screen and (max-width: 960px) {
.button-up {
  display: none !important;
}
}

#31 Andrew S.

Andrew S.

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

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

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

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

1. В main.css найдите и удалите:
.cort .left ul li:first-child {
margin-right: 10px;
}

2.


3. Перед:
@media screen and (max-width: 1180px) {

пропишите:
@media screen and (max-width: 960px) {
.button-up {
display: none !important;
}
}

1. После удаления этого кода - даже сайт стал быстрей работать.

2. Кыш почистил, но оно всё также:

Screen91.jpg

3. Кнопка пропала, спасибо!

4. Значки (фоны в трёх кнопках) в адаптивном (см. п. 2) теперь ниже на 1 пиксель и правее на 1 пиксель. Можно ли задать для адаптивного режима такую же зависимость, как вы прописали для п. 3?
@media screen and (max-width: 960px)
Вообще, если честно, не понимаю, зачем изначально назначать на кнопки такие изобажения, с которых берётся несколько маленьких изображений. Эта проблема появлялась и на других шаблонах. Решение вообще не оптимальное. Только время отнимает.

Или может что-то другое придумать с кнопками в адаптивном, чтобы убрать это несоответствие?

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

#32 Vaccina

Vaccina

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

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

Отправлено 06 Май 2015 - 06:55

2. В main.css найдите:
.table_mini figure .goodsToCartBlock > a {
  margin-top: -6px;
  min-width: auto;
  width: 80%;
}
замените на:
.table_mini figure .goodsToCartBlock > a {
  margin-top: -6px;
  min-width: 100%;
  width: 100%;
}

4. Перед
.button-up {
display: none !important;
}

пропишите стили для кнопок
a.btn.table {
background-position: -24px -28px;
}
a.btn.list {
background-position: 0px -28px;
}
a.btn.table_mini {
background-position: -24px -28px;
}

Использование спрайтов необходимо для оптимизации сайта, статья по этому вопросу:
http://habrahabr.ru/post/159027/

#33 Andrew S.

Andrew S.

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

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

Отправлено 06 Май 2015 - 07:00

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

2. В main.css найдите:
.table_mini figure .goodsToCartBlock > a {
margin-top: -6px;
min-width: auto;
width: 80%;
}
замените на:
.table_mini figure .goodsToCartBlock > a {
margin-top: -6px;
min-width: 100%;
width: 100%;
}

4. Перед
.button-up {
display: none !important;
}

пропишите стили для кнопок
a.btn.table {
background-position: -24px -28px;
}
a.btn.list {
background-position: 0px -28px;
}
a.btn.table_mini {
background-position: -24px -28px;
}

Использование спрайтов необходимо для оптимизации сайта, статья по этому вопросу:
http://habrahabr.ru/post/159027/

2. Ну теперь опять всё сломали уже в обычном шаблоне.. Там было ещё:
float: right;
Вернул как было, вообще ерунда получается.
Можно в режиме краткого списка в адаптивном вообще убрать эти надписи? Как мы это с кнопкой сделали.
Сейчас попробую!

4. Значки всё также кривые.

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

#34 Vaccina

Vaccina

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

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

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

2. Посмотрите еще раз пожалуйста код, в нем не должно присутствовать, скорее всего похожий дубликат изменили 
float: right;

#35 Andrew S.

Andrew S.

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

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

Отправлено 06 Май 2015 - 07:17

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

2. Посмотрите еще раз пожалуйста код, в нем не должно присутствовать, скорее всего похожий дубликат изменили 
float: right;

2. Блин, я в другом этом похожем коде что-то сделал и сломал..
Всё, я нашёл что сломал. А в тот код для мини-адаптивного вставил display: none. Устал уже ломать над этим голову, ну его нафиг.

4. По значкам остаётся вопрос... Которые в адаптивном шаблоне смещены вправо-вниз на 1 пиксель, а в нормальном шаблоне - нормально. Не помогла та инструкция.

Можно ли для адаптивного в режиме мелкого списка назначить другие позиции этих картинок?

Сообщение отредактировал Andrew S.: 06 Май 2015 - 07:46

#36 Vaccina

Vaccina

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

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

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

Цитата

Можно ли для адаптивного в режиме мелкого списка назначить другие позиции этих картинок?

Цитата

4. Перед
.button-up {
display: none !important;
}

пропишите стили для кнопок
a.btn.table {
background-position: -24px -28px;
}
a.btn.list {
background-position: 0px -28px;
}
a.btn.table_mini {
background-position: -24px -28px;
}

данные стили будут применяться как раз таки для адаптивной версии

#37 Andrew S.

Andrew S.

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

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

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

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

данные стили будут применяться как раз таки для адаптивной версии

А для хуверов всяких и активов? Сейчас вернусь и начну внедрять код. Дело ещё в том, что вы говорили или этот или похожий код поставить, я его вставил в конец main.css. Его убрать?

/* Доп. стили для кнопок */
a.btn.table {background-position: -24px -28px;}
a.btn.list {background-position: 2px -28px;}
a.btn.table_mini {background-position: -24px -28px;}

#38 Vaccina

Vaccina

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

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

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

Скорее всего, код, указанный выше и расположенный в конце main.css, будет лишним, лучше его удалить. А по поводу стилей для active и hover эффектов, к добавленному для адаптивного режима кода добавьте:
a.btn.table.current, a.btn.table:hover {
background-position: -25px -2px;
}
a.btn.list.current,a.btn.list:hover {
background-position: 1px -2px;
}
a.btn.table_mini.current, a.btn.table_mini:hover {
background-position: -24px -2px;

#39 Andrew S.

Andrew S.

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

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

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

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

Скорее всего, код, указанный выше и расположенный в конце main.css, будет лишним, лучше его удалить. А по поводу стилей для active и hover эффектов, к добавленному для адаптивного режима кода добавьте:
a.btn.table.current, a.btn.table:hover {
background-position: -25px -2px;
}
a.btn.list.current,a.btn.list:hover {
background-position: 1px -2px;
}
a.btn.table_mini.current, a.btn.table_mini:hover {
background-position: -24px -2px;

А к ним нужно добавлять типа вот этого?

@media screen and (max-width: 960px)

Так же он не будет назначен для адаптивного режима.

Да, так и получается, он влияет на обычный режим.

Я добавил 960px который и в обычном шаблоне исчезло нарушение, сейчас попробую скорректировать адаптивный.

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

#40 Vaccina

Vaccina

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

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

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

Добавлять эти стили для адаптивности нужно до или после:
.button-up {
display: none !important;
}

так как этот блок уже расположен в:
@media screen and (max-width: 960px) {
}

Обратно в Каталог товаров


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Снег
  5. → Каталог товаров
  6. Privacy Policy