Jump to content

Пример реализации Страниц #3 - Планы на будущее

В данном руководстве мы пошагово создадим страницу с планами компании/сообщества. Страница выглядит следующим образом:

future.png hover.png create.png

Страница разработана на приложении Страницы, а каждый пункт (на примере - Поинты, Инвайты, Дизайн, Реакции) это статьи базы данных. 

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

Описание работы

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

Создание базы данных

Первое, что необходимо сделать - создать новую базу данных. Этот процесс подробно описан в документе Создание базы данных в Invision Community. У наше базы будут следующие отличительные черты:

  • Название базы данных: Планы на будущее.
  • Использовать категории: Нет, хранить записи непосредственно в базе данных.
  • Ключ базы данных: plans.
  • Язык: пункт.
  • Разрешить комментарии: нет.
  • Разрешить отзывы: нет.
  • Включить загрузку изображения к записи: нет.

После чего сохраняем базу.

Создание страницы

Теперь нам необходимо добавить нашу базу на новую страницу. Подробная инструкция по созданию страниц в Invision Community. Параметры страницы:

  • Название - Планы на будущее.
  • Название файла страницы - future.

Теперь необходимо подключить CSS код к нашей странице. Для этого переходим в меню шаблоны -> Новый -> Добавить новый CSS файл. Назовём его status.css и вставим следующий css код:

Spoiler

.c4StatusTable {
  max-width: 800px;
  margin: 0 auto;
}

.c4StatusRow {
  display: block;
}

.c4StatusRow:not( .ipsModerated ):hover {
  background: #f5f5f5;
}

.c4StatusRow .ipsColumn_medium {
  width: 180px;
}

.c4StatusBadge {
  line-height: 28px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  display: block;
  color: #fff;
  text-align: center;
}

.c4StatusBadge_upNext {
  background: #2980b9; 
}

.c4StatusBadge_comingSoon {
  background: #d35400;
}

.c4StatusBadge_future {
 background: #2c3e50; 
}

.c4StatusBadge_done {
  background: #27ae60;
}

.c4StatusRow {
 padding:30px; 
}
.cCmsListing li {
 position:relative 
}
.ibtRepBnts {
  position: absolute;
  right: 23px;
  top: 59px;
}
@media screen and (max-width: 767px) {
  .ibtRepBnts {top:37px;}
}

После чего, необходимо зайти в настройки страницы future и во вкладке Включения в страницу выбрать только что созданный нами css файл. 

Шаблоны базы данных

Для нашей базы необходимо модифицировать шаблон отображения списка записей. Другие шаблоны базы оставим стандартными, т.к. будет задействована одна страница - отображающая список пунктов. Для этого переходим в меню Шаблоны -> кнопка Новый -> Добавить шаблон базы данных:

  • Название: Featureplan
  • Тип шаблона: Список записей
  • Присвоить к базе данных: Планы на будущее

После сохранения изменим три шаблона (замените их содержимое полностью):

recordRow

Spoiler

{{$rowIds = array();}}
{{foreach $rows as $row}}
	{{$idField = $row::$databaseColumnId;}}
	{{$rowIds[] = $row->$idField;}}
{{endforeach}}
{{foreach $rows as $row}}
	{{$idField = $row::$databaseColumnId;}}
	<li class="ipsSpacer_bottom ipsClearfix" data-rowID='{$row->$idField}'>
      	<a href='#' class='c4StatusRow ipsAreaBackground_light {{if $row->fieldValues()['field_5'] == '4'}}ipsFaded{{endif}} ipsPad ipsType_blendLinks {{if $row->hidden()}}ipsModerated{{endif}}' data-ipsDialog data-ipsDialog-title="{$row->_title}" data-ipsDialog-size='medium' data-ipsDialog-content='#el4StatusInfo_{$row->$idField}'>
			<div class='ipsColumns ipsColumns_collapsePhone'>
				<div class='ipsColumn ipsColumn_fluid'>
					<h4 class='ipsType_sectionHead ipsType_break'>
						<strong>{{if $row->_title}}{$row->_title}{{else}}<em class="ipsType_light">{lang="content_deleted"}</em>{{endif}}</strong>
					</h4>
					{{if $row->isFutureDate() || $row->mapped('pinned') || $row->mapped('featured') || $row->hidden() === -1 || $row->hidden() === 1}}
						<span>
							{{if $row->isFutureDate()}}
								<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{$row->futureDateBlurb()}'><i class='fa fa-clock-o'></i></span>
							{{elseif $row->hidden() === -1}}
								<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{$row->hiddenBlurb()}'><i class='fa fa-eye-slash'></i></span>
							{{elseif $row->hidden() === 1}}
								<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{lang="pending_approval"}'><i class='fa fa-warning'></i></span>
							{{endif}}							
							{{if $row->mapped('pinned')}}
								<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive" data-ipsTooltip title='{lang="pinned"}'><i class='fa fa-thumb-tack'></i></span>
							{{endif}}
							{{if $row->mapped('featured')}}
								<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span>
							{{endif}}
						</span>
					{{endif}}

					<div class='ipsType_normal ipsType_break'>
						{$row->customFieldDisplayByKey('summary', 'listing')|raw}
					</div>
				</div>
				<div class='ipsColumn ipsColumn_medium'>
					{$row->customFieldDisplayByKey('status2', 'listing')|raw}
				</div>
              
			</div>
          
		</a>
		{{if \IPS\IPS::classUsesTrait( $row, 'IPS\Content\Reactable' ) and settings.reputation_enabled}}
                  <div class="ipsPad_half ibtRepBnts">{template="reputationMini" app="core" group="global" params="$row"}</div>
              {{endif}}
		{{if $table->container()->can('add')}}
			<a href='{$row->url()}' class='ipsType_medium'>
				(Изменить)
			</a>
		{{endif}}
		<div id='el4StatusInfo_{$row->$idField}' class='ipsHide'>
			<div class='ipsPad ipsType_normal ipsType_break ipsType_contained ipsType_richText'>
				{$row->content()|raw}
			</div>
		</div>
	</li>
{{endforeach}}

 

