User Story #1980 Верстка области оценок на странице параметра.

Внешний вид

Одно из ключевых изменений страницы:
Впервые мы делаем в системе страницу фиксированной ширины с
центрированием. Центрируется только контент, шапка и подвал остаются как
есть. Ширина контента фиксируется в пределах 920 px, но только таблицы и
линии сообщений выравниваются в пределах 920 px. Остальной контент
выравнивается в пределах 910 px, т.е. имеет отступ в 5 px слева и
справа, по сравнению с таблицей. Контент не может быть шире 920, но
может быть уже, вплоть до 770 px.
Изменения

Заголовок "Оценки" расположен в 20 px под блоком "Порядок оценки" или
"Примечание", при его наличии.
Псевдоссылка "показать пояснение/скрыть пояснение" расположена в 10 px
справа от заголовка "Оценки", на одной с ним линии. Не меняет свое
форматирование при нажатии. Визуально работает как псевдоссылка
"показать/скрыть" в рейтинге по пользовательским параметрам из #885.
Псевдоссылка "показать первичные оценки/скрыть первичные оценки"
расположена на одной линии с псевдоссылкой "показать пояснение/скрыть
пояснение". Выровнена по правому краю.
Блок с текстом поясняющим таблицу оценок появляется при нажатии на
псевдоссылку "показать пояснение".
Имеет отступ сверху и снизу 10 px от остальных элементов.
Блок это плашка с пунктирными границами цвета D7D7D7 и фоном цвета
F5F5F5.
Внутри плашки расположен текст с отступом в 10 px от границ плашки.
Текст до тире в каждой строке выделен полужирным форматированием.
Таблица оценок расположена в 10 px от заголовка "Оценки". Максимальная
ширина таблицы при наличии всех столбцов 920 px, минимальная при наличии
всех столбцов 770, с левой и с правой стороны 5 px отступ. Содержание:
Наличие - ширина столбца max 70 px, min 60.
Полнота - ширина столбца max 75 px, min 60.
Актуальность - ширина столбца max 110 px, min 95.
Навигационная доступность - ширина столбца max 120 px, min 110,
заголовок в две строки.
HTML доступность - ширина столбца max 105 px, min 90, заголовок в две
строки.
Файловая доступность - ширина столбца max 110 px, min 90, заголовок в
две строки.
Графическая доступность - ширина столбца max 120 px, min 100, заголовок
в две строки.
Оценка параметра - ширина столбца max 100 px, 75 px, заголовок в две
строки.
Изменение оценки - ширина столбца max 100 px, 80 px, заголовок в две
строки.
Выравнивание заголовков и содержания столбцов по горизонтали по центру.
Выравнивание заголовков по вертикали по нижнему краю, содержания по
центру.
Линии таблицы D7D7D7, фон содержания F5F5F5.
Критерии с максимальной оценкой и максимальная оценка параметра имеют
форматирование стандартного текста.
Критерии с пониженной оценкой имеют цвет CD0200. В 1 px под значением
критерия с пониженной оценкой находится плашка шириной 20 px и высотой 3
px, цвета CD0200.
Оценка параметра содержит саму оценку и знак процента без отбивки
пробелом. Формат числа определяется выбранной локалью, округление до
одного знака после дробного разделителя. Цвет текста CD0200. Если оценка
параметра не максимальная, то в 1 px под значением критерия с пониженной
оценкой находится плашка шириной 60 px и высотой 3 px, границы в 1 px
цвета CD0200. Плашка внутри имеет динамическую заливку: при оценке
параметра 0, плашка полностью залита цветом CD0200, при увеличении
открытости заливка сдвигается вправо уступая место прозрачной заливке.
Процентное соотношение прозрачной и красной заливки равно проценту
открытости параметра.
Изменение имеет форматирование аналогичное столбцу "Изменение" из
рейтинга, но без лишних нулей после запятой.
Первичные оценки по критериям отображаются в скобках. Размер первичной
оценки 10 px.
Форма оценки параметра преобразуется для удобства работы экспертов.
Отступ формы от заголовка "Оценки" 5 px.
Названия критериев выровнены по правому краю по горизонтали, и по центру
кнопок по вертикали.
Расстояние между названием критерия и левой кнопкой 10 px.
Высота плашки кнопки (они плоские) 24 px, ширина кнопки 40 px. Цвет
границ кнопки 797979. Фон не выбранной кнопки E4E4E4. Фон выбранной
кнопки при максимальной оценке 006600. Фон выбранной кнопки при
сниженной оценке CD0200.
Кнопки не имеют отступа друг от друга.
Содержание кнопок выравнено по центру как по вертикали, так и по
горизонтали. Для в кнопках по умолчанию отображается тире "—".
Блок "Ссылки на найденную информацию" имеет два состояния: просмотр и
редактирование.
Заголовок блока "Ссылки на найденную информацию" имеет формат h2.
В виде для просмотра в 10 px справа от заголовка блока отображается
псевдоссылка "редактировать"
Отступ от формы оценок или таблицы оценок 20 px.
Между заголовком блока и его содержание отступ в 3 px.
В виде для редактирования содержание состоит из:
Однострочное поле ввода текста шириной в 910 px, может уменьшаться до
760 px. Поле ввода растягивающееся вниз при вводе нескольких строк.
Кнопки "Сохранить" расположенной в 10 px от поля ввода.
Псевдоссылки "Отмена" расположенной в 20 px справа от кнопки
"Сохранить".
В виде для просмотра содержание состоит из текста, в котором URL
преобразованы в кликабельные ссылки, при этом если длина ссылки больше
70 символов, она обрезается и после неё отображается многоточие
(аналогично существующей сейчас практики в полях "Пояснение").
Блок "Рекомендации" имеет два состояния: просмотр и редактирование.
Заголовок блока "Рекомендации" имеет формат h2.
Отступ от формы оценок или таблицы оценок 20 px.
Между заголовком блока и его содержание отступ в 3 px.
В виде для редактирования содержание состоит из:
Однострочное поле ввода текста шириной в 910 px, может уменьшаться до
760 px. Поле ввода растягивающееся вниз при вводе нескольких строк.
Кнопки "Сохранить" расположенной в 10 px от поля ввода.
Псевдоссылки "Отмена" расположенной в 20 px справа от кнопки
"Сохранить".
В виде для просмотра содержание состоит из текста, в котором URL
преобразованы в кликабельные ссылки, при этом если длина ссылки больше
70 символов, она обрезается и после неё отображается многоточие
(аналогично существующей сейчас практики в полях "Пояснение").
Для экспертов на этапе первоначальной оценки в 10 px от блока
"Рекомендации" находится кнопка "Сохранить".
В 20 px от блока "Рекомендации" или кнопки "Сохранить" находятся блоки
сообщений.
На этапе первоначальной оценки до создания оценки по параметру - блоки
сообщений вообще не отображаются.
На этапе первоначальной оценки после создания оценки по параметру -
отображаются "Уточнения" и "Претензии" как и сейчас.
На этапе взаимодействия и далее - под блоком "Рекомендации" или кнопки
"Сохранить" отображается блок "Комментарии". Блок "Уточнений/Претензий?"
теперь не связан с комментариями и находится в 20 px под ним. Блок
"Уточнений/Претензий?" по умолчанию свернут, оба переключателя имеют
невыделенное состояние.
Изменения в блоке сообщений:

