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

More styling improvements

Browse Source
This commit is contained in:
Jasper Berghoef
2017-06-03 10:35:34 +02:00
parent 47bfa384f3
commit 389dc243e1
5 changed files with 117 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
frontend/scss/dashboard.scss
View File

@@ -1,4 +1,5 @@
$color-gray: #D0D2D3;
$color-lighest-gray: #EBEBEB;
$color-light-gray: #F6F6F6;
$color-dark-gray: #727272;
$block-spacing: 20px;
@@ -12,12 +13,17 @@ $block-spacing: 20px;
display: block;
box-sizing: border-box;
width: 22%;
max-width: 320px;
min-width: 280px;
min-height: 260px;
margin: 1.5%;
border: 1px solid $color-gray;
border-radius: 3px;
padding-bottom: 62px;
&__segment {
position: relative;
.block-header,
.block-rules,
.block-footer {
@@ -39,12 +45,18 @@ $block-spacing: 20px;
}
.block-footer {
position: absolute;
width: 100%;
bottom: 0;
padding: $block-spacing / 2 $block-spacing;
border-top: 1px solid $color-gray;
background-color: $color-light-gray;
}
.block-data {
overflow: hidden;
margin-bottom: $block-spacing;
&__description {
margin-bottom: 3px;
font-size: 14px;
@@ -54,12 +66,46 @@ $block-spacing: 20px;
&__content {
margin-bottom: 0;
font-size: 18px;
&--code {
display: inline-block;
width: auto;
padding-left: 3px !important;
padding-right: 3px;
padding-top: 1px;
padding-bottom: 1px;
margin-left: $block-spacing + 10px;
margin-right: $block-spacing / 2;
margin-top: 0;
border: 1px solid $color-gray;
border-radius: 3px;
font-size: 14px;
background-color: $color-light-gray;
}
}
&--icon {
.block-data__description {
padding-left: 1.5em;
position: relative;
&:before {
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translate(-20%, -50%);
margin-right: 0;
font-size: 32px;
color: $color-lighest-gray;
}
.block-data__description,
.block-data__content {
padding-left: 30px;
}
}
&:last-child {
margin-bottom: 0;
}
}
@@ -85,5 +131,61 @@ $block-spacing: 20px;
}
}
&-suggestion {
position: relative;
border: 1px dashed $color-gray;
&__text {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
font-size: 16px;
color: $color-gray;
}
&:hover {
.block-suggestion {
&__text {
color: $color-dark-gray;
}
}
}
}
}
.segment {
&--match-all,
&--match-any {
.block-data--icon {
&:after {
position: absolute;
left: 5px;
padding-left: 5px;
border-left: $color-lighest-gray;
color: $color-lighest-gray;
text-align: left;
font-family: 'wagtail';
}
}
}
&--match-all {
.block-data--icon {
&:after {
content: "&";
}
}
}
&--match-any {
.block-data--icon {
&:after {
content: "//";
}
}
}
}
}

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

