pleroma/pleroma-fe
0
0
Fork 0
Code Issues 343 Pull requests 27 Projects Releases Packages Wiki Activity

FontAwesome 5 #2527

Closed
hj wants to merge 0 commits from gitlab-mr-iid-1260 into develop
pull from: gitlab-mr-iid-1260
merge into: pleroma:develop
Conversation 12 Commits - Files changed -
hj commented 2020-10-20 21:24:12 +00:00
Owner
Copy link

Closes #982

Replaces all icons with FA5 counterparts. Removes Fontello

Some icons changed to a (slightly) different icon:

  • All spinners were changed to circle-notch since FA doesn't have any spinners beyond 7-dots and circle-notch ones.
  • bell-ringing is instead a frankenstein of bell and two rss icons to simulate ringing, since bell-on is a FA PRO icon :/
  • Video icon (in hidden attachment placeholder) uses generic camera
  • Poll icon uses horizontal poll icon, i.e. similar to graph but horizontal and inside a square.
  • Smile icon uses beam version, i.e. it does the ^_^ expression. Because people complained that plain :) "stares at them"
  • Smile icon in post form changed to filled variant for better harmony with other icons
  • globe is changed to a generic "basketball"
  • lock now has shackle turned over for better accessibility
  • ellipsis in usercard is vertical instead of horizontal
  • version tab in settings is now information without circle.
  • notifications tab in settings is non-ringing bell
  • maybe more i can't remember.

Some small bugfixes:

  • Icons in navbar have been readjusted
  • Icons in user-card have been readjusted and given MUCH bigger hitbox + better hover indication.
  • Some components like RetweetButton have been refactored.
  • Some components's CSS was changed to fit better with our guidelines.
Closes #982 Replaces all icons with FA5 counterparts. Removes Fontello Some icons changed to a (slightly) different icon: * **All spinners were changed to `circle-notch` since FA doesn't have any spinners beyond 7-dots and circle-notch ones.** * bell-ringing is instead a frankenstein of `bell` and two `rss` icons to simulate ringing, since `bell-on` is a FA PRO icon :/ * Video icon (in hidden attachment placeholder) uses generic camera * Poll icon uses horizontal poll icon, i.e. similar to graph but horizontal and inside a square. * Smile icon uses `beam` version, i.e. it does the ^_^ expression. Because people complained that plain :) "stares at them" * Smile icon in post form changed to filled variant for better harmony with other icons * globe is changed to a generic "basketball" * lock now has shackle turned over for better accessibility * ellipsis in usercard is vertical instead of horizontal * version tab in settings is now `information` without circle. * notifications tab in settings is non-ringing bell * maybe more i can't remember. Some small bugfixes: * Icons in navbar have been readjusted * Icons in user-card have been readjusted and given MUCH bigger hitbox + better hover indication. * Some components like RetweetButton have been refactored. * Some components's CSS was changed to fit better with our guidelines.
shpuld commented 2020-10-22 05:53:55 +00:00
Owner
Copy link

weird indent?

weird indent?
shpuld commented 2020-10-22 06:57:25 +00:00
Owner
Copy link

Changing this to flex seems to fix the vertical alignment of icon vs text that's bugging me a lot, it also fixes the underline extending weirdly

it also breaks the follow request count so that needs some attention

Changing this to flex seems to fix the vertical alignment of icon vs text that's bugging me a lot, it also fixes the underline extending weirdly it also breaks the follow request count so that needs some attention
shpuld commented 2020-10-22 07:32:22 +00:00
Owner
Copy link

The follow request count is fixable by also adding:

align-items: center;
height: 1.2em;

and then removing the negative margin from the count badge

The follow request count is fixable by also adding: ``` align-items: center; height: 1.2em; ``` and then removing the negative margin from the count badge
hj commented 2020-10-22 08:12:13 +00:00
Author
Owner
Copy link

in general flex breaks the vertical alignment/paddings for the icons for some reason. I'll see what can be done.

in general flex breaks the vertical alignment/paddings for the icons for some reason. I'll see what can be done.
shpuld commented 2020-10-22 08:16:55 +00:00
Owner
Copy link

in this case it didn't seem to have the problem, I tested it in browser. looks more broken as it is than with flex

in this case it didn't seem to have the problem, I tested it in browser. looks more broken as it is than with flex
shpuld commented 2020-10-28 06:51:53 +00:00
Owner
Copy link

any update? I can do the change too into the branch if you want and if I can make sure it has no negative side effects

the nav panel is just the most visible place where the alignments are off so I'd like to get it fixed

