Responsievnesss

src/personalisation/static/personalisation/segment/form.css

@@ -0,0 +1,69 @@
+.block_container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+    .block_container .block {
+        display: block;
+        float: left;
+        box-sizing: border-box;
+        position: relative;
+        width: calc(100% / 3 - 13.33px);
+        padding: 10px 20px;
+        margin-bottom: 20px;
+        border: 1px solid #d9d9d9;
+        border-radius: 3px;
+        background-color: #fff;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.00), 0 1px 2px rgba(0,0,0,0.00);
+        transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1), border 0.3s cubic-bezier(.25,.8,.25,1);
+    }
+
+    .block_container .block:nth-child(3n+1),
+    .block_container .block:nth-child(3n+2) {
+        margin-right: 20px;
+    }
+
+    .block_container .block:hover {
+        border: 1px solid #fff;
+        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+    }
+
+    .block_container .block.disabled {
+        background-color: #eee;
+    }
+
+    .block_container .block.disabled:hover {
+        border: 1px solid #d9d9d9;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.00), 0 1px 2px rgba(0,0,0,0.00);
+    }
+
+@media (min-width: 800px) and (max-width: 999px) {
+    .block_container .block {
+        width: calc(100% / 2 - 10px);
+    }
+
+    .block_container .block:nth-child(3n+1),
+    .block_container .block:nth-child(3n+2) {
+        margin-right: 0;
+    }
+
+    .block_container .block:nth-child(2n+1) {
+        margin-right: 20px;
+    }
+}
+
+@media (max-width: 599px) {
+    .block_container .block {
+        width: calc(100% / 2 - 10px);
+    }
+
+    .block_container .block:nth-child(3n+1),
+    .block_container .block:nth-child(3n+2) {
+        margin-right: 0;
+    }
+
+    .block_container .block:nth-child(2n+1) {
+        margin-right: 20px;
+    }
+}

src/personalisation/static/personalisation/segment/index.css

@@ -8,7 +8,7 @@
     margin-top: 30px;
 }
 
-.block_container__block {
+.block_container .block {
     display: block;
     float: left;
     box-sizing: border-box;
@@ -24,42 +24,49 @@
     transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1), border 0.3s cubic-bezier(.25,.8,.25,1);
 }
 
