Раз уж на новом движке ведется активная разработка, а репозиторий ректора не в открытом доступе, я решил запостить несколько предложений для мобильной... / dev :: реактор

devреактор

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

Основной посыл:
- Убрать пустое пространство и уменьшить излишне громоздкие элементы
- Так же, как и на обычном реакторе отображать время поста и дать возможность переголосовать, если промахнулся по кнопке.
- Размещение рейтинга между кнопка значительно снижает вероятность промаха
- Всё медиа в посте отображается на всю ширину экрана, без горизонтального паддинга.- Так же было бы неплохо кнопки оценки перенести в svg, потому как на телефонах с разрешением fullHD и выше выглядят они мыльно

Было	Стало

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

"а хули вы мне сделаете" - Я знаю где ты живешь. (◕‿◕)

ПocTоРоHНий

12.04.2023, 16:51

+8,0

Завидую.

Товаpищ Майор

12.04.2023, 21:28

+1,0

Плюсую про дату, а то на телефоне только в горизонтальном положении видно даты помта и комментариев (даты комментариев тоже надо в вертикальном положении как-то впихнуть), что очень неудобно.
Также надо обязательно ещё как-то кнопку бездны ТЕГА впихнуть (она тоже только в горизонтальном положении экрана видна). Наверно как-то сделать скрол кнопок, чтобы листанув влево её увидеть можно было. На фулл шд+ у меня и без скролла кнопка помещается, а вот про шд+ я не уверен (в примере из поста не помещается), потому и про скрол написал.

Про переголосовать согласен, а вот рейтинг и так наверно был бы между кнопками, т.к. до голосования на этом месте "––" находится.

Кнопки да, мыльновато выглядят, если приглядеться.

12.04.2023, 17:22

+0,8

Ах да, надо добавить к кнопке комментариев индикатор наличия новых комментариев, чтобы было сразу ясно, появилось ли чего нового почитать или нет. Ну и чтобы сами новые комментарии выделялись. Т.е. как сейчас на обычном сделано (ещё одна из причин, почему невозможно мобильной версией для меня пользоваться). А то без этого жутко неудобно

12.04.2023, 17:30

+1,9

идеи хорошие
хотя мне похуй, я не пользуюсь мобильной версией

12.04.2023, 17:27

+9,1

Наивный. Если я правильно помню, то этот дизайн пока обкатывают на мобильной версии, а потом после обкатки его планируют на основной адрес натянуть.

12.04.2023, 17:31

+4,9

Будем надеяться на old2.joyreactor.ru

12.04.2023, 17:32

+6,5

Нет

•Зк только в in.joyreactor.cc
ВПпк1*аУеП Сегодня, в 16:15
А будет ли в планах ]оугеаа:ог переоборудовать или он устареет как и олд?
не кока Сегодня, в 16:16 он устарел как и олд,dev,реактор

12.04.2023, 17:36

+1,2

Ой. Я не так выразился.
Я имел ввиду то, что новый ДВИЖОК (а не только дизайн с функциями) потом на обычный адрес перенесут (а что с новым дизайном старого движка сделают вроде не говорили).

А на скрине, как я понял, про апгрейд старого движка.

12.04.2023, 17:48

+2,6

,dev,реактор

12.04.2023, 18:42

+0,9

Выглядит лучше: чистенько, удобно, заебись.

12.04.2023, 17:58

-2,2

Можно, делай

12.04.2023, 18:53

+1,2

если таки надумаете что-то делать - пните меня, могу сделать кнопочки и вот это вот всё.

12.04.2023, 18:53

0,0

норм

12.04.2023, 19:10

0,0

Я просто оставлю это здесь, как читаю джой лично я. Добавить кнопки плюс/минуса и комменты внизу и теги и готово

12.04.2023, 20:04

-1,6

основной посыл: посты надо листать не вверх-вниз а влево-вправо, один пост - один экран, вместо колбасы. Это в разы удобнее

13.04.2023, 09:36

-1,8

Кнопки шейр/стар не надо туда перемещать точно, это не соответствует тому как ты используешь, ты сначала стенд смотришь на пост и урок потом принимаешь решение добавить его в избранное или открыть в новой вкладке.

Логично поменять местами дату и этим кнопки.

В целом мне на моб не особо кажется интерфейс громоздким

12.04.2023, 21:31

+2,4

