Merge branch 'feature/banner-countdown' into 'master'

баннер с обратным отсчетом

See merge request lilschool/site!295
remotes/origin/hotfix/send-payment-emails-2-5-19
Danil 7 years ago
commit aa1e9560bc
  1. 44
      project/templates/blocks/banner.html
  2. 2
      project/views.py
  3. 58
      web/src/sass/_common.sass

@ -1,22 +1,46 @@
{% 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 %}
data-banner="{{banner.id}}" style="display: none; background-color: {{ banner.color|default:'white' }};">
<div class="banner__bg" style="
{% if not request.user_agent.is_mobile or banner.future_date %}
background-image: url({{ banner.image.url }});
{% endif %}
{% if request.user_agent.is_mobile and banner.future_date %}
opacity: 0.7;
{% 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' }};">
{% endif %}"></div>
{% if request.user_agent.is_mobile %}
<a href="{{ banner.url }}" class="banner__image-wrap">
<img class="banner__image" src="{{ banner.image.url }}" />
</a>
{% if not banner.future_date %}
<a href="{{ banner.url }}" class="banner__image-wrap">
<img class="banner__image" src="{{ banner.image.url }}" />
</a>
{% endif %}
<div class="banner__content">
<div class="banner__content-center">
<div class="banner__text-column">
<div class="banner__text">{{ banner.text }}</div>
{% if not banner.future_date %}
<a href="{{ banner.url }}" class="banner__link">{{ banner.button_text }}</a>
{% endif %}
</div>
{% if banner.future_date %}
<div class="banner__countdown-column">
<div>
<div class="banner__countdown-title">До конца акции осталось</div>
<countdown date="{{ banner.future_date|date:'Y-m-d H:i:s' }}"></countdown>
</div>
<div>
<a href="{{ banner.url }}" class="banner__link">{{ banner.button_text }}</a>
</div>
</div>
{% endif %}
</div>
</div>
{% else %}
<div class="banner__content">
<div class="banner__content-center">
@ -33,6 +57,6 @@
</div>
</div>
{% endif %}
<a href="#" class="banner__hide">Скрыть баннер</a>
<a href="#" class="banner__hide">Скрыть{% if not request.user_agent.is_mobile %} баннер{% endif %}</a>
</div>
{% endif %}

@ -105,7 +105,7 @@ class IndexView(TemplateView):
'school_schedules': SchoolSchedule.objects.all(),
'school_schedules_purchased': set(school_schedules_purchased),
'teachers': User.objects.filter(role=User.TEACHER_ROLE, show_in_mainpage=True),
'works_count': Payment.objects.filter(status__in=Payment.PW_PAID_STATUSES).count() * 5,
'works_count': Payment.objects.filter(status__in=Payment.PW_PAID_STATUSES).count() * 7,
'subscription_ends': school_payment.filter(add_days=False).first().date_end if school_payment_exists else None,
'subscription_ends_humanize': school_payment.filter(add_days=False).first().date_end_humanize if school_payment_exists else None,

@ -4387,9 +4387,19 @@ a
height: 140px
text-align: center
color: #fff
background-repeat: no-repeat
position: relative
+m
height: auto
&__bg
background-repeat: no-repeat
position: absolute
width: 100%
height: 100%
left: 0
top: 0
&_countdown
+m
height: 140px
&__image-wrap
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(159,159,159,0) 72%, rgba(221,221,221,0.65) 100%)
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(159,159,159,0) 72%,rgba(221,221,221,0.65) 100%)
@ -4412,22 +4422,37 @@ a
width: 100%
margin-top: 50px
+m
margin-top: -110px
margin-top: 0px
top: 0
&_countdown &__content
margin-top: 15px
+m
margin-top: 5px
&__content-center
width: 1024px
margin: 0 auto
display: flex
padding: 0 40px
+m
width: 100%
padding: 0 10px
&_countdown &__content-center
+m
display: block
&__text
font-size: 30px
text-shadow: 0px 0px 3px rgba(0, 0, 0, 1)
+m
font-size: 16px
&_countdown &__text
font-size: 22px
text-shadow: none
color: black
width: 300px
+m
font-size: 16px
width: auto
font-weight: bold
&__link
display: block
color: #fff
@ -4436,6 +4461,7 @@ a
margin-top: 20px
+m
margin-top: 0px
font-size: 16px
&_countdown &__link
font-size: 15px
color: black
@ -4448,6 +4474,8 @@ a
text-align: center
margin-top: 10px
display: inline-block
+m
margin-top: 25px
&_countdown &__link:hover
background: #ddd
&__hide
@ -4461,20 +4489,33 @@ a
border-bottom: 1px dotted #fff
opacity: 0.3
+m
//margin-top: 0px
font-size: 11px
&__text-column
flex: 1
&_countdown &__text-column
text-align: left
+m
text-align: center
&__countdown-column
padding: 0 20px
+m
border-radius: 3px
background: rgba(255, 255, 255, 0.3)
padding: 0
display: flex
& > div:nth-child(1)
+m
padding: 0 10px
border-radius: 3px
background: rgba(255, 255, 255, 0.3)
margin-right: 10px
& > div:nth-child(2)
+m
flex: 1
&__countdown-title
color: black
font-size: 15px
margin-bottom: 5px
+m
font-size: 15px
&__countdown
display: flex
color: black
@ -4483,6 +4524,8 @@ a
font-size: 27px
display: flex
flex-direction: column
+m
font-size: 16px
&-nums
display: flex
& > div
@ -4493,9 +4536,14 @@ a
text-align: center
padding-top: 2px
color: white
+m
width: 20px
&-delim
width: 10px
color: black
+m
width: 5px
&-descr
text-align: center
font-size: 11px

Loading…
Cancel
Save