t88: new newsletter

remotes/origin/t90_expo_page
Slava Kyrachevsky 9 years ago
parent 9b3e54a490
commit 347a5bea8d
  1. 8
      apps/emencia/django/newsletter/views/expo_views.py
  2. 40
      static/mailing_settings/css/main.css
  3. 34
      static/mailing_settings/js/main.js
  4. 115
      templates/client/newsletters/mailing_settings.html

@ -15,6 +15,7 @@ from accounts.models import User
from accounts.views import GetUserMixin from accounts.views import GetUserMixin
from functions.http import JsonResponse from functions.http import JsonResponse
from city.models import City from city.models import City
from theme.models import Theme
class SubscribeView(GetUserMixin, FormView): class SubscribeView(GetUserMixin, FormView):
@ -81,6 +82,7 @@ class SubscribeView(GetUserMixin, FormView):
ctx['object'] = self.object ctx['object'] = self.object
ctx['r_cities'] = self.get_russian_cities() ctx['r_cities'] = self.get_russian_cities()
ctx['checked_th'] = self.get_checked_th() ctx['checked_th'] = self.get_checked_th()
ctx['popular_themes'] = self.get_popular_themes()
if self.object is not None: if self.object is not None:
if self.request.GET.get('unsibscribe') and self.object.subscriber: if self.request.GET.get('unsibscribe') and self.object.subscriber:
@ -105,6 +107,12 @@ class SubscribeView(GetUserMixin, FormView):
return self.object.themes.values_list('pk', flat=True) return self.object.themes.values_list('pk', flat=True)
return [] return []
def get_popular_themes(self):
"""
:return:
"""
return Theme.objects.all()[:7]
class ActivationView(TemplateView): class ActivationView(TemplateView):
http_method_names = ['get'] http_method_names = ['get']

