mitri4
/
LilSchool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
remotes/origin/feature/banner-countdown
gzbender 7 years ago
parent f18954ad4e
commit 542504299b
3 changed files with 88 additions and 16 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 44
      project/templates/blocks/banner.html
  2. 2
      project/views.py
  3. 58
      web/src/sass/_common.sass

44
project/templates/blocks/banner.html
Unescape View File

@ -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 %}

2
project/views.py
Unescape View File

@ -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,

58
web/src/sass/_common.sass
Unescape View File

@ -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

Write Preview
Loading…
Cancel
Save