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

Adds front-end tooling

Browse Source
This commit is contained in:
Jasper Berghoef
2017-05-23 14:26:36 +02:00
parent 3391087944
commit 479aec516e
31 changed files with 6315 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/img/calendar_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 794 B

BIN
frontend/img/key_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
frontend/img/persistent_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
frontend/img/referral_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
frontend/img/rocket_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
frontend/img/ruler_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
frontend/img/time_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
frontend/img/visit_count_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
frontend/js/form.js Normal file
View File

@ -0,0 +1 @@
import '../scss/form.scss';

1
frontend/js/index.js Normal file
View File

@ -0,0 +1 @@
import '../scss/index.scss';

70
frontend/scss/form.scss Normal file
View File

@ -0,0 +1,70 @@
.block_container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.block_container .block {
display: block;
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;
cursor: pointer;
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;
cursor: default;
}
.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;
}
}

183
frontend/scss/index.scss Normal file
View File

@ -0,0 +1,183 @@
.nice-padding {
padding-left: 50px;
padding-right: 50px;
}
.block_container {
display: block;
margin-top: 30px;
}
.block_container .block {
display: block;
float: left;
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;
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);
cursor: pointer;
}
.block_container .block--disabled h2,
.block_container .block--disabled .inspect_container {
opacity: 0.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;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
@media (max-width: 699px) {
.block_container .block {
width: 100%;
margin-right: 0;
}
}
.block_container .block .inspect_container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
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: bold;
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 {
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;
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%;
transform: translateY(-50%);
color: #d9d9d9;
font-size: 20px;
font-weight: 100;
}