any update? I can do the change too into the branch if you want and if I can make sure it has no negative side effects the nav panel is just the most visible place where the alignments are off so I'd like to get it fixed
hj commented 2020-10-28 08:50:57 +00:00
Author
Owner
Copy link

I'll update it today, last two days were a bit too much for me, sorry.

I'll update it today, last two days were a bit too much for me, sorry.
hj commented 2020-10-28 20:00:20 +00:00
Author
Owner
Copy link

Updated:

  • Removed button-icon, replaced with fa-scale-110 (110% icon scale aka font-size: 1.1em) and fa-old-padding, no longer requires size="lg" which also screwed alignment a bit.
  • Updated and optimized layout of both navigation lists (both mobile and desktop) - they use fixed sizing and text alignment is done with line-height instead of padding.
  • Follow requests badge updated to be aligned with vertical-align instead of negative margins, also synced styles between mobile and desktop. Should look much less weird now.
  • Fixed weird alignments in side-drawer
  • Increased size for side-tabs on mobile
Updated: - Removed `button-icon`, replaced with `fa-scale-110` (110% icon scale aka `font-size: 1.1em`) and `fa-old-padding`, no longer requires `size="lg"` which also screwed alignment a bit. - Updated and optimized layout of both navigation lists (both mobile and desktop) - they use fixed sizing and text alignment is done with line-height instead of padding. - Follow requests badge updated to be aligned with `vertical-align` instead of negative margins, also synced styles between mobile and desktop. Should look much less weird now. - Fixed weird alignments in side-drawer - Increased size for side-tabs on mobile
shpuld commented 2020-10-28 20:26:35 +00:00
Owner
Copy link

Looking really good now, only thing that sticks out right now is the emoji picker, at first it looks like something is not right because the U has an underline, but selected icon also has an underline

Looking really good now, only thing that sticks out right now is the emoji picker, at first it looks like something is not right because the U has an underline, but selected icon also has an underline
shpuld commented 2020-10-28 20:36:18 +00:00
Owner
Copy link

image

The select drop-down icon looks quite off on 70% market share borwser

![image](/attachments/4cea4ecb-ae9e-4edd-9ba0-27524a7d4c53) The select drop-down icon looks quite off on 70% market share borwser
image.png
32 KiB
shpuld commented 2020-10-28 20:37:48 +00:00
Owner
Copy link

I guess it's not great on 7% either if you change the option... I guess it's been broken like this for a while

image

I guess it's not great on 7% either if you change the option... I guess it's been broken like this for a while ![image](/attachments/8a289c80-dea6-4b9c-8f78-ee8d4312769b)
image.png
7.8 KiB
shpuld commented 2020-10-28 20:41:14 +00:00
Owner
Copy link

not necessary to fix here, this branch didn't cause the issue

not necessary to fix here, this branch didn't cause the issue

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
BE Request

   
Backlog

   
Better behavior

   
Blocked by deps

   
Bug

   
Code Review

   
Discussion

   
Doing

   
Feature Request / Enhancement

   
In the shining bright future maybe

   
It's complicated

   
MS Edge

   
Mememoon (or other niche browsers)

   
Missing API

   
Missing feature

   
Missing l10n/i18n

   
NL1

Instance Admin Dashboard

  
NL2

Improved Mobile Experience

  
NL4

Improved instance customization and QoL options

  
Need to verify on develop

   
RELEASE BLOCKER

   
Reassign or Close

   
Refactor

   
Regression

   
Safari

   
To Do

   
User story

   
Waiting on godot

   
accessibility

https://git.pleroma.social/pleroma/pleroma-fe/-/snippets/7746

  
better documentation

   
chore

   
confirmed

   
easy ticket

   
incident

Denotes a disruption to IT services and the associated issues require immediate attention

  
l10n update

   
mastoapi

   
mobile

   
needs design

   
needs-info

   
needs-review

   
stupid
No labels
BE Request
Backlog
Better behavior
Blocked by deps
Bug
Code Review
Discussion
Doing
Feature Request / Enhancement
In the shining bright future maybe
It's complicated
MS Edge
Mememoon (or other niche browsers)
Missing API
Missing feature
Missing l10n/i18n
NL1
NL2
NL4
Need to verify on develop
RELEASE BLOCKER
Reassign or Close
Refactor
Regression
Safari
To Do
User story
Waiting on godot
accessibility
better documentation
chore
confirmed
easy ticket
incident
l10n update
mastoapi
mobile
needs design
needs-info
needs-review
stupid
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
2 participants
Notifications
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
pleroma/pleroma-fe!2527
No description provided.