Bootstrap@TLab

1 августа 2015

Мне как-то было нечем заняться на выходных, и на глаза попался старый сайт TLab. Я давно хотел что-нибудь там обновить, но не особо знал, что именно. Обновить, конечно, можно много чего, но начать я решил с сайта.

Обычно я не пользуюсь фреймворками, но захотел попробовать Twitter Bootstrap. Нашел подходящий шаблон, и занялся его переделыванием.

Одностраничный сайт с пикчей на весь экран — это круто и модно, решил я. Но обычно при этом есть какой-нибудь заголовок и подпись, а никаких слоганов у TLab нет. Да и я собирался переделывать сайт, так что вешать на главной лого во всю страницу, как раньше, было нельзя.

Поэтому вместо всяких слоганов я решил прикрутить карусель — получается, просто сделал то, что и так было раньше. Правда, лишние ссылки и подписи решено было убрать, да и сами слайды сделать просто картинками. Скринсейвер на Flash и полотно иконок, генерируемое на Javascript, конечно, забавно, но не нужно. К тому же, я не уверен, насколько хорошо это работало бы во время перехода между слайдами, и разбираться с этим не сильно хотелось.

Поскольку все эти одностраничные сайты у меня ассоциировались с плавной прокруткой между экранами, я решил все же добавить такую и себе. Поэтому на главной появился второй экран — с «описанием» TLab. Этим я заменил отдельную страницу, которую все равно вряд ли кто-то посещал.

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

Поскольку подходящей крупной пикчи у меня не было, а старую ставить как-то не хотелось, вспомнилась мне другая штука. Это подстраивающийся под размер страницы canvas, на котором отрисовывается треугольная сеточка, а по самому центру — заготовленная картинка-треугольник. Я немного подредактировал код, и теперь вместо старой ограниченной в размерах jpg-картинки у меня был адаптивный canvas, градиент на котором подбирается по размеру страницы, а потому и выглядит неплохо. Он-то и используется в качестве фона на страницах сайта.

Итак, новая главная была готова. Весь остальной сайт, правда, развалился, когда я удалил тучу всякого барахла, так что пришлось немного подправить и его. Выглядит почти как старый, хотя есть немного отличий.

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

Зато озаботился резиновостью и адаптированностью к мобильным экранам. Раньше сайт занимал фиксированные 800 пикселей и никак не масштабировался. Если экран шире, то контент центрировался, если же нет — то появлялась горизонтальная прокрутка. Двадцатипиксельная полосочка навигации всегда была наверху, но на телефонах выглядела совсем уж крохотной.

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

Но меню — не единственное, что подстраивается под экран. Карусель на узких экранах я заменил на полноэкранные изображения, плавную поэкранную прокрутку на них выключил (хотя на телефонах все равно не приходит событие мыши, но это на всякий случай, чтобы не раздражало), а оставшиеся от старого сайта ограничения на 800 пикселей — выпилил. Теперь количество колонок меняется в зависимости от ширины, а на страницах игр основная информация вылезает наверх и растягивается, чтобы удобнее было читать. Обновил и галерею — теперь размер скриншота подстраивается под экран, и никогда не вызывает горизонтальную прокрутку.

Вместе со всяким барахлом пропали и несколько игр. Некоторые все ещё упомянуты в описаниях других, но совсем уж трешовые решил выкинуть.

Внешний вид сайта особо не изменялся с 2012 года — вот как он выглядел тогда: