Раз уж на новом движке ведется активная разработка, а репозиторий ректора не в открытом доступе, я решил запостить несколько предложений для мобильной версии. Возможно мое мнение не всралось, но, собственно, а хули вы мне сделаете
Основной посыл:
- Убрать пустое пространство и уменьшить излишне громоздкие элементы
- Так же, как и на обычном реакторе отображать время поста и дать возможность переголосовать, если промахнулся по кнопке.
- Размещение рейтинга между кнопка значительно снижает вероятность промаха
- Всё медиа в посте отображается на всю ширину экрана, без горизонтального паддинга.- Так же было бы неплохо кнопки оценки перенести в svg, потому как на телефонах с разрешением fullHD и выше выглядят они мыльно
| Было | Стало |
 |  |
Так же при желании можно кнопки справа от пользователя спрятать под троеточием
Подробнее
Новое Хорошее смешные картинки без перевода £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,реактор
Еще на тему
Также надо обязательно ещё как-то кнопку бездны ТЕГА впихнуть (она тоже только в горизонтальном положении экрана видна). Наверно как-то сделать скрол кнопок, чтобы листанув влево её увидеть можно было. На фулл шд+ у меня и без скролла кнопка помещается, а вот про шд+ я не уверен (в примере из поста не помещается), потому и про скрол написал.
Про переголосовать согласен, а вот рейтинг и так наверно был бы между кнопками, т.к. до голосования на этом месте "––" находится.
Кнопки да, мыльновато выглядят, если приглядеться.
хотя мне похуй, я не пользуюсь мобильной версией
Я имел ввиду то, что новый ДВИЖОК (а не только дизайн с функциями) потом на обычный адрес перенесут (а что с новым дизайном старого движка сделают вроде не говорили).
А на скрине, как я понял, про апгрейд старого движка.
Логично поменять местами дату и этим кнопки.
В целом мне на моб не особо кажется интерфейс громоздким
Остальное по реорганизации пространства не пойдет, т.к. ты не учитываешь, что есть телефоны-малыши типа Iphone XS и SE, и лопаты Samsung Galaxy, которых объединяет одно - эффективное разрешение около 350 пикселей в ширину, и на более мелких размерах элементов повышается риск мисклика. Например, ты хочешь плюсануть пост, а попадаешь по картинке, и картинка увеличивается. Одна ошибка - и ты ошибся.
Также решение о том, что пост надо добавлять в избранное, возникает обычно после просмотра поста. Человек ставит лайк, потом добавляет в избранное. Заставлять пользователя мотать на экран-другой наверх - не лучшее решение.
Если нарисуешь нам svg-картинки для плюса-минуса, мы с благодарностью их примем.
https://drive.google.com/file/d/1mA2u3WEBWLhweAgfUJCSnYVFEzipkZc4/view
Ну а время? Его-то можно же хоть куда-то впихнуть? Например раз уж не хотите уменьшать аватарку, то под никнейм его.
пока есть решение сделать кнопку как на картинке, под ней дополнительные действия типа пожаловаться, скрыть и т.д, по ней же можно показывать дату. Но я не знаю, чем это кончится - пока это только прототип.
Тогда может что-то такое? Он будет на протяжении всего поста, под троеточие можно спрятать нижние кнопки, и они будут доступны даже доскролив до конца, а вниз можно уже поместить время.
P.S. Транзишен багает, но это решаемо
Когда вышел этот пост я тоже нарисовал 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 без подробностей но правда стоит потестить...
~_^
сейчас 8 спрайтов собраны в файл а у тебя по отдельности 2 файла... от формата зависит как они могут быть добавлены в вёрстку а какая будет верстка вопрос открытый...,
так что твой вариант может быть в чём то даже лучше ну а если будет необходимость добавлю и свой который похожий на твой только другой.
Бонус...
Внешние ресурсы могут быть непостоянными если хочешь сохранить svg файл в виде кода
в на реакторе то можешь открыть его как текст а после заменить символы "<"на=> "<" и ">"на=>">" и напечатать результат как коммент возможно даже в спойлере
|||
Выше описанное по быстрому (не тестил)
1)открываешь редактор поста в текущем основном реакторе
2)вставляешь туда svg как текст
3)нажимаешь кнопку редактор кода и копируешь о туда результат куда надо например
в <div data-anchor="svg файл в виде текста спойлер">код писать сюда</div>
^про ≈это(похожее) кстати уже писал koka
~_^ Удачи !
Привет всем Снова
Я накидал по быстрому не проверяя и не доделав 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>