Совершенно необходимо дублирование кнопки "свернуть" НАД полотенцем длиннопоста.

13.04.2023, 03:28

+0,3

Для такого случая лучше сделать плавающую кнопку, когда начинаешь скроллить вверх

13.04.2023, 06:05

+0,3

А ты не разворачивай длиннопосты прямо в ленте, а открывай их в соседней вкладке...

,dev,реактор

14.04.2023, 20:48

0,0

Кстати, а вот есть кнопка "SFW", есть "NSFW", но почему нет кнопки "Only NSFW"?

13.04.2023, 10:29

0,0

В смысле нет?

Выход

joyreactor.cc
Новое
Лучшее
Segaman
PlayStation 1 CD mod .£
Замена дисковода для PSX
Заказал се с алика вот такой внешний,dev,реактор

13.04.2023, 11:07

+0,5

,dev,реактор

13.04.2023, 11:34

+0,3

Мы попробуем твою идею с расширением широких картинок на весь экран, без отступов. Это действительно best practice. Получается не всегда, тк у некоторых постов, особенно старых, есть дефекты верстки.

Остальное по реорганизации пространства не пойдет, т.к. ты не учитываешь, что есть телефоны-малыши типа Iphone XS и SE, и лопаты Samsung Galaxy, которых объединяет одно - эффективное разрешение около 350 пикселей в ширину, и на более мелких размерах элементов повышается риск мисклика. Например, ты хочешь плюсануть пост, а попадаешь по картинке, и картинка увеличивается. Одна ошибка - и ты ошибся.

Также решение о том, что пост надо добавлять в избранное, возникает обычно после просмотра поста. Человек ставит лайк, потом добавляет в избранное. Заставлять пользователя мотать на экран-другой наверх - не лучшее решение.

Если нарисуешь нам svg-картинки для плюса-минуса, мы с благодарностью их примем.

26.04.2023, 17:02

0,0

Цвета меняются через css color и fill
https://drive.google.com/file/d/1mA2u3WEBWLhweAgfUJCSnYVFEzipkZc4/view

Ну а время? Его-то можно же хоть куда-то впихнуть? Например раз уж не хотите уменьшать аватарку, то под никнейм его.

26.04.2023, 18:40

0,0

знаешь, у нас был прототип со временем под ником - очень засорят восприятие, т.к. ты это прочитываешь. если там писать что-то короткое типа "2ч", то оно еще норм, а полная дата шибко мешает.

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

0L8l.exn|j,dev,реактор

26.04.2023, 18:49

0,0

Я немного потыкался, и правда время сверху не особо катит, ни справа от ника, ни под ним, ни в правом углу, особенно если там будет троеточие.
Тогда может что-то такое? Он будет на протяжении всего поста, под троеточие можно спрятать нижние кнопки, и они будут доступны даже доскролив до конца, а вниз можно уже поместить время.
P.S. Транзишен багает, но это решаемо

26.04.2023, 20:08

0,0

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

27.04.2023, 09:06

0,0

Кстасти, спасибо за иконочки! Скоро пойдут в продакшн

04.05.2023, 07:48

0,0

В общем...
Когда вышел этот пост я тоже нарисовал svgэшку по быстрому но у меня не было особого виденья и очень глубоких знаний на этот счет и я пытался просто сделать обратную совместимость...
В итоге не опубликовал а после не хотел перебивать "возможный успех" Raline

Далее просто небольшой список заметок как можно: реализовать svg иконки
|||
1) серые иконки можно сделать полу прозрачными: тогда при изменении темы они будут накладываясь на фон менять цвет (один файл для тёмной и светлой темы)
|||
2) вроде раньше не было поддержки альфа канала в цветах , для не знаю какой обратной совместимости возможно стоит использовать отдельное свойство прозрачности( fill-opacity вроде для заливки ) и не прозрачные цвета
|||
2.1)когда рисуешь svg его стоит тестить на разных браузерах иногда оно неожиданно глючит...
|||
3)сейчас иконки собраны в один файл можно сделать аналогичный по размеру svg тогда не придётся менять текуший css (меняется только адрес файла)
|||
3.1) в случае сбора нескольких svg в один то во внутренние svg можно добавить id тогда внутренние можно будет вызывать через этот id и использовать элемент несколько раз но тогда возможно засорится пространство имён переменных
|||
4)файл можно запихнуть в адрес data URL (или встроить в саму html страницу но тогда ещё раз стоит проверить 3.1 )
|||
5) параметры цветов вроде бы можно вынести в css и менять цвет svg без изменения svg

