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

dev реактор 

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

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

Было Стало 

Новое Хорошее
смешные картинки
без перевода
£0£КУ 0.000 АЯСШТЕСТиле
0 7 ег ☆	+28,4,dev,реактор

Новое Хорошее
valnur
с? ☆
it-юмор geek смешные картинки без перевода
every cloud architecture.
Global assumptions
Гг&К ^r|ciDR SHEMAkllftWsH
_________i 1
VPM OF SA0VES6

© +28,9 ©
12 anp, 15:31,dev,реактор

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

Подробнее
Новое Хорошее смешные картинки без перевода £0£КУ 0.000 АЯСШТЕСТиле 0 7 ег ☆ +28,4
Новое Хорошее valnur с? ☆ it-юмор geek смешные картинки без перевода every cloud architecture. Global assumptions Гг&К ^r|ciDR SHEMAkllftWsH _________i 1 VPM OF SA0VES6 © +28,9 © 12 anp, 15:31
dev,реактор
Еще на тему
Развернуть
"а хули вы мне сделаете" - Я знаю где ты живешь. (◕‿◕)
Завидую.
Плюсую про дату, а то на телефоне только в горизонтальном положении видно даты помта и комментариев (даты комментариев тоже надо в вертикальном положении как-то впихнуть), что очень неудобно.
Также надо обязательно ещё как-то кнопку бездны ТЕГА впихнуть (она тоже только в горизонтальном положении экрана видна). Наверно как-то сделать скрол кнопок, чтобы листанув влево её увидеть можно было. На фулл шд+ у меня и без скролла кнопка помещается, а вот про шд+ я не уверен (в примере из поста не помещается), потому и про скрол написал.

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

Кнопки да, мыльновато выглядят, если приглядеться.
Ах да, надо добавить к кнопке комментариев индикатор наличия новых комментариев, чтобы было сразу ясно, появилось ли чего нового почитать или нет. Ну и чтобы сами новые комментарии выделялись. Т.е. как сейчас на обычном сделано (ещё одна из причин, почему невозможно мобильной версией для меня пользоваться). А то без этого жутко неудобно
идеи хорошие
хотя мне похуй, я не пользуюсь мобильной версией
vover vover 12.04.202320:27 ответить ссылка 9.1
Наивный. Если я правильно помню, то этот дизайн пока обкатывают на мобильной версии, а потом после обкатки его планируют на основной адрес натянуть.
Будем надеяться на old2.joyreactor.ru
Нет
•Зк	только в in.joyreactor.cc
ВПпк1*аУеП Сегодня, в 16:15
А будет ли в планах ]оугеаа:ог переоборудовать или он устареет как и олд?
не кока Сегодня, в 16:16 он устарел как и олд
Ой. Я не так выразился.
Я имел ввиду то, что новый ДВИЖОК (а не только дизайн с функциями) потом на обычный адрес перенесут (а что с новым дизайном старого движка сделают вроде не говорили).

А на скрине, как я понял, про апгрейд старого движка.
MikeMI MikeMI 12.04.202321:42 ответить ссылка 0.9
Выглядит лучше: чистенько, удобно, заебись.
Mellithus Mellithus 12.04.202320:58 ответить ссылка -2.2
Можно, делай
если таки надумаете что-то делать - пните меня, могу сделать кнопочки и вот это вот всё.
норм
MANOWAR. MANOWAR. 12.04.202322:10 ответить ссылка 0.0
Я просто оставлю это здесь, как читаю джой лично я. Добавить кнопки плюс/минуса и комменты внизу и теги и готово
22:03 В
а 53% а
<	Аа П	••
Пост №5513149
JoyReactor.cc / April 12,2023 at 03:19PM
Автор: valnur
EVERY С LOGO ARCHITECTURE
joyreactor.cc
Развернуть
Комментировать
SHARE
VISIT WEBSITE
abadonael abadonael 12.04.202323:04 ответить ссылка -1.6
основной посыл: посты надо листать не вверх-вниз а влево-вправо, один пост - один экран, вместо колбасы. Это в разы удобнее
Кнопки шейр/стар не надо туда перемещать точно, это не соответствует тому как ты используешь, ты сначала стенд смотришь на пост и урок потом принимаешь решение добавить его в избранное или открыть в новой вкладке.

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

В целом мне на моб не особо кажется интерфейс громоздким
Совершенно необходимо дублирование кнопки "свернуть" НАД полотенцем длиннопоста.
Ashland Ashland 13.04.202306:28 ответить ссылка 0.3
Для такого случая лучше сделать плавающую кнопку, когда начинаешь скроллить вверх
Raline Raline 13.04.202309:05 ответить ссылка 0.3
А ты не разворачивай длиннопосты прямо в ленте, а открывай их в соседней вкладке...
Кстати, а вот есть кнопка "SFW", есть "NSFW", но почему нет кнопки "Only NSFW"?
Daanya Daanya 13.04.202313:29 ответить ссылка 0.0
В смысле нет?
Выход

