diff --git a/emencia/django/newsletter/forms.py b/emencia/django/newsletter/forms.py index e1695873..aa42c0a7 100644 --- a/emencia/django/newsletter/forms.py +++ b/emencia/django/newsletter/forms.py @@ -77,14 +77,18 @@ class MailingSettingsForm(forms.ModelForm): def __init__(self, *args, **kwargs): super(MailingSettingsForm, self).__init__(*args, **kwargs) self.fields['f_countries'].queryset = Country.objects.none() - if self.instance.f_countries: - self.fields['f_countries'].queryset = self.instance.f_countries.distinct() - if self.instance.r_cities: - self.fields['r_cities'].queryset = self.instance.r_cities.distinct() - if self.instance.tags: - self.fields['tags'].queryset = self.instance.tags.distinct() - if self.instance.themes: - self.fields['themes'].queryset = self.instance.themes.distinct() + self.fields['r_cities'].queryset = City.objects.none() + self.fields['tags'].queryset = Tag.objects.none() + self.fields['themes'].queryset = Theme.objects.none() + if self.instance and self.instance.pk: + if self.instance.f_countries: + self.fields['f_countries'].queryset = self.instance.f_countries.distinct() + if self.instance.r_cities: + self.fields['r_cities'].queryset = self.instance.r_cities.distinct() + if self.instance.tags: + self.fields['tags'].queryset = self.instance.tags.distinct() + if self.instance.themes: + self.fields['themes'].queryset = self.instance.themes.distinct() class AllMailingListSubscriptionForm(MailingListSubscriptionForm): diff --git a/static/mailing_settings/css/main.css b/static/mailing_settings/css/main.css new file mode 100644 index 00000000..aee742d2 --- /dev/null +++ b/static/mailing_settings/css/main.css @@ -0,0 +1,581 @@ +@font-face { + font-family: dindisplay_pro; + src: url(../../client/fonts/pfdindisplaypro-med-webfont.eot); + src: url(../../client/fonts/pfdindisplaypro-med-webfont.eot?#iefix) format('embedded-opentype'), url(../../client/fonts/pfdindisplaypro-med-webfont.woff) format('woff'), url(../../client/fonts/pfdindisplaypro-med-webfont.ttf) format('truetype'), url(../../client/fonts/pfdindisplaypro-med-webfont.svg#pf_dindisplay_promedium) format('svg'); + font-weight: 500; + font-style: normal +} +@font-face { + font-family: dindisplay_pro; + src: url(../../client/fonts/pfdindisplaypro-thin-webfont.eot); + src: url(../../client/fonts/pfdindisplaypro-thin-webfont.eot?#iefix) format('embedded-opentype'), url(../../client/fonts/pfdindisplaypro-thin-webfont.ttf) format('truetype'), url(../../client/fonts/pfdindisplaypro-thin-webfont.woff) format('woff'); + font-weight: 100; + font-style: normal +} +@font-face { + font-family: dindisplay_pro; + src: url(../../client/fonts/pfdindisplaypro-light-webfont.eot); + src: url(../../client/fonts/pfdindisplaypro-light-webfont.eot?#iefix) format('embedded-opentype'), url(../../client/fonts/pfdindisplaypro-light-webfont.woff) format('woff'), url(../../client/fonts/pfdindisplaypro-light-webfont.ttf) format('truetype'); + font-weight: 300; + font-style: normal +} +@font-face { + font-family: dindisplay_pro; + src: url(../../client/fonts/pfdindisplaypro-italic-webfont.eot); + src: url(../../client/fonts/pfdindisplaypro-italic-webfont.eot?#iefix) format('embedded-opentype'), url(../../client/fonts/pfdindisplaypro-italic-webfont.woff) format('woff'), url(../../client/fonts/pfdindisplaypro-italic-webfont.ttf) format('truetype'); + font-weight: 400; + font-style: italic +} +@font-face { + font-family: dindisplay_pro; + src: url(../../client/fonts/pfdindisplaypro-bold-webfont.eot); + src: url(../../client/fonts/pfdindisplaypro-bold-webfont.eot?#iefix) format('embedded-opentype'), url(../../client/fonts/pfdindisplaypro-bold-webfont.ttf) format('truetype'), url(../../client/fonts/pfdindisplaypro-bold-webfont.woff) format('woff'); + font-weight: 700; + font-style: normal +} +@font-face { + font-family: dindisplay_pro; + src: url(../../client/fonts/pfdindisplaypro-reg-webfont.eot); + src: url(../../client/fonts/pfdindisplaypro-reg-webfont.eot?#iefix) format('embedded-opentype'), url(../../client/fonts/pfdindisplaypro-reg-webfont.woff) format('woff'), url(../../client/fonts/pfdindisplaypro-reg-webfont.ttf) format('truetype'); + font-weight: 400; + font-style: normal +} +@font-face { + font-family: pt_sans; + src: url(../../client/fonts/pts75f-webfont.eot); + src: url(../../client/fonts/pts75f-webfont.eot?#iefix) format('embedded-opentype'), url(../../client/fonts/pts75f-webfont.woff) format('woff'), url(../../client/fonts/pts75f-webfont.ttf) format('truetype'); + font-weight: 700; + font-style: normal +} +@font-face { + font-family: pt_sans; + src: url(../../client/fonts/pts55f-webfont.eot); + src: url(../../client/fonts/pts55f-webfont.eot?#iefix) format('embedded-opentype'), url(../../client/fonts/pts55f-webfont.woff) format('woff'), url(../../client/fonts/pts55f-webfont.ttf) format('truetype'); + font-weight: 400; + font-style: normal +} + +*{ + margin: 0; + padding: 0; + font-family: dindisplay_pro, sans-serif; + box-sizing: border-box; +} + +.container{ + max-width: 1140px; + margin: 0 auto; +} + +.page_header{ + background: url(../images/header.jpg) no-repeat top fixed; + padding: 16px 0 88px; +} + +h1{ + color: #fff; + text-align: center; + font-size: 50px; + line-height: 50px; + font-weight: 400; + padding-top: 38px; +} + +h2{ + font-size: 30px; + font-weight: 400; + text-align: center; + margin-bottom: 50px; +} + +h3{ + font-size: 20px; + text-transform: uppercase; +} + +.back_to_site{ + float: right; + color: #FF6600; + text-decoration: none; + font-size: 18px; + margin-top: 10px; +} + +.back_to_site span{ + color: #fff; + transition: color .3s +} + +.back_to_site:hover span{ + color: #FF6600; + transition: color .3s; +} + +.themes_block, +.period_block{ + background-color: #fbfbfb; + border-top: 1px solid #ebebeb; + border-bottom: 1px solid #ebebeb; + padding-top: 50px; +} + +.subjects_block{ + padding: 50px 0; +} + +.page_footer{ + border-top: 1px solid #ebebeb; + border-bottom: 1px solid #ebebeb; + text-align: center; + line-height: 40px; + font-size: 16px; + color: #999; +} + +.columns{ + font-size: 0; + width: 1045px; + margin: 0 auto; +} + +.columns .column{ + display: inline-block; +} + +.themes_block .column{ + display: inline-block; + width: 50%; + vertical-align: top; +} + +.geo_filters{ + list-style: none; + background-color: #fff; + border: 1px solid #ebebeb; + border-radius: 3px; + padding: 30px; + font-size: 16px; +} + +.geo_filters li + li{ + margin-top: 34px; +} + +.geo_filters li a{ + font-size: 16px; + color: #333; + text-decoration: none; + display: inline-block; + border-bottom: 1px dashed #333; + margin-left: 40px; +} + +.geo_filters li a:hover{ + border-bottom-color: transparent; +} + +.geo_filters input{ + display: none; +} + +.geo_filters .moscow{ + color: #49d026; +} + +.geo_filters .moscow:hover, +.geo_filters input:checked + .moscow{ + border-color: #49d026; + box-shadow: 0 0 0 2px #49d026; + cursor: pointer; +} + +.geo_filters .rf{ + color: #ff6600; +} + +.geo_filters .rf:hover, +.geo_filters input:checked + .rf{ + border-color: #ff6600; + box-shadow: 0 0 0 2px #ff6600; + cursor: pointer; +} + +.geo_filters .foreign{ + color: #0099ff; +} + +.geo_filters .foreign:hover, +.geo_filters input:checked + .foreign{ + border-color: #0099ff; + box-shadow: 0 0 0 2px #0099ff; + cursor: pointer; +} + +.geo_filters input + .label{ + display: inline-block; + width: 283px; + padding: 6px 15px; + border: 1px solid #ebebeb; + font-size: 20px; + border-radius: 3px; +} + +.geo_filters input + .label + .geo_checkbox{ + display: inline-block; + height: 24px; + vertical-align: middle; + margin-left: 20px; + position: relative; +} + +.geo_filters input + .label + .geo_checkbox:before{ + content: ""; + display: inline-block; + width: 22px; + height: 22px; + border-radius: 50%; + border: 1px solid #e0e0e0; + position: absolute; + top: 0; + left:0; + transition: border-color .3s; +} + +.geo_filters input + .label + .geo_checkbox:after{ + content: ''; + display: block; + width: 23px; + height: 22px; + background: url(../images/checkbox.png); + position: absolute; + top: 1px; + left: 0; + opacity: 0; + transition: opacity .3s; +} + +.geo_filters input:checked + .label + .geo_checkbox:before{ + border-color: #FF6600; + transition: border-color .3s; +} + +.geo_filters input:checked + .label + .geo_checkbox:after{ + opacity: 1; + transition: opacity .3s; +} + +.subjects_block .column{ + vertical-align: top; + width: calc(100%/3); + font-size: 16px; +} + +.subjects_block input, +.periodic input, +.mailing_day input{ + display: none; +} + +.subjects_block input + label, +.periodic input + .radio{ + position: relative; + padding-left: 40px; + cursor: pointer; + font-size: 18px; +} + +.subjects_block input + label:before, +.periodic input + .radio:before, +.mailing_day input + .radio:before{ + content: ""; + display: inline-block; + width: 22px; + height: 22px; + border-radius: 50%; + border: 1px solid #e0e0e0; + position: absolute; + top: 0; + left:0; + transition: border-color .3s; +} + +.subjects_block input + label:after, +.periodic input + .radio:after, +.mailing_day input + .radio:after{ + content: ''; + display: block; + width: 23px; + height: 22px; + background: url(../images/checkbox.png); + position: absolute; + top: 1px; + left: 0; + opacity: 0; + transition: opacity .3s; +} + +.subjects_block input:checked + label:before, +.periodic input:checked + .radio:before, +.mailing_day input:checked + .radio:before{ + border-color: #FF6600; + transition: border-color .3s; +} + +.subjects_block input:checked + label:after, +.periodic input:checked + .radio:after, +.mailing_day input:checked + .radio:after{ + opacity: 1; + transition: opacity .3s; +} + +.periodic{ + width: 270px; + border-right: 1px solid #ebebeb; + padding-bottom: 45px; +} + +.periodic li{ + margin-bottom: 17px; + list-style: none; +} + +.mailing_day{ + padding-left: 110px; + padding-top: 20px; + vertical-align: top; +} + + +.mailing_day label{ + display: inline-block; + font-size: 25px; + font-weight: 300; + text-transform: uppercase; + width: 80px; + height: 80px; + background-color: #fff; + border-radius: 50%; + box-shadow: 0 7px 32px rgba(25, 25, 25, 0.1); + -moz-box-shadow: 0 7px 32px rgba(25, 25, 25, 0.1); + -webkit-box-shadow: 0 7px 32px rgba(25, 25, 25, 0.1); + -o-box-shadow: 0 7px 32px rgba(25, 25, 25, 0.1); + position: relative; + cursor: pointer; +} + +.mailing_day label + label{ + margin-left: 40px; +} + +.mailing_day input + .radio{ + display: block; + text-align: center; + cursor: pointer; + line-height: 80px; +} + +.mailing_day input + .radio:before{ + background-color: #fff; +} + +.mailing_day input + .radio:before, +.mailing_day input + .radio:after{ + left: auto; + right: 0; +} + +.button_block{ + padding: 62px 0; + text-align: center; +} + +.button_block button{ + display: block; + width: 265px; + height: 46px; + margin: 0 auto 26px; + border: 0; + background-color: #ff6600; + border-radius: 3px; + transition: background-color .3s; + color: #fff; + font-size: 19px; + font-weight: 300; + text-transform: uppercase; + cursor: pointer; +} + +.button_block button:hover{ + background-color: #ff9900; + transition: background-color .3s; +} + +.button_block a{ + color: #999; + font-size: 16px; +} + +.button_block a:hover{ + text-decoration: none; +} + +.themes_trigger{ + display: block; + width: 190px; + height: 35px; + line-height: 35px; + background-color: #FF6600; + border-radius: 3px; + font-size: 19px; + color: #fff; + text-decoration: none; + text-align: center; + font-weight: 300; +} + +.selected{ + list-style: none; + font-size: 16px; + color: #333333; + font-weight: 100; +} + +.selected li{ + display: inline-block; + vertical-align: top; + border: 1px solid #FF6600; + border-radius: 3px; + padding: 6px 8px 6px 15px; + line-height: 16px; + margin-bottom: 10px; + margin-right: 10px; +} + +.selected li a{ + text-decoration: none; + margin-left: 15px; + color: #FF6600; + font-size: 22px; +} + +.popup-window{ + padding: 35px 50px 30px; + width: 640px; + font-size: 15px; +} + +.popup-window header{ + padding-bottom: 20px; + font-size: 35px; + line-height: 35px; + color: #f60; + font-weight: 100; +} + +.scroll-container{ + max-height: 230px; + overflow-y: scroll; +} + +.mCSB_scrollTools .mCSB_draggerRail { + width: 10px; + background: #dbdbdb; + border: 1px solid #ccc; +} + +.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { + width: 8px; + border: solid #dbdbdb; + border-width: 2px 1px; +} + +.themes_wrapper{ + position: relative; + border: 1px solid #bdbdbd; + outline: 0; + width: 100%; + padding: 3px; + font-family: dindisplay_pro,sans-serif; + font-size: 15px; + line-height: 19px; + border-radius: 3px; + box-shadow: inset 0 2px 2px -2px #aaa; + background-color: #fff; +} + +.wait-ajax{ + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(191,191,191,.3) url('/static/client/img/ajax-loader.gif') no-repeat center; + display: none; +} + +.modal_checkboxes{ + list-style: none; + padding: 5px 10px; +} + +.modal_checkboxes li + li{ + margin-top: 4px; +} + +.modal_checkboxes .hidden_checkbox{ + display: none; +} + +.modal_checkboxes .hidden_checkbox + .custom_checkbox{ + display: inline-block; + vertical-align: middle; + width: 13px; + height: 13px; + line-height: 11px; + border-radius: 3px; + border: 1px solid #444; +} + +.modal_checkboxes .hidden_checkbox:checked + .custom_checkbox{ + border-color: #FF6600; +} + +.modal_checkboxes .hidden_checkbox:checked + .custom_checkbox:before{ + content: '∨'; + font-size: 10px; + height: 11px; + display: block; + text-align: center; + color: #FF6600; +} + +.modal_checkboxes .hidden{ + display: none; +} + +.modal_checkboxes .trigger{ + padding: 0 0 0 14px; + color: #464646; + position: relative; +} + +.modal_checkboxes .trigger:hover{ + color: #FF6600; +} + +.modal_checkboxes .trigger[data-sub="true"]:before{ + content: "›"; + color: #FF6600; + position: absolute; + left: 3px; +} + +.modal_checkboxes .sub{ + list-style: none; + margin-left: 1em; + margin-top: .5em; +} + +.modal_checkboxes .label{ + padding-left: 14px; +} \ No newline at end of file diff --git a/static/mailing_settings/images/checkbox.png b/static/mailing_settings/images/checkbox.png new file mode 100644 index 00000000..c66eda26 Binary files /dev/null and b/static/mailing_settings/images/checkbox.png differ diff --git a/static/mailing_settings/images/header.jpg b/static/mailing_settings/images/header.jpg new file mode 100644 index 00000000..8ba10b1c Binary files /dev/null and b/static/mailing_settings/images/header.jpg differ diff --git a/static/mailing_settings/images/logo.png b/static/mailing_settings/images/logo.png new file mode 100644 index 00000000..c612b60e Binary files /dev/null and b/static/mailing_settings/images/logo.png differ diff --git a/static/mailing_settings/js/main.js b/static/mailing_settings/js/main.js new file mode 100644 index 00000000..7d752837 --- /dev/null +++ b/static/mailing_settings/js/main.js @@ -0,0 +1,119 @@ +'use strict'; + +// Выбор тем +(function () { + var $themes_modal = $('.popup-window.themes'), + user_choice = { + th: {}, + tg: {} + }, + + renderSublistItem = function (data) { + return '
  • ' + + '' + + '
    • '; + }, + + renderSublist = function (url, $sub_list) { + var $loader = $themes_modal.find('.wait-ajax').show(); + + $.getJSON(url, function (data, status) { + if (status == 'success'){ + $.each(data, function (i) { + var $sub_item = $(renderSublistItem( data[i] )); + + $sub_list + .addClass('has_items') + .append($sub_item); + }); + + $loader.hide(); + } + }); + }, + + renderSelectedThemes = function (id, name, text) { + return '
  • ' + + '' + + text + + '×' + + '
    • ' + }; + + // открываем список тегов в теме + $themes_modal.on('click', '.trigger', function (e) { + e.preventDefault(); + + var $link = $(this), + $sub_list = $link.next('.sub'); + + // если теги подгружены, то открываем(закрываем) список + // если нет, то подгружаем аяксом теги + if ($sub_list.hasClass('has_items')){ + $sub_list.slideToggle(100); + } else { + renderSublist($link.attr('href'), $sub_list); + } + }); + + + $themes_modal.on('change', 'input[type="checkbox"]', function (e) { + e.preventDefault(); + var $checkbox = $(this); + + // записываем(удаляем) в объект user_choice отмеченные темы(теги) + if($checkbox.is(':checked')){ + user_choice[$checkbox.attr('name')][$checkbox.val()] = $checkbox.parent().find('.label').text(); + } else { + delete user_choice[$checkbox.attr('name')][$checkbox.val()]; + } + }); + + + // Подтверждение выбранных тем + $themes_modal.on('click', '.modal-approve', function (e) { + e.preventDefault(); + + var $selected_themes = $('#selected_themes'), + $selected_tags = $('#selected_tags'); + + $selected_themes.html(''); + + for (var theme_id in user_choice['th']) { + var $theme = $(renderSelectedThemes(theme_id, 'th', user_choice['th'][theme_id])); + $selected_themes.append($theme); + } + + for (var tag_id in user_choice['tg']) { + var $tag = $(renderSelectedThemes(tag_id, 'tg', user_choice['tg'][tag_id])); + $selected_tags.append($tag); + } + + $.fancybox.close(); + }) +})(); + + +// Выбор городов + + +$(function () { + $('.back_to_site').on('click', function (event) { + event.preventDefault(); + window.history.back(); + }); + + $('.themes_trigger').on('click', function (event) { + event.preventDefault(); + $.fancybox.open({ + href: '#search-modal', + padding: 0 + }); + }); + + $('.scroll-container').mCustomScrollbar(); +}); \ No newline at end of file diff --git a/templates/client/accounts/mailing_settings.html b/templates/client/accounts/mailing_settings.html index 1f1d66ec..d3a37916 100644 --- a/templates/client/accounts/mailing_settings.html +++ b/templates/client/accounts/mailing_settings.html @@ -1,29 +1,181 @@ -{% extends 'client/base_catalog.html' %} -{% load static %} -{% load i18n %} - - -{% block bread_scrumbs %} -
    - {% trans 'Главная страница' %} - {% trans 'Личный кабинет' %} - {% trans 'Настройки' %} -
    -{% endblock %} - -{% block page_title %} -
    -

    {% trans 'Настройки' %}

    -
    -{% endblock %} - - -{% block content_list %} -
    - {% csrf_token %} - {{ form.as_p }} - -
    - -{% endblock %} +{% load static i18n %} + + + + + + + Document + + + + + + + +
    +
    +
    + Expomap + expomap.ru › +
    +

    {% trans 'Настройте рассылку от Expomap' %}

    +
    +
    + +
    + {% csrf_token %} +
    +
    +

    {% trans 'Какие письма вы хотите получать от нас?' %}

    + +
    +
    +

    {% trans 'Ваши темы:' %}

    + {{ form.themes.label_tag }} + {{ form.themes }} +
      + {% trans 'Уточнить темы' %} + +

      {% trans 'Теги' %}

      + {{ form.tags.label_tag }} + {{ form.tags }} +
        +
        + +
        +

        {% trans 'Ваши гео-фильтры:' %}

        + + +
        +
        +
        +
        + +
        +
        +

        {% trans 'Включать ли новости / обзоры / статьи в письмо?' %}

        + +
        +
        + {{ form.content_news }} + {{ form.content_news.label_tag }} +
        + +
        + {{ form.content_overview }} + {{ form.content_overview.label_tag }} +
        + +
        + {{ form.content_articles }} + {{ form.content_articles.label_tag }} +
        +
        +
        +
        + +
        +
        +

        {% trans 'Регулярность получения писем' %}

        + +
        +
        +
          + {% for field in form.periodic %} +
        • + +
          • + {% endfor %} +
        +
        + +
        + {% for field in form.periodic_day %} + + {% endfor %} +
        +
        +
        +
        + +
        +
        + + {% trans 'Не хочу быть в курсе событий (отписаться от всего)' %} +
        +
        +
        + + + + +
        +
        + {% include 'client/popups/new_themes.html' %} +
        +
        + + + + + + + + diff --git a/templates/client/popups/new_themes.html b/templates/client/popups/new_themes.html new file mode 100644 index 00000000..be01418f --- /dev/null +++ b/templates/client/popups/new_themes.html @@ -0,0 +1,40 @@ +{% load static %} +{% load i18n %} +{% load template_filters %} + +
        +
        +
        {% trans 'Тематика' %}
        +
        + +
        +
        +
        +
        +
        +
          + {% for value, text in search_form.th.field.choices %} +
        • + + {{ text }} +
            +
            • + {% endfor %} +
          +
          +
          +
          + +
          +
          + +
          + + +
          +
          +