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.

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

Enhance landscape categories section wrapping #191

Closed
Silvyre opened this issue Oct 1, 2019 · 5 comments · Fixed by #192
Closed

Enhance landscape categories section wrapping #191

Silvyre opened this issue Oct 1, 2019 · 5 comments · Fixed by #192

Comments

@Silvyre
Copy link
Contributor

@Silvyre Silvyre commented Oct 1, 2019

As noted in #65 (comment), the Categories section on the Service Mesh Landscape page currently wraps category cards by floating them down in a way that functions poorly on smaller screens.

Here is how the Categories section currently looks on a 1280px display:
categories
Note that scrolling the page was required to reveal the Load Balancer category.

As more categories will be added in the future (as per #65 (comment)), this section should be restyled to promote scalability.

@Silvyre

This comment has been minimized.

Copy link
Contributor Author

@Silvyre Silvyre commented Oct 1, 2019

I think the categories might scale better if aligned in a vertical stack. I'll have a mockup soon.

@Silvyre

This comment has been minimized.

Copy link
Contributor Author

@Silvyre Silvyre commented Oct 2, 2019

A minimal proof of concept for a vertically-stacked categories section can be generated by adding a few CSS rules:

.card .card-content li {
  float: right;
  width: 200px;
}

.card .card-content {
  border: none;
}

On a 1280px display:
vertical alignment

Alternatively, with some padding removed and the dotted border reoriented:

.card .card-content {
  border-right: unset;
  padding: 0 0 5px 0;
}

.card .card-content:not(:last-child) {
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: var(--main-dark-grey);
}

Annotation 2019-10-01 221803

Any thoughts, @yogi4?

@leecalcote

This comment has been minimized.

Copy link
Member

@leecalcote leecalcote commented Oct 2, 2019

@Silvyre thanks for jumping in here and providing a couple choices of restyling. This wrapping issue has long plagued the site.

The second of your mockups in which a dashed line is used to separate the categories looks like a winner. We would love to receive your PR here.

@Silvyre

This comment has been minimized.

Copy link
Contributor Author

@Silvyre Silvyre commented Oct 2, 2019

Thank you so much, Lee! I'm thrilled to contribute my first Hacktoberfest PR to your project!

@leecalcote

This comment has been minimized.

Copy link
Member

@leecalcote leecalcote commented Oct 2, 2019

Ha! That's awesome. :) If you haven't see it already, be sure to checkout the Meshery project --> https://github.com/layer5io/meshery. Contributions are warmly received there as well.

See the Meshery Contributor Welcome Guide and join the Slack account to get better connected with the community - http://slack.layer5.io. I'd love to see you in there.

Silvyre added a commit to Silvyre/layer5 that referenced this issue Oct 2, 2019
@Silvyre Silvyre self-assigned this Oct 2, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.