Улучшение интерфейса

Необходимо доработать сайт:

• улучшить интерфейс;
• добавить кнопку "скопировать", которая будет копировать анонсы событий;
• добавить детальное описание событий.

Это нужно для того, чтобы с сайтом было удобно работать.

Исследование

Этот сайт довольно простой. Поэтому здесь я буду использовать стили PureCSS. С этими стилями мне еще не приходилось работать. Это будет первый опыт. Сейчас сайт выглядит так:



Посмотрим, как изменится сайт в конце поста.

Кодинг

Пошаговый процесс:

1. Развернуть рабочую среду. Написать инструкции по развертыванию проекта;
2. Подключить стили PureCSS;
3. Агрегировать весь javascript функционал в классе App;
4. Добавить заголовок на страницу Neon at codepen.io;
5. Использовать паттерн MVC, в котором класс App выступает контроллером;
6. В класс GoogleCаlendar вынести загрузку данных. Этот класс будет моделью;
7. Создать SimpleView - простой список событий. Этот класс - наше представление;
8. Убрать стили PureCSS - никуда не годятся 😡;
9. Добавить bootstrap 4, теперь сайт выглядит так:
   
   
10. Добавить ссылки на соцсети;
11. Добавить кнопку "Скопировать расписание", подключить clipboard.js;
12. Добавить раздел с детальным описанием событий - класс DetailedView. Этот класс - второе представление наших данных;
13. Обновить сайт.

Итого

Реализация этого небольшого проекта ушло два вечера и выходной.
Стоит ли использовать стили PureCSS? Нет, лучше Bootstrap.
Что делать с этим дальше? Не знаю.

Посмотреть сайт: https://events4friends.ru/

Посмотреть исходники: https://github.com/VadimCpp/events4friends

Другие статьи

Планируется:

• автоматический постинг списка событий в соцсети;
• улучшить интерфейс;
• создать vue.js компонент.