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

Crazy breakpoints to always show filles rows.

Browse Source 
Hides elements so we always show filled filled rows. The wine compoennt
does not load images before they are in the viewport, so it should not
decrease performance.
This commit is contained in:
Kevin
2021-02-19 00:00:30 +01:00
parent 6b33e03aae
commit a37c08880c
1 changed files with 51 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
frontend/ui/Wines.vue
View File

@@ -140,31 +140,61 @@ export default {
justify-content: space-between; justify-content: space-between;
} }
.wine-container { .requested-count {
display: grid; display: flex;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: center;
grid-gap: 2rem; margin-top: -0.5rem;
background-color: rgb(244, 244, 244);
border-radius: 1.1rem;
padding: 0.25rem 1rem;
font-size: 1.25em;
.requested-count { span {
display: flex; padding-right: 0.5rem;
align-items: center; line-height: 1.25em;
margin-top: -0.5rem; }
background-color: rgb(244,244,244); .icon--heart {
border-radius: 1.1rem; font-size: 1.5rem;
padding: 0.25rem 1rem; color: var(--link-color);
font-size: 1.25em;
span {
padding-right: 0.5rem;
line-height: 1.25em;
}
.icon--heart{
font-size: 1.5rem;
color: $link-color;
}
} }
} }
// Call for help
.wines-container {
@media (max-width: 1643px) {
*:nth-child(n + 7) {
display: none;
}
}
@media (max-width: 2066px) {
*:nth-child(n + 9) {
display: none;
}
}
@media (max-width: 2490px) {
*:nth-child(n + 11) {
display: none;
}
}
@media (max-width: 2915px) {
*:nth-child(n + 13) {
display: none;
}
}
@media (max-width: 3335px) {
*:nth-child(n + 15) {
display: none;
}
}
@media (max-width: 3758px) {
*:nth-child(n + 17) {
display: none;
}
}
}
</style> </style>