Styling and markup segmentation overview WIP

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

@@ -0,0 +1,41 @@
+.nice-padding {
+    padding-left: 50px;
+    padding-right: 50px;
+}
+
+.block_container {
+    display: block;
+    margin-top: 30px;
+}
+
+.block_container--block {
+    display: inline-block;
+    position: relative;
+    width: calc(50% - 10px);
+    height: 126px;
+    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: all 0.3s cubic-bezier(.25,.8,.25,1);
+}
+
+.block_container--block.suggestion {
+    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);
+}
+
+.block_container--block.suggestion .suggestive_text {
+    display: block;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: #d9d9d9;
+    font-size: 20px;
+    font-weight: 100;
+}

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

@@ -0,0 +1,32 @@
+{% extends "modeladmin/index.html" %}
+{% load i18n staticfiles modeladmin_tags %}
+
+
+{% block result_list %}
+    <div class="nice-padding block_container">
+        {% if results %}
+            <!-- Replace this function with a class specific one to avoid useless requests. -->
+            {% result_list %}
+        {% endif %}
+
+        {% if user_can_create %}
+            {% blocktrans with url=view.create_url name=view.verbose_name %}
+                <a href="{{ url }}"><div class="block_container--block suggestion">
+                    <span class="suggestive_text">Add a new {{name}}</span>
+                </div></a>
+            {% endblocktrans %}
+        {% endif %}
+    </div>
+{% endblock %}
+
+{% block pagination %}
+    {% if paginator.num_pages > 1 %}
+    <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>
+        <ul>
+            {% pagination_link_previous page_obj view %}
+            {% pagination_link_next page_obj view %}
+        </ul>
+    </div>
+    {% endif %}
+{% endblock %}

src/personalisation/templates/wagtailadmin/segment.html

@@ -1,9 +0,0 @@
-{% extends "wagtailadmin/base.html" %}
-{% load i18n staticfiles %}
-{% block titletag %}{% trans "Segments" %}{% endblock %}
-
-
-{% block content %}
-    <h1>Our segment page</h1>
-
-{% endblock %}

src/personalisation/wagtail_hooks.py

@@ -23,5 +23,7 @@ class SegmentModelAdmin(ModelAdmin):
     model = Segment
     menu_icon = 'group'
     add_to_settings_menu = False
+    list_display = ('name')
+    index_view_extra_css = ['personalisation/segment/index.css']
 
 modeladmin_register(SegmentModelAdmin)