home.social

#mastodonui — Public Fediverse posts

Live and recent posts from across the Fediverse tagged #mastodonui, aggregated by home.social.

  1. @stefan My verdict currently:

    Compactness 👍
    Logic changes and toggles 👎

    I've been preferring the "show all at once with the least clicks" approach on my UI. I really don't know what was wrong with the old sidebar hashtag approach.

    #Mastodon #MastodonUI #MastoAdmin

  2. Lol. Das ist ja mal ein richtig schlimmer UI-Fail. Ja klar, wenn ich was ausfiltere, dann bitte noch durch grafische Elemente hervorheben und mit Logo und allem viel Platz einnehmend in die Timeline klatschen 🤦‍♂️

    #MastodonUI

  3. Meh, ist mit dem neuen Mastodon Design die Umfragefunktion kaputt gegangen? Kann keine vierte Option mehr erstellen und die Dritte öffnet sich automatisch, wenn man die zweite angibt. Oder ist das so gedacht dass es jetzt nur noch drei Optionen gibt?

    #MastodonUI

    edit: war wohl ein einmaliges Problem. Jetzt geht es auch mit der vierten Option. Kann man Optionen irgendwie auch wieder löschen oder lässt man die dann einfach leer?

  4. Bin mal gespannt ob die Entscheidung CW mit lauter Designelementen, die Gefahr signalisieren, hervorzuheben, mittelfristig dazu führt, dass die Praxis, das eher als Subject zu benutzen, seltener wird.

    Das Ausrufezeichen find ich dahingehend nicht so tragisch, aber diese Schwarz-Gelben Randleisten find ich bisschen over the top tbh.

    #mastodonUI

  5. @CoolerPseudonym

    The non-obvious way that reply relates to a previous toot troubles me.

    If levels of dialogue increased 10 fold as I hope they will then following who is replying to what is looking impossible to me.

    Though maybe there us a setting switch that will change the layout.
    #Mastodon #MastodonHelp #MastodonLayout #MastodonUI

  6. So I'm not sure yet overall but I like do these alternative #Mastodon interfaces! Now I see why it's sooo much better! Not to mention "free" feeds. :)

    #phanpy
    phanpy.social

    #elkzone
    elk.zone/home

    #pinafore
    pinafore.social/

    Check the screenshot for the easiest way to change it up!

    Yes. I am currently that kid who just discovered iPhone covers!

    #Discover more info: examine the authorized apps and how you prefer viewing #NSFW content under your profile!
    😬

    #newb #mastodonui #alternative

  7. Weiß eigentlich jemand, ob man die Suche im #MastodonUI auch in schmalen Fenstern anzeigen kann bzw. wie man die dann findet oder ob es da einen shortcut gibt?

    Im DOM ist das div mit der Suche tatsächlich futsch und in den Bedienelementen gibt es keine Suche o.ä.

  8. The upcoming new Mastodon UI on mobile vs the current UI, very small changes but man these small tweaks make it look so much better and less dated! :tororo:

    #mastodon #update #ui #mastodonui

  9. Il y a des personnes très inventives, pour sortir des interfaces habituelles.
    Celle-ci n’est pas déroutante, mais résolument nouvelle.
    phanpy.social

    #Phanpy #MastodonUI #MastodonClient #Fediverse

  10. @tchambers @samhenrigold @nileane @ScottStarkey @cheeaun @elk I’ve had this discussion many times. But it is good to always reopen a discussion about this as there are CSS and UI developers amongst us.

    For me there are several reasons that prevent me doing it:

    1. Time and commitment (I barely have time for the Bird UI right now from customer projects)

    2. Different structure (the core needs rewriting before that happens, most importantly CSS vars instead of SCSS vars)

    3. Not sure if they get merged / not sure if worth it (afraid of ”looks too Twitter” reactions, because that is actually the driving motivation for me) - Mastodon core changes are often nitpicked, and as I mostly see that as a good thing, it sometimes limits the development. Eugen can even dismiss his own changes sometimes 😅 I like the fact there is this certain barrier in committing, even with it we have a platform with the best features available. But what would we have here if it was less strict? I feel contradicted about this.

    There is this certain kind of freedom in external theming. You can do whatever you please. While some small things are awesome (I’m still convinced that my threaded lines and the message structure inspired them to go to the core even without me), I personally am not interested in adding in the small things when I even don’t know what are good adds. I agree that @nileane’s translate button (that’s awesome btw!) could be, but would it be just one hack without the Mastodon core styles rewrite?

    Now that we have :has in #CSS almost anything is possible. But instead of using hacks we should utilize the real deal, Mastodon core SCSS. And that is currently far behind…

    Also explained here: github.com/ronilaukkarinen/mas

    #MastodonBirdUI #CSS #Mastodon #MastoAdmin #UI #MastodonUI

  11. It seems my ideas about Mastodon layout have been receiving some love: Re-think the overall layout design to more natural direction github.com/mastodon/mastodon/i

    #Mastodon #MastoAdmin #MastodonUI

  12. @renchap I'd REALLY like to completely refactor everything under app/javascript/styles as SCSS and CSS are something I do for a living. However, I have too much things on my plate right now so it would be impossible. But I can help any way I can in between, like in form of this discussion, perhaps PRs, testing and such.

    I don't see it as a bad idea to start changing it to more CSS-friendly approach while still retaining a structure of a maintainable SCSS framework. After all, more maintainable, better (S)CSS structure in Mastodon core is a great ground for themers like me to work with. I'd be happy to refactor #MastodonBirdUI to work with the new Mastodon core theme.

    I would start by adding stylelint tools for CSS and SCSS (at least stylelint-config-standard, stylelint-config-standard-scss), here's a .stylelintrc I myself use: github.com/digitoimistodude/de - I would change it to more strict, and keep it like 2-3 levels nesting max.

    Then, variables dir and defining the variables as CSS vars there would be a great start. We do it like this: github.com/digitoimistodude/ai

    Every single thing should be added to a CSS variable, colors, font-families, font-sizes, breakpoints, background-images, border-radiuses, form factors, aspect-ratios, hovers, active states, UI states, etc. so they can be worked and manipulated with on the theme side.

    After this, I'd refactor each file line after line and move every bit as smaller components under their respective directories. I would follow a back end structure there, for example:

    features/account/components/header.jsx

    That means structure in SCSS:

    app/javascript/styles/mastodon/features/account/components/_header.scss

    And so on. Not sure how the templates actually are placed in the back-end but you get the picture. Every piece has its style equivalent.

    After the SCSS has been refactored, a sample theme can be made very easily just using CSS variables and some of the components.

    I hope this gives the idea. This is what I'd do.

    #CSS #MastoAdmin #MastodonUI #Mastodon

  13. What's the difference between #TangerineUI #MastodonBirdUI #phanpy and #ElkZone ?

    Is there a comparison review of them all somewhere? #mastodonUI

  14. @ErikBB think it’s been that way for a while. Just think it’s now a case of the place being busier. #MastodonUI giving you a “tick” respondents feature/etc would be a nice addition.

  15. Is it just me or has Mastodon adopted the hellsite-formerly-known-as-Twatter 'functionality' of including my handle in responses to things I've retooted?

    Not enthusiastic. I like the lack of notifications here. Can I turn it off, too?

    #mastodonUI #mastodon #mastodonusersettings

  16. I realized that the #MastodonUI was the main reason the platform didn't appeal to me much.

    Here's a first attempt at decluttering it a bit, tweaking the colors and reversing the layout.

  17. I think it would be interesting to have two views of the Mastodon feed, one with posts only from original authors, and the second column only re-tweets. #Mastodon #MastodonUI

  18. #Mastoaiuto #mastofeaturerequest che riguarda: sull'interfaccia Web di #Mastodon, quando scrivo e metto gli #hashtag o anche un #emoticon, praticamente mi *costringe* a premere la barra (con #focus esclusivo) se l'#hashtag o l'emoticon viene trovata o riconosciuta. E' FASTIDIOSISSIMO e foriero di errori mentre si scrive. Sapevatelo :-)

    (a magari se qualcuno che sviluppa la UI Web riuscisse a trovare una soluzione o un comportamente meno rigido, sarebbe bello)

    #mastodonui #mastodonweb

  19. #Mastoaiuto #mastofeaturerequest che riguarda: sull'interfaccia Web di #Mastodon, quando scrivo e metto gli #hashtag o anche un #emoticon, praticamente mi *costringe* a premere la barra (con #focus esclusivo) se l'#hashtag o l'emoticon viene trovata o riconosciuta. E' FASTIDIOSISSIMO e foriero di errori mentre si scrive. Sapevatelo :-)

    (a magari se qualcuno che sviluppa la UI Web riuscisse a trovare una soluzione o un comportamente meno rigido, sarebbe bello)

    #mastodonui #mastodonweb

  20. #Mastoaiuto #mastofeaturerequest che riguarda: sull'interfaccia Web di #Mastodon, quando scrivo e metto gli #hashtag o anche un #emoticon, praticamente mi *costringe* a premere la barra (con #focus esclusivo) se l'#hashtag o l'emoticon viene trovata o riconosciuta. E' FASTIDIOSISSIMO e foriero di errori mentre si scrive. Sapevatelo :-)

    (a magari se qualcuno che sviluppa la UI Web riuscisse a trovare una soluzione o un comportamente meno rigido, sarebbe bello)

    #mastodonui #mastodonweb

  21. #Mastoaiuto #mastofeaturerequest che riguarda: sull'interfaccia Web di #Mastodon, quando scrivo e metto gli #hashtag o anche un #emoticon, praticamente mi *costringe* a premere la barra (con #focus esclusivo) se l'#hashtag o l'emoticon viene trovata o riconosciuta. E' FASTIDIOSISSIMO e foriero di errori mentre si scrive. Sapevatelo :-)

    (a magari se qualcuno che sviluppa la UI Web riuscisse a trovare una soluzione o un comportamente meno rigido, sarebbe bello)

    #mastodonui #mastodonweb

  22. #Mastoaiuto #mastofeaturerequest che riguarda: sull'interfaccia Web di #Mastodon, quando scrivo e metto gli #hashtag o anche un #emoticon, praticamente mi *costringe* a premere la barra (con #focus esclusivo) se l'#hashtag o l'emoticon viene trovata o riconosciuta. E' FASTIDIOSISSIMO e foriero di errori mentre si scrive. Sapevatelo :-)

    (a magari se qualcuno che sviluppa la UI Web riuscisse a trovare una soluzione o un comportamente meno rigido, sarebbe bello)

    #mastodonui #mastodonweb

  23. Just released Mastodon Bird UI v1.2.0

    Most notable changes: The media that has no alt now uses the `:has` from CSS Selectors Level 4 Working Draft.

    Wanted it to be more subtle instead of the whole image fading out. (It turns out too many forget the descriptive alt texts for their posts, but I still want to see if the post doesn't have one)

    Practically here's the monster: `.wrapper:has(> img:not([alt]))::after`. Nice fun #CSS hack!

    Get Mastodon Bird UI here: github.com/ronilaukkarinen/mas

    Changelog:

    * Consistency in follow/unfollow button hover and focus colors
    * More distinct :focus-within to text inputs
    * Hilight search icon when searching emojis
    * Fix emoji-mart search icon color
    * Add more consistent colors for emoji-mart
    * Fix columns for RTL (thanks @ButterflyOfFire)
    * Fix default relationship follow button color
    * Improve relationship follow focus action on mobile
    * Fix missing audio player alignment
    * Fix audio player border-radius
    * Use CSS Selectors Level 4 Working Draft :has for missing alt tag media instead of opacity #UI #MastodonUI #MastodonBirdUI #Design #UIDesign #AltText #OpenSource #Accessibility #A11y

  24. I'm finally quite happy with my CSS theme for #Mastodon. Mastodon is a joy to use now. I loove the fact I can make this my own.

    Mastodon Bird UI has a combination of some hand picked and tweaked open source versions of Iconoir, Ionicons and Feather icons, threading styles, dark panels, lots of general fixes and more.

    See it live on my instance: mementomori.social

    Source code: github.com/ronilaukkarinen/mas #CSS #MastoAdmin #MastodonUI #UI #WebDev

  25. The bottom bar on mobile turned out pretty nicely. :bunhdheart: #CSS #MastodonUI #UI #Mobile