Drastic actor page redesign. Storing one avatar per actor, other profile photos as 'photo' role; no longer assuming first photo is avatar.
This commit is contained in:
@@ -5,104 +5,228 @@
|
||||
>
|
||||
<FilterBar :fetch-releases="fetchReleases" />
|
||||
|
||||
<div class="header">
|
||||
<img
|
||||
v-if="actor.avatars && actor.avatars.length > 0"
|
||||
:src="`/media/${actor.avatars[0].path}`"
|
||||
class="avatar"
|
||||
>
|
||||
|
||||
<ul class="bio sidebar nolist">
|
||||
<h2 class="title">{{ actor.name }}</h2>
|
||||
|
||||
|
||||
<li v-if="actor.aliases.length">
|
||||
<dfn class="bio-heading">Also known as</dfn>
|
||||
<span>{{ actor.aliases.join(', ') }}</span>
|
||||
</li>
|
||||
|
||||
<li v-if="actor.gender">
|
||||
<dfn class="bio-heading">Gender</dfn>
|
||||
<span>{{ actor.gender }}</span>
|
||||
</li>
|
||||
|
||||
<li v-if="actor.birthdate">
|
||||
<dfn class="bio-heading">Date of birth</dfn>
|
||||
<span>{{ formatDate(actor.birthdate, 'MMMM D, YYYY') }} ({{ age }})</span>
|
||||
</li>
|
||||
|
||||
<li v-if="actor.birthCountry || actor.birthPlace">
|
||||
<dfn class="bio-heading">Born in</dfn>
|
||||
|
||||
<span v-if="actor.birthCountry">
|
||||
<img
|
||||
class="flag"
|
||||
:src="`/img/flags/${actor.birthCountry.alpha2.toLowerCase()}.svg`"
|
||||
>{{ actor.birthCountry.name }}
|
||||
</span>
|
||||
|
||||
<span v-if="actor.birthPlace">{{ actor.birthPlace }}</span>
|
||||
</li>
|
||||
|
||||
<li v-if="actor.residenceCountry || actor.residencePlace">
|
||||
<dfn class="bio-heading">Lives in</dfn>
|
||||
|
||||
<span v-if="actor.residenceCountry">
|
||||
<img
|
||||
class="flag"
|
||||
:src="`/img/flags/${actor.residenceCountry.alpha2.toLowerCase()}.svg`"
|
||||
>{{ actor.residenceCountry.name }}
|
||||
</span>
|
||||
|
||||
<span v-if="actor.residencePlace">{{ actor.residencePlace }}</span>
|
||||
</li>
|
||||
|
||||
<li v-if="actor.ethnicity">
|
||||
<dfn class="bio-heading">Ethnicity</dfn>
|
||||
<span>{{ actor.ethnicity }}</span>
|
||||
</li>
|
||||
|
||||
<li v-if="actor.height">
|
||||
<dfn class="bio-heading">Height</dfn>
|
||||
<span>{{ actor.height }} cm</span>
|
||||
</li>
|
||||
|
||||
<li v-if="actor.bust || actor.waist || actor.hip">
|
||||
<dfn class="bio-heading">Measurements</dfn>
|
||||
<span>{{ actor.bust || '??' }}-{{ actor.waist || '??' }}-{{ actor.hip || '??' }} <span v-if="actor.naturalBoobs !== undefined">({{ actor.naturalBoobs ? 'Natural' : 'Enhanced' }})</span></span>
|
||||
</li>
|
||||
|
||||
<li v-if="actor.social && actor.social.length > 0">
|
||||
<dfn class="bio-heading">Social</dfn>
|
||||
<a
|
||||
v-for="social in actor.social"
|
||||
:key="`social-${social.id}`"
|
||||
:href="social.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="social"
|
||||
>{{ social.platform || social.url }}</a>
|
||||
</li>
|
||||
|
||||
<li class="description">{{ actor.description }}</li>
|
||||
|
||||
<div class="photos">
|
||||
<div class="actor-inner">
|
||||
<div class="profile">
|
||||
<a
|
||||
v-if="actor.avatar"
|
||||
:href="`/media/${actor.avatar.path}`"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="avatar-link"
|
||||
>
|
||||
<img
|
||||
v-for="avatar in actor.avatars.slice(1)"
|
||||
:key="`avatar-${avatar.id}`"
|
||||
:src="`/media/${avatar.path}`"
|
||||
class="photo"
|
||||
:src="`/media/${actor.avatar.thumbnail}`"
|
||||
class="avatar"
|
||||
>
|
||||
</a>
|
||||
|
||||
<ul class="bio nolist">
|
||||
<li class="bio-header">
|
||||
<h2 class="bio-name">{{ actor.name }}</h2>
|
||||
<span
|
||||
class="bio-gender"
|
||||
:class="{ male: actor.gender === 'male', female: actor.gender === 'female' }"
|
||||
><Icon :icon="actor.gender" /></span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.aliases.length"
|
||||
class="bio-item"
|
||||
>
|
||||
<dfn class="bio-heading">Also known as</dfn>
|
||||
<span>{{ actor.aliases.join(', ') }}</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.birthdate"
|
||||
class="bio-item"
|
||||
>
|
||||
<dfn class="bio-heading"><Icon icon="cake" />Birthdate</dfn>
|
||||
|
||||
<span
|
||||
v-if="actor.birthdate"
|
||||
class="birthdate"
|
||||
>{{ formatDate(actor.birthdate, 'MMMM D, YYYY') }}<span class="age">{{ age }}</span></span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.birthCountry || actor.birthPlace"
|
||||
class="bio-item birth"
|
||||
>
|
||||
<dfn class="bio-heading"><Icon icon="home2" />Born in</dfn>
|
||||
|
||||
<span>
|
||||
<span
|
||||
v-if="actor.birthPlace"
|
||||
class="place"
|
||||
>{{ actor.birthPlace }}</span>
|
||||
|
||||
<span
|
||||
v-if="actor.birthCountry"
|
||||
class="country birthcountry"
|
||||
>
|
||||
<img
|
||||
class="flag"
|
||||
:src="`/img/flags/${actor.birthCountry.alpha2.toLowerCase()}.png`"
|
||||
>{{ actor.birthCountry.name }}
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.residenceCountry || actor.residencePlace"
|
||||
class="bio-item residence"
|
||||
>
|
||||
<dfn class="bio-heading"><Icon icon="location" />Lives in</dfn>
|
||||
|
||||
<span>
|
||||
<span
|
||||
v-if="actor.residencePlace"
|
||||
class="place"
|
||||
>{{ actor.residencePlace }}</span>
|
||||
|
||||
<span
|
||||
v-if="actor.residenceCountry"
|
||||
class="country"
|
||||
>
|
||||
<img
|
||||
v-if="actor.residenceCountry"
|
||||
class="flag"
|
||||
:src="`/img/flags/${actor.residenceCountry.alpha2.toLowerCase()}.png`"
|
||||
>{{ actor.residenceCountry.name }}
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="bio nolist">
|
||||
<li
|
||||
v-if="actor.ethnicity"
|
||||
class="bio-item ethnicity"
|
||||
>
|
||||
<dfn class="bio-heading"><Icon icon="earth2" />Ethnicity</dfn>
|
||||
<span>{{ actor.ethnicity }}</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.bust || actor.waist || actor.hip"
|
||||
title="bust-waist-hip"
|
||||
class="bio-item"
|
||||
>
|
||||
<dfn class="bio-heading"><Icon icon="ruler" />Sizes</dfn>
|
||||
<span>
|
||||
<Icon
|
||||
v-if="actor.naturalBoobs === false"
|
||||
v-tooltip="'Boobs enhanced'"
|
||||
icon="magic-wand"
|
||||
class="enhanced"
|
||||
/>{{ actor.bust || '??' }}-{{ actor.waist || '??' }}-{{ actor.hip || '??' }}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.height"
|
||||
class="bio-item height"
|
||||
>
|
||||
<dfn class="bio-heading"><Icon icon="height" />Height</dfn>
|
||||
<span>
|
||||
<span class="height-metric">{{ actor.height }} cm</span>
|
||||
<span class="height-imperial">{{ imperialHeight.feet }}' {{ imperialHeight.inches }}"</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.weight"
|
||||
class="bio-item weight"
|
||||
>
|
||||
<dfn class="bio-heading"><Icon icon="scale" />Weight</dfn>
|
||||
|
||||
<span>
|
||||
<span class="weight-metric">{{ actor.weight }} kg</span>
|
||||
<span class="weight-imperial">{{ imperialWeight }} lbs</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li class="bio-item scraped">Updated on {{ formatDate(actor.scrapedAt, 'YYYY-MM-DD HH:mm') }}</li>
|
||||
</ul>
|
||||
|
||||
<div>
|
||||
<p
|
||||
v-if="actor.description"
|
||||
class="description"
|
||||
:class="{ expanded }"
|
||||
@click="expanded = !expanded"
|
||||
>{{ actor.description }}</p>
|
||||
|
||||
<li
|
||||
v-if="actor.social && actor.social.length > 0"
|
||||
class="social"
|
||||
>
|
||||
<a
|
||||
v-for="social in actor.social"
|
||||
:key="`social-${social.id}`"
|
||||
v-tooltip.bottom="social.url"
|
||||
:href="social.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="social-link"
|
||||
>
|
||||
<Icon
|
||||
v-if="social.platform"
|
||||
:icon="social.platform"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-else
|
||||
icon="link"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content-inner">
|
||||
<Releases
|
||||
:releases="releases"
|
||||
:context="actor.name"
|
||||
/>
|
||||
<div class="actor-content">
|
||||
<div
|
||||
v-if="actor.photos && actor.photos.length > 0"
|
||||
class="photos-container"
|
||||
@wheel.prevent="scrollPhotos"
|
||||
>
|
||||
<div
|
||||
class="photos"
|
||||
@wheel.prevent="scrollPhotos"
|
||||
>
|
||||
<a
|
||||
v-if="actor.avatar"
|
||||
:href="`/media/${actor.avatar.path}`"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="avatar-link photo-link"
|
||||
>
|
||||
<img
|
||||
:src="`/media/${actor.avatar.thumbnail}`"
|
||||
class="avatar photo"
|
||||
>
|
||||
</a>
|
||||
|
||||
<a
|
||||
v-for="photo in actor.photos"
|
||||
:key="`photo-${photo.id}`"
|
||||
:href="`/media/${photo.path}`"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="photo-link"
|
||||
>
|
||||
<img
|
||||
:src="`/media/${photo.thumbnail}`"
|
||||
class="photo"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Releases :releases="releases" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -110,6 +234,8 @@
|
||||
<script>
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import { cmToFeetInches, kgToLbs } from '../../../src/utils/convert';
|
||||
|
||||
import FilterBar from '../header/filter-bar.vue';
|
||||
import Releases from '../releases/releases.vue';
|
||||
|
||||
@@ -121,6 +247,18 @@ async function fetchReleases() {
|
||||
this.releases = await this.$store.dispatch('fetchActorReleases', this.$route.params.actorSlug);
|
||||
}
|
||||
|
||||
function imperialHeight() {
|
||||
return cmToFeetInches(this.actor.height);
|
||||
}
|
||||
|
||||
function imperialWeight() {
|
||||
return kgToLbs(this.actor.weight);
|
||||
}
|
||||
|
||||
function scrollPhotos(event) {
|
||||
event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
|
||||
}
|
||||
|
||||
async function mounted() {
|
||||
[[this.actor]] = await Promise.all([
|
||||
this.$store.dispatch('fetchActors', this.$route.params.actorSlug),
|
||||
@@ -140,14 +278,18 @@ export default {
|
||||
actor: null,
|
||||
releases: null,
|
||||
pageTitle: null,
|
||||
expanded: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
age,
|
||||
imperialHeight,
|
||||
imperialWeight,
|
||||
},
|
||||
mounted,
|
||||
methods: {
|
||||
fetchReleases,
|
||||
scrollPhotos,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -155,15 +297,194 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
@import 'theme';
|
||||
|
||||
.header {
|
||||
.actor-inner {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
.profile {
|
||||
background: $profile;
|
||||
color: $highlight-extreme;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-shrink: 0;
|
||||
|
||||
.avatar-link {
|
||||
font-size: 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
height: 15rem;
|
||||
width: 15rem;
|
||||
flex-shrink: 0;
|
||||
margin: 0 1rem 0 0;
|
||||
object-fit: cover;
|
||||
object-position: 50% 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bio {
|
||||
flex-grow: 1;
|
||||
min-width: 18rem;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
margin: 0 3rem 0 0;
|
||||
}
|
||||
|
||||
.bio-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.bio-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 0 .5rem 0;
|
||||
line-height: 1.75;
|
||||
text-align: right;
|
||||
font-size: .9rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bio-heading {
|
||||
color: $highlight;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
.icon {
|
||||
fill: $highlight;
|
||||
margin: 0 .5rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flag {
|
||||
margin: 0 .25rem 0 0;
|
||||
}
|
||||
|
||||
.bio-name {
|
||||
display: inline-block;
|
||||
margin: 0 .5rem 0 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bio-gender {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
text-transform: capitalize;
|
||||
font-weight: normal;
|
||||
|
||||
.icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
&.female .icon {
|
||||
fill: $female;
|
||||
}
|
||||
|
||||
&.male .icon {
|
||||
fill: $male;
|
||||
}
|
||||
}
|
||||
|
||||
.birthdate {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.age {
|
||||
font-weight: bold;
|
||||
padding: 0 0 0 .5rem;
|
||||
border-left: solid 1px $highlight-weak;
|
||||
margin: 0 0 0 .5rem;
|
||||
|
||||
/*
|
||||
&::before {
|
||||
content: ' (';
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: ')';
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
color: $highlight;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
.country {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.height-imperial,
|
||||
.weight-imperial {
|
||||
padding: 0 0 0 .5rem;
|
||||
border-left: solid 1px $highlight-weak;
|
||||
margin: 0 0 0 .5rem;
|
||||
}
|
||||
|
||||
.enhanced.icon {
|
||||
fill: $primary;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
max-height: 10rem;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem 0 0 0;
|
||||
margin: 0 2rem 0 0;
|
||||
line-height: 1.5;
|
||||
text-overflow: ellipsis;
|
||||
font-size: .9rem;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
&.expanded {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.social {
|
||||
display: block;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
display: inline-block;
|
||||
padding: 0 1rem 0 0;
|
||||
|
||||
.icon {
|
||||
fill: $highlight;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
&:hover .icon {
|
||||
fill: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.scraped {
|
||||
color: $highlight-weak;
|
||||
margin: 1rem 0 0 0;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.actor-content {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.heading {
|
||||
@@ -171,41 +492,115 @@ export default {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.bio-heading {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
margin: .5rem 0 0 0;
|
||||
.photos-container {
|
||||
min-width: 15rem;
|
||||
box-sizing: border-box;
|
||||
border-right: solid 1px $shadow-hint;
|
||||
padding: 1rem 1.5rem 1rem 1rem;
|
||||
margin: 0 .5rem 0 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: ':';
|
||||
.photos {
|
||||
max-width: 35vw;
|
||||
display: inline-grid;
|
||||
grid-template-columns: repeat(auto-fit, 15rem);
|
||||
grid-gap: .5rem;
|
||||
font-size: 0;
|
||||
|
||||
.avatar-link {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
height: 20rem;
|
||||
margin: 0 1rem 0 0;
|
||||
display: block;
|
||||
.photo-link {
|
||||
height: 15rem;
|
||||
}
|
||||
|
||||
.photo {
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
.social {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.flag {
|
||||
height: 1rem;
|
||||
border: solid 1px $shadow-weak;
|
||||
margin: 0 .25rem 0 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: 50% 0;
|
||||
box-shadow: 0 0 3px $shadow-weak;
|
||||
}
|
||||
|
||||
.releases {
|
||||
flex-grow: 1;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint4) {
|
||||
.description {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint3) {
|
||||
.profile .avatar-link,
|
||||
.social {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.actor-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.photos-container {
|
||||
border: none;
|
||||
border-bottom: solid 1px $shadow-hint;
|
||||
padding: 1rem 1rem 1.5rem 1rem;
|
||||
margin: 0 0 .5rem 0;
|
||||
}
|
||||
|
||||
.photos {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
overflow-x: scroll;
|
||||
scrollbar-width: none;
|
||||
|
||||
.avatar-link {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.photo-link {
|
||||
height: 15rem;
|
||||
flex-shrink: 0;
|
||||
margin: 0 .5rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint) {
|
||||
.profile {
|
||||
flex-direction: column;
|
||||
padding: 0 0 .5rem 0;
|
||||
}
|
||||
|
||||
.bio {
|
||||
width: 100%;
|
||||
padding: 0 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bio-header {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.place,
|
||||
.ethnicity,
|
||||
.residence,
|
||||
.weight,
|
||||
.scraped {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.social {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -123,6 +123,7 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: .5rem 1rem;
|
||||
z-index: 1;
|
||||
font-size: 0;
|
||||
box-shadow: 0 0 3px $shadow;
|
||||
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="releases">
|
||||
<h3
|
||||
v-if="context"
|
||||
class="heading"
|
||||
><span class="range">{{ range }}</span> releases for '{{ context }}'</h3>
|
||||
|
||||
<ul class="nolist releases">
|
||||
<ul class="nolist tiles">
|
||||
<li
|
||||
v-for="release in releases"
|
||||
:key="`release-${release.id}`"
|
||||
@@ -55,14 +55,20 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.releases {
|
||||
.tiles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(20rem, .5fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(20rem, .33fr));
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint4) {
|
||||
.tiles {
|
||||
grid-template-columns: repeat(auto-fit, minmax(20rem, .5fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint) {
|
||||
.releases {
|
||||
.tiles {
|
||||
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,6 +70,7 @@
|
||||
class="row link"
|
||||
>
|
||||
<h3
|
||||
v-tooltip.top="release.title"
|
||||
:title="release.title"
|
||||
class="title"
|
||||
>{{ release.title }}</h3>
|
||||
@@ -212,12 +213,12 @@ export default {
|
||||
|
||||
.title {
|
||||
color: $text;
|
||||
margin: 0;
|
||||
margin: 0 .25rem .25rem 0;
|
||||
font-size: 1rem;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
max-height: 3rem;
|
||||
line-height: 1.5rem;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.network {
|
||||
@@ -234,9 +235,9 @@ export default {
|
||||
}
|
||||
|
||||
.tags {
|
||||
max-height: 2.85rem;
|
||||
max-height: 2.5rem;
|
||||
padding: .25rem .5rem 1rem .5rem;
|
||||
line-height: 1.25rem;
|
||||
line-height: 1.5rem;
|
||||
word-wrap: break-word;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
@@ -269,10 +270,11 @@ export default {
|
||||
color: $shadow;
|
||||
display: inline-block;
|
||||
padding: .25rem;
|
||||
box-shadow: 0 0 2px $shadow-weak;
|
||||
font-size: .75rem;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
border: solid 1px $shadow-hint;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
|
||||
Reference in New Issue
Block a user