Feature/banner countdown See merge request lilschool/site!288remotes/origin/feature/school-only-may-24-04-19
Danil
7 years ago
commit
bf78199257
20 changed files with 333 additions and 48 deletions
@ -0,0 +1,23 @@ |
||||
# Generated by Django 2.0.7 on 2019-04-18 22:53 |
||||
|
||||
from django.db import migrations, models |
||||
|
||||
|
||||
class Migration(migrations.Migration): |
||||
|
||||
dependencies = [ |
||||
('content', '0023_faq'), |
||||
] |
||||
|
||||
operations = [ |
||||
migrations.AddField( |
||||
model_name='baner', |
||||
name='color', |
||||
field=models.CharField(blank=True, default='', max_length=7), |
||||
), |
||||
migrations.AddField( |
||||
model_name='baner', |
||||
name='future_date', |
||||
field=models.DateTimeField(blank=True, null=True), |
||||
), |
||||
] |
||||
@ -0,0 +1,17 @@ |
||||
# Generated by Django 2.0.7 on 2019-04-19 01:03 |
||||
|
||||
from django.db import migrations |
||||
|
||||
|
||||
class Migration(migrations.Migration): |
||||
|
||||
dependencies = [ |
||||
('content', '0024_auto_20190418_2253'), |
||||
] |
||||
|
||||
operations = [ |
||||
migrations.RenameModel( |
||||
old_name='Baner', |
||||
new_name='Banner', |
||||
), |
||||
] |
||||
@ -0,0 +1,18 @@ |
||||
# Generated by Django 2.0.7 on 2019-04-19 15:51 |
||||
|
||||
from django.db import migrations, models |
||||
|
||||
|
||||
class Migration(migrations.Migration): |
||||
|
||||
dependencies = [ |
||||
('content', '0025_auto_20190419_0103'), |
||||
] |
||||
|
||||
operations = [ |
||||
migrations.AddField( |
||||
model_name='banner', |
||||
name='stretch_image', |
||||
field=models.BooleanField(default=True), |
||||
), |
||||
] |
||||
@ -1,16 +0,0 @@ |
||||
{% if baner %} |
||||
<div class="banner" data-banner="{{baner.id}}" |
||||
style="{% if not request.user_agent.is_mobile %}background-image: url({{ baner.image.url }});{% endif %} display: none;"> |
||||
{% if request.user_agent.is_mobile %} |
||||
<a href="{{ baner.url }}" class="banner__image-wrap"> |
||||
<img class="banner__image" src="{{ baner.image.url }}" /> |
||||
</a> |
||||
{% else %} |
||||
<div class="banner__content"> |
||||
<span class="banner__text">{{ baner.text }}</span> |
||||
<a href="{{ baner.url }}" class="banner__link">{{ baner.button_text }}</a> |
||||
</div> |
||||
{% endif %} |
||||
<a href="#" class="banner__hide">Скрыть баннер</a> |
||||
</div> |
||||
{% endif %} |
||||
@ -0,0 +1,38 @@ |
||||
{% if banner %} |
||||
<div class="banner {% if banner.color %}banner_colored{% endif %} {% if banner.future_date %}banner_countdown{% endif %}" |
||||
data-banner="{{banner.id}}" |
||||
style=" |
||||
{% if not request.user_agent.is_mobile %} |
||||
background-image: url({{ banner.image.url }}); |
||||
{% endif %} |
||||
{% if banner.stretch_image %} |
||||
background-position: center; |
||||
background-size: cover; |
||||
{% else %} |
||||
background-position: center bottom; |
||||
{% endif %} |
||||
display: none; |
||||
background-color: {{ banner.color|default:'white' }};"> |
||||
{% if request.user_agent.is_mobile %} |
||||
<a href="{{ banner.url }}" class="banner__image-wrap"> |
||||
<img class="banner__image" src="{{ banner.image.url }}" /> |
||||
</a> |
||||
{% else %} |
||||
<div class="banner__content"> |
||||
<div class="banner__content-center"> |
||||
<div class="banner__text-column"> |
||||
<div class="banner__text">{{ banner.text }}</div> |
||||
<a href="{{ banner.url }}" class="banner__link">{{ banner.button_text }}</a> |
||||
</div> |
||||
{% if banner.future_date %} |
||||
<div class="banner__countdown-column"> |
||||
<div class="banner__countdown-title">До конца акции осталось</div> |
||||
<countdown date="{{ banner.future_date|date:'Y-m-d H:i:s' }}"></countdown> |
||||
</div> |
||||
{% endif %} |
||||
</div> |
||||
</div> |
||||
{% endif %} |
||||
<a href="#" class="banner__hide">Скрыть баннер</a> |
||||
</div> |
||||
{% endif %} |
||||
@ -0,0 +1,106 @@ |
||||
<template> |
||||
<div class="banner__countdown" style="opacity: 0;"> |
||||
<div> |
||||
<div class="banner__countdown-nums"> |
||||
<div>{{ days[0] }}</div> |
||||
<div>{{ days[1] }}</div> |
||||
</div> |
||||
<div class="banner__countdown-descr"> |
||||
{{ rupluralize(+days, ['День', 'Дня', 'Дней'], false) }} |
||||
</div> |
||||
</div> |
||||
<div class="banner__countdown-delim"></div> |
||||
|
||||
<div> |
||||
<div class="banner__countdown-nums"> |
||||
<div>{{ hours[0] }}</div> |
||||
<div>{{ hours[1] }}</div> |
||||
</div> |
||||
<div class="banner__countdown-descr"> |
||||
{{ rupluralize(+hours, ['Час', 'Часа', 'Часов'], false) }} |
||||
</div> |
||||
</div> |
||||
<div class="banner__countdown-delim">:</div> |
||||
|
||||
<div> |
||||
<div class="banner__countdown-nums"> |
||||
<div>{{ minutes[0] }}</div> |
||||
<div>{{ minutes[1] }}</div> |
||||
</div> |
||||
<div class="banner__countdown-descr"> |
||||
{{ rupluralize(+minutes, ['Минута', 'Минуты', 'Минут'], false) }} |
||||
</div> |
||||
</div> |
||||
<div class="banner__countdown-delim">:</div> |
||||
|
||||
<div> |
||||
<div class="banner__countdown-nums"> |
||||
<div>{{ seconds[0] }}</div> |
||||
<div>{{ seconds[1] }}</div> |
||||
</div> |
||||
<div class="banner__countdown-descr"> |
||||
{{ rupluralize(+seconds, ['Секунда', 'Секунды', 'Секунд'], false) }} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import moment from 'moment'; |
||||
import {rupluralize} from '../../js/utils' |
||||
|
||||
export default { |
||||
name: "Countdown", |
||||
props: ['date', 'format'], |
||||
|
||||
data: () => ({ |
||||
days: '00', |
||||
hours: '00', |
||||
minutes: '00', |
||||
seconds: '00', |
||||
i: 0, |
||||
rupluralize: rupluralize, |
||||
}), |
||||
|
||||
beforeDestroy(){ |
||||
if ( window['cancelAnimationFrame'] ) { |
||||
window.cancelAnimationFrame(this.frame); |
||||
} |
||||
}, |
||||
|
||||
mounted() { |
||||
if ( window['requestAnimationFrame'] ) { |
||||
this.countdown = moment(this.date, this.format).toDate(); |
||||
this.update(); |
||||
} |
||||
}, |
||||
|
||||
methods: { |
||||
zerofill(value) { |
||||
return (value < 10 && value > -1 ? '0' : '') + value; |
||||
}, |
||||
update() { |
||||
this.frame = window.requestAnimationFrame(this.update.bind(this)); |
||||
if(this.i++ % 10 || this.$el.offsetParent === null) { |
||||
return; |
||||
} |
||||
this.$el.style.opacity = 1; |
||||
const t = this.countdown - (new Date()); |
||||
|
||||
if(t < 0){ |
||||
this.days = this.hours = this.minutes = this.seconds = '00'; |
||||
return; |
||||
} |
||||
|
||||
this.days = this.zerofill(Math.floor(t / (1000 * 60 * 60 * 24))); |
||||
this.hours = this.zerofill(Math.floor((t / (1000 * 60 * 60)) % 24)); |
||||
this.minutes = this.zerofill(Math.floor((t / 1000 / 60) % 60)); |
||||
this.seconds = this.zerofill(Math.floor((t / 1000) % 60)); |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue