Make notification's close button bigger in small screens

[zolagonano]

Fixes #105

screenshots

• Before:

• After:

[canewsin]

@zolagonano Always push pr to py3-internal branch

[zolagonano]

Always push pr to py3-internal branch

@canewsin Done!

[canewsin]

@zolagonano to me, it's better make the close mark, size of notification banner or provide an extra button for mobile devices to close notification.

[zolagonano]

@canewsin Like this?

[canewsin]

@canewsin Like this?

Yes

[zolagonano]

@canewsin Done!

[canewsin]

@zolagonano Made some modifications, any suggessions ?

I think we can roll this to all screen sizes.

.notification .close:hover { color: white }
.notification .close:active, .notification .close:focus { color: white }
.notification .close {
    margin: 10px; padding: 0px; display: block; width: 30px; height: 30px;
    text-align: center; background-color: tomato; line-height: 25px; vertical-align: bottom; font-size: 30px; color: white;
}

[zolagonano]

@zolagonano Made some modifications, any suggessions ?

I think we can roll this to all screen sizes.

.notification .close:hover { color: white }
.notification .close:active, .notification .close:focus { color: white }
.notification .close {
    margin: 10px; padding: 0px; display: block; width: 30px; height: 30px;
    text-align: center; background-color: tomato; line-height: 25px; vertical-align: bottom; font-size: 30px; color: white;
}

Great, i'll implement it for all screen sizes :)

[canewsin]

@zolagonano Also note that there is slight alignment issue for active and inactive button, try to fix that.

@zolagonano Made some modifications, any suggessions ?

[zolagonano]

@canewsin I have also added 20px to the width of notifications

[canewsin]

@canewsin I have also added 20px to the width of notifications

Provide a visual change(screenshot) as before.

[zolagonano]

Provide a visual change(screenshot) as before.

Also i have changed the margin-top in select class. before:

after:

---

small screens:

bigger screens:

[styromaniac]

How are you targeting mobile devices? What media queries?

[zolagonano]

How are you targeting mobile devices? What media queries?

@styromaniac First, I made that button bigger for screens smaller than 600px, but caneswin suggested implementing it for all screen sizes. Now it's bigger in all screen sizes.

[styromaniac]

How are you targeting mobile devices? What media queries?

@styromaniac First, I made that button bigger for screens smaller than 600px, but caneswin suggested implementing it for all screen sizes. Now it's bigger in all screen sizes.

Okay. If it had to be for touch devices, for future reference, it's (pointer:coarse).

[zolagonano]

How are you targeting mobile devices? What media queries?

@styromaniac First, I made that button bigger for screens smaller than 600px, but caneswin suggested implementing it for all screen sizes. Now it's bigger in all screen sizes.

Okay. If it had to be for touch devices, for future reference, it's (pointer:coarse).

I didn't know that, thanks :)