gzbender
8 years ago
parent
876cefab66
commit
6630ec34ee
14 changed files with 215 additions and 59 deletions
@ -1,3 +0,0 @@ |
||||
<div> |
||||
|
||||
</div> |
||||
@ -0,0 +1,64 @@ |
||||
{% extends "templates/lilcity/index.html" %} |
||||
{% load static %} |
||||
{% block title %}{{ contest_work.child_full_name }}, {{ contest_work.age }} лет{% endblock title %} |
||||
|
||||
{% block ogimage %}http://{{request.META.HTTP_HOST}}{{ contest_work.image.url }}{% endblock ogimage %} |
||||
|
||||
{% block content %} |
||||
<div class="section" style="padding-bottom: 25px;"> |
||||
<div class="section__center center center_sm"> |
||||
<div class="go"> |
||||
<a class="go__item" href="{% url 'contest' contest_work.contest.id %}"> |
||||
<div class="go__arrow"> |
||||
<svg class="icon icon-arrow-left"> |
||||
<use xlink:href="{% static 'img/sprite.svg' %}#icon-arrow-left"></use> |
||||
</svg> |
||||
</div> |
||||
<div class="go__title">Вернуться к галлерее</div> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
<div class="contest-work section__center center center_sm"> |
||||
<div class="contest-work__img-wrap"> |
||||
<img class="contest-work__img" src="{{ contest_work.image.image.url }}"> |
||||
</div> |
||||
<div class="contest-work__info"> |
||||
<div> |
||||
<div>{{ contest_work.child_full_name }}</div> |
||||
<div class="contest-work__age">{{ contest_work.age }} лет</div> |
||||
</div> |
||||
<div class="contest-work__likes"> |
||||
{{ contest_work.likes.count }}<svg class="icon"> |
||||
<use v-bind="{'xlink:href': $root.store.staticUrl + 'img/sprite.svg' + '#icon-like' }"></use> |
||||
</svg> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="section" style="padding: 0;"> |
||||
<div class="section__center center center_sm"> |
||||
<div class="go"> |
||||
<a class="go__item" href="{% url 'contest' contest_work.contest.id %}"> |
||||
<div class="go__arrow"> |
||||
<svg class="icon icon-arrow-left"> |
||||
<use xlink:href="{% static 'img/sprite.svg' %}#icon-arrow-left"></use> |
||||
</svg> |
||||
</div> |
||||
<div class="go__title">Предыдущая работа</div> |
||||
</a> |
||||
<a class="go__item" href="{% url 'contest' contest_work.contest.id %}"> |
||||
<div class="go__title">Следующая работа</div> |
||||
<div class="go__arrow"> |
||||
<svg class="icon icon-arrow-right"> |
||||
<use xlink:href="{% static 'img/sprite.svg' %}#icon-arrow-right"></use> |
||||
</svg> |
||||
</div> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="section"> |
||||
</div> |
||||
{% endblock content %} |
||||
@ -1,30 +1,40 @@ |
||||
<template> |
||||
<div class="contest-works"></div> |
||||
<div class="contest-works"> |
||||
<contest-work v-for="contestWork in contestWorks" :contest-work="contestWork"></contest-work> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import {api} from "../js/modules/api"; |
||||
import ContestWork from './blocks/ContestWork'; |
||||
import ContestWork from "./blocks/ContestWork.vue"; |
||||
|
||||
export default { |
||||
name: "contest-work", |
||||
prop: ['contestId'], |
||||
name: "contest-works", |
||||
props: ['contestId'], |
||||
data(){ |
||||
return { |
||||
|
||||
contestWorks: [], |
||||
}; |
||||
}, |
||||
mounted() { |
||||
api.getContestWorks(this.contestId).then((response) => { |
||||
|
||||
}); |
||||
} |
||||
this.load(); |
||||
}, |
||||
methods: { |
||||
load() { |
||||
api.get(`/api/v1/contest-works/?contest=${this.contestId}`) |
||||
.then((response) => { |
||||
this.contestWorks = response.data.results; |
||||
}); |
||||
} |
||||
}, |
||||
components: {ContestWork}, |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.contest-works::after { |
||||
content ' ' |
||||
flex-grow 99999999 |
||||
.contest-works { |
||||
column-width: 300px; |
||||
column-gap: 20px; |
||||
text-align: left; |
||||
} |
||||
</style> |
||||
|
||||
@ -1,38 +1,63 @@ |
||||
<template> |
||||
<div class="contest-work" :style="style"> |
||||
<i :style="{paddingBottom: imgHeight / imgWidth * 100 + '%'}"></i> |
||||
<img class="contest-work__img" :src="contestWork.image" /> |
||||
<a :href="`/contest-work/${contestWork.id}/`" class="contest-work-item"> |
||||
<img class="contest-work-item__img" :src="contestWork.image.image" /> |
||||
<div class="contest-work-item__info"> |
||||
<div> |
||||
<div>{{ contestWork.child_full_name }}</div> |
||||
<div class="contest-work-item__age">{{ contestWork.age }} лет</div> |
||||
</div> |
||||
<div class="contest-work-item__likes"> |
||||
{{ contestWork.likes.length }}<svg class="icon"> |
||||
<use v-bind="{'xlink:href': $root.store.staticUrl + 'img/sprite.svg' + '#icon-like' }"></use> |
||||
</svg> |
||||
</div> |
||||
</div> |
||||
</a> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "contest-work", |
||||
props: ['contestWork'], |
||||
computed: { |
||||
imgHeight() { |
||||
return contestWork.imgHeight; |
||||
}, |
||||
imgWidth() { |
||||
return contestWork.imgWidth; |
||||
}, |
||||
style() { |
||||
const aspectRatio = this.imgWidth / this.imgHeight; |
||||
return { |
||||
width: `${this.averageFileCardHeight * aspectRatio}px`, |
||||
flexGrow: this.averageFileCardHeight * aspectRatio, |
||||
}; |
||||
} |
||||
} |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.contest-work__img { |
||||
position: absolute; |
||||
max-height 100%; |
||||
max-width 100%; |
||||
width auto; |
||||
<style lang="scss"> |
||||
.contest-work-item { |
||||
break-inside: avoid; |
||||
border-radius: 8px; |
||||
overflow: hidden; |
||||
margin-bottom: 20px; |
||||
transition: opacity .4s ease-in-out; |
||||
text-transform: uppercase; |
||||
font-weight: bold; |
||||
color: black; |
||||
border: 1px solid #ececec; |
||||
display: block; |
||||
} |
||||
.contest-work-item__img { |
||||
width: 100%; |
||||
height: auto; |
||||
} |
||||
.contest-works:hover .contest-work-item:not(:hover) { |
||||
opacity: 0.4; |
||||
} |
||||
.contest-work-item__info { |
||||
display: flex; |
||||
padding: 5px 10px; |
||||
} |
||||
.contest-work-item__age { |
||||
color: #919191; |
||||
} |
||||
.contest-work-item__likes { |
||||
flex: 70px; |
||||
text-align: right; |
||||
|
||||
.icon { |
||||
width: 15px; |
||||
height: 15px; |
||||
margin-left: 5px; |
||||
margin-bottom: -3px; |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue