WIP: First preview of UI redesign for Yarn.social #437

Closed
sorenpeter wants to merge 3 commits from master into master
Owner
  • Not Ready for production!!
  • Using water.css istead of pico.ss
  • Rearanging topnav menus, post-menu and post-view on timeline
  • Add mockup suggestions
  • Some features/links are hard/hand coded
* Not Ready for production!! - Using water.css istead of pico.ss - Rearanging topnav menus, post-menu and post-view on timeline - Add mockup suggestions - Some features/links are hard/hand coded
sorenpeter added 1 commit 8 months ago
ac1d983c40 First preview of UI redesign for Yarn.social
sorenpeter added 1 commit 8 months ago
sorenpeter added 1 commit 8 months ago
af830035ff added hack cat
prologic changed target branch from master to new_ui 8 months ago
prologic changed target branch from new_ui to master 8 months ago
Owner

I'm going to push this to a new branch in this repo new_ui

Q: Are the yellow bits the stuff still to complete?

I'm going to push this to a new branch in this repo [new_ui](https://git.mills.io/yarnsocial/yarn/src/branch/new_ui) Q: Are the yellow bits the stuff still to complete?
Owner

As mentioned on Yarn:

  • Let's redesign an new default logo. Will this be an SVG @sorenpeter ?
  • I'll get the InReplyTo and other TODO(s) implemented on the backend.
  • @adi You're cleaning up the CSS from the work @sorenpeter did?
As mentioned on Yarn: - Let's redesign an new default logo. Will this be an SVG @sorenpeter ? - I'll get the `InReplyTo` and other TODO(s) implemented on the backend. - @adi You're cleaning up the CSS from the work @sorenpeter did?
Owner

@sorenpeter I actually made some changes and cleanup, mostly removing dead code, copies of files, files no longerused, etc in the new_ui branch. Would you mind merging it into your fork and resolving conflicts since you know what you've done 🤗

That way I can merge your fork into the new_ui branch cleanly.

Then we'll see what changes @adi is making in his fork and we can all collaborate on the same branch 🤗

@sorenpeter I actually made some changes and cleanup, mostly removing dead code, copies of files, files no longerused, etc in the `new_ui` branch. Would you mind merging it into your fork and resolving conflicts since you know what you've done 🤗 That way I can merge your fork into the `new_ui` branch cleanly. Then we'll see what changes @adi is making in his fork and we can all collaborate on the same branch 🤗
Owner

@adi should see this 🤗

@adi should see this 🤗
Poster
Owner

Okay, so replying to the email send out from Gitea did not make it to this thread so here are my answers for @adi everyone else:

Yes the yellow parts are mockups without any functionality. So stuff that needs some backend work.

There is also a lot of TODO comments in the html templates and in yarn.css. like I have not worked out how to change water.csd to use darkmode automatically.


Yes I will try to merge with new_ui.

I believe Adi have been doing his own CSS design and I would like to clean up the CSS myself and manually merge the old twtxt.css with my new yarn.css.

How about implement support for the water.css' darkmode and adding our need adjustments to yarn.css?


And yes a new logo can be made as a SVG.
But maybe just stick with the openmoji for now.

Regarding s purple logo: I think we will need to rethink/redo both the light and dark color scheme.

I would suggest we focus on getting a functional design first, and then stating the rebranding and designing a new visual identity.

**Okay, so replying to the email send out from Gitea did not make it to this thread so here are my answers for @adi everyone else:** Yes the yellow parts are mockups without any functionality. So stuff that needs some backend work. There is also a lot of TODO comments in the html templates and in yarn.css. like I have not worked out how to change water.csd to use darkmode automatically. --- Yes I will try to merge with new_ui. I believe Adi have been doing his own CSS design and I would like to clean up the CSS myself and manually merge the old twtxt.css with my new yarn.css. How about implement support for the water.css' darkmode and adding our need adjustments to yarn.css? --- And yes a new logo can be made as a SVG. But maybe just stick with the openmoji for now. Regarding s purple logo: I think we will need to rethink/redo both the light and dark color scheme. I would suggest we focus on getting a functional design first, and then stating the rebranding and designing a new visual identity.
Owner

Yes the yellow parts are mockups without any functionality. So stuff that needs some backend work.

There is also a lot of TODO comments in the html templates and in yarn.css. like I have not worked out how to change water.csd to use darkmode automatically.

I mostly just ignored this for now and working to skinning the current features. We can add those features later on top of the new skin.