joyreactor.cc
Новое
Лучшее
Segaman
PlayStation 1 CD mod .£
Замена дисковода для PSX
Заказал се с алика вот такой внешний
Raline Raline 13.04.202314:07 ответить ссылка 0.5
Мы попробуем твою идею с расширением широких картинок на весь экран, без отступов. Это действительно best practice. Получается не всегда, тк у некоторых постов, особенно старых, есть дефекты верстки.

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

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

Если нарисуешь нам svg-картинки для плюса-минуса, мы с благодарностью их примем.
Цвета меняются через css color и fill
https://drive.google.com/file/d/1mA2u3WEBWLhweAgfUJCSnYVFEzipkZc4/view

Ну а время? Его-то можно же хоть куда-то впихнуть? Например раз уж не хотите уменьшать аватарку, то под никнейм его.
Raline Raline 26.04.202321:40 ответить ссылка 0.0
знаешь, у нас был прототип со временем под ником - очень засорят восприятие, т.к. ты это прочитываешь. если там писать что-то короткое типа "2ч", то оно еще норм, а полная дата шибко мешает.

пока есть решение сделать кнопку как на картинке, под ней дополнительные действия типа пожаловаться, скрыть и т.д, по ней же можно показывать дату. Но я не знаю, чем это кончится - пока это только прототип.
0L8l.exn|j
Я немного потыкался, и правда время сверху не особо катит, ни справа от ника, ни под ним, ни в правом углу, особенно если там будет троеточие.
Тогда может что-то такое? Он будет на протяжении всего поста, под троеточие можно спрятать нижние кнопки, и они будут доступны даже доскролив до конца, а вниз можно уже поместить время.
P.S. Транзишен багает, но это решаемо
Raline Raline 26.04.202323:08 ответить ссылка 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 без подробностей но правда стоит потестить...


~_^
IONE IONE 04.05.202317:50 ответить ссылка 0.0
Ну если у тебя свгшка лучше, то залить всё ещё не поздно. Я то просто накидал в фигме по быстрому фигуры на картинку, а потом отредактировал, чтобы они через css цвета принимали
Raline Raline 04.05.202320:40 ответить ссылка 0.0
Я тоже старался сделать максимально похожий вариант на текущею верстку то есть не чего особо нового разве что добавить полу прозрачность,
сейчас 8 спрайтов собраны в файл а у тебя по отдельности 2 файла... от формата зависит как они могут быть добавлены в вёрстку а какая будет верстка вопрос открытый...,
так что твой вариант может быть в чём то даже лучше ну а если будет необходимость добавлю и свой который похожий на твой только другой.

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

~_^ Удачи !
IONE IONE 04.05.202322:38 ответить ссылка 0.0
я не знаю куда это ответить поэтому напишу сюда, я зеваю... я зеваю! пишу и иду спать я серьёзно

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


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

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

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


Код страницы 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>
IONE IONE 06.05.202303:21 ответить ссылка 0.0
Только зарегистрированные и активированные пользователи могут добавлять комментарии.
Похожие темы

Похожие посты
Fate Porn r34 gif Astolfo X Fate/Apocrypha X minamoto no raikou (fate/grand order) X Fate/Grand Order X titfuck Newhalf Gif Inverted Nipples Newhalf Skirt фэндомы Fate (series) X Newhalf r34 секретные разделы секретные фетиши artist Anime X theobrobine Newhalf on Female
подробнее»

dev реактор новый движок

Fate Porn r34 gif Astolfo X Fate/Apocrypha X minamoto no raikou (fate/grand order) X Fate/Grand Order X titfuck Newhalf Gif Inverted Nipples Newhalf Skirt фэндомы Fate (series) X Newhalf r34 секретные разделы секретные фетиши artist Anime X theobrobine Newhalf on Female
Потому что на машине, наверное, уже нельзя
Nemesis-T 23.Jul.2018 20:47
ответить V
ссылка X
Token Error
Он имеет в виду наверно рвануть туда более быстрым общественным транспортом: поезда, самолеты, да можно хоть на машине пассажиром
lohn Wheels 23.Jul.2018 20:50 ответить V ссылка f
56©©
На
подробнее»

dev реактор ректор сломался

Потому что на машине, наверное, уже нельзя Nemesis-T 23.Jul.2018 20:47 ответить V ссылка X Token Error Он имеет в виду наверно рвануть туда более быстрым общественным транспортом: поезда, самолеты, да можно хоть на машине пассажиром lohn Wheels 23.Jul.2018 20:50 ответить V ссылка f 56©© На