Другие страницы

0000 – Главная страница

1. Вид для неавторизованного пользователя (кнопки «Вход»/«Регистрация»)
2. Вид для авторизованного пользователя
3. Пользовательское меню
4. Неактивная и активная входящих сообщений (с числом новых сообщений)
5. Кнопка «Создать» и модальное окно «Создать» (черновик, топик, блог, категория, сообщение, событие, галерея, место, карту, новость)
6. Сайдбар и общий вид виджетов в сайдбаре (если есть)
7. Виджеты – Прямой эфир, Список категорий, Список блогов, Теги
8. Попап-блок с текстом комментария для Прямого эфира
9. Попап-блок со статистикой голосов
10. Всплывающие системные сообщения (Notice, Error)
11. Статические системные сообщения (Notice, Error)

0010 – Модальные окна

1. 1) Общий вид модальных окон – форма, информационное сообщение, важное сообщение
2. 2) Окно авторизации – вход, регистрация, восстановление пароля
3. 3) Ошибка авторизации/регистрации

0100 – Список топиков

1. Виды топиков: черновик, отложенный, опубликованный, из закрытого блога, на модерации
2. Топик с превью и без
3. Топик с фотосетом, с голосованием, с сылкой-источником
4. Сайдбар и общий вид виджетов в сайдбаре
5. Виджеты – Прямой эфир, Список категорий, Список блогов, Теги
6. Пагинация (блок со списком страниц)

0200 – Просмотр топика

1. Вид топика: черновик, отложенный, опубликованный, из закрытого блога, на модерации
2. Служебное меню: Редактировать / Удалить
3. Элементы текста: заголовки (h4, h5, h6), изображения, списки, цитаты, ссылка на пользователя
4. Фотосет, голосование (выбор и результаты), ссылка на источник
5. Дополнительные поля: теги, дата, место, прикрепленные файлы
6. Голосование за топик (+/-/воздержался)
7. Комментарии разрешены/запрещены
8. Дерево комментариев (авторский, новый, прочитанный, помеченный на удаление, удаленный)
9. Написать комментарий

0210 – Создание/редактиование топика

1. Виджет – Информация о блоге
2. Блок «Доступные теги»
3. Блоки — Фотосет, голосование, ссылка на источник
4. Дополнительные поля: теги, дата, место, прикрепленные файлы
5. Предпросмотр топика

0300 – Список блогов

1. Типы блогов: персональные, открытые, закрытые, тайные, корпоративные
2. Кнопки «Подписаться»/«Отписаться»

04xx – Блог

1. Информация о блоге (свернутая/развернутая)
2. Служебное меню: Редактировать/Администрировать/Удалить

1. 1) Виджет – Приглашение в блог

0500 – Люди

1. Виджеты – Города, Страны, Статистика

06xx – Профиль чужой

1. Без заметки
2. Добавить заметку
3. С заметкой
4. В пунктах Публикации, Избранное, Друзья – бейджи с числом

1. Просмотр
2. Написать/Ответить

07xx – Профиль свой

08xx – Система сообщений

1. Раскрывающийся блок «Поиск сообщений»

1. Ответить

0900 – Активность

1. Виджет – Список отслеживаемых пользователей, добавить пользователя

10xx – Лента

1. Контекстное меню: Подписки, Комментарии, Новые

1. Виджеты – Люди, на которых подписан, Друзья, Блоги

1. Виджеты – Топики, в которых отслеживаются комментарии

1100 – Статическая страница (например, «About»)

1. Родительская страница без дочерних
2. Родительская страница с дочерними страницами
3. Дочерняя страница

1200 – Страница ошибки (404)

<a href="site.com/delete/all/" onclick="return confirm('Вы уверены?');">Удалить все!</a>

ls.modal.alert(‘Hello, world!’);

ls.modal.alert({title: 'I say', text: 'Hello, world!', onConfirm: function(){
   // юзер кликнул по кнопке Ok
}});

var htmlCode = '<img src="site.com/uploaded/avatar.jpg"> Вот ваш новый аватар';
ls.modal.alert({title: 'Аватар', html: htmlCode});

ls.modal.confirm({title: 'Удаление', text: 'Удалить все подряд?', 
   onConfirm: function(){
      // юзер кликнул по кнопке «Подтвердить»
   },
   onCancel: function(){
      // юзер кликнул по кнопке «Отмена»
   }
});

ls.modal. prompt ({title: 'Ввод числа', text: 'Введите сюда число', value: 123
   onConfirm: function(value){
      // Введенное значение в переменной «value»
   }
});

<a href="#" class="js-delete-all">Удалить все!</a>
<script>
$(function(){
    $('js-delete-all').click(
        ls.modal.confirm('Вы уверены?', function(){
            location.href="site.com/delete/all/";
        });
    );
});
<script>

Шаблонные модальные окна

{include_once file="tpls/modals/modal.write.tpl"}

.modal, .modal-dialog { /* это классы-обертки и их трогать не рекомендуется*/}
.modal-content        { /* собственно само модальное окно */}
.modal-header         { /* шапка окна, обычно это тег <header> */}
.modal-title          { /* заголовок окна, стандартно это тег <h4> */}
.modal-body           { /* тело окна, его основное содержимое */}
.modal-footer         { /* «подвал» окна, обычно там размещают кнопки */}

1. braindep
2. Seigiard
3. sunrise
4. Barthazar
5. georgos
6. aVadim
7. Kenex
8. Live
9. Lena
10. 01001
11. Zaicev
12. perfect
13. Pring
14. MySochi
15. Alyona
16. orthograf

Общие принципы

Модальные окна

{include_once file="modals/modal_auth.tpl"}

Виджеты

Контент – топики (статьи) и поля