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

Responsievnesss

Browse Source
This commit is contained in:
Jasper Berghoef
2016-11-08 13:17:47 +01:00
parent 6538821f88
commit d30c79ef4e
5 changed files with 170 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/personalisation/static/personalisation/segment/form.css Normal file
View File

@ -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;
}
}

37
src/personalisation/static/personalisation/segment/index.css
View File

@ -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 {
.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);
}
@media (min-width: 800px) and (max-width: 899px) {
.block_container .block {
width: 100%;
margin-right: 0;
}
}
.block_container__block.suggestion {
border: 1px dashed #d9d9d9;
@media (max-width: 649px) {
.block_container .block {
width: 100%;
margin-right: 0;
}
}
.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 {
.block_container .block.suggestion .suggestive_text {
display: block;
position: absolute;
width: calc(100% - 40px);

74
src/personalisation/templates/modeladmin/personalisation/segment/create.html Normal file
View File

@ -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 %}

6
src/personalisation/templates/modeladmin/personalisation/segment/index.html
View File

@ -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 %}

2
src/personalisation/wagtail_hooks.py
View File

@ -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)