Yes I will try to merge with new_ui.

I believe Adi have been doing his own CSS design and I would like to clean up the CSS myself and manually merge the old twtxt.css with my new yarn.css.

Ok, I've been using Sakura ~300 loc and manually copying the changes from @sorenpeter fork, I prefer I keep it with a low loc. water.css is 1689 loc. I'm getting closer to @sorenpeter design. https://prnt.sc/1txt02y

How about implement support for the water.css' darkmode and adding our need adjustments to yarn.css?

You could hack on your prefered branches, for now I'm just looking at the design and implemeting it with my own CSS.

> Yes the yellow parts are mockups without any functionality. So stuff that needs some backend work. > There is also a lot of TODO comments in the html templates and in yarn.css. like I have not worked out how to change water.csd to use darkmode automatically. I mostly just ignored this for now and working to skinning the current features. We can add those features later on top of the new skin. > Yes I will try to merge with new_ui. > I believe Adi have been doing his own CSS design and I would like to clean up the CSS myself and manually merge the old twtxt.css with my new yarn.css. Ok, I've been using Sakura ~300 loc and manually copying the changes from @sorenpeter fork, I prefer I keep it with a low loc. `water.css` is 1689 loc. I'm getting closer to @sorenpeter design. https://prnt.sc/1txt02y > How about implement support for the water.css' darkmode and adding our need adjustments to yarn.css? You could hack on your prefered branches, for now I'm just looking at the design and implemeting it with my own CSS.
Poster
Owner

I feel like me an @adi are moving in two oppsite directions... not sure how to resolve this

I feel like me an @adi are moving in two oppsite directions... not sure how to resolve this
Owner

I feel like me an @adi are moving in two oppsite directions

I just believe it's a better idea to use a lighter CSS framework (if any), the rest stays all the same.

> I feel like me an @adi are moving in two oppsite directions I just believe it's a better idea to use a lighter CSS framework (if any), the rest stays all the same.
Poster
Owner

I see your point @adi , but if we are to use sakura.css I would suggest that we add variables for colors similar to how it is done in water.css#theming or base our own style or vanilla.css that allready got some basic variables build in.

Visual comparanson:
https://www.cssbed.com/sakura/
https://www.cssbed.com/vanillacss/
https://www.cssbed.com/water.css-light/

I see your point @adi , but if we are to use sakura.css I would suggest that we add variables for colors similar to how it is done in [water.css#theming](https://github.com/kognise/water.css?ref=producthunt#theming) or base our own style or [vanilla.css](https://github.com/bradleytaunt/vanilla-css/blob/master/vanilla.css) that allready got some basic variables build in. Visual comparanson: https://www.cssbed.com/sakura/ https://www.cssbed.com/vanillacss/ https://www.cssbed.com/water.css-light/
Owner

Sure! So which colors? vanilla.css or water.css?

Sure! So which colors? `vanilla.css` or `water.css`?
Owner

Let's go with vanilla.css as it's also very lightweight.

Let's go with `vanilla.css` as it's also very lightweight.
Poster
Owner

if we are to make it simple go with vanilla.css and the we add the colors as we need them like --text-muted (from water.css)

if we are to make it simple go with vanilla.css and the we add the colors as we need them like --text-muted (from water.css)
Poster
Owner

Also vanilla.css already got a darkmode buildin :)

It needs some work thou

Also vanilla.css already got a darkmode buildin :) It needs some work thou
Owner

We could awlays just write our own CSS from scratch? 🤔

We could awlays just write our own CSS from scratch? 🤔
Poster
Owner

Yeah we might end up with our own css, but alway got to get inspirations:)

Yeah we might end up with our own css, but alway got to get inspirations:)
prologic changed title from First preview of UI redesign for Yarn.social to WIP: First preview of UI redesign for Yarn.social 7 months ago
Owner

@sorenpeter This needs rebasing and conflict resolution 👌

@sorenpeter This needs rebasing and conflict resolution 👌
Owner

Superceded by support for first-class themes via -t/--theme and https://git.mills.io/sorenpeter/darchTheme

Superceded by support for first-class themes via `-t/--theme` and https://git.mills.io/sorenpeter/darchTheme
prologic closed this pull request 7 months ago
Some checks failed
continuous-integration/drone/pr Build is failing
This pull request cannot be reopened because the branch was deleted.
Sign in to join this conversation.
Loading…
There is no content yet.