Better styling for request wine related pages #36

2020-09-09T14:11:18Z

Adrianht commented

2020-09-09 14:11:18 +00:00

(Migrated from github.com)

Idea

The styling on pages related to requesting wines was directly bad, so I changed it to something better. Now utilizing grid and media breakpoints

Functionality

Gifs became too large to show functionality properly 😢

## Idea The styling on pages related to requesting wines was directly bad, so I changed it to something better. Now utilizing grid and media breakpoints ## Functionality Gifs became too large to show functionality properly 😢

KevinMidboe (Migrated from github.com) reviewed 2020-09-10 11:38:26 +00:00

src/components/AllRequestedWines.vue

KevinMidboe (Migrated from github.com) commented

2020-09-09 15:03:23 +00:00

Why not @include mobileOnly {?

Why not `@include mobileOnly {`?

src/components/RequestWine.vue

KevinMidboe (Migrated from github.com) commented

2020-09-10 11:38:20 +00:00

What are these strings?

src/styles/media-queries.scss

						
				@@ -9,3 +12,4 @@

				@mixin tablet {

				  @media (min-width: #{$mobile-width + 1px}) {

				    @content;

				  }

KevinMidboe (Migrated from github.com) commented

2020-09-10 11:37:42 +00:00

How would it work to have only the device a single rule per device?
Example: We have already added general styling for desktop because that is our main use-case ( e.g. .banner { color: blue }. If want to add custom styling for mobile or tablet we use mobile-onlyor tablet-only respectivly and add styling for these devices. Now mobile will cover 0-320px (max-width: 320px) and tablet which is from 321px-756 (min-width: 321px & max-width: 756px) will cover styling from tablet up to our "default" that is the fallback defined in first step of example.

How would it work to have only the device a single rule per device? Example: We have already added general styling for desktop because that is our main use-case ( e.g. `.banner { color: blue }`. If want to add custom styling for mobile or tablet we use `mobile-only`or `tablet-only` respectivly and add styling for these devices. Now mobile will cover 0-320px (max-width: 320px) and tablet which is from 321px-756 (min-width: 321px & max-width: 756px) will cover styling from tablet up to our "default" that is the fallback defined in first step of example.

Adrianht (Migrated from github.com) reviewed 2020-09-10 13:11:43 +00:00

src/components/AllRequestedWines.vue

Adrianht (Migrated from github.com) commented

2020-09-10 13:11:43 +00:00

fixed

Adrianht (Migrated from github.com) reviewed 2020-09-10 13:11:55 +00:00

src/styles/media-queries.scss

						
				@@ -9,3 +12,4 @@

				@mixin tablet {

				  @media (min-width: #{$mobile-width + 1px}) {

				    @content;

				  }

Adrianht (Migrated from github.com) commented

2020-09-10 13:11:55 +00:00

fixed

Adrianht (Migrated from github.com) reviewed 2020-09-10 13:12:16 +00:00

src/components/RequestWine.vue

Adrianht (Migrated from github.com) commented

2020-09-10 13:12:16 +00:00

renamed for better readability

those are area names; https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

renamed for better readability those are area names; https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

KevinMidboe (Migrated from github.com) approved these changes 2020-09-11 07:31:32 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: KevinMidboe/vinlottis#36