@@ -1,2 +1,2 @@
.block-container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.block-container .block{width:22%;min-width:280px;margin:1.5%;border:1px solid #d0d2d3;border-radius:3px}.block-container .block,.block-container .block__segment .block-footer,.block-container .block__segment .block-header,.block-container .block__segment .block-rules{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}.block-container .block__segment .block-header{padding:20px;border-bottom:1px solid #d0d2d3}.block-container .block__segment .block-header h2{margin-top:0}.block-container .block__segment .block-rules{padding:20px 0}.block-container .block__segment .block-footer{padding:10px 20px;border-top:1px solid #d0d2d3;background-color:#f6f6f6}.block-container .block__segment .block-data__description{margin-bottom:3px;font-size:14px;color:#727272}.block-container .block__segment .block-data__content{margin-bottom:0;font-size:18px}.block-container .block__segment .block-data--icon .block-data__description{padding-left:1.5em}.block-container .block__segment .block-stats__content{margin-bottom:3px}.block-container .block__segment .block-actions{margin:0;padding:0;list-style:none}.block-container .block__segment .block-actions__action{display:inline-block;margin-right:5px}.block-container .block__segment .block-actions__action:last-child{margin-right:0}
.block-container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.block-container .block{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;width:22%;max-width:320px;min-width:280px;min-height:260px;margin:1.5%;border:1px solid #d0d2d3;border-radius:3px;padding-bottom:62px}.block-container .block__segment{position:relative}.block-container .block__segment .block-footer,.block-container .block__segment .block-header,.block-container .block__segment .block-rules{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}.block-container .block__segment .block-header{padding:20px;border-bottom:1px solid #d0d2d3}.block-container .block__segment .block-header h2{margin-top:0}.block-container .block__segment .block-rules{padding:20px 0}.block-container .block__segment .block-footer{position:absolute;width:100%;bottom:0;padding:10px 20px;border-top:1px solid #d0d2d3;background-color:#f6f6f6}.block-container .block__segment .block-data{overflow:hidden;margin-bottom:20px}.block-container .block__segment .block-data__description{margin-bottom:3px;font-size:14px;color:#727272}.block-container .block__segment .block-data__content{margin-bottom:0;font-size:18px}.block-container .block__segment .block-data__content--code{display:inline-block;width:auto;padding-left:3px!important;padding-right:3px;padding-top:1px;padding-bottom:1px;margin-left:30px;margin-right:10px;margin-top:0;border:1px solid #d0d2d3;border-radius:3px;font-size:14px;background-color:#f6f6f6}.block-container .block__segment .block-data--icon{position:relative}.block-container .block__segment .block-data--icon:before{display:block;position:absolute;top:50%;left:0;-webkit-transform:translate(-20%,-50%);transform:translate(-20%,-50%);margin-right:0;font-size:32px;color:#ebebeb}.block-container .block__segment .block-data--icon .block-data__content,.block-container .block__segment .block-data--icon .block-data__description{padding-left:30px}.block-container .block__segment .block-data:last-child{margin-bottom:0}.block-container .block__segment .block-stats__content{margin-bottom:3px}.block-container .block__segment .block-actions{margin:0;padding:0;list-style:none}.block-container .block__segment .block-actions__action{display:inline-block;margin-right:5px}.block-container .block__segment .block-actions__action:last-child{margin-right:0}.block-container .block-suggestion{position:relative;border:1px dashed #d0d2d3}.block-container .block-suggestion__text{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:100%;text-align:center;font-size:16px;color:#d0d2d3}.block-container .block-suggestion:hover .block-suggestion__text{color:#727272}.block-container .segment--match-all .block-data--icon:after,.block-container .segment--match-any .block-data--icon:after{position:absolute;left:5px;padding-left:5px;border-left:#ebebeb;color:#ebebeb;text-align:left;font-family:wagtail}.block-container .segment--match-all .block-data--icon:after{content:"&"}.block-container .segment--match-any .block-data--icon:after{content:"//"}
/*# 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

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

File diff suppressed because one or more lines are too long

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

@@ -26,13 +26,14 @@
{% for rule in segment.get_rules %}
<div class="block-data block-data--icon icon icon-{{ rule.icon }}">
<p class="block-data__description">{{ rule.description.title }}</p>
<p class="block-data__content">
{% if rule.description.code %}
<pre>{{ rule.description.value }}</pre>
{% else %}
<span>{{ rule.description.value }}</span>
{% endif %}
</p>
{% if rule.description.code %}
<pre class="block-data__content block-data__content--code">{{ rule.description.value }}</pre>
{% else %}
<p class="block-data__content block-data__content--text">
<strong>{{ rule.description.value }}</strong>
</p>
{% endif %}
</div>
{% endfor %}
</div>
@@ -85,8 +86,8 @@
{% if user_can_create %}
{% blocktrans with url=view.create_url name=view.verbose_name %}
<a class="block block__suggestion" href="{{ url }}">
<span class="suggestive_text">Add a new {{ name }}</span>
<a class="block block-suggestion" href="{{ url }}">
<span class="block-suggestion__text">Add a new {{ name }}</span>
</a>
{% endblocktrans %}
{% endif %}