feat(snack-bar): set snack bar to be responsive #7485

josephperrott · 2017-10-03T00:09:20Z

crisbeto · 2017-10-03T15:21:11Z

src/lib/snack-bar/snack-bar-container.scss

@@ -33,6 +33,12 @@ $mat-snack-bar-spacing-margin: 24px !default;
    transform: translateY(-100%);
  }

+  &.mobile {


A few notes:

.mobile seems like something that could clash with user styles. What about calling it mat-snackbar-mobile?

Renaming the class will let you avoid the nesting.

Is there a particular reason for going with viewport units rather than percent? I have a vague memory about 100vw causing content to go behind the scrollbar on Windows.

Yep, definitely forgot to rename the class after I got it working.

Because the overlay container does not establish itself as the entire width of the viewport, width: 100% turns into the width of the child based on content, so we use 100vw .

I see. That seems to go behind the scrollbar though. Here's a position: fixed div with a width of 100vw:

You might be able to work around it by adding a class to the overlay panel via the panelClass and styling it from there.

The issue that we run into with changing the width of the overlay container, is that the snackbar will always stay in its most expanded state (as limited by max-width)

I will have to continue to investigate

josephperrott · 2017-10-06T00:02:04Z

@crisbeto Comments addresed. I moved the observation to MatSnackbar, modifying a class in the overlay element with the class effecting styling in both the overlay element and the snackbar container

Feel free to take a look when you have a chance.

chrste90 · 2017-10-06T08:37:12Z

src/lib/snack-bar/snack-bar.ts

@@ -145,6 +148,18 @@ export class MatSnackBar {
    // We can't pass this via the injector, because the injector is created earlier.
    snackBarRef.instance = contentRef.instance;

+    // Subscribe to the breakpoint observer and attacg the mat-snack-bar-handset class as


Small typo :)

crisbeto

Mostly LGTM, some minor feedback.

crisbeto · 2017-10-06T15:28:14Z

src/lib/snack-bar/snack-bar.ts

+    // appropriate. This class is applied to the overlay element because the overlay must expand to
+    // fill the width of the screen for full width snackbars.
+    const isHandset = this._breakpointObserver.observe(Breakpoints.Handset).subscribe(state => {
+      overlayRef.overlayElement.classList.toggle('mat-snack-bar-handset', state.matches);


The second param for classList.toggle doesn't work on IE11. This should use add/remove instead.

crisbeto · 2017-10-06T15:30:17Z

src/lib/snack-bar/snack-bar.ts

+    });
+    // Unsubscribe from the isHandset subscription when the overlay is detached from the view.
+    const overlayDetach = overlayRef.detachments().subscribe(() => {
+      overlayDetach.unsubscribe();


A cleaner approach could be to use takeUntil. E.g.

this._breakpointObserver.observe(Breakpoints.Handset) .takeUntil(overlayRef.detachments().first()) .subscribe(() => ...);

This way you don't have to keep track of subscriptions.

crisbeto

LGTM

crisbeto · 2017-10-06T15:57:56Z

src/lib/snack-bar/snack-bar.ts

+    // appropriate. This class is applied to the overlay element because the overlay must expand to
+    // fill the width of the screen for full width snackbars.
+    RxChain.from(this._breakpointObserver.observe(Breakpoints.Handset))
+      .call(takeUntil, RxChain.from(overlayRef.detachments()).call(first).result())


For a single operator you don't really need the RxChain, you can just .call it directly. E.g. first.call(overlayRef.detachments()).

I did find that frustrating to have it in RxChain again, not sure why I didn't think to look at calling it this way.

angular-automatic-lock-bot · 2019-09-07T08:03:39Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

josephperrott requested a review from crisbeto October 3, 2017 00:09

josephperrott requested a review from jelbourn as a code owner October 3, 2017 00:09

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Oct 3, 2017

josephperrott added the pr: needs review label Oct 3, 2017

josephperrott force-pushed the snackbar branch from 0023ed8 to 69cbfca Compare October 3, 2017 15:13

crisbeto reviewed Oct 3, 2017

View reviewed changes

josephperrott force-pushed the snackbar branch 5 times, most recently from 9e75237 to 3ff026c Compare October 6, 2017 00:00

chrste90 reviewed Oct 6, 2017

View reviewed changes

crisbeto reviewed Oct 6, 2017

View reviewed changes

josephperrott force-pushed the snackbar branch from 3ff026c to 0d02a73 Compare October 6, 2017 15:52

crisbeto approved these changes Oct 6, 2017

View reviewed changes

crisbeto added pr: lgtm action: merge The PR is ready for merge by the caretaker and removed pr: needs review labels Oct 6, 2017

Set snack bar to be responsive.

a423bb0

josephperrott force-pushed the snackbar branch from 0d02a73 to a423bb0 Compare October 6, 2017 16:06

kara merged commit 5b7982f into angular:master Oct 6, 2017

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019

josephperrott deleted the snackbar branch March 20, 2020 22:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(snack-bar): set snack bar to be responsive #7485

feat(snack-bar): set snack bar to be responsive #7485

josephperrott commented Oct 3, 2017

crisbeto Oct 3, 2017 •

edited

Loading

josephperrott Oct 3, 2017

crisbeto Oct 3, 2017

josephperrott Oct 4, 2017

josephperrott commented Oct 6, 2017

chrste90 Oct 6, 2017

crisbeto left a comment

crisbeto Oct 6, 2017

crisbeto Oct 6, 2017 •

edited

Loading

josephperrott Oct 6, 2017

crisbeto left a comment

crisbeto Oct 6, 2017

josephperrott Oct 6, 2017

angular-automatic-lock-bot bot commented Sep 7, 2019

feat(snack-bar): set snack bar to be responsive #7485

feat(snack-bar): set snack bar to be responsive #7485

Conversation

josephperrott commented Oct 3, 2017

crisbeto Oct 3, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

josephperrott commented Oct 6, 2017

Choose a reason for hiding this comment

crisbeto left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

crisbeto Oct 6, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

crisbeto left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

angular-automatic-lock-bot bot commented Sep 7, 2019

crisbeto Oct 3, 2017 •

edited

Loading

crisbeto Oct 6, 2017 •

edited

Loading