New design #31

Merged

Madeorsk merged 8 commits from master into master 2018-06-20 11:44:04 +00:00

Conversation 11 Commits 8 Files changed 108 +9740 -180

Madeorsk commented 2018-05-19 14:35:46 +00:00 (Migrated from github.com)

Copy link

• New design!
• Added link for author name in comments.
• Added author full name in comments.

• Fixed label / input relation linking.

+ New design! + Added link for author name in comments. + Added author full name in comments. * Fixed label / input relation linking.

👍 4 ❤️ 2

mkljczk commented 2018-05-21 16:32:05 +00:00 (Migrated from github.com)

Copy link

if anyone's curious how does it look

 if anyone's curious how does it look

👍 5 ❤️ 1

elegaanz (Migrated from github.com) requested changes 2018-05-21 18:25:57 +00:00

elegaanz (Migrated from github.com) left a comment

Copy link

Hey! Thanks for your help! I just have a few remarks:

• the background seems a bit dark to me. I'm not against a light-gray background, but it should be more subtle.
• I don't know if it is wanted or not, but on lists (either posts, notifications or followers) the title is not perfectly left-aligned with the others elements of the card.
• There is a weird spacing between comments when you have many of them.
• The button to edit your own profile looks weird
• About the style of the code, I would prefer to use One True Brace Style everywhere (but it's not really important, I can do the formatting myself after merging if you want).
• The header seems a bit big to me. I think the content itself (especially when reading articles) should be the main element on the screen, so it doesn't really makes sense to me to have big links here.
• I'm not sure it perfectly responsive, but that is not the case with the current design neither, so it's not a real problem, and it can completely be fixed in another PR.

Else, I really love what you did (especially the fonts you chose). Thanks again!

Hey! Thanks for your help! I just have a few remarks: - the background seems a bit dark to me. I'm not against a light-gray background, but it should be more subtle. - I don't know if it is wanted or not, but on lists (either posts, notifications or followers) the title is not perfectly left-aligned with the others elements of the card. - There is a weird spacing between comments when you have many of them. - The button to edit your own profile looks weird - About the style of the code, I would prefer to use One True Brace Style everywhere (but it's not really important, I can do the formatting myself after merging if you want). - The header seems a bit big to me. I think the content itself (especially when reading articles) should be the main element on the screen, so it doesn't really makes sense to me to have big links here. - I'm not sure it perfectly responsive, but that is not the case with the current design neither, so it's not a real problem, and it can completely be fixed in another PR. Else, I really love what you did (especially the fonts you chose). Thanks again!

EliotBerriot (Migrated from github.com) reviewed 2018-05-21 18:42:15 +00:00

EliotBerriot (Migrated from github.com) left a comment

Copy link

Looks good!

One remark: the number of characters per line seems too high. I suggest setting a max-width for text content to increase the readability (see https://baymard.com/blog/line-length-readability, for an explanation)

Looks good! One remark: the number of characters per line seems too high. I suggest setting a max-width for text content to increase the readability (see https://baymard.com/blog/line-length-readability, for an explanation)

stephenburgess8 commented 2018-06-13 13:28:51 +00:00 (Migrated from github.com)

Copy link

Hey, just wanted to say this looks great. I also wanted to echo Eliot and Baptiste on two points: line length and contrast. For line length, my go-to number is ~66 characters per line. That comes from The Elements of Typographic Style by Robert Bringhurst. He says comfortable reading line length is between 45 and 77 characters, with about 66 being ideal. The blog post above suggests 50-60, but I think you can get away with a little longer lines in long form posts.

The other thing is text contrast on background. I wrote a blog post about this including samples for minimum contrast. https://webdev.ink/2018/04/24/Text-Contrast-for-Web-Pages/ Basically, a 7:1 ratio of text to background color is the minimum to meet WCAG AAA standards and ensure that everyone can use the site easily. Looking forward to the next iteration!

Hey, just wanted to say this looks great. I also wanted to echo Eliot and Baptiste on two points: line length and contrast. For line length, my go-to number is ~66 characters per line. That comes from **The Elements of Typographic Style** by Robert Bringhurst. He says comfortable reading line length is between 45 and 77 characters, with about 66 being ideal. The blog post above suggests 50-60, but I think you can get away with a little longer lines in long form posts. The other thing is text contrast on background. I wrote a blog post about this including samples for minimum contrast. https://webdev.ink/2018/04/24/Text-Contrast-for-Web-Pages/ Basically, a 7:1 ratio of text to background color is the minimum to meet WCAG AAA standards and ensure that everyone can use the site easily. Looking forward to the next iteration!

👍 4

sivy commented 2018-06-14 12:25:25 +00:00 (Migrated from github.com)

Copy link

I hope that no one will mind me making a few comments:

• As much as I do not like aping another site's style, taking design "inspiration" from Medium could be a Good Thing, since it's something users are familiar with
• I've been wondering if Plume was intended as a Medium-alike (a pattern we should get away from in the Fediverse) or a more general Blog provider. This is important, since blogs are such a personal medium (no pun intended) and I'm wondering if you are intending to give users some control over their blog's design.

I hope that no one will mind me making a few comments: - As much as I do not like aping another site's style, taking design "inspiration" from Medium could be a Good Thing, since it's something users are familiar with - I've been wondering if Plume was intended as a Medium-alike (a pattern we should get away from in the Fediverse) or a more general Blog provider. This is important, since blogs are such a personal medium (no pun intended) and I'm wondering if you are intending to give users some control over their blog's design.

elegaanz commented 2018-06-14 12:30:41 +00:00 (Migrated from github.com)

Copy link

We plan to support theming, both for instances and blogs (see #40)

We plan to support theming, both for instances and blogs (see #40)

👍 1

Madeorsk commented 2018-06-17 20:22:51 +00:00 (Migrated from github.com)

Copy link

I tried to take every observations in account in my last commit. What do you think about it, now? :-)

(There are still Google Fonts in main.css that I would like to download and put into the fonts directory, I'll try to do this tomorrow.)

I am thinking about some improvements, especially for the dashboard, user profile, lists (followers, notifications), forms (login, register, ...), and like/reshare buttons. But I think it could come in future PR!

I tried to take every observations in account in my last commit. What do you think about it, now? :-) (There are still Google Fonts in main.css that I would like to download and put into the `fonts` directory, I'll try to do this tomorrow.) I am thinking about some improvements, especially for the dashboard, user profile, lists (followers, notifications), forms (login, register, ...), and like/reshare buttons. But I think it could come in future PR!

elegaanz (Migrated from github.com) requested changes 2018-06-17 20:48:08 +00:00

elegaanz (Migrated from github.com) left a comment

Copy link

It's better, but I still have a few remarks:

• the top margin of the header still seems big too me (I tested locally and margin-top: 3em looks better IMHO).
• The header feels a bit unbalanced because of the "Plume" part. I think it could be improved by reducing its right padding.
• Maybe a larger margin between the article itself and its metadata/comments?
• I don't remember if I already said it, but items in lists are not perfectly aligned with other items on the left (it is especially visible on the dashboard)

Else, it looks really good. I hope I'm not too demanding, and as usual if you think something I said is not legitimate, feel free to tell me.

It's better, but I still have a few remarks: - the top margin of the header still seems big too me (I tested locally and `margin-top: 3em` looks better IMHO). - The header feels a bit unbalanced because of the "Plume" part. I think it could be improved by reducing its right padding. - Maybe a larger margin between the article itself and its metadata/comments? - I don't remember if I already said it, but items in lists are not perfectly aligned with other items on the left (it is especially visible on the dashboard) Else, it looks really good. I hope I'm not too demanding, and as usual if you think something I said is not legitimate, feel free to tell me.

elegaanz commented 2018-06-17 20:50:16 +00:00 (Migrated from github.com)

Copy link

Here are screenshots of the updated design for those who are curious:

Here are screenshots of the updated design for those who are curious:  

❤️ 1

elegaanz commented 2018-06-19 21:43:52 +00:00 (Migrated from github.com)

Copy link

So, once again screenshots with the latest commits for those who don't want to install a development environment.

(I personally love this new header 👌)

So, once again screenshots with the latest commits for those who don't want to install a development environment.  (I personally love this new header :ok_hand:)

❤️ 3 🎉 2

elegaanz commented 2018-06-19 21:54:01 +00:00 (Migrated from github.com)

Copy link

@Madeorsk I don't know if you plan to make other changes to this branch but I'm okay to merge it as it is id you want, even if some minor improvements could be made (it will never be too late to make them in other branches). (the diff is a bit huge tho, but I guess it's because of the fonts)

@Madeorsk I don't know if you plan to make other changes to this branch but I'm okay to merge it as it is id you want, even if some minor improvements could be made (it will never be too late to make them in other branches). (the diff is a bit huge tho, but I guess it's because of the fonts)

mkljczk commented 2018-06-19 22:39:19 +00:00 (Migrated from github.com)

Copy link

This new header is great 😍

This new header is great 😍

🎉 1

Madeorsk commented 2018-06-20 11:43:20 +00:00 (Migrated from github.com)

Copy link

I think you can merge!

Yes there is still a lot of things to do, like I said I want to change dashboard, followers list (we maybe need to add more informations than a name, same for the dashboard), like/reshare buttons and forms, at least.

I think you can merge! Yes there is still a lot of things to do, like I said I want to change dashboard, followers list (we maybe need to add more informations than a name, same for the dashboard), like/reshare buttons and forms, at least.

👍 1

elegaanz commented 2018-06-20 11:44:15 +00:00 (Migrated from github.com)

Copy link

Thank you so much!

Thank you so much!

Sign in to join this conversation.

Reviewers

No reviewers

elegaanz

Labels

Clear labels   

A: API

Related to the REST API

  

A: Backend

Code running on the server

  

A: Federation

Stuff related to Federation

  

A: Front-End

Related to the front-end

  

A: I18N

Translations, and related code

  

A: Meta

More about project management or code than the project itself

  

A: Security

  

Build

The building, or installation process of Plume

  

C: Bug

Something isn't working

  

C: Discussion

We need to talk

  

C: Enhancement

New feature or request

  

C: Feature

This is a new feature

  

Compatibility

Compatibility with different browsers, readers and OS

  

Dependency

Related to an external package that Plume uses

  

Design

UI/UX related issues and PRs

  

Documentation

  

Good first issue

Good for newcomers

  

Help welcome

Extra attention is needed

  

Mobile

Issues affecting only mobile UX

  

Rendering

How elements're rendered out for the end user

  

S: Blocked

Something else needs to be fixed first

  

S: Duplicate

This issue or pull request already exists

  

S: Incomplete

This PR is not complete yet

  

S: Instance specific

Issues concern a limited number of instances

  

S: Invalid

This doesn't seem right

  

S: Needs Voting/Discussion

Need to be discussed by the community (on Loomio)

  

S: Ready for review

This PR is ready to be reviewed

  

Suggestion

Proposed ideas worth considering

  

S: Voted on Loomio

This is issue has been created after a vote on Loomio

  

S: Wontfix

This will not be worked on

No labels

A: API

A: Backend

A: Federation

A: Front-End

A: I18N

A: Meta

A: Security

Build

C: Bug

C: Discussion

C: Enhancement

C: Feature

Compatibility

Dependency

Design

Documentation

Good first issue

Help welcome

Mobile

Rendering

S: Blocked

S: Duplicate

S: Incomplete

S: Instance specific

S: Invalid

S: Needs Voting/Discussion

S: Ready for review

Suggestion

S: Voted on Loomio

S: Wontfix

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: Plume/Plume#31

No description provided.