Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

follow-up improvements to components list page #784

Merged
merged 5 commits into from
Jun 15, 2020

Conversation

annieyw
Copy link
Contributor

@annieyw annieyw commented Jun 8, 2020

follow up of #760

  • change color/hover of side nav
  • hover effect on cards
  • text wrap constraint on cards

Copy link
Collaborator

@mmalerba mmalerba left a comment

Choose a reason for hiding this comment

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

The selected sidenav treatment in dark mode doesn't look great, does the spec say anything about dark mode? Otherwise LGTM

@annieyw
Copy link
Contributor Author

annieyw commented Jun 9, 2020

Before:
image

After:
image

I think lightening the text makes it a little better

Copy link
Collaborator

@mmalerba mmalerba left a comment

Choose a reason for hiding this comment

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

LGTM

@mmalerba mmalerba merged commit 65fc9e1 into angular:master Jun 15, 2020
@annieyw annieyw deleted the fixgrid branch June 15, 2020 20:24
@@ -49,7 +49,7 @@ import {NavigationFocusService} from '../../shared/navigation-focus/navigation-f
// These breakpoint values need to stay in sync with the related Sass variables in
// src/styles/_constants.scss.
const EXTRA_SMALL_WIDTH_BREAKPOINT = 720;
const SMALL_WIDTH_BREAKPOINT = 959;
const SMALL_WIDTH_BREAKPOINT = 939;
Copy link
Contributor

@Splaktar Splaktar Feb 6, 2021

Choose a reason for hiding this comment

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

I think that it's problematic that this small breakpoint was changed so that it no longer matches our Sass small breakpoint (mentioned in the comments above this const):

$small-breakpoint-width: 959px;

It also no longer matches any of the established Material Design layout breakpoints:
https://material.io/design/layout/responsive-layout-grid.html#breakpoints

I'm looking at reverting this in #257.

Splaktar added a commit to DevIntent/material.angular.io that referenced this pull request Feb 6, 2021
- remove `overflow: hidden` that breaks TOC stickiness
  - made sure to keep the Material Table examples from overflowing afterwards
    via changes to `component-viewer.scss`
- revert change from angular#784 to make small breakpoint 939 instead of 959 as it
  isn't consistent with our Sass breakpoints or the Material layout spec
- use alternative to `router-outlet + *` styling
- use constants for more media query breakpoints
- add some missing Sass imports
- move $sidenav-width to constants
- update constants to include different horizontal padding for
  guides and sidenav content
- update copyright year
- add stylePreprocessorOptions for shorter Sass imports
- add .nvmrc since Angular projects only support NodeJS 12 atm

Fixes angular#257
Splaktar added a commit to DevIntent/material.angular.io that referenced this pull request Feb 7, 2021
- remove `overflow: hidden` that breaks TOC stickiness
  - made sure to keep the Material Table examples from overflowing afterwards
    via changes to `component-viewer.scss`
- revert change from angular#784 to make small breakpoint 939 instead of 959 as it
  isn't consistent with our Sass breakpoints or the Material layout spec
- use alternative to `router-outlet + *` styling
- use constants for more media query breakpoints
- add some missing Sass imports
- move $sidenav-width to constants
- update constants to include different horizontal padding for
  guides and sidenav content
- update copyright year
- add stylePreprocessorOptions for shorter Sass imports
- add .nvmrc since Angular projects only support NodeJS 12 atm

Fixes angular#257
Splaktar added a commit to DevIntent/material.angular.io that referenced this pull request Feb 7, 2021
- remove `overflow: hidden` that breaks TOC stickiness
  - made sure to keep the Material Table examples from overflowing afterwards
    via changes to `component-viewer.scss`
- revert change from angular#784 to make small breakpoint 939 instead of 959 as it
  isn't consistent with our Sass breakpoints or the Material layout spec
- use alternative to `router-outlet + *` styling
- use constants for more media query breakpoints
- add some missing Sass imports
- move $sidenav-width to constants
- update constants to include different horizontal padding for
  guides and sidenav content
- update copyright year
- add stylePreprocessorOptions for shorter Sass imports
- add .nvmrc since Angular projects only support NodeJS 12 atm

Fixes angular#257
annieyw pushed a commit that referenced this pull request Feb 8, 2021
- remove `overflow: hidden` that breaks TOC stickiness
  - made sure to keep the Material Table examples from overflowing afterwards
    via changes to `component-viewer.scss`
- revert change from #784 to make small breakpoint 939 instead of 959 as it
  isn't consistent with our Sass breakpoints or the Material layout spec
- use alternative to `router-outlet + *` styling
- use constants for more media query breakpoints
- add some missing Sass imports
- move $sidenav-width to constants
- update constants to include different horizontal padding for
  guides and sidenav content
- update copyright year
- add stylePreprocessorOptions for shorter Sass imports
- add .nvmrc since Angular projects only support NodeJS 12 atm

Fixes #257
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants