Dockery/Pinry
1
0
Fork 0
mirror of https://github.com/pinry/pinry.git synced 2026-02-06 06:29:36 +01:00
Code Issues Packages Projects Releases Activity

Feature: Make pin-grid-layout standalone as mixin

Browse Source
This commit is contained in:
winkidney
2019-12-02 20:29:25 +08:00
committed by Isaac Bythewood
parent fc045b6cec
commit bd6f93abd1
2 changed files with 72 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
pinry-spa/src/components/Pins.vue
View File

@@ -305,73 +305,7 @@ $avatar-height: 30px;
}
}
/*pin container size fit*/
/* Generated by python code:
/* def fn(x):
/* gutter = 15
/* image_width = 240
/* border_width_of_parent = 24
/* size = image_width * x + gutter * (x - 1)
/* width = size + border_width_of_parent * 2
/* print(template % (width, size))
/*
/* for i in range(1, 12):
/* fn(i)
*/
@import './utils/pin-grid-layout';
@include screen-grid-layout("#pins-container")
@media screen and (min-width: 288px) {
#pins-container {
max-width: 240px;
}
}
@media screen and (min-width: 543px) {
#pins-container {
max-width: 495px;
}
}
@media screen and (min-width: 798px) {
#pins-container {
max-width: 750px;
}
}
@media screen and (min-width: 1053px) {
#pins-container {
max-width: 1005px;
}
}
@media screen and (min-width: 1308px) {
#pins-container {
max-width: 1260px;
}
}
@media screen and (min-width: 1563px) {
#pins-container {
max-width: 1515px;
}
}
@media screen and (min-width: 1818px) {
#pins-container {
max-width: 1770px;
}
}
@media screen and (min-width: 2073px) {
#pins-container {
max-width: 2025px;
}
}
@media screen and (min-width: 2328px) {
#pins-container {
max-width: 2280px;
}
}
@media screen and (min-width: 2583px) {
#pins-container {
max-width: 2535px;
}
}
@media screen and (min-width: 2838px) {
#pins-container {
max-width: 2790px;
}
}
</style>

70
pinry-spa/src/components/utils/pin-grid-layout.scss Normal file
View File

@@ -0,0 +1,70 @@
/*pin container size fit*/
/* Generated by python code:
/* def fn(x):
/* gutter = 15
/* image_width = 240
/* border_width_of_parent = 24
/* size = image_width * x + gutter * (x - 1)
/* width = size + border_width_of_parent * 2
/* print(template % (width, size))
/*
/* for i in range(1, 12):
/* fn(i)
*/
@mixin screen-grid-layout($selector) {
@media screen and (min-width: 288px) {
#{$selector} {
max-width: 240px;
}
}
@media screen and (min-width: 543px) {
#{$selector} {
max-width: 495px;
}
}
@media screen and (min-width: 798px) {
#{$selector} {
max-width: 750px;
}
}
@media screen and (min-width: 1053px) {
#{$selector} {
max-width: 1005px;
}
}
@media screen and (min-width: 1308px) {
#{$selector} {
max-width: 1260px;
}
}
@media screen and (min-width: 1563px) {
#{$selector} {
max-width: 1515px;
}
}
@media screen and (min-width: 1818px) {
#{$selector} {
max-width: 1770px;
}
}
@media screen and (min-width: 2073px) {
#{$selector} {
max-width: 2025px;
}
}
@media screen and (min-width: 2328px) {
#{$selector} {
max-width: 2280px;
}
}
@media screen and (min-width: 2583px) {
#{$selector} {
max-width: 2535px;
}
}
@media screen and (min-width: 2838px) {
#{$selector} {
max-width: 2790px;
}
}
}