New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Осовременнить дизайн? #26

Open
umputun opened this Issue Dec 20, 2018 · 71 comments

Comments

Projects
None yet
9 participants
@umputun
Copy link
Member

umputun commented Dec 20, 2018

То, что у нас сейчас (в визуальном смысле) было мной творчески адаптированно много лет назад из какой-то темы WP и потом перехало на octopress и hugo. Функционально вроде все в порядке, и все, что я планировал там показывать, показывается. Однако, возможно пришло время обновить дизайн? Лично я не уверен, что такая необходимость действительно есть, но мои вкусы они минималистичны и, возможно, отстали от модных трендов.

В качестве конечного результата хотелось бы получить PR со всеми изменениями CSS и всего того, что еще надо. Перед тем, как менять утвердите со мной (прямо в этом тикете) мокап, чтоб не тратить время зря.

инструкция для тех, кто не знает как собрать сайт и посмотреть на результат:

  • склонировать этот репо: git clone https://github.com/radio-t/radio-t-site.git
  • установить hugo
  • cd radio-t-site/hugo
  • запустить hugo server и пойти на url что он скажет

@umputun umputun added the help wanted label Dec 20, 2018

@isnifer

This comment has been minimized.

Copy link

isnifer commented Dec 20, 2018

Текущий дизайн хорош и по-прежнему актуален, как мне кажется)

@umputun

This comment has been minimized.

Copy link
Member

umputun commented Dec 22, 2018

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

@radio-t radio-t deleted a comment from Boikolek Dec 22, 2018

@StaroKep

This comment has been minimized.

Copy link

StaroKep commented Dec 23, 2018

Здравствуйте!
Сделал небольшой набросок и решил показать, что получается.
Выглядеть, как мне кажется, стало свежо (и, может быть, современно).
Рисовать дальше? Или срезу нет?
https://drive.google.com/open?id=1y-6TXpRZJi98v_5-jRwxjP6yMp7qZmB1

@umputun

This comment has been minimized.

Copy link
Member

umputun commented Dec 24, 2018

этот дизайн не совсем для того сайта, что есть сейчас. Во первых, у нас нет показа тем. Может это и неплохая идея, но это точно не вместо последних коментариев. Проигрывателя с временными метками у нас тоже нет. Я не хочу устраивать из этого большой проект и не хочу делать сразу изменения и визуальные и функцниональные, если этого можно избежать.

что касается визуального:

  • идея банера "помочь подкасту" так явно и так в середине всего мне активно не нравится. Помощи оно не добавит, но добавит вполне понятного раздражения.
  • светло синиие буковки, которых тут большая часть, читаются плохо
  • +/- на плеере вообще непонятно, видимо след./пред. часть но знаки странные и неожиданные.
  • все в целом мне не очень понравилось, но возможно какое мелкое изменение где-то и в чем-то может все починить. Мне трудно сказать что именно не так, не совсем моя область экспертизы.
@StaroKep

This comment has been minimized.

Copy link

StaroKep commented Dec 24, 2018

Спасибо за ваше мнение.

Я хотел показать концеп, а именно: даём больше свободного пространства для лёгкости, минималистичности и аккуратности. Разделение блоков в правой колонке обеспечиваем за счёт свободного пространства (без серых линий-разделителей). Убираем лишние и дублирующие элементы.

Этот дизайн - идея. Можно не сразу менять сайт под него.

  • Нет показа тем? Ок. Запоминаем идею и меняем на блок с последними комментариями;
  • Нет плеера? Ок. Можно поставить задачу в github’e. Оставляем имеющийся функционал.

По поводу остального информацию принял. Попробую доработать и учесть ваши замечания.

@sultan99

This comment has been minimized.

Copy link

sultan99 commented Dec 24, 2018

Добавил отсебятины типа чат и всякую всячину, исходил от личных хотелок.

Бывает слушаешь, а там обсуждают какую ту вещь из чата, а вот посмотреть, нет возможности. Предлагалась такая фича как в Youtube, где чат сообщений появляются синхронно с таймлайном. И еще одна хотелка, которую я добавил - разбивка тем, парой хочется пропустить или послушать только конкретную тему.

