kopia lustrzana https://github.com/manuelkasper/sotlas-frontend
Attempt to improve responsive loading and sizes on mobile
rodzic
cc20e47f42
commit
12f64b1f3e
|
@ -78,6 +78,14 @@ export default {
|
|||
type: Object
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
thumbMaxW () {
|
||||
return this.$mq.mobile ? 242 : 300
|
||||
},
|
||||
thumbMaxH () {
|
||||
return this.$mq.mobile ? 104 : 128
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open (index, disableAnimation = false) {
|
||||
let that = this
|
||||
|
@ -117,13 +125,13 @@ export default {
|
|||
thumbSize (item) {
|
||||
let thumbW = item.w
|
||||
let thumbH = item.h
|
||||
if (thumbW > 256) {
|
||||
thumbH = (thumbH * 256) / thumbW
|
||||
thumbW = 256
|
||||
if (thumbW > this.thumbMaxW) {
|
||||
thumbH = (thumbH * this.thumbMaxW) / thumbW
|
||||
thumbW = this.thumbMaxW
|
||||
}
|
||||
if (thumbH > 128) {
|
||||
thumbW = (thumbW * 128) / thumbH
|
||||
thumbH = 128
|
||||
if (thumbH > this.thumbMaxH) {
|
||||
thumbW = (thumbW * this.thumbMaxH) / thumbH
|
||||
thumbH = this.thumbMaxH
|
||||
}
|
||||
return { w: Math.round(thumbW), h: Math.round(thumbH) }
|
||||
}
|
||||
|
|
|
@ -170,7 +170,7 @@ export default {
|
|||
}
|
||||
.photos >>> figure img {
|
||||
max-height: 128px;
|
||||
max-width: 256px;
|
||||
max-width: 300px;
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
>>> .photo-title {
|
||||
|
@ -206,7 +206,7 @@ export default {
|
|||
}
|
||||
.photos >>> figure img {
|
||||
max-height: 104px;
|
||||
width: auto;
|
||||
max-width: 242px;
|
||||
}
|
||||
.photo-group {
|
||||
padding: 0.25rem 0 0 0.5rem;
|
||||
|
|
Ładowanie…
Reference in New Issue