KevinMidboe/vinlottis
1
0
Fork 0
Code Issues 8 Pull Requests 14 Packages Projects Releases Wiki Activity

Better styling for request wine related pages #36

Merged
Adrianht merged 6 commits from enhancement/request-wine-css-fixes into master 2020-09-11 07:44:06 +00:00
Conversation 5 Commits 6 Files Changed 4 +26 -36
3 changed files with 26 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 036958b279 - Show all commits

8
src/components/AllRequestedWines.vue
View File

@@ -46,7 +46,7 @@ export default {
grid-gap: 1.5rem;
justify-items: center;
@media #{$mobileOnly}{
@include mobile {
display: flex;
justify-content: space-around;
flex-flow: row wrap;
@@ -54,18 +54,18 @@ export default {
margin: 2rem;
}
@media #{$tabletOnly}{
@include tablet {
margin: 1em;
grid: 1fr / 1fr 1fr;
justify-items: center;
}
@media #{$desktopOnly}{
@include desktop {
margin: 1em;
grid: 1fr / repeat(4, 1fr);
}
@media #{$widescreenAndUp}{
@include widescreen {
width: 80%;
margin: auto;
grid: 1fr / repeat(5, 1fr);

8
src/components/RequestWine.vue
View File

@@ -130,7 +130,7 @@ input[type="text"] {
display: grid;
grid: 1fr / 1fr .2fr;
@media #{$mobileOnly}{
@include mobile{
.vin-button{
display: none;
}
@@ -152,7 +152,7 @@ input[type="text"] {
margin-bottom: 1em;
box-shadow: 0 1px 0 0 rgba(0,0,0,0.2);
@media #{$mobileOnly}{
@include mobile{
grid: 1fr .5fr / .5fr 1fr;
grid-template-areas: "picture details"
@@ -221,13 +221,13 @@ input[type="text"] {
grid-area: button2;
}
@media #{$tabletOnly}{
@include tablet{
h2{
font-size: 1.2em;
}
}
@media #{$desktopAndUp}{
@include desktop{
h2{
font-size: 1.6em;
}

46
src/styles/media-queries.scss
View File

@@ -1,15 +1,7 @@
$phone-xs-width: 480px;
$tablet-p-width: 768px;
$tablet-l-width: 1024px;
$desktop-width: 1200px;
$desktop-l-width: 1600px;
$mobile-width: 768px;
$tablet-max: 1200px;
$desktop-max: 1704;
@mixin desktop {
@media (min-width: #{$mobile-width + 1px}) {
@content;
}
}
@mixin mobile {
@media (max-width: #{$mobile-width}) {
@@ -17,23 +9,21 @@ $mobile-width: 768px;
}
}
$sm: 320;
$md: 756;
$lg: 1200;
$xl: 1704;
@mixin tablet {
@media (min-width: #{$mobile-width + 1px}) {
@content;
}
KevinMidboe commented 2020-09-10 11:37:42 +00:00 (Migrated from github.com)
Review
Copy Link

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 commented 2020-09-10 13:11:55 +00:00 (Migrated from github.com)
Review
Copy Link

fixed

fixed
}
$minMobileWidth: $sm + 0px;
$maxMobileWidth: $md - 1px;
$minTabletWidth: $md + 0px;
$maxTabletWidth: $lg - 1px;
$minDesktopWidth: $lg + 0px;
$maxDesktopWidth: $xl - 1px;
$minWidescreenWidth: $xl + 0px;
$mobileOnly: "only screen and ( max-width: #{$maxMobileWidth} )";
$tabletOnly: "only screen and( min-width: #{$minTabletWidth} ) and ( max-width: #{$maxTabletWidth} )";
$desktopOnly: "only screen and ( min-width: #{$minDesktopWidth} ) and ( max-width: #{$maxDesktopWidth} )";
$widescreenOnly: "only screen and ( min-width: #{$minWidescreenWidth} )";
$tabletAndUp: "only screen and ( min-width: #{$minTabletWidth} )";
$desktopAndUp: "only screen and ( min-width: #{$minDesktopWidth} )";
$widescreenAndUp: "only screen and ( min-width: #{$minWidescreenWidth} )";
@mixin desktop {
@media (min-width: #{$tablet-max + 1px}) {
@content;
}
}
@mixin widescreen {
@media (min-width: #{$desktop-max + 1px}){
@content;
}
}