Глянул предыдущий пост и понял, что не ставится цель делать мега проект 😒 и сбавил обороты.

Картинку UI лучше просматривать в 100%, дабы не размазывались пиксели :)

@sultan99

This comment has been minimized.

Copy link

sultan99 commented Dec 24, 2018

Забыл, упомянуть. Я взял наглость подменить логотип, текущий логотип никак не вписывался в дизайн.
Эскизный логотип, вовсе не замена, мне нужно было, что то туда зарисовать, что более менее подходило по дизайну.

Примечательная фишка, фон можно менять рандомно, чтобы не надоедало, вот возможные варианты:
природа
какая-та абстрактная фигня

@umputun

This comment has been minimized.

Copy link
Member

umputun commented Dec 24, 2018

К этому дизайну у меня есть конецптуальное возражение - это все оптимизированно для прослушивания подкаста с сайта. Подобный use-case это относительная экзотика для подкастов вообще и для нашего в частности. Я понимаю, что есть ненулевое количество слушателей которые делают именно так, но большинство слушает это подкаст проигрывателями и превращать сайт в такой проигрыватель я не вижу смысла.

Сайт должен быть удобен для большинства. Оно, я так подозреваю, заходит на сайт чтоб посмотреть темы, предложить свои и поучаствовать (или почитать) коменты. И еще оно заходит чтоб найти ссылку/кнопку на подписку.

Ну и кроме того, этот дизайн противоречит моему тезису выше - т.е. тут я хотел бы реалистичный дизайн на основе той информации, что есть сейчас, а не хотелки как бы оно вообще могло бы быть. По сути если из html и css (или какого sass) этого сделать нельзя вокруг нашего текущего сайта, то скорее всего это вне пределах поставленной задачи. Конечно возможны ислкючения с дополнительным JS по необходимости, но это именно исключения а не полностью новое все.

@umputun

This comment has been minimized.

Copy link
Member

umputun commented Dec 24, 2018

@igoradamenko @Reeywhaar Коллеги, если это просто прикрутить магию для переключения в темную тему автоматически (в сафари) и, возможно, какой иконкой для тех, кто этого не понимают - было бы круто. Это я по поводу #26 (comment)

@StaroKep

This comment has been minimized.

Copy link

StaroKep commented Dec 24, 2018

@umputun

This comment has been minimized.

Copy link
Member

umputun commented Dec 24, 2018

лучше, да. Однако в появившемся блоке про онлайн вещание не хватает главного - ссылки (конпки/иконки) как собственно слушать. Кроме того, на сайте есть банер DO тут непонятно где он будет

@StaroKep

This comment has been minimized.

Copy link

StaroKep commented Dec 24, 2018

@umputun
Вариант, над которым я думал:

  • у нас есть обратный отсчет. Вот когда он закончится, появится ссылка "Слушать". При нажатии, на которую, произойдет воспроизведение online вещания или нас кинет по этому адресу http://stream.radio-t.com

Не понял. Какой банер DigitalOcean?
Тут что-то должно быть?

И я еще подумал. Наверное, "Информация о подкасте и ведущих" лучше перенести в блок "Подкаст выходного дня", чтобы основные ссылки были логически сгруппированы.

@Khilkov

This comment has been minimized.

Copy link

Khilkov commented Dec 25, 2018

Всем привет!