Всем добра! 3.1 и 5 возможно не очень нужные тонкости , 2.1 без подробностей но правда стоит потестить...

~_^

04.05.2023, 14:50

0,0

Ну если у тебя свгшка лучше, то залить всё ещё не поздно. Я то просто накидал в фигме по быстрому фигуры на картинку, а потом отредактировал, чтобы они через css цвета принимали

04.05.2023, 17:40

0,0

Я тоже старался сделать максимально похожий вариант на текущею верстку то есть не чего особо нового разве что добавить полу прозрачность,
сейчас 8 спрайтов собраны в файл а у тебя по отдельности 2 файла... от формата зависит как они могут быть добавлены в вёрстку а какая будет верстка вопрос открытый...,
так что твой вариант может быть в чём то даже лучше ну а если будет необходимость добавлю и свой который похожий на твой только другой.

Бонус...
Внешние ресурсы могут быть непостоянными если хочешь сохранить svg файл в виде кода
в на реакторе то можешь открыть его как текст а после заменить символы "<"на=> "<" и ">"на=>">" и напечатать результат как коммент возможно даже в спойлере
|||
Выше описанное по быстрому (не тестил)
1)открываешь редактор поста в текущем основном реакторе
2)вставляешь туда svg как текст
3)нажимаешь кнопку редактор кода и копируешь о туда результат куда надо например
в <div data-anchor="svg файл в виде текста спойлер">код писать сюда</div>
^про ≈это(похожее) кстати уже писал koka

~_^ Удачи !

04.05.2023, 19:38

0,0

я не знаю куда это ответить поэтому напишу сюда, я зеваю... я зеваю! пишу и иду спать я серьёзно

Привет всем Снова

Я накидал по быстрому не проверяя и не доделав html/css версию смайлов не потому что я считаю это очень хорошим решением а просто так и публикую просто так...

Цвета и пропорции могут быть не выдержаны ,базовый размер 32 , поначалу думал сделать одну "маску" на 4 смайла чтобы потом только накладывать цвет но здесь пока(?) что попроще, эту версию не очень удобно редактировать можно ли довести до состояния "поменяй одно значение сразу для всего" пока(?) не знаю....

Картинка скриншот

,dev,реактор

Код страницы html в спойлере
посмотреть можно
сохранив через old.reactor.cc/post/4757014 (new word.htm)
или запустив через: https://jsfiddle.net/
или чем вам там удобней...

