Значек метро цвета ветки

[Pavel88 7]

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

Решения два, прошу подсказать какой проще и эффективнее.

1. Берем справочник метро, добавляем uploads, под каждую станцию добавляем иконку по цвету, затем выводим на фронт.

2. Так работает на всех крупных ресурсах. Стандартная иконка метро, через CSS меняется ее цвет в зависимости от ветки. Пример

[TopRaN 235]

1 час назад, Pavel88 сказал:

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

Решения два, прошу подсказать какой проще и эффективнее.

1. Берем справочник метро, добавляем uploads, под каждую станцию добавляем иконку по цвету, затем выводим на фронт.

2. Так работает на всех крупных ресурсах. Стандартная иконка метро, через CSS меняется ее цвет в зависимости от ветки. Пример

1. Нужно добавлять еще одно поле для метро(признак отношения к данной ветки метро), далее в шаблоне запрашивать какой признак и соответственно красить иконку. Но это не очень хороший вариант.

2. Написать скрипт, где в некой переменной будет перечислен массив (принадлежность к данной ветке метро). Потом узнавать id метро и смотреть кокой ветке она принадлежит, после давать команду на закраску.

Как-то так в двух словах.

[Pavel88 7]

3 минуты назад, TopRaN сказал:

1. Нужно добавлять еще одно поле для метро(признак отношения к данной ветки метро), далее в шаблоне запрашивать какой признак и соответственно красить иконку. Но это не очень хороший вариант.

2. Написать скрипт, где в некой переменной будет перечислен массив (принадлежность к данной ветке метро). Потом узнавать id метро и смотреть кокой ветке она принадлежит, после давать команду на закраску.

Как-то так в двух словах.

Первый вариант понимаю, как сделать, но так и знал что не очень хороший вариант. По сути мы для обработки берем только ID станции метро и вызываем ее иконку из справочника.

А вот второй вариант вообще не знаю, как делать. Никогда не сталкивался.

 

[TopRaN 235]

52 минуты назад, Pavel88 сказал:

Первый вариант понимаю, как сделать, но так и знал что не очень хороший вариант. По сути мы для обработки берем только ID станции метро и вызываем ее иконку из справочника.

А вот второй вариант вообще не знаю, как делать. Никогда не сталкивался.

 

Можно сделать по примеру покраски элементов. Наберите на форуме "красим элементы или уроки css".

[Pavel88 7]

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

Можно сделать по примеру покраски элементов. Наберите на форуме "красим элементы или уроки css".

На досуге попробую разобраться с данным вопросом. Спасибо.

[abushyk 694]

В 15.09.2017 в 17:22, TopRaN сказал:

1. Нужно добавлять еще одно поле для метро(признак отношения к данной ветки метро), ....Но это не очень хороший вариант.

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

 

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

<div class="metro_mark metro_mark_{$data.metro_id}"></div> {$data.metro}

В результате мы получим блоки с классами вида metro_mark_1, metro_mark_31, metro_mark_7,....

После этого останется только написать стили виде

/*общий стиль для всех иконок*/
.metro_mark {
	width: 20px;
	height: 20px;
	background-image: url(картинка-спрайт с цветными иконками веток)
}

/*тут пойдут стили для иконки каждой конкретной станции*/
.metro_mark_1 {
	background-position: 0px 0px;
}

.metro_mark_1 {
	background-position: 20px 0px;
}
.metro_mark_2 {
	background-position: 0px 0px;
}
.....

Т.е. признак принадлежности к ветку мы переносим в стили, а у каждой станции получится свой отдельный стиль. И для этих станционных классов мы указываем какую картинку вывести в иконку - для станций с ид=1,5,88 - иконку с красным знаком, 2,3,4,6 - зеленым и т.д.

[abushyk 694]

Суть в том, что КАЖДАЯ станция метро будет иметь свой класс. Но вы прописываете тили под эти классы группируя - для классов станций красной ветки - один общий набор стилей, для зеленой - другой. Минус - нужно прописать все э классы для всех станций метро, пусть даже группами и следить за наличием классов в таблицах стилей для новодобавляемых станций.

 

Второй вариант - это который вы забраковали - с признаком. В модель метро обавляется принак Цвет линии. Например для себя вы можете положить, что 1 - это красная, 2 - зеленая и просто в текстовое поле вбивать эти циры для каждой станции. Либо сделать там селектбокс с вариантами {1~~красная}{2~~зеленая} и выбирать варианты. Потом в локальном грид_конструкторе добавить в transformGridData функцию пробежку в цикле по выбранным объектам и сбор ид метро для них, запрос в таблицу метро с этими ид, что бы получить для каждой ид станции соотв. значение цвета ветки в виду числа и заложить эти значения цвета в возвращаемые данные в переменную напр. line_color.

Потом при выводе выводить блок иконки станции как

<div class="metro_mark metro_mark_{$data.line_color}"></div> {$data.metro}

И дальше останется только прописать стили для классов вида .metro_mark_N где N - будут все варианты чисел соотвествующих разными цветам линий.

[DimWeb 21]

5 часов назад, abushyk сказал:

Второй вариант - это который вы забраковали - с признаком. В модель метро обавляется принак Цвет линии

Да, когда речь идет об оформлении(V) - затрагивать модель(M) совсем не здравая идея. Листинг metro_id разово превращается в CSS в группы селекторов с нужной раскраской и более не редактируется - собственно, M не нужна.

PS: да я сначала прочитал второй вариант, написал комментарий, а потом прочитал первый

Изменено September 18, 2017 пользователем DimWeb

[abushyk 694]

Если рассматривать "цвет ветки" как исключительно свойство декорирования - то да. Но если рассматривать его как признак группировки станций - а мы ведь по нему можем не только красить иконки, но и давать отдачу поиска "вдоль красной линии" - то все норм - "цвет линии" вполне адекватное свойство именно объекта Станция))

[Pavel88 7]

В 18.09.2017 в 15:39, abushyk сказал:

Если рассматривать "цвет ветки" как исключительно свойство декорирования - то да. Но если рассматривать его как признак группировки станций - а мы ведь по нему можем не только красить иконки, но и давать отдачу поиска "вдоль красной линии" - то все норм - "цвет линии" вполне адекватное свойство именно объекта Станция))

Так какой вариант лучше выбрать?

Мне больше присущ с точки зрения итоговой реализации вариант с подкрашиванием блока через  CSS.

Хотя вариант с готовым изображением тоже довольно простой(я за 10 минут раскидаю картинки по цветам).

Какой же все таки использовать? Ибо действительно хочется воплотить эту задумку.

[abushyk 694]

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