Jump to content

Списки данных

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

Использование

Списки данных состоят из оболочки и индивидуальных элементов списка. В большинстве случаев, список данных будет использовать один из HTML элементов списка (например, ul или ol) для семантических целей, хотя это не обязательное требование.

Базовая структура разметки выглядит следующим образом:

<ol class='ipsDataList' itemscope itemtype="http://schema.org/ItemList">
	<meta itemprop="itemListOrder" content="Descending">
	<li class='ipsDataItem ipsDataItem_unread' itemprop="itemListElement">
		...
	</li>
	<li class='ipsDataItem' itemprop="itemListElement">
		...
	</li>
	<li class='ipsDataItem' itemprop="itemListElement">
		...
	</li>
</ol>

Основной элемент должен быть обозначен классом ipsDataList. Индивидуальные элементы списка должны быть с классом ipsDataItem. Для обозначения непрочитанного статуса в строке, добавьте класс ipsDataItem_unread к элементу списка.

В ipsDataItem, множество других существующих элементов (на разрешении ПК), представляющих ячейки данных. На устройствах с небольшим экраном, эти элементы перекомпануются таким образом, чтобы получился наиболее подходящий для такого экрана макет. Эти элементы перечислены ниже.

data_list.png

 

Расстояние между рядами - ipsDataList_reducedSpacing

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

Чередование цветов - ipsDataList_zebra

По умолчанию, чередование цветом (она же зебра, или альтернативные цвета фона) не включены в списки данных. для добавления зебры, добавьте класс ipsDataList_zebra к оболочке списка данных.

Основное содержание ячеек - ipsDataItem_main

Представляет собой основные данные в ячейке, обычно это строка заголовка и некоторые метаданные. Расширяясь, занимает всё пространство, оставшееся от остальных ячеек в строке. Пример:

<div class='ipsDataItem_main'>
	<h4 class='ipsDataItem_title'><a href='#'>Заголовок элемента</a></h4>
	<p class='ipsDataItem_meta'>
		От testadmin, вчера, 14:21
	</p>
</div>

В данной ячейк, ipsDataItem_title определяет заголовок элемента, а ipsDataItem_meta некоторые неспецифические метаданные, связанные с заголовком.

В основной ячейке, подсписок может быть определён для данных, например подфорумов или подальбомов. Пример разметки:

<ul class='ipsDataItem_subList ipsList_inline'>
	<li><a href='#'>Подэлемент 1</a></li>
	<li class='ipsDataItem_unread'><a href='#'>Подэлемент 2</a></li>
</ul>

Ячейка статистики - ipsDataItem_stats

Этот класс применяется к элементу, который представляет статистику для данной строки, например количество ответов в теме, или количество загрузок файла. Пример использования:

<dl class='ipsDataItem_stats'>
	<dt class='ipsDataItem_stats_number'>14</dt>
	<dd class='ipsDataItem_stats_type'>Сообщений</dd>
</dl>

Данные в этом элементе размечены двумя дополнительными классами:

  • ipsDataItem_stats_number - представляет фактически значение статистики;
  • ipsDataItem_stats_type - представляет ти данных.

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

Ячейка последнего ответа - ipsDataItem_lastPoster

Используется для отображения информации о последнем ответе, например в теме или другой записи. Пример использования:

<ul class='ipsDataItem_lastPoster ipsDataItem_withPhoto'>
	<li><img src='images/photo.jpeg'></li>
	<li><a href='#'>Имя пользователя</a></li>
	<li><time data-short='1 dy'>Время</time></li>
</ul>

В рамках этого элемента существует ещё два или три дополнительных элемента. Если используется класс ipsDataItem_withPhoto, первый элемент должен содержать фотографию пользователя, иначе первый элемент может быть пропущен. Второй элемент, как правило, будет содержать имя пользователя, а последний будет содержать информацию о времени.

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

Типовые ячейки

Для пользовательских типов данных доступны определённые размеры типовых ячеек. Ячейка должна содержать класс ipsDataItem_generic и один и следующих классов:

  • ipsDataItem_size1 - 50px
  • ipsDataItem_size2 - 75px
  • ipsDataItem_size3 - 100px
  • ipsDataItem_size4 - 125px
  • ipsDataItem_size5 - 150px
  • ipsDataItem_size6 - 175px
  • ipsDataItem_size7 - 200px
  • ipsDataItem_size8 - 225px
  • ipsDataItem_size9 - 250px

Другие типы ячеек

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

  • ipsDataItem_icon - колонка, содержащая иконку статуса строки, например иконку форума;
  • ipsDataItem_modCheck - Небольшая колонка, которая должна содержать чекбокс для модерирования строки.

Окрашивание строк

Доступно четыре дополнительных класса для добавления цвета фону строки, чтобы обозначить её статус:

  • ipsDataItem_new - Новые элементы
  • ipsDataItem_warning - Элементы в состоянии предупреждения
  • ipsDataItem_warning - Элементы с ошибкой
  • ipsDataItem_info - Информационное состояние

Собираем всё вместе

<ol class='ipsDataList'>
	<li class="ipsDataItem ipsDataItem_responsivePhoto">
		<div class="ipsDataItem_icon ipsDataItem_category">
			<span class='ipsItemStatus ipsItemStatus_large cForumIcon_normal ipsItemStatus_read'>
				<i class="fa fa-comments"></i>
			</span>
		</div>
		<div class="ipsDataItem_main">
			<h4 class="ipsDataItem_title ipsType_large ipsType_break">
				<a href="#">Коммерческие вопросы</a>
			</h4>
				<div class="ipsType_reset ipsType_medium ipsType_light"><p>Вопросы коммерческого характера, связанные с покупкой наших продуктов</p></div>
		</div>
		<div class="ipsDataItem_stats ipsDataItem_statsLarge">
			<dl>
				<dt class="ipsDataItem_stats_number">14</dt>
				<dd class="ipsDataItem_stats_type ipsType_light"> сообщений</dd>
			</dl>
		</div>
		<ul class="ipsDataItem_lastPoster ipsDataItem_withPhoto">
			<li>
               <a href="#">
                  <img src=''>
               </a>
            </li>
			<li><a href="" class='ipsType_break ipsContained'>Измение публикации порядка…</a></li>
			<li class=''>invisionbyte</li>
			<li class="ipsType_light"><a href='' data-short='Март 16'>Март 16</a></li>
		</ul>	
	</li>
</ol>