diff options
| author | taehoon <th.dev91@gmail.com> | 2019-10-18 15:27:51 -0400 |
|---|---|---|
| committer | taehoon <th.dev91@gmail.com> | 2019-10-22 07:17:01 -0400 |
| commit | 6c4d23714a42dd59843a8fb905150eed2d5db29d (patch) | |
| tree | f6e34692090ab8d5506660daed24fddffa1fd78c /src/components/gallery/gallery.vue | |
| parent | cd956185207aca84666d38f516b6c4b666ee846b (diff) | |
populate gallery row height without getting width
Diffstat (limited to 'src/components/gallery/gallery.vue')
| -rw-r--r-- | src/components/gallery/gallery.vue | 39 |
1 files changed, 25 insertions, 14 deletions
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue index 6169d294..3877987a 100644 --- a/src/components/gallery/gallery.vue +++ b/src/components/gallery/gallery.vue @@ -7,17 +7,19 @@ v-for="(row, index) in rows" :key="index" class="gallery-row" - :style="rowHeight(row.length)" + :style="rowStyle(row.length)" :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }" > - <attachment - v-for="attachment in row" - :key="attachment.id" - :set-media="setMedia" - :nsfw="nsfw" - :attachment="attachment" - :allow-play="false" - /> + <div class="gallery-row-inner"> + <attachment + v-for="attachment in row" + :key="attachment.id" + :set-media="setMedia" + :nsfw="nsfw" + :attachment="attachment" + :allow-play="false" + /> + </div> </div> </div> </template> @@ -28,15 +30,24 @@ @import '../../_variables.scss'; .gallery-row { - height: 200px; + position: relative; + height: 0; width: 100%; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-content: stretch; flex-grow: 1; margin-top: 0.5em; + .gallery-row-inner { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-content: stretch; + } + // FIXME: specificity problem with this and .attachments.attachment // we shouldn't have the need for .image here .attachment.image { |