Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Step] Show step pointer and border also on stacked mobile for consistent look #583

Merged
merged 1 commit into from
Mar 26, 2019
Merged

[Step] Show step pointer and border also on stacked mobile for consistent look #583

merged 1 commit into from
Mar 26, 2019

Conversation

lubber-de
Copy link
Member

Description

Thanks to @Alamantus for the original SUI-PR

Fix step borders by moving it below steps instead of bunching them all up to the right.
This provides a consistent look for the steps when stacked and also remains separate from the "vertical" styled steps.

I also added an additional fix to still hide the pointer in the last active item in the forced vertical variant

Testcase

  • Size your screen to mobile size to force stacking of the steps. The arrow in active step will also appear now and the border is consistent now
    https://jsfiddle.net/ochbq14w/

Screenshot

Desktop Steps as usual

image

Notice the following changes on mobile:

  • Step on Desktop always have a vertical 1px border divider which are missing on mobile
  • On mobile the right border was doubled, thus bolder, if not the last disabled step
  • The step pointer for the active step was missing on mobile

Mobile steps were not consistent

Before After
image image

Closes

Semantic-Org/Semantic-UI#5929

@lubber-de lubber-de added type/feat Any feature requests or improvements lang/css Anything involving CSS state/awaiting-reviews Pull requests which are waiting for reviews tag/sui-issue Taken from an existing Issue/PR of SUI labels Mar 24, 2019
@lubber-de lubber-de added this to the 2.7.4 milestone Mar 24, 2019
@lubber-de lubber-de mentioned this pull request Mar 24, 2019
Open
y0hami
y0hami approved these changes Mar 24, 2019
View reviewed changes
Copy link
Member

@y0hami y0hami left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

prudho
prudho approved these changes Mar 25, 2019
View reviewed changes
Copy link
Contributor

@prudho prudho left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@y0hami y0hami removed the state/awaiting-reviews Pull requests which are waiting for reviews label Mar 26, 2019
@y0hami y0hami merged commit 3f913df into fomantic:develop Mar 26, 2019
@y0hami y0hami modified the milestones: 2.7.4, 2.7.3 Mar 26, 2019
@lubber-de lubber-de deleted the feat/5929/vertical_step_arrows branch March 26, 2019 13:37
@y0hami y0hami mentioned this pull request Apr 1, 2019
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@y0hami y0hami y0hami approved these changes

@prudho prudho prudho approved these changes

@ColinFrick ColinFrick Awaiting requested review from ColinFrick

Assignees
No one assigned
Labels
lang/css Anything involving CSS tag/sui-issue Taken from an existing Issue/PR of SUI type/feat Any feature requests or improvements
Projects
None yet
Milestone
2.7.3
Development

Successfully merging this pull request may close these issues.
3 participants
@lubber-de @prudho @y0hami