categoryHeader

Spoiler

<div class='ipsType_center ipsSpacer_bottom ipsSpacer_top'>
	<h1 class="ipsType_veryLarge ipsType_reset">{$category->_title}</h1>
	<div class='ipsType_richText ipsType_large ipsType_light ipsSpacer_bottom'>
		{$category->_description|raw}
	</div>
  	<div class='ipsResponsive_noFloat ipsResponsive_hidePhone'>
		{template="follow" app="core" group="global" params="'cms','categories' . $category->database_id, $category->_id, \IPS\cms\Records::containerFollowerCount( $category )"}
	</div>
</div>
<div class='c4StatusTable'>
{{if ! \IPS\Request::i()->isAjax() AND ! isset( \IPS\Request::i()->advancedSearchForm ) AND $category->show_records}}
	<ul class="ipsToolList ipsToolList_horizontal ipsClearfix ipsSpacer_both ipsResponsive_hidePhone">
		{{if $category->can('add')}}
			<li class='ipsToolList_primaryAction'>
				<a class="ipsButton ipsButton_medium ipsButton_important ipsButton_fullWidth" href="{$category->url()->setQueryString( array( 'do' => 'form', 'd' => \IPS\cms\Databases\Dispatcher::i()->databaseId ) )}">{lang="cms_add_new_record_button" sprintf="\IPS\cms\Databases::load( $category->database_id )->recordWord( 1 )"}</a>
			</li>
		{{endif}}
	</ul>
{{endif}}
</div>
{{if count( $activeFilters )  AND ! isset( \IPS\Request::i()->advancedSearchForm )}}
	{template="filterMessage" app="cms" location="database" group="status" params="$activeFilters, $category"}
{{endif}}

 

categoryTable

Spoiler

<div class='c4StatusTable' data-baseurl='{$table->baseUrl}' data-resort='{$table->resortKey}' data-controller='core.global.core.table{{if $table->canModerate()}},core.front.core.moderation{{endif}}'>
	{{if ! count($rows)}}
		<div class="ipsPad">
			{lang="cms_no_records_to_show" sprintf="\IPS\cms\Databases::load( \IPS\cms\Databases\Dispatcher::i()->databaseId )->recordWord()"}
		</div>
	{{else}}
		<ol class='ipsDataList ipsDataList_zebra ipsClear cCmsListing {{foreach $table->classes as $class}}{$class} {{endforeach}}' id='elTable_{$table->uniqueId}' data-role="tableRows">
			{template="$table->rowsTemplate[1]" params="$table, $headers, $rows" object="$table->rowsTemplate[0]"}
		</ol>
	{{endif}}
</div>

 

 

ОБРАТИТЕ ВНИМАНИЕ, что в шаблоне recordRow необходимо подставить ID своего поля (которое мы создадим ниже), в конструкции:

{{if $row->fieldValues()['field_5'] == '4'}}

Где field_5 - ID поля статус. У вас он будет свой. 

 

Настройка дополнительных полей

Последнее, что нам осталось сделать - настроить дополнительные поля, отображающие статус и подробное описание нововведения.

Для этого переходим в раздел админцентра Базы данных и в меню справа от нашей базы выбираем пункт Управление полями. Нам необходимо добавить два поля:

Поле #1 - статус

Название: Статус

Тип: окно выбора

Ключ/Значение: 1/Следующее, 2/Скоро, 3/Планируется, 4/Завершено

Вкладка Параметры отображения:

Ключ шаблона: status2

Формат списка записей: указать

{{if intval( $formValue ) === 1}}
	<span class='c4StatusBadge c4StatusBadge_upNext'>{$value}</span>
{{elseif intval( $formValue ) === 2}}
	<span class='c4StatusBadge c4StatusBadge_comingSoon'>{$value}</span>
{{elseif intval( $formValue ) === 3}}
	<span class='c4StatusBadge c4StatusBadge_future'>{$value}</span>
{{elseif intval( $formValue ) === 4}}
	<span class='c4StatusBadge c4StatusBadge_done'>{$value}</span>
{{endif}}

Показать при отображении записи: нет

Сохранить.

Поле #2 - резюме

Информация из этого поля располагается под название пункта. 

Название: Резюме

Тип: Текст

Вкладка Параметры отображения:

Ключ: summary

Показать в списке записей: Без форматирования

Показать при отображении записи: нет

На этом создание базы закончили. Если не хотите самостоятельно проходить каждый шаг настройки, можете импортировать базу данных из xml файла - Планы_на_будущее.xml

© ИнвижнБайт.ру