-.block_container__block:nth-child(odd) {
+.block_container .block:nth-child(odd) {
     margin-right: 20px;
 }
 
-    .block_container__block .block--actions {
+    .block_container .block .block_actions {
         list-style: none;
         margin: 0;
         padding: 0;
     }
 
-        .block_container__block .block--actions li {
+        .block_container .block .block_actions li {
             float: left;
             margin-right: 10px;
         }
 
-        .block_container__block .block--actions li:last-child {
+        .block_container .block .block_actions li:last-child {
             margin-right: 0;
         }
 
-@media (max-width: 799px) {
+.block_container .block.suggestion {
-    .block_container__block {
+    border: 1px dashed #d9d9d9;
+}
+
+.block_container .block:hover {
+    border: 1px solid #fff;
+    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+}
+
+@media (min-width: 800px) and (max-width: 899px) {
+    .block_container .block {
         width: 100%;
         margin-right: 0;
     }
 }
 
-.block_container__block.suggestion {
+@media (max-width: 649px) {
-    border: 1px dashed #d9d9d9;
+    .block_container .block {
+        width: 100%;
+        margin-right: 0;
+    }
 }
 
-.block_container__block:hover {
+.block_container .block.suggestion .suggestive_text {
-    border: 1px solid #fff;
-    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
-}
-
-.block_container__block.suggestion .suggestive_text {
     display: block;
     position: absolute;
     width: calc(100% - 40px);

src/personalisation/templates/modeladmin/personalisation/segment/create.html

@@ -0,0 +1,74 @@
+{% extends "modeladmin/create.html" %}
+{% load i18n %}
+
+{% block content %}
+
+    {% block header %}
+        {% include "wagtailadmin/shared/header.html" with title=view.get_page_title subtitle=view.get_page_subtitle icon=view.header_icon tabbed=1 merged=1 %}
+    {% endblock %}
+
+    <form action="{% block form_action %}{{ view.create_url }}{% endblock %}" {% if is_multipart %} enctype="multipart/form-data"
+        {% endif %} method="POST" novalidate>
+        {% csrf_token %} {% block form %}{{ edit_handler.render_form_content }}{% endblock %}
+
+        <ul class="objects">
+            <li class="object">
+                <h2>
+                    <label for="id_rules">Rules</label>
+                </h2>
+                <fieldset class="">
+                    <legend>Rules</legend>
+                    <p>Create a set of rules to segment the users with</p>
+                    <ul class="block_container">
+                        <li class="block">
+                            <h2>Time</h2>
+                            <p>Choose a time segment in which the user visits the site.</p>
+                        </li>
+                        <li class="block disabled">
+                            <h2>Page visits</h2>
+                            <p>Choose a (set of) page(s) the user has to have seen to trigger this rule.</p>
+                        </li>
+                        <li class="block">
+                            <h2>Visit count</h2>
+                            <p>Choose the number of visits the user has to have made.</p>
+                        </li>
+                        <li class="block">
+                            <h2>Referrer</h2>
+                            <p>Define a referring page, domain or query the user has to come from.</p>
+                        </li>
+                        <li class="block disabled">
+                            <h2>Device</h2>
+                            <p>Choose a specific set of devices a user has to own before triggering this rule.</p>
+                        </li>
+                        <li class="block disabled">
+                            <h2>Geolocation</h2>
+                            <p>Pick an area the user has to be in to trigger this rule.</p>
+                        </li>
+                    </ul>
+
+                    <div class="clearfix"></div>
+
+                    <h2>Your chosen rules</h2>
+                </fieldset>
+
+            </li>
+        </ul>
+
+        {% block footer %}
+        <footer>
+            <ul>
+                <li class="actions">
+                    {% block form_actions %}
+                    <div class="dropdown dropup dropdown-button match-width">
+                        <button type="submit" class="button action-save button-longrunning" tabindex="3" data-clicked-text="{% trans 'Saving...' %}">
+                                        <span class="icon icon-spinner"></span><em>{% trans 'Save' %}</em>
+                                    </button>
+                    </div>
+                    {% endblock %}
+                </li>
+            </ul>
+        </footer>
+        {% endblock %}
+    </form>
+    
+{% endblock %}

src/personalisation/templates/modeladmin/personalisation/segment/index.html

@@ -21,9 +21,9 @@
                                 {% if all_count %}
                                     <!-- Replace this function with a class specific one to avoid useless requests. -->
                                     {% for segment in object_list %}
-                                        <div class="block_container__block">
+                                        <div class="block">
                                             <a href="edit/{{ segment.pk }}"><h2>{{ segment }}</h2></a>
-                                            <ul class="block--actions">
+                                            <ul class="block_actions">
                                                 <li><a href="delete/{{ segment.pk }}">delete</a></li>
                                                 <li><a href="edit/{{ segment.pk }}">configure this</a></li>
                                             </ul>
@@ -33,7 +33,7 @@
 
                                 {% if user_can_create %}
                                     {% blocktrans with url=view.create_url name=view.verbose_name %}
-                                        <a href="{{ url }}"><div class="block_container__block suggestion">
+                                        <a href="{{ url }}"><div class="block suggestion">
                                             <span class="suggestive_text">Add a new {{name}}</span>
                                         </div></a>
                                     {% endblocktrans %}

src/personalisation/wagtail_hooks.py

@@ -3,6 +3,7 @@ from django.conf.urls import include, url
 from django.core.urlresolvers import reverse
 from wagtail.wagtailadmin import widgets
 from wagtail.wagtailadmin.menu import MenuItem
+from wagtail.wagtailadmin.modal_workflow import render_modal_workflow
 
 from personalisation import admin_urls
 from wagtail.contrib.modeladmin.helpers import ButtonHelper
@@ -25,5 +26,6 @@ class SegmentModelAdmin(ModelAdmin):
     add_to_settings_menu = False
     list_display = ('name')
     index_view_extra_css = ['personalisation/segment/index.css']
+    form_view_extra_css = ['personalisation/segment/form.css']
 
 modeladmin_register(SegmentModelAdmin)