Дата и время в оставленных сообщениях должны выводится в формате:
"краткое время" + ", " + "полная дата". Например, для русской локали
"18:19, 6 сентября 2012".
У руководителя в неотвеченном комментарии представителя псевдоссылку
"Закрыть без ответа" сделать без полужирного форматирования и не
подчеркивать дополнительно при наведении.
Блок предупреждения для представителя о времени ответа нужно сделать
аккуратнее:
Существующий текст "Крайний срок ответа на ваш комментарий: 03.03.2014"
заменить на "Крайний срок ответа на ваш комментарий 3 марта 2014."
Цвет фона плашки заменить на DDFFDD.
Нижнюю линию сообщения с такой плашкой поднять до самой плашки.
Ширину плашки сделать равной шириной с закрывающей линией сообщения.
Текст предупреждения сделать стандартного форматирования.
Вид для анонима (первичные оценки скрыты, расшифровка скрыта, все
критерии релевантны):

http://cdn.joxi.ru/uploads/prod/2014/03/13/139/62f/d128eb3ce4a07cf4aafd4bfe5fd173695a2362e7.jpg
Вид для анонима (первичные оценки скрыты, расшифровка показана, все
критерии релевантны):

http://cdn.joxi.ru/uploads/prod/2014/03/13/552/c25/62a92c04adae07f6a7d3879924f964d0fc0231ce.jpg
Вид для анонима (первичные оценки равны итоговым, расшифровка скрыта,
релевантен только критерий наличие):

http://cdn.joxi.ru/uploads/prod/2014/03/13/ae4/47b/85003644a0bd3f01c44edf6029965a90072fc5b3.jpg
Вид для анонима (первичные оценки показаны, расшифровка скрыта, все
критерии релевантны):

http://cdn.joxi.ru/uploads/prod/2014/03/13/6de/838/9e4d4060d5b04822e2d0e8a1cb62c1f6eb857e6b.jpg
Вид для представителя (этап взаимодействия, первичные оценки скрыты,
расшифровка скрыта, все критерии релевантны):

Вид для представителя (этапы подведение итогов и публикация результатов,
первичные оценки скрыты, расшифровка скрыта, все критерии релевантны):

http://cdn.joxi.ru/uploads/prod/2014/02/28/60a/5fc/41f1e6c758456d0757411875330ca3de74866270.jpg
Вид для эксперта(этап первоначальной оценки и оценка не создана):

http://cdn.joxi.ru/uploads/prod/2014/03/21/305/b9d/52c8bbd4a2b49fe738752e50eabee7fa4eaea245.jpg
Вид для эксперта(этап первоначальной оценки и оценка создана):

http://cdn.joxi.ru/uploads/prod/2014/03/21/978/e2b/3af7b9723f86f8b54cd6cbdf373ac84621e65e81.jpg
Вид для эксперта(этап взаимодействия по умолчанию):

http://cdn.joxi.ru/uploads/prod/2014/03/21/ada/337/7138876937ac4cfea8299d8709e22dff47826ed0.jpg
Вид для эксперта(этап взаимодействия, режим "Ответить"):

Вид для эксперта(этап взаимодействия, режим "Изменить оценку"):

Вид для эксперта(этап взаимодействия, редактировать ссылки):

Вид для эксперта(этап взаимодействия, редактировать рекомендации):

Вид для руководителя(этап первоначальной оценки и оценка создана):

http://cdn.joxi.ru/uploads/prod/2014/03/21/ada/337/7138876937ac4cfea8299d8709e22dff47826ed0.jpg