<title>Smile8) sMile;) smiLe:)</title>
<x style="display:inline-block;position:relative;border-radius:32px;width:32px;height:32px;background-color:#33ff3377;opacity:0.8">
<x style="position:absolute;border-radius:32px;border:2px solid #2c2;box-sizing:border-box;width:32px;height:32px;"></x>
<x style="width:4px;height:4px;position:absolute;border-radius:32px;left:9px;top:10px;background-color:#2c2;"></x>
<x style="width:4px;height:4px;position:absolute;border-radius:32px;left:19px;top:10px;background-color:#2c2;"></x>
<x style="width:20px;height:20px;position:absolute;border-bottom:3px solid #2c2;box-sizing:border-box;border-radius:32px;left:6px;top:6px;"></x>
</x>
<x style="display:inline-block;position:relative;border-radius:32px;width:32px;height:32px;background-color:#ff000077;opacity:0.8">
<x style="position:absolute;border-radius:32px;border:2px solid #d22;box-sizing:border-box;width:32px;height:32px;"></x>
<x style="width:4px;height:4px;position:absolute;border-radius:32px;left:9px;top:10px;background-color:#d22;"></x>
<x style="width:4px;height:4px;position:absolute;border-radius:32px;left:19px;top:10px;background-color:#d22;"></x>
<x style="width:18px;height:18px;position:absolute;border-top:3px solid #d22;box-sizing:border-box;border-radius:32px;left:7px;top:17px;"></x>
</x>
<br>
<x style="display:inline-block;position:relative;border-radius:32px;width:32px;height:32px;background-color:#99ff9977;opacity:0.8">
<x style="position:absolute;border-radius:32px;border:2px solid #2c2;box-sizing:border-box;width:32px;height:32px;"></x>
<x style="width:4px;height:4px;position:absolute;border-radius:32px;left:9px;top:10px;background-color:#2c2;"></x>
<x style="width:4px;height:4px;position:absolute;border-radius:32px;left:19px;top:10px;background-color:#2c2;"></x>
<x style="width:20px;height:20px;position:absolute;border-bottom:3px solid #2c2;box-sizing:border-box;border-radius:32px;left:6px;top:6px;"></x>
</x>
<x style="display:inline-block;position:relative;border-radius:32px;width:32px;height:32px;background-color:#ff999977;"">
<x style="position:absolute;border-radius:32px;border:2px solid #d22;box-sizing:border-box;width:32px;height:32px;"></x>
<x style="width:4px;height:4px;position:absolute;border-radius:32px;left:9px;top:10px;background-color:#d22;"></x>
<x style="width:4px;height:4px;position:absolute;border-radius:32px;left:19px;top:10px;background-color:#d22;"></x>
<x style="width:18px;height:18px;position:absolute;border-top:3px solid #d22;box-sizing:border-box;border-radius:32px;left:7px;top:17px;"></x>
</x>
<br>
<x style="display:inline-block;position:relative;border-radius:32px;width:32px;height:32px;background-color:#bbb;transform:scale(0.85,0.85);opacity:0.4">
<x style="position:absolute;border-radius:32px;border:2px solid #555;box-sizing:border-box;width:32px;height:32px;"></x>
<x style="width:4px;height:4px;position:absolute;border-radius:32px;left:9px;top:10px;background-color:#555;"></x>
<x style="width:4px;height:4px;position:absolute;border-radius:32px;left:19px;top:10px;background-color:#555;"></x>
<x style="width:20px;height:20px;position:absolute;border-bottom:3px solid #555;box-sizing:border-box;border-radius:32px;left:6px;top:6px;"></x>
</x>
<x style="display:inline-block;position:relative;border-radius:32px;width:32px;height:32px;background-color:#bbb;transform:scale(0.85,0.85);opacity:0.4">
<x style="position:absolute;border-radius:32px;border:2px solid #555;box-sizing:border-box;width:32px;height:32px;"></x>
<x style="width:4px;height:4px;position:absolute;border-radius:32px;left:9px;top:10px;background-color:#555;"></x>
<x style="width:4px;height:4px;position:absolute;border-radius:32px;left:19px;top:10px;background-color:#555;"></x>
<x style="width:18px;height:18px;position:absolute;border-top:3px solid #555;box-sizing:border-box;border-radius:32px;left:7px;top:17px;"></x>
</x>
<br>
<x style="display:inline-block;position:relative;border-radius:32px;width:32px;height:32px;background-color:#ddd;transform:scale(0.85,0.85);opacity:0.4">
<x style="position:absolute;border-radius:32px;border:2px solid #555;box-sizing:border-box;width:32px;height:32px;"></x>
<x style="width:4px;height:4px;position:absolute;border-radius:32px;left:9px;top:10px;background-color:#555;"></x>
<x style="width:4px;height:4px;position:absolute;border-radius:32px;left:19px;top:10px;background-color:#555;"></x>
<x style="width:20px;height:20px;position:absolute;border-bottom:3px solid #555;box-sizing:border-box;border-radius:32px;left:6px;top:6px;"></x>
</x>
<x style="display:inline-block;position:relative;border-radius:32px;width:32px;height:32px;background-color:#ddd;transform:scale(0.85,0.85);opacity:0.4">
<x style="position:absolute;border-radius:32px;border:2px solid #555;box-sizing:border-box;width:32px;height:32px;"></x>
<x style="width:4px;height:4px;position:absolute;border-radius:32px;left:9px;top:10px;background-color:#555;"></x>
<x style="width:4px;height:4px;position:absolute;border-radius:32px;left:19px;top:10px;background-color:#555;"></x>
<x style="width:18px;height:18px;position:absolute;border-top:3px solid #555;box-sizing:border-box;border-radius:32px;left:7px;top:17px;"></x>
</x>

06.05.2023, 00:21

0,0

Похожие посты ↓↓↓

5493613, 5745528, 5510084, 5520561, 5511598, 5494511, 5525482, 5496307, 5495322, 5495133, 5510098, 5535042, 5518077, 5508158, 5518788