Адаптация макета под мобильные устройства

Цена договорная • наличный расчёт, безналичный расчёт, электронные деньги
07 марта 2019, 11:12 • 11 откликов • 96 просмотров
От исполнителя ожидается бюджет, сроки, портфолио

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

Техническое задание
  • Принятые данные
    • Есть шаблон (и макет), который не оптимизирован для мобильных устройств
    • Есть проект в фигме, в котором и мобильная и обычная версия
    • От основной верстки:
      • Sass
      • Pug
      • Babel 6.26.0
  • Структура папок (от корня)
    • /theme/mobile/css/mobile.css
    • /theme/mobile/js/mobile.js
  • Ожидаемый результат
    • Необходимо получить 2 файла фиксов
      • Mobile.css
      • Mobile.js
  • Задача
    • Сайт должен корректно смотреться на всех указанных устройствах и браузерах, указанных ниже
    • Мобильная версия определяется размером окна
      • Ширина менее 880px
        • Данный параметр следует вынести в настройки
    • На смартфонах всегда мобильная версия
    • В мобильном меню должна быть кнопка перехода в полную версию
      • Которая адекватно отключает стили мобильные и сохраняет в рамках сессии браузера
  • Описание элементов
    • Футер
      • Четыре ссылки просто
        • Ссылка (блок) имеет 2 состояния
          • Активно
          • Нет
        • Лента, чаты, задания могут иметь дополнительное состояние
          • Есть уведомления
            • Отображено на макете
    • Типы страниц
      • Страница со 100% содержимом
      • Страница с табами
    • Ссылки на страницы в нижнем меню можем хранить в localStorage (обсуждаемо)
      • Можем создать блок статичный
      • Пока условно можно сделать так, но эти ссылки и пиктограммы (через классы) должны гибко настраиваться
        • Лента
          • /feed
        • Чаты
          • /chats
        • Задания
          • /tasks
        • Основная рабочая область
          • /items
    • Мобильное меню
      • Идентификатор: menu_mobile
      • Хранится в конце страницы, многоуровневое (структура dom обсуждаема с исполнителем)
      • Можно использовать готовое решение, которое необходимо согласовать
  • Проверка результатов работы
    • Устройства
      • Iphone
      • Ipad
      • Samsung
      • Xaomi
    • Браузеры
    • Проверка на компьютере, посредством изменения размеров или специального режима в браузере
      • Разрешения
        • 768
        • 880
        • 736
        • 667
        • 480
      • Браузеры: Internet Explorer (11+), Firefox (52+), Chrome (49+), Safari (10+), Opera (56+), Microsoft Edge (15+)
      • Мобильные браузеры: все актуальные, последних версий.
      • Операционная система: windows 7, windows 10, MacOs, Debian (KDE, Gnome)
Файлы