К сожалению, совсем CSS`ом обойтись вряд ли получится, но старался минимально модифицировать.

По факту, сейчас есть 2 типа постов:

  1. Сбор тем на следующий выпуск
  2. Пост с содержанием выпуска

Предлагаю делать их различного вида, хоть это и, вероятно, усложнит редизайн.

@sw-double

This comment has been minimized.

Copy link

sw-double commented Dec 25, 2018

@Khilkov красота! Готов воплотить в жизнь

@umputun

This comment has been minimized.

Copy link
Member

umputun commented Dec 25, 2018

@StaroKep да, там должен быть банер, который сломался. @grayru обещал починить

@umputun

This comment has been minimized.

Copy link
Member

umputun commented Dec 25, 2018

@Khilkov любопытно, да. Есть некоторые вопросы:

  1. Непонятно как будет выглядить post (типа этого) и как будет выглядить page (типа этой)
  2. Непонятно как будет выглядить страница архивов
  3. Видимо тут все картинки должны быть квадратными? Как быть со всеми что есть уже?
  4. Что с местом для банера DO (см. выше)?
  5. Темы визуально выглядят больше чем выпуск, хотелось бы наооборот
  6. Непонятно как сделать метки времени на стороне hugo, но наверное можно как-то.
  7. Поток последних комментариев, который лично мне кажется весьма и весьма полезным, пропал
  8. Twitter виджет, полезность которого весьма условная, тоже пропал
  9. Player, который поверх картинки - видимо он должен быть частично прозрачным
  10. интересно, как это будет выглядить в темной и светлой теме с коментами. Там кастомизация ограничена цветом фона. Хотя, наверное @igoradamenko сможет помочь если очень надо будет их как-то особо адаптировать.
@Khilkov

This comment has been minimized.

Copy link

Khilkov commented Dec 25, 2018

@umputun,

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

  2. Здесь может быть несколько вариантов.

    3.1. В макетах я использовал картинки, что используются и сейчас. Единственное, я находил их в более высоком качестве, (те что сейчас на сайте — мелковаты). Они могут делаться квадратными при помощи обычного CSS:

    background-size: cover

    3.2. Можно брать те картинки что юзаются сейчас и вставлять их в центре блока. Тогда не понадобиться искать их в высоком разрешении (или их аналоги)
    image

    3.3. Доработанный второй вариант. Это когда на фоне дублируется картинка, но она размыта и полупрозрачная.
    image

    3.4. Комбинировать первый и второй варианты. Для новых постов загружать изображения с высоким разрешением и учитывать, что они будут обрезаться под квадрат. А для старых — использовать вариант номер два.

  3. Размеры баннера, если я правильно понял, 240×400, верно? Есть ли какие-нибудь требования по его размещению? Например, он должен быть на первом экране, или можно внизу / в центре разместить? Можно ли будет его сделать не вертикальным а горизонтальным, на всю ширину страницы?

  4. Речь о слове «Темы» и числе рядом?
    image
    Если да, то это поправимо :)
    Например, вот так, но возможны и другие варианты.
    image
    Если речь о чем-то другом, уточните, плиз.

  5. Эх... да, я знаю. Здесь, как и с разными типами постов, я «вылез» за условия задачи. Но когда временные метки отбиваются от топика — и то и другое лучше «считывается». Хочется верить что так можно сделать. Если нет — будем оставлять как было.

  6. Этот и следующий вопрос — мой косяк. Не увидел особого смысла в комментариях без привязки к теме обсуждения. Но, скорее всего, это моя личная бага и комментарии с твиттером нужно вернуть. Есть вариант сделать их колонкой справа, как здесь. Единственное, на мой взгляд, у блока по ссылке не хватает возможности его свернуть или развернуть, для тех кому он не интересен.
    Внутри блока предлагаю сделать 2 таба. Первый (открытый по умолчанию) — комментарии, второй — твиты.

  7. Легко :)

  8. Речь о комментариях не на индексной, а внутри поста? Там да, вставляется iframe. Можно, конечно, и в темной теме делать на белом фоне, но смотреться оно будет как бельмо на глазу. Было бы круто перекрашивать и фон и текст, если возможно.

@umputun

This comment has been minimized.

Copy link
Member

umputun commented Dec 25, 2018

  • про картинки понял, это нормально, вариант 3.4 вполне разумный. Старые, конечно перезаливать не будем, а новые можно делать больше в момент публикации (на моей стороне).

  • про последние коменты колонкой справа - о таком я не думал, но наверное их можно "выползать" справа по клику на что-то, а не все время показывать. Типа как в коментах выползает правая колонка при нажатии на имя. Не уверен как оно в твой дизайн вписывается, но это детали которые ты придумаешь ;)

  • Про коменты внутри поста, я вот что имел ввиду: сейчас на radio-t.com видно как выглядят светлые коменты, на пиратах - как темные. На news – оба варианта.

  • по поводу меток времени и hugo – наверное когда мы поймем что именно надо строить, то это можно будет прикрутить либо в момент построения нового поста, либо в момент генерации на hugo

  • про банер - призываю @grayru

  • кстати, иконки справа, где загрузить файл и смотреть чат мне как-то не так выглядят, как-то они выбиваются из общей картины

@StaroKep

This comment has been minimized.

Copy link

StaroKep commented Dec 25, 2018

@umputun учел ссылку во время вещания и баннер DO
Вариант с обратный отсчетом
Вариант блока во время вещания

  • Не показывать комментарии всегда - очень хорошая идея

@Khilkov Очень крутая работа! Сразу видна рука мастера!
Однако, я считаю, что надо сохранить структуру, которая есть сейчас.
Все слушатели уже привыкли. Об этом говорит статистика на twitter'e.

Многие считают, что текущий дизайн и так хорош. Я тоже так думаю.
Мой вариант учитывает это и просто немного освежает и выравнивает то, что есть сейчас.
@Khilkov ваш вариант - полное переосмысление интерфейса.

@Khilkov

This comment has been minimized.

Copy link

Khilkov commented Dec 26, 2018

@umputun, Внес правки, обновил макеты.

  1. Главная
  2. Главная с открытым чатом
  3. Главная в темном исполнении
  4. Чат в темной теме

Прототип частично кликабельный. Пока что можно только переключать темы (иконка около поиска) и открывать комменты.

@StaroKep, спасибо за теплые слова! Возможно, вы правы и такие радикальные изменения ни к чему. Более того, судя по опросу в Твиттере, аудитории не особо важно будет ли редизайн в принципе )))

Предлагаю в этом вопросе положиться на авторитетное мнение ведущих.

@grayru

This comment has been minimized.

Copy link

grayru commented Dec 26, 2018

По баннеру — в упор не понимаю, что там сломалось :). Но там древний флеш, может, его уже браузеры показывать отказываются.
Я еще повожусь, но пока предлагаю не считать это блокером или проблемой. На самом деле, если вы просто предусмотрите большую плашку для генерального спонсора с указанием промокода, я думаю, будет даже лучше.

@grayru

This comment has been minimized.

Copy link

grayru commented Dec 26, 2018

@umputun, Внес правки, обновил макеты.

  1. Главная
  2. Главная с открытым чатом
  3. Главная в темном исполнении
  4. Чат в темной теме

Прототип частично кликабельный. Пока что можно только переключать темы (иконка около поиска) и открывать комменты.

@StaroKep, спасибо за теплые слова! Возможно, вы правы и такие радикальные изменения ни к чему. Более того, судя по опросу в Твиттере, аудитории не особо важно будет ли редизайн в принципе )))

Предлагаю в этом вопросе положиться на авторитетное мнение ведущих.

Мне неясна логика показа комментариев — они будут, как сейчас, только последними site-wide? Поскольку панелька со всеми комментариями мигает и при клике на комменты темы, но это неправильно, надо либо открывать новую страницу темы, или открывать в панели только комменты к данной записи.
И надо доработать верстку этой панели — там неясно, что комментарии к разным темам.

@Khilkov

This comment has been minimized.

Copy link

Khilkov commented Dec 26, 2018

@grayru, Комментарии на индексной странице будут выводиться те же что и сейчас (то есть последние). Панелька комментариев мигает — это Скетч подсвечивает кликабельные области. Можно в любом месте кликнуть и будут подсвечены секторы на которые я сделал линки ))) В конечной вёрстке ничего мигать не будет. Если кликнуть по комментариям темы будет та же логика что и сейчас — откроется страница темы, а под ней будут комментарии.

И надо доработать верстку этой панели — там неясно, что комментарии к разным темам.
Я делал один в один как сейчас, но если нужно, конечно можно добавить к какой теме коммент. Правда, возникает вопрос насколько это сложно технически. Нарисовать точно не проблема.

@Reeywhaar

This comment has been minimized.

Copy link

Reeywhaar commented Dec 26, 2018

На всякий случай: вот этот чат не стилизуется, у гиттера нет возможности свой css добавить в окно.

А чего никто не показывает мокап для мобильной версии? :-)

@Khilkov

This comment has been minimized.

Copy link

Khilkov commented Dec 26, 2018

@Reeywhaar

А чего никто не показывает мокап для мобильной версии?

Хочется вначале согласовать десктопную версию, а уже потом переходить к адаптивам.

@Reeywhaar

This comment has been minimized.

Copy link

Reeywhaar commented Dec 26, 2018

Мне кажется надо отметить, что контент каждого поста это маркдаун, и чтобы сделать, например, такую штуку
screen shot 2018-12-26 at 20 19 46
Придется либо переписывать уже имеющиеся посты, либо делать какой-то двойной парсинг: markdown -> html -> html, либо писать кастомный маркдаун парсер.

@umputun ты писал

Непонятно как сделать метки времени на стороне hugo, но наверное можно как-то

Но правда, как это можно сделать малыми средствами? Мне кажется это важно понять, пока на берегу, а то люди рисуют тут, стараются. В hugo есть shortcode но тогда придется переписать каждый пост в вид типа

{{% title-image "https://radio-t.com/images/radio-t/rt516.jpg" %}}

{{% topic "Что было на Google Pixel" "https://techcrunch.com/2016/10/04/everything-you-need-to-know-from-googles-pixel-event/" "00:06:19" %}}
{{% topic "Google хочет быть всеми сразу" "http://nymag.com/selectall/2016/10/google-doesnt-want-to-be-apple-it-wants-to-be-everyone.html" "00:21:16" %}}
{{% topic "Новый Samsung Galaxy Note7 тоже хорошо горит" "http://mashable.com/2016/10/05/samsung-galaxy-note7-plane-evacuation/" "00:52:58" %}}

{{% sponsor "https://www.digitalocean.com" %}}
{{% chat-log "http://chat.radio-t.com/logs/radio-t-516.html" %}}
{{% audio "http://cdn.radio-t.com/rt_podcast516.mp3" %}}

вместо голого маркдауна.
Еще можно трансформировать посты в data templates.
Третий путь, это превратить сайт в spa, брать контент из api, парсить и рендерить сайт джаваскриптом, тут и hugo не нужен. Но представляю каким адским будет парсинг учитывая багаж подкаста, да и вообще это уже прямо проект.

@umputun

This comment has been minimized.

Copy link
Member

umputun commented Dec 26, 2018

@Reeywhaar ну я не зря сказал "непонятно как" :) Контент старых менять кончено не хочется и адаптировать маркдаун по дизайн это тоже не наш путь. Все, что можно легко поменять для новых постов - это перенести метки времени до текста в макрдауне. Т.к. они сейчас "помечены" италиком, то видимо можно эти метки стилизовать через css.

@umputun

This comment has been minimized.

Copy link
Member

umputun commented Dec 26, 2018

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

@grayru - это не про верстку. Лента последних коментариев это ограничение api который знает про комент только ссылку на пост, но не заголовок поста. Кроме того, это виджет который отдает remark42. Его, в принципе, можно стилизовать (это не iframe) но пока там просто нет такого, что ты хочешь.

@umputun

This comment has been minimized.

Copy link
Member

umputun commented Dec 27, 2018

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

А все остальное тоже фиксируется по ширине максимальной?

@Khilkov

This comment has been minimized.

Copy link

Khilkov commented Dec 27, 2018

Хм... Можно попробовать. Но страницу надо будет сильно "перелопатить".
Трабла в том, что блок комментариев как на главной (в 400 пикселей) — узковат для страницы поста, так как в нём возможна древовидная структура у комментариев, да и сам коммент может быть весьма большой. Вторая трабла в том, что будут перекосы: контента в посте очень мало (например у постов типа «Темы для выпуска»), а правая колонка с комментами перегружена. Имхо, лучше оставить комменты как сейчас.

Возможно с фоном лучше будет смотреться?

podcast

А все остальное тоже фиксируется по ширине максимальной?

Да, максимальная ширина блока с контентом 1170px

@Khilkov

This comment has been minimized.

Copy link

Khilkov commented Dec 27, 2018

Правда, могут же возникнуть проблемы со сменой фона у комментариев, они-то ифреймом вроде вставляются... хз.

@umputun

This comment has been minimized.

Copy link
Member

umputun commented Dec 27, 2018

могут же возникнуть проблемы со сменой фона у комментариев,

нет, это не проблема, фон там прозрачный и можно "подложить" любой. И да, с серым блоком смотрится лучше.

Вторая трабла в том, что будут перекосы: контента в посте очень мало (например у постов типа «Темы для выпуска»), а правая колонка с комментами перегружена. Имхо, лучше оставить комменты как сейчас.

Да, согласен

@umputun

This comment has been minimized.

Copy link
Member

umputun commented Dec 27, 2018

@Reeywhaar по поводу "вкусовщины"

Сейчас стало влезать меньше информации. Комментарии с твиттером убраны в схлопывающийся сайдбар, на который, как мне кажется, просто никто не будет нажимать.

Вообще мне это кажется скорее положительным чем отрицательным. Сейчас информации слишком много. Коментарии нажимать - я буду :) И, теоретически, там можно будет добавить таб для чата, когда (если) будем к этому готовы

Навигация разбросана по нескольким местам, хочется одного места, как сайдбар сейчас, где есть все ссылки. Чат в блоке про онлайн вещание, "подкаст на Alexa" похоронен в футере, rss в шапке.

Тоже не согласен. Надо решить что главное показать в шапке, а второстепенное вниз. Кроме того, оно может дублироваться и в каком новом верхнем табе типа "Полезное", если надо все собрать.

@Reeywhaar

This comment has been minimized.

Copy link

Reeywhaar commented Dec 28, 2018

@umputun по поводу вкусовщины: you're the boss, и возможно, только возможно, во мне говорит брюзга, который просто привык.

По поводу архивов: Саму таблицу сверстать можно, легко если на css grid, средне если на flex и хардмод на float. Плюс надо поработать с hugo шаблонами, матчить категорию, и если подкаст, то вычленять номер, а если не podcast и не prep, то указывать через class, что новость должна занимать две плашки.
Непонятно, как будет выглядеть пост занимающий две плашки, если он будет на 4м, 8м и тд месте, и вообще непонятно живуче ли это для мобильной версии, но выглядит красиво.
screen shot 2018-12-28 at 06 35 32

Не уверен, что такой query можно в hugo запросить, пока не попробуешь, не узнаешь:
screen shot 2018-12-28 at 06 31 03

Вот такие breadcrumbs они не правильные:
screen shot 2018-12-28 at 07 08 41
Посты не является частью категории, а наоборот, у поста может быть много категорий, и непонятно, как строить такие крошки. Я бы скорее понял крошки вида главная/2018/12/24/prep-480 как в url, но они не очень полезные и тогда нужны страницы для главная/2018/12, главная/2018/12/24. Вообще у сайта нет какой-то сложной иерархии, либо page либо post, и я не думаю, что крошки вообще нужны, м?

Подумал для тем слушателей, можно сделать отдельный layout и переместить комментарии в блок контента, как сейчас на https://news.radio-t.com/post/temy-slushatelei-629, грубо
screen shot 2018-12-28 at 07 18 03

@Khilkov

This comment has been minimized.

Copy link

Khilkov commented Dec 28, 2018

@umputun, по моим подсчетам это последняя порция страниц для десктопа, вроде как все учел. Если нет — пишите, исправлюсь ))

Если все ок — будем переходить к телефонам.

@Khilkov

This comment has been minimized.

Copy link

Khilkov commented Dec 28, 2018

@Reeywhaar

Непонятно, как будет выглядеть пост занимающий две плашки, если он будет на 4м, 8м и тд месте, и вообще непонятно живуче ли это для мобильной версии

Хороший вопрос. Думаю, если пост, занимающий 2 плашки оказался последним в ряде, то он переносится на новую строку, а его место просто оставляем пустым.

По поводу крошек, да, согласен, в них не особо много смысла при таких раскладах. Заменил везде на «Вернуться на главную», но можем и вообще убрать (на главную можно вернуться стандартно как везде — кликнув по лого).

Подумал для тем слушателей, можно сделать отдельный layout и переместить комментарии в блок контента

Офигенная идея. Реализовал и макете )))

@umputun

This comment has been minimized.

Copy link
Member

umputun commented Dec 28, 2018

выглядит хорошо, хотя совсем непонятно где и как этому hugo научить. Там сейчас 2 вида - посты и страницы которые генерятся. Все посты и все страницы генерятся одинаково. Наверное (надеюсь) можно в страницах это как-то по разному рендерить, но как именно - тут лично мне совсем непонятно.

@umputun

This comment has been minimized.

Copy link
Member

umputun commented Dec 28, 2018

есть еще такая страница: https://radio-t.com/license/ Вообще, согласно hugo у нас есть вот такие страницы - https://github.com/radio-t/radio-t-site/tree/master/hugo/content/pages

@Reeywhaar

This comment has been minimized.

Copy link

Reeywhaar commented Dec 28, 2018

Hugo можно научить, там много способов, например прописав в /hugo/layouts/pages/single.html:

{{ if eq .File.Path "pages/info.md" }}
  {{ partial "pages/info" . }}
{{ else }}
  {{ .Content }}
}}

Соответсвенно, кастомный хтмл будет в /hugo/layouts/partials/pages/info.html.
Проблема только в том, что чтобы что-то поправить, надо будет править хтмл в /hugo/layouts/partials/pages/info.html, а контент в /hugo/content/pages/info.md если и стоит описывать, то только какой-то совсем простой текст, который уже можно вставлять в сложный шаблон, но я думаю это неизбежно если хочется иметь более-менее сложную верстку.

Еще можно прямо в маркдауне/hugo/content/pages/info.md писать хтмл.

@Khilkov

This comment has been minimized.

Copy link

Khilkov commented Dec 28, 2018

@umputun может, имеет смысл попробовать десктопную версию сверстать и прикрутить? Тем самым проверить реализуемо ли все это в принципе, пока не рисовали адаптивы?

@Reeywhaar

This comment has been minimized.

Copy link

Reeywhaar commented Dec 28, 2018

btw, я форкнул репо, добавил туда дев докер с webpack/babel/scss и hugo server, чтобы удобно разрабатывать. Плюс немного попытался переписать старый css, потому как он видимо когда-то тоже был сгенерирован из scss и превратился в кашу, которую невозможно поддерживать. Чтобы запустить, надо в терминале написать docker-compose -f docker-compose.dev.yml up после чего сайт будет на http://localhost:9000

Забыл ссылку: https://github.com/Reeywhaar/radio-t-site/tree/redesign

@Khilkov

This comment has been minimized.

Copy link

Khilkov commented Dec 29, 2018

Прикинул главную страничку для мобильного — https://sketch.cloud/s/bMAo5/eKo78r2/play

@umputun

This comment has been minimized.

Copy link
Member

umputun commented Dec 29, 2018

LGTM

UPD: Упс, это я не переключился из лаконичного рабочего конетекста :) Да, нормально.

Одно пожелания - подписка (та, что сейчас 2мя кнопками/беджиками на сайте) несколько теряется в других линках как на мобильном так и на большом сайте. Можно их как-то акцентировать? Кнопки для этого как раз и были

@Khilkov

This comment has been minimized.

Copy link

Khilkov commented Dec 29, 2018

Речь вот про эти кнопки?
image

@umputun

This comment has been minimized.

Copy link
Member

umputun commented Dec 29, 2018

да. В принципем, видя такое слушатель подкаста сразу понимает что это и зачем. Ну и нам можно прятать все остальные виды подписки в какой "Подписаться другим способом" или что-то в этом роде. Например, подписка на архивные выпуски, спотифай и все прочее - это экзотика, для которой достаточно страницы https://radio-t.com/feeds/

@Khilkov

This comment has been minimized.

Copy link

Khilkov commented Dec 29, 2018

принял.

@sw-double

This comment has been minimized.

Copy link

sw-double commented Dec 29, 2018

приступаю

@Eugene-Sviridov

This comment has been minimized.

Copy link

Eugene-Sviridov commented Jan 3, 2019

@sw-double Привет. Как успехи? Могу взять какую-нибудь часть в помощь?

@sw-double sw-double referenced this issue Jan 4, 2019

Open

Redesign #27

0 of 8 tasks complete
@Khilkov

This comment has been minimized.

Copy link

Khilkov commented Jan 9, 2019

Одно пожелания - подписка (та, что сейчас 2мя кнопками/беджиками на сайте) несколько теряется в других линках как на мобильном так и на большом сайте. Можно их как-то акцентировать?

@umputun Предлагаю сделать вот так:

image

Ссылка «Другие способы подписки» будет вести на страницу «Подписка»

@sw-double @Eugene-Sviridov Смотрю, уже верстка во всю идёт, классно! Если будут вопросы по дизайну или по адаптивам нужно будет что-то нарисовать — обращайтесь!

@umputun

This comment has been minimized.

Copy link
Member

umputun commented Jan 10, 2019

непривычно, но вроде нормально.

@umputun

This comment has been minimized.

Copy link
Member

umputun commented Jan 10, 2019

@Khilkov по поводу верстки - ты посматривай краем глаза, что там получается. А то программисты (не эти конкретно, эти молодцы, я про сферических программистов в вакуме) тихо и незаметно так поменяют дизайн, что не потом узнаешь ;)

@Eugene-Sviridov

This comment has been minimized.

Copy link

Eugene-Sviridov commented Jan 10, 2019

@Khilkov заметил небольшие отклонения в типографии здесь #27 . Как бы посмотреть все размеры на макете? Не нашёл download на sketch.cloud

@Khilkov

This comment has been minimized.

Copy link

Khilkov commented Jan 10, 2019

@Eugene-Sviridov скажи, пожалуйста, свое мыло — дам доступ в Фигму. Или вышлю исходник Скетча, как тебе будет удобней?

@umputun Да, я обратил внимание, что есть несоответствия в верстке с изначальным замыслом. Причем, есть очень крутые, на мой взгляд, идеи (например, новый проигрыватель с воспроизведением по меткам, или аватарки предложивших темы), а есть места, которые можно будет улучшить эстетически.

Планирую сегодня-завтра собрать свои комментарии в доку. Единственное, я не всегда понимаю что можно сделать, а что нельзя (или слишком сложно), поэтому буду писать обо всем, а там уже на усмотрение ребят.

@Eugene-Sviridov

This comment has been minimized.

Copy link

Eugene-Sviridov commented Jan 10, 2019

@Khilkov Фигма пойдёт [тут был имейл]. Небольшой вопрос про ховеры на ссылки, сейчас меняется бэкграунд и нижний бордер, оставить как есть или обойтись только text-decoration: underline?

@Khilkov

This comment has been minimized.

Copy link

Khilkov commented Jan 10, 2019

@Eugene-Sviridov тут чисто вкусовщина. Можно оставить и как есть, но мне больше нравится когда у ссылок если уж и есть подчеркивание, то border-bottom: 1px solid rgba(0,0,0,.15); а на ховер и текст и подчеркивание просто становятся черными.

@Eugene-Sviridov

This comment has been minimized.

Copy link

Eugene-Sviridov commented Jan 10, 2019

@Khilkov понял, сделаю 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment