search

StudentTraineeCenter / stcblog

MS Fluent based WordPress theme for studuj.digital blog.
https://studuj.digital
GNU General Public License v3.0
9 stars 1 forks source link

Visually differentiate pinned posts #13

Closed Vilican closed 3 years ago

Vilican commented 3 years ago

Pinned posts as they are now, always stick at the top. However, the user who doesn't check posts below (including myself) can easily get tricked into believing it's the latest published post. Therefore, he can miss new posts.

I propose that we add light yellow background (design for discussion) to visually differentiate such sticky posts so users can more easily understand it's pinned there.

petrkucerak commented 3 years ago

Ok. That makes sense. But to be honest, I don't really know if yellow color is right way.

What do you think about other designs?

1) grey background image

2) yelow background image

3) some border image

4) or this style image image

Vilican commented 3 years ago

@petrkucerak - Yellow backgroud was just a proposal. For me, grey color is used for disabled and outdated things, so we shouldn't use it for important pinned posts. However, I agree that yellow is just as bad. Borders do not clearly convey the message of sticky post.

Maybe we could add a small, but visible pin to upper right corner?

Example:

image

filiptronicek commented 3 years ago

We could use the same pin that GitHub uses (in the Fluent Design icon system) image

From @petrkucerak's proposals, I like number 4 the most. It's not visually intriguing, and quite nice to look at. At the same time it is very much visible.

Vilican commented 3 years ago

@filiptronicek - This pin is fine. We could use it with the 4th (vertical) line design. What do you think?

filiptronicek commented 3 years ago

@Vilican agreed. I will take a look at it today.

petrkucerak commented 3 years ago

Please do it! @petrkucerak

filiptronicek commented 3 years ago

https://github.com/microsoft/fluentui-system-icons - the MSFT icons

petrkucerak commented 3 years ago

@filiptronicek and @kahy9 Do you have any idea, where I should place the pinned icon in phone view? image

I place icon on right top side in PC view mode image

filiptronicek commented 3 years ago

What about putting it alongside the article title on mobile? @petrkucerak

Elesaa commented 3 years ago

We currently have two options - one with only pin icon, second with a colorful badge with intriguing text (for example "TOP"). MarCom graphics will help decide on the final product. After that we put it in use.

petrkucerak commented 3 years ago

image