Cavemanon/cavemanon-wagtail-personalisation
Archived
7
Fork 0
Code Issues Pull Requests Activity

Feature/fa icons for rules (#123)

Browse Source 
Integrate font-awesome for the rule icons
This commit is contained in:
Jasper Berghoef
2017-06-02 14:53:41 +02:00
committed by Michael van Tellingen
parent 38620d916f
commit 0776d2300a
15 changed files with 43 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/img/calendar_icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 794 B

BIN
frontend/img/key_icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

BIN
frontend/img/persistent_icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

BIN
frontend/img/referral_icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

BIN
frontend/img/rocket_icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
frontend/img/ruler_icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

BIN
frontend/img/time_icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
frontend/img/visit_count_icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

61
frontend/scss/dashboard.scss
View File

@ -88,6 +88,11 @@
list-style: none;
}
.block_container .block span.icon::before {
margin-right: 0.3em;
vertical-align: bottom;
}
.block_container .block .inspect_container .inspect li {
display: inline-block;
margin-bottom: 5px;
@ -101,42 +106,6 @@
overflow-wrap: break-word;
}
.block_container .block .inspect_container .inspect li span::before {
display: inline-block;
content: "";
width: 16px;
height: 16px;
margin-right: 5px;
background-size: contain;
background-image: url("../img/ruler_icon.png");
}
.block_container .block .inspect_container .segment_stats .visit_stat span::before {
background-image: url("../img/rocket_icon.png");
}
.block_container .block .inspect_container .segment_stats .days_stat span::before {
background-image: url("../img/calendar_icon.png");
}
.block_container .block .inspect_container .segment_rules .persistent_state span::before {
background-image: url("../img/persistent_icon.png");
}
.block_container .block .inspect_container .segment_rules .persistent_state.fleeting span::before {
transform: rotate(45deg) translateY(-2px);
}
.block_container .block .inspect_container .segment_rules .time-rule span::before {
background-image: url("../img/time_icon.png");
}
.block_container .block .inspect_container .segment_rules .visit-count-rule span::before {
background-image: url("../img/visit_count_icon.png");
}
.block_container .block .inspect_container .segment_rules .logged-in-rule span::before {
background-image: url("../img/key_icon.png");
}
.block_container .block .inspect_container .segment_rules .day-rule span::before {
background-image: url("../img/calendar_icon.png");
}
.block_container .block .inspect_container .inspect li pre {
position: relative;
box-sizing: border-box;
@ -150,26 +119,6 @@
border-radius: 3px;
}
.block_container .block .inspect_container .inspect li pre::before {
display: inline-block;
position: absolute;
content: "";
left: -21px;
top: 6px;
width: 16px;
height: 16px;
margin-right: 5px;
background-size: contain;
background-image: url("../img/ruler_icon.png");
}
.block_container .block .inspect_container .segment_rules .referral-rule pre::before {
background-image: url("../img/referral_icon.png");
}
.block_container .block .inspect_container .segment_rules .query-rule pre::before {
background-image: url("../img/referral_icon.png");
}
.block_container .block.suggestion .suggestive_text {
display: block;
position: absolute;

16
src/wagtail_personalisation/rules.py
View File

@ -17,6 +17,8 @@ from wagtail.wagtailadmin.edit_handlers import (
@python_2_unicode_compatible
class AbstractBaseRule(models.Model):
"""Base for creating rules to segment users with."""
icon = 'fa-circle-o'
segment = ParentalKey(
'wagtail_personalisation.Segment',
related_name="%(app_label)s_%(class)s_related",
@ -66,6 +68,8 @@ class TimeRule(AbstractBaseRule):
set start time and end time.
"""
icon = 'fa-clock-o'
start_time = models.TimeField(_("Starting time"))
end_time = models.TimeField(_("Ending time"))
@ -99,6 +103,8 @@ class DayRule(AbstractBaseRule):
set in the rule.
"""
icon = 'fa-calendar-check-o'
mon = models.BooleanField(_("Monday"), default=False)
tue = models.BooleanField(_("Tuesday"), default=False)
wed = models.BooleanField(_("Wednesday"), default=False)
@ -146,6 +152,8 @@ class ReferralRule(AbstractBaseRule):
the set regex test.
"""
icon = 'fa-globe'
regex_string = models.TextField(
_("Regular expression to match the referrer"))
@ -181,6 +189,8 @@ class VisitCountRule(AbstractBaseRule):
when visiting the set page.
"""
icon = 'fa-calculator'
OPERATOR_CHOICES = (
('more_than', _("More than")),
('less_than', _("Less than")),
@ -248,6 +258,8 @@ class QueryRule(AbstractBaseRule):
present in the request query.
"""
icon = 'fa-link-o'
parameter = models.SlugField(_("The query parameter to search for"),
max_length=20)
value = models.SlugField(_("The value of the parameter to match"),
@ -282,6 +294,8 @@ class DeviceRule(AbstractBaseRule):
in the request user agent headers.
"""
icon = 'fa-tablet'
mobile = models.BooleanField(_("Mobile phone"), default=False)
tablet = models.BooleanField(_("Tablet"), default=False)
desktop = models.BooleanField(_("Desktop"), default=False)
@ -315,6 +329,8 @@ class UserIsLoggedInRule(AbstractBaseRule):
Matches when the user is authenticated.
"""
icon = 'fa-user'
is_logged_in = models.BooleanField(default=False)
panels = [

2
src/wagtail_personalisation/static/css/dashboard.css
View File

@ -1,2 +1,2 @@
.nice-padding{padding-left:50px;padding-right:50px}.block_container{display:block;margin-top:30px}.block_container .block{display:block;float:left;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:calc(50% - 10px);min-height:216px;padding:10px 20px;margin-bottom:20px;border:1px solid #d9d9d9;border-radius:3px;background-color:#fff;-webkit-box-shadow:0 1px 3px transparent,0 1px 2px transparent;box-shadow:0 1px 3px transparent,0 1px 2px transparent;-webkit-transition:border .3s cubic-bezier(.25,.8,.25,1),-webkit-box-shadow .3s cubic-bezier(.25,.8,.25,1);transition:border .3s cubic-bezier(.25,.8,.25,1),-webkit-box-shadow .3s cubic-bezier(.25,.8,.25,1);transition:box-shadow .3s cubic-bezier(.25,.8,.25,1),border .3s cubic-bezier(.25,.8,.25,1);transition:box-shadow .3s cubic-bezier(.25,.8,.25,1),border .3s cubic-bezier(.25,.8,.25,1),-webkit-box-shadow .3s cubic-bezier(.25,.8,.25,1);cursor:pointer}.block_container .block--disabled .inspect_container,.block_container .block--disabled h2{opacity:.5}.block_container .block h2{display:inline-block;width:auto}.block_container .block:nth-child(odd){margin-right:20px}.block_container .block .block_actions{list-style:none;margin:0;padding:0}.block_container .block .block_actions li{float:left;margin-right:10px}.block_container .block .block_actions li:last-child{margin-right:0}.block_container .block.suggestion{border:1px dashed #d9d9d9}.block_container .block:hover{border:1px solid #fff;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}@media (max-width:699px){.block_container .block{width:100%;margin-right:0}}.block_container .block .inspect_container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;margin-bottom:10px}.block_container .block .inspect_container .inspect{display:block;float:left;width:calc(50% - 10px);padding:0;margin:0;list-style:none}.block_container .block .inspect_container .inspect li{display:inline-block;margin-bottom:5px}.block_container .block .inspect_container .inspect li span{display:block;font-size:20px;font-weight:700;margin:5px 0;overflow-wrap:break-word}.block_container .block .inspect_container .inspect li span:before{display:inline-block;content:"";width:16px;height:16px;margin-right:5px;background-size:contain;background-image:url(../img/ruler_icon.png)}.block_container .block .inspect_container .segment_stats .visit_stat span:before{background-image:url(../img/rocket_icon.png)}.block_container .block .inspect_container .segment_stats .days_stat span:before{background-image:url(../img/calendar_icon.png)}.block_container .block .inspect_container .segment_rules .persistent_state span:before{background-image:url(../img/persistent_icon.png)}.block_container .block .inspect_container .segment_rules .persistent_state.fleeting span:before{-webkit-transform:rotate(45deg) translateY(-2px);transform:rotate(45deg) translateY(-2px)}.block_container .block .inspect_container .segment_rules .time-rule span:before{background-image:url(../img/time_icon.png)}.block_container .block .inspect_container .segment_rules .visit-count-rule span:before{background-image:url(../img/visit_count_icon.png)}.block_container .block .inspect_container .segment_rules .logged-in-rule span:before{background-image:url(../img/key_icon.png)}.block_container .block .inspect_container .segment_rules .day-rule span:before{background-image:url(../img/calendar_icon.png)}.block_container .block .inspect_container .inspect li pre{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;width:auto;background-color:#eee;border:1px solid #ccc;margin:5px 0 5px 21px;padding:2px 5px;word-wrap:break-word;word-break:break-all;border-radius:3px}.block_container .block .inspect_container .inspect li pre:before{display:inline-block;position:absolute;content:"";left:-21px;top:6px;width:16px;height:16px;margin-right:5px;background-size:contain;background-image:url(../img/ruler_icon.png)}.block_container .block .inspect_container .segment_rules .referral-rule pre:before{background-image:url(../img/referral_icon.png)}.block_container .block .inspect_container .segment_rules .query-rule pre:before{background-image:url(../img/referral_icon.png)}.block_container .block.suggestion .suggestive_text{display:block;position:absolute;width:calc(100% - 40px);text-align:center;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:#d9d9d9;font-size:20px;font-weight:100}
.nice-padding{padding-left:50px;padding-right:50px}.block_container{display:block;margin-top:30px}.block_container .block{display:block;float:left;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:calc(50% - 10px);min-height:216px;padding:10px 20px;margin-bottom:20px;border:1px solid #d9d9d9;border-radius:3px;background-color:#fff;-webkit-box-shadow:0 1px 3px transparent,0 1px 2px transparent;box-shadow:0 1px 3px transparent,0 1px 2px transparent;-webkit-transition:border .3s cubic-bezier(.25,.8,.25,1),-webkit-box-shadow .3s cubic-bezier(.25,.8,.25,1);transition:border .3s cubic-bezier(.25,.8,.25,1),-webkit-box-shadow .3s cubic-bezier(.25,.8,.25,1);transition:box-shadow .3s cubic-bezier(.25,.8,.25,1),border .3s cubic-bezier(.25,.8,.25,1);transition:box-shadow .3s cubic-bezier(.25,.8,.25,1),border .3s cubic-bezier(.25,.8,.25,1),-webkit-box-shadow .3s cubic-bezier(.25,.8,.25,1);cursor:pointer}.block_container .block--disabled .inspect_container,.block_container .block--disabled h2{opacity:.5}.block_container .block h2{display:inline-block;width:auto}.block_container .block:nth-child(odd){margin-right:20px}.block_container .block .block_actions{list-style:none;margin:0;padding:0}.block_container .block .block_actions li{float:left;margin-right:10px}.block_container .block .block_actions li:last-child{margin-right:0}.block_container .block.suggestion{border:1px dashed #d9d9d9}.block_container .block:hover{border:1px solid #fff;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}@media (max-width:699px){.block_container .block{width:100%;margin-right:0}}.block_container .block .inspect_container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;margin-bottom:10px}.block_container .block .inspect_container .inspect{display:block;float:left;width:calc(50% - 10px);padding:0;margin:0;list-style:none}.block_container .block span.icon:before{margin-right:.3em;vertical-align:bottom}.block_container .block .inspect_container .inspect li{display:inline-block;margin-bottom:5px}.block_container .block .inspect_container .inspect li span{display:block;font-size:20px;font-weight:700;margin:5px 0;overflow-wrap:break-word}.block_container .block .inspect_container .inspect li pre{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;width:auto;background-color:#eee;border:1px solid #ccc;margin:5px 0 5px 21px;padding:2px 5px;word-wrap:break-word;word-break:break-all;border-radius:3px}.block_container .block.suggestion .suggestive_text{display:block;position:absolute;width:calc(100% - 40px);text-align:center;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:#d9d9d9;font-size:20px;font-weight:100}
/*# sourceMappingURL=dashboard.css.map*/

2
src/wagtail_personalisation/static/css/dashboard.css.map
View File

File diff suppressed because one or more lines are too long

12
src/wagtail_personalisation/static/js/commons.js.map
View File

File diff suppressed because one or more lines are too long

14
src/wagtail_personalisation/templates/modeladmin/wagtail_personalisation/segment/dashboard.html
View File

@ -28,11 +28,11 @@
<ul class="inspect segment_stats">
<li class="visit_stat">
{% trans "This segment has been visited" %}
<span>{{ segment.visit_count|localize }} {% trans "time" %}{{ segment.visit_count|pluralize }}</span>
<span class="icon icon-fa-rocket">{{ segment.visit_count|localize }} {% trans "time" %}{{ segment.visit_count|pluralize }}</span>
</li>
<li class="days_stat">
{% trans "This segment has been active for" %}
<span>{{ segment.enable_date|days_since:segment.disable_date }} {% trans "day" %}{{ segment.enable_date|days_since:segment.disable_date|pluralize }}</span>
<span class="icon icon-fa-calendar">{{ segment.enable_date|days_since:segment.disable_date }} {% trans "day" %}{{ segment.enable_date|days_since:segment.disable_date|pluralize }}</span>
</li>
</ul>
@ -42,18 +42,18 @@
<li class="match_state {{ segment.match_any|yesno:"any,all" }}">
{% trans "The visitor must match" %}
{% if segment.match_any %}
<span>{% trans "Any rule" %}</span>
<span class="icon icon-fa-cube">{% trans "Any rule" %}</span>
{% else %}
<span>{% trans "All rules" %}</span>
<span class="icon icon-fa-cubes">{% trans "All rules" %}</span>
{% endif %}
</li>
<li class="persistent_state {{ segment.persistent|yesno:"persistent,fleeting" }}">
{% trans "The persistence of this segment is" %}
{% if segment.persistent %}
<span title="{% trans "This segment persists in between visits" %}">{% trans "Persistent" %}</span>
<span class="icon icon-fa-bookmark" title="{% trans "This segment persists in between visits" %}">{% trans "Persistent" %}</span>
{% else %}
<span title="{% trans "This segment is re-evaluated on every visit" %}">{% trans "Fleeting" %}</span>
<span class="icon icon-fa-bookmark-o" title="{% trans "This segment is reevaluated on every visit" %}">{% trans "Fleeting" %}</span>
{% endif %}
</li>
@ -63,7 +63,7 @@
{% if rule.description.code %}
<pre>{{ rule.description.value }}</pre>
{% else %}
<span>{{ rule.description.value }}</span>
<span class="icon icon-{{ rule.icon }}">{{ rule.description.value }}</span>
{% endif %}
</li>
{% endfor %}

53
src/wagtail_personalisation/templates/modeladmin/wagtail_personalisation/segment/index.html
View File

@ -3,56 +3,3 @@
{% block toggle_view %}to Dashboard {% endblock%}
{% block content_main %}
<div>
<div class="row">
{% block content_cols %}
{% block filters %}
{% if view.has_filters and all_count %}
<div class="changelist-filter col3">
<h2>{% trans 'Filter' %}</h2>
{% for spec in view.filter_specs %}{% admin_list_filter view spec %}{% endfor %}
</div>
{% endif %}
{% endblock %}
<div class="result-list {% if view.has_filters and all_count %}col9{% else %}col12{% endif %}">
{% block result_list %}
{% if not all_count %}
<div class="nice-padding" style="margin-top:30px;">
{% if no_valid_parents %}
<p>{% blocktrans with view.verbose_name_plural as name %}No {{ name }} have been created yet. One of the following must be created before you can add any {{ name }}:{% endblocktrans %}</p>
<ul>
{% for type in required_parent_types %}<li><b>{{ type|title }}</b></li>{% endfor %}
</ul>
{% else %}
<p>{% blocktrans with view.verbose_name_plural as name %}No {{ name }} have been created yet.{% endblocktrans %}
{% if user_can_create %}
{% blocktrans with view.create_url as url %}
Why not <a href="{{ url }}">add one</a>?
{% endblocktrans %}
{% endif %}</p>
{% endif %}
</div>
{% else %}
{% result_list %}
{% endif %}
{% endblock %}
</div>
{% block pagination %}
<div class="pagination {% if view.has_filters and all_count %}col9{% else %}col12{% endif %}">
<p>{% blocktrans with page_obj.number as current_page and paginator.num_pages as num_pages %}Page {{ current_page }} of {{ num_pages }}.{% endblocktrans %}</p>
{% if paginator.num_pages > 1 %}
<ul>
{% pagination_link_previous page_obj view %}
{% pagination_link_next page_obj view %}
</ul>
{% endif %}
</div>
{% endblock %}
{% endblock %}
</div>
</div>
{% endblock %}