@ -88,11 +88,29 @@ h3{
} }
.themes_block h3 { .themes_block h3 {
margin-bottom: 30px; margin-bottom: 20px;
}
.themes_block p {
font-size: 18px;
color: #999999;
margin-bottom: 20px;
}
.popular_themes {
font-size: 18px;
margin-bottom: 20px;
list-style: none;
}
.popular_themes li {
padding: 5px 0;
font-weight: 300;
} }
.subjects_block{ .subjects_block{
padding: 50px 0; padding: 50px 0;
margin-bottom: 10px;
} }
.page_footer{ .page_footer{
@ -262,12 +280,14 @@ h3{
.subjects_block input, .subjects_block input,
.periodic input, .periodic input,
.mailing_day input{ .mailing_day input,
.popular_themes input{
display: none; display: none;
} }
.subjects_block input + label, .subjects_block input + label,
.periodic input + .radio{ .periodic input + .radio,
.popular_themes input + label{
position: relative; position: relative;
padding-left: 40px; padding-left: 40px;
cursor: pointer; cursor: pointer;
@ -275,6 +295,7 @@ h3{
} }
.subjects_block input + label:before, .subjects_block input + label:before,
.popular_themes input + label:before,
.periodic input + .radio:before, .periodic input + .radio:before,
.mailing_day input + .radio:before{ .mailing_day input + .radio:before{
content: ""; content: "";
@ -290,6 +311,7 @@ h3{
} }
.subjects_block input + label:after, .subjects_block input + label:after,
.popular_themes input + label:after,
.periodic input + .radio:after, .periodic input + .radio:after,
.mailing_day input + .radio:after{ .mailing_day input + .radio:after{
content: ''; content: '';
@ -305,6 +327,7 @@ h3{
} }
.subjects_block input:checked + label:before, .subjects_block input:checked + label:before,
.popular_themes input:checked + label:before,
.periodic input:checked + .radio:before, .periodic input:checked + .radio:before,
.mailing_day input:checked + .radio:before{ .mailing_day input:checked + .radio:before{
border-color: #FF6600; border-color: #FF6600;
@ -312,6 +335,7 @@ h3{
} }
.subjects_block input:checked + label:after, .subjects_block input:checked + label:after,
.popular_themes input:checked + label:after,
.periodic input:checked + .radio:after, .periodic input:checked + .radio:after,
.mailing_day input:checked + .radio:after{ .mailing_day input:checked + .radio:after{
opacity: 1; opacity: 1;
@ -354,6 +378,7 @@ h3{
} }
.mailing_day label:hover .radio:before, .mailing_day label:hover .radio:before,
.popular_themes label:hover .radio:before,
.periodic label:hover .radio:before, .periodic label:hover .radio:before,
.subjects_block label:hover:before { .subjects_block label:hover:before {
border-color: #FF6600; border-color: #FF6600;
@ -416,8 +441,8 @@ h3{
} }
a.themes_trigger{ a.themes_trigger{
display: block; display: inline-block;
width: 190px; min-width: 190px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
background-color: #FF6600; background-color: #FF6600;
@ -427,6 +452,7 @@ a.themes_trigger{
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
font-weight: 300; font-weight: 300;
padding: 0 40px;
} }
.selected{ .selected{
@ -922,8 +948,10 @@ a.themes_trigger{
opacity:1; opacity:1;
} }
.pr-form button{ .pr-form button,
.pr-form .button{
display:block; display:block;
text-decoration: none;
border:2px solid #fff; border:2px solid #fff;
border-radius:4px; border-radius:4px;
background:#ff6900; background:#ff6900;

@ -58,6 +58,7 @@ function sendForm (show_modal) {
$autocomplete = $('#autocomplete_themes', $themes_modal), $autocomplete = $('#autocomplete_themes', $themes_modal),
$autocomplete_results = $('#autocomplete_themes_results', $themes_modal), $autocomplete_results = $('#autocomplete_themes_results', $themes_modal),
$selected_themes = $('.selected_themes', $themes_modal), $selected_themes = $('.selected_themes', $themes_modal),
$popular_themes = $('#popular_themes'),
timer, timer,
themes_data = {}, themes_data = {},
// template for mustache.js // template for mustache.js
@ -218,6 +219,16 @@ function sendForm (show_modal) {
} }
$popular_themes.on('change', 'input[type="checkbox"]', function () {
var theme_id = this.value;
changeThemeData(theme_id, !themes_data[theme_id].checked, true);
$themes_modal
.find('#id_th_' + theme_id)
.prop('checked', themes_data[theme_id].checked)
.trigger('change');
});
$themes_modal.on('change', 'input[type="checkbox"]', function (e) { $themes_modal.on('change', 'input[type="checkbox"]', function (e) {
e.preventDefault(); e.preventDefault();
// sendForm(); // sendForm();
@ -232,6 +243,7 @@ function sendForm (show_modal) {
if ($checkbox.is(':checked')) { if ($checkbox.is(':checked')) {
changeThemeData($checkbox.val(), true, true); changeThemeData($checkbox.val(), true, true);
// Отмечаем выбранными все теги у темы
$sub_list.find('input[name="tg"]').each(function (i, checkbox) { $sub_list.find('input[name="tg"]').each(function (i, checkbox) {
$(checkbox).prop('checked', true); $(checkbox).prop('checked', true);
}); });
@ -243,6 +255,14 @@ function sendForm (show_modal) {
var rendered_theme = renderTheme($checkbox.val()); var rendered_theme = renderTheme($checkbox.val());
$selected_themes.append(rendered_theme); $selected_themes.append(rendered_theme);
console.log($popular_themes.find('#id_popular_theme_' + $checkbox.val()));
// Ставим чекбокс на популярных темах
$popular_themes
.find('#id_popular_theme_' + $checkbox.val())
.prop('checked', true);
// Сняли чекбокс темы // Сняли чекбокс темы
} else { } else {
changeThemeData($checkbox.val(), false, true); changeThemeData($checkbox.val(), false, true);
@ -252,6 +272,10 @@ function sendForm (show_modal) {
}); });
removeSelectedItem($checkbox.attr('name'), $checkbox.val()); removeSelectedItem($checkbox.attr('name'), $checkbox.val());
$popular_themes
.find('#id_popular_theme_' + $checkbox.val())
.prop('checked', false);
} }
// Изменили чекбокс тега // Изменили чекбокс тега
@ -381,6 +405,10 @@ function sendForm (show_modal) {
$this.parents('li').remove(); $this.parents('li').remove();
} }
if (!$('#selected_themes').find('li').length) {
$popular_themes.show();
}
checkSelected(); checkSelected();
} }
@ -409,6 +437,8 @@ function sendForm (show_modal) {
$('#selected_themes').html($selected); $('#selected_themes').html($selected);
sendForm(); sendForm();
$selected.length ? $popular_themes.hide() : $popular_themes.show();
$.fancybox.close(); $.fancybox.close();
}); });
@ -675,4 +705,8 @@ $(function () {
if ($('#unsibscribed').length) if ($('#unsibscribed').length)
$.fancybox.open({href: '#unsibscribed'}); $.fancybox.open({href: '#unsibscribed'});
$('.smooth_scroll').on('click', function (event) {
var target = $()
})
}); });

@ -70,36 +70,55 @@
{{ form.email }} {{ form.email }}
</span> </span>
</div> </div>
<button>{% trans 'Подписаться' %}</button> {% comment %}<button>{% trans 'Выбрать рубрики' %}</button>{% endcomment %}
<a href="#themes_block" class="button smooth_scroll">{% trans 'Выбрать рубрики' %}</a>
</fieldset> </fieldset>
</div> </div>
</div> </div>
</section> </section>
{% endif %} {% endif %}
<div class="themes_block"> <div id="themes_block" class="themes_block">
<div class="container"> <div class="container">
<h2>{% trans 'Какие события включать в ваше письмо?' %}</h2> <h2>{% trans 'Какие события включать в ваше письмо?' %}</h2>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<h3>{% trans 'Ваши темы:' %}</h3> <div id="selected_themes_block">
<ul id="selected_themes" class="selected selected_themes"> <h3>{% trans 'Ваши темы:' %}</h3>
{% for theme in object.themes.all %} <p>Отметьте темы, по которым вы хотите получать анонсы событий</p>
<li data-id="{{ theme.pk }}" data-type="th" class="theme_{{ theme.pk }}">
<input type="hidden" name="th" value="{{ theme.pk }}"> {% if not user.is_authenticated %}
{{ theme }} <ul id="popular_themes" class="popular_themes">
<a href="#">&times;</a> {% for theme in popular_themes %}
</li> <li>
{% endfor %} <input id="id_popular_theme_{{ theme.pk }}" type="checkbox" name="th" value="{{ theme.pk }}">
{% for tag in object.tags.all %} <label for="id_popular_theme_{{ theme.pk }}">{{ theme }}</label>
<li data-id="{{ tag.pk }}" data-type="tg" data-parent="{{ tag.theme.pk }}" class="tag_{{ tag.pk }}"> </li>
<input type="hidden" name="tg" value="{{ tag.pk }}"> {% endfor %}
{{ tag }} </ul>
<a href="#">&times;</a> {% endif %}
</li>
{% endfor %} <ul id="selected_themes" class="selected selected_themes">
</ul> {% for theme in object.themes.all %}
<a href="#search-modal" class="modal_trigger themes_trigger">{% trans 'Уточнить темы' %}</a> <li data-id="{{ theme.pk }}" data-type="th" class="theme_{{ theme.pk }}">
<input type="hidden" name="th" value="{{ theme.pk }}">
{{ theme }}
<a href="#">&times;</a>
</li>
{% endfor %}
{% for tag in object.tags.all %}
<li data-id="{{ tag.pk }}" data-type="tg" data-parent="{{ tag.theme.pk }}" class="tag_{{ tag.pk }}">
<input type="hidden" name="tg" value="{{ tag.pk }}">
{{ tag }}
<a href="#">&times;</a>
</li>
{% endfor %}
</ul>
<a href="#search-modal" class="modal_trigger themes_trigger">
{% comment %}{% trans 'Уточнить темы' %}{% endcomment %}
{% trans 'Выбрать из полного списка' %}
</a>
</div>
</div> </div>
<div class="column"> <div class="column">
<h3>{% trans 'Ваши гео-фильтры:' %}</h3> <h3>{% trans 'Ваши гео-фильтры:' %}</h3>
@ -169,37 +188,39 @@
</div> </div>
</div> </div>
</div> </div>
<div class="period_block"> {% comment %}
<div class="container"> <div class="period_block">
<h2>{% trans 'Регулярность получения писем' %}</h2> <div class="container">
<div class="columns"> <h2>{% trans 'Регулярность получения писем' %}</h2>
<div class="column periodic"> <div class="columns">
<ul> <div class="column periodic">
{% for field in form.periodic %} <ul>
<li> {% for field in form.periodic %}
<label> <li>
{{ field.tag }} <label>
<span class="radio"> {{ field.tag }}
{{ field.choice_label }} <span class="radio">
</span> {{ field.choice_label }}
</label> </span>
</li> </label>
</li>
{% endfor %}
</ul>
</div>
<div class="column mailing_day">
{% for field in form.periodic_day %}
<label>
{{ field.tag }}
<span class="radio">
{{ field.choice_label }}
</span>
</label>
{% endfor %} {% endfor %}
</ul> </div>
</div>
<div class="column mailing_day">
{% for field in form.periodic_day %}
<label>
{{ field.tag }}
<span class="radio">
{{ field.choice_label }}
</span>
</label>
{% endfor %}
</div> </div>
</div> </div>
</div> </div>
</div> {% endcomment %}
<div class="button_block"> <div class="button_block">
<div class="container"> <div class="container">
{% if not user.is_authenticated %} {% if not user.is_authenticated %}

Loading…
Cancel
Save