Development
- Adds styling for Turfs
This commit is contained in:
Peter Varaksin
parent
11ee6f6434
commit
e1cad1e930
4 changed files with 186 additions and 97 deletions
|
|
@ -233,3 +233,91 @@
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
@mixin turf_block($turf_width, $turf_height) {
|
||||
|
||||
$turf_margin: 20px;
|
||||
$connector_height: $turf_height/10;
|
||||
$connector_width: $turf_margin * 2;
|
||||
|
||||
width: $turf_width;
|
||||
height: $turf_height;
|
||||
background-color: lightgray;
|
||||
position: relative;
|
||||
margin: $turf_margin;
|
||||
flex-grow: initial;
|
||||
|
||||
&.turf-selected {
|
||||
.connector {
|
||||
background-color: gray;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.connector {
|
||||
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: lightgray;
|
||||
|
||||
&.right,
|
||||
&.left {
|
||||
width: $turf_margin * 2;
|
||||
height: $turf_height/5;
|
||||
top: $turf_height/2 - $turf_height/10;
|
||||
}
|
||||
&.left {
|
||||
left: -$turf_margin * 2;
|
||||
}
|
||||
&.right {
|
||||
left: $turf_width;
|
||||
}
|
||||
|
||||
&.top,
|
||||
&.bottom {
|
||||
height: $turf_margin * 2;
|
||||
width: $turf_height/5;
|
||||
left: $turf_width/2 - $turf_height/10;
|
||||
}
|
||||
&.top {
|
||||
top: -$turf_margin * 2;
|
||||
}
|
||||
&.bottom {
|
||||
top: $turf_height;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.turf-selected {
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
.turf-description {
|
||||
border: none;
|
||||
background: none;
|
||||
resize: none;
|
||||
width: $turf_width;
|
||||
text-align: center;
|
||||
min-height: auto;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.turf-name {
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.turf-control {
|
||||
&.turf-select {
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: -7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -315,11 +315,6 @@
|
|||
}
|
||||
|
||||
// Turfs.
|
||||
$turf_margin: 20px;
|
||||
$turf_height: 125px;
|
||||
$turf_width: 130px;
|
||||
$connector_height: $turf_height/10;
|
||||
$connector_width: $turf_margin * 2;
|
||||
|
||||
#turf-list {
|
||||
|
||||
|
|
@ -337,81 +332,17 @@
|
|||
*:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
&.section-non-editable {
|
||||
.turf-block {
|
||||
|
||||
width: $turf_width;
|
||||
height: $turf_height;
|
||||
background-color: lightgray;
|
||||
position: relative;
|
||||
margin: $turf_margin;
|
||||
flex-grow: initial;
|
||||
@include turf_block(130px, 100px);
|
||||
}
|
||||
}
|
||||
|
||||
&.turf-selected {
|
||||
.connector {
|
||||
background-color: gray;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.connector {
|
||||
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: lightgray;
|
||||
|
||||
&.right,
|
||||
&.left {
|
||||
width: $turf_margin * 2;
|
||||
height: $turf_height/5;
|
||||
top: $turf_height/2 - $turf_height/10;
|
||||
}
|
||||
&.left {
|
||||
left: -$turf_margin * 2;
|
||||
}
|
||||
&.right {
|
||||
left: $turf_width;
|
||||
}
|
||||
|
||||
&.top,
|
||||
&.bottom {
|
||||
height: $turf_margin * 2;
|
||||
width: $turf_height/5;
|
||||
left: $turf_width/2 - $turf_height/10;
|
||||
}
|
||||
&.top {
|
||||
top: -$turf_margin * 2;
|
||||
}
|
||||
&.bottom {
|
||||
top: $turf_height;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.turf-selected {
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
.turf-description {
|
||||
border: none;
|
||||
background: none;
|
||||
resize: none;
|
||||
width: $turf_width;
|
||||
text-align: center;
|
||||
min-height: auto;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.turf-name {
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
transform: scale(1);
|
||||
}
|
||||
&.section-editable {
|
||||
.turf-block {
|
||||
@include turf_block(130px, 125px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -500,49 +500,49 @@
|
|||
* #turf-list .turf-row *:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
* #turf-list .turf-row .turf-block {
|
||||
* #turf-list.section-non-editable .turf-block {
|
||||
width: 130px;
|
||||
height: 125px;
|
||||
height: 100px;
|
||||
background-color: lightgray;
|
||||
position: relative;
|
||||
margin: 20px;
|
||||
flex-grow: initial;
|
||||
}
|
||||
* #turf-list .turf-row .turf-block.turf-selected .connector {
|
||||
* #turf-list.section-non-editable .turf-block.turf-selected .connector {
|
||||
background-color: gray;
|
||||
z-index: 1;
|
||||
}
|
||||
* #turf-list .turf-row .turf-block .connector {
|
||||
* #turf-list.section-non-editable .turf-block .connector {
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: lightgray;
|
||||
}
|
||||
* #turf-list .turf-row .turf-block .connector.right, * #turf-list .turf-row .turf-block .connector.left {
|
||||
* #turf-list.section-non-editable .turf-block .connector.right, * #turf-list.section-non-editable .turf-block .connector.left {
|
||||
width: 40px;
|
||||
height: 25px;
|
||||
top: 50px;
|
||||
height: 20px;
|
||||
top: 40px;
|
||||
}
|
||||
* #turf-list .turf-row .turf-block .connector.left {
|
||||
* #turf-list.section-non-editable .turf-block .connector.left {
|
||||
left: -40px;
|
||||
}
|
||||
* #turf-list .turf-row .turf-block .connector.right {
|
||||
* #turf-list.section-non-editable .turf-block .connector.right {
|
||||
left: 130px;
|
||||
}
|
||||
* #turf-list .turf-row .turf-block .connector.top, * #turf-list .turf-row .turf-block .connector.bottom {
|
||||
* #turf-list.section-non-editable .turf-block .connector.top, * #turf-list.section-non-editable .turf-block .connector.bottom {
|
||||
height: 40px;
|
||||
width: 25px;
|
||||
left: 52.5px;
|
||||
width: 20px;
|
||||
left: 55px;
|
||||
}
|
||||
* #turf-list .turf-row .turf-block .connector.top {
|
||||
* #turf-list.section-non-editable .turf-block .connector.top {
|
||||
top: -40px;
|
||||
}
|
||||
* #turf-list .turf-row .turf-block .connector.bottom {
|
||||
top: 125px;
|
||||
* #turf-list.section-non-editable .turf-block .connector.bottom {
|
||||
top: 100px;
|
||||
}
|
||||
* #turf-list .turf-row .turf-block.turf-selected {
|
||||
* #turf-list.section-non-editable .turf-block.turf-selected {
|
||||
background-color: gray;
|
||||
}
|
||||
* #turf-list .turf-row .turf-block .turf-description {
|
||||
* #turf-list.section-non-editable .turf-block .turf-description {
|
||||
border: none;
|
||||
background: none;
|
||||
resize: none;
|
||||
|
|
@ -551,14 +551,84 @@
|
|||
min-height: auto;
|
||||
font-size: 12px;
|
||||
}
|
||||
* #turf-list .turf-row .turf-block .turf-name {
|
||||
* #turf-list.section-non-editable .turf-block .turf-name {
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
* #turf-list .turf-row .turf-block input[type=checkbox] {
|
||||
* #turf-list.section-non-editable .turf-block input[type=checkbox] {
|
||||
transform: scale(1);
|
||||
}
|
||||
* #turf-list.section-non-editable .turf-block .turf-control.turf-select {
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: -7px;
|
||||
}
|
||||
* #turf-list.section-editable .turf-block {
|
||||
width: 130px;
|
||||
height: 125px;
|
||||
background-color: lightgray;
|
||||
position: relative;
|
||||
margin: 20px;
|
||||
flex-grow: initial;
|
||||
}
|
||||
* #turf-list.section-editable .turf-block.turf-selected .connector {
|
||||
background-color: gray;
|
||||
z-index: 1;
|
||||
}
|
||||
* #turf-list.section-editable .turf-block .connector {
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: lightgray;
|
||||
}
|
||||
* #turf-list.section-editable .turf-block .connector.right, * #turf-list.section-editable .turf-block .connector.left {
|
||||
width: 40px;
|
||||
height: 25px;
|
||||
top: 50px;
|
||||
}
|
||||
* #turf-list.section-editable .turf-block .connector.left {
|
||||
left: -40px;
|
||||
}
|
||||
* #turf-list.section-editable .turf-block .connector.right {
|
||||
left: 130px;
|
||||
}
|
||||
* #turf-list.section-editable .turf-block .connector.top, * #turf-list.section-editable .turf-block .connector.bottom {
|
||||
height: 40px;
|
||||
width: 25px;
|
||||
left: 52.5px;
|
||||
}
|
||||
* #turf-list.section-editable .turf-block .connector.top {
|
||||
top: -40px;
|
||||
}
|
||||
* #turf-list.section-editable .turf-block .connector.bottom {
|
||||
top: 125px;
|
||||
}
|
||||
* #turf-list.section-editable .turf-block.turf-selected {
|
||||
background-color: gray;
|
||||
}
|
||||
* #turf-list.section-editable .turf-block .turf-description {
|
||||
border: none;
|
||||
background: none;
|
||||
resize: none;
|
||||
width: 130px;
|
||||
text-align: center;
|
||||
min-height: auto;
|
||||
font-size: 12px;
|
||||
}
|
||||
* #turf-list.section-editable .turf-block .turf-name {
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
* #turf-list.section-editable .turf-block input[type=checkbox] {
|
||||
transform: scale(1);
|
||||
}
|
||||
* #turf-list.section-editable .turf-block .turf-control.turf-select {
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: -7px;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="turf-list" class="{{#if can_edit}}section-editable{{/if}}">
|
||||
<div id="turf-list" class="{{#if can_edit}}section-editable{{else}}section-non-editable{{/if}}">
|
||||
|
||||
<div class="turf-row">
|
||||
{{#each turfs_data as |turf id|}}
|
||||
|
|
|
|||
Reference in a new issue