bachir/edlp_d8
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

composer is almost finished, ramins to record compos order through ajax

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-03-26 21:21:00 +02:00
parent 0fedff7573
commit 90c9c68dcd
26 changed files with 1048 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/custom/edlptheme/assets/styles/app.scss
+161 -8
View File
@@ -472,6 +472,66 @@ main[role="main"]{
}
#studio-ui{
height:100%;
@mixin draggable_sortable_field__item {
// outline: 1px dotted green;
display: inline-block;
position: relative;
// margin-right: 25px;
width:25px;
height: 100%;
&.ui-draggable-dragging{
height:100px;
// cursor: grabbing;
}
white-space: nowrap;
pointer-events: none;
opacity: 1;
transition: opacity 0.1s ease-in-out;
&.ready-to-remove{
opacity:0.3;
cursor:crosshair;
}
&>*{
pointer-events: all;
}
article{
// outline: 1px dotted purple;
position: absolute;
bottom:0;
transform-origin: left top;
transform: rotateZ(-45deg);
h2{
margin:0;
text-transform: none;
a{
&:before{
content:"";
display: inline-block;
vertical-align: middle;
width:$compo_square_size; height:$compo_square_size;
border: 1px solid white;
background-color: white;
// TODO: entries color;
}
font-size: 0.756em;
}
}
}
.handler{
z-index: 99;
cursor: grab;
position: absolute;
bottom:0; left:1px;
display: block;
width:$compo_square_size; height:$compo_square_size;
transform-origin: left top;
transform: rotateZ(-45deg);
border: 1px solid red;
background-color: white;
// TODO: entries color;
}
} // end mixin
.chutier_ui{
height: 50%;
border-bottom: 1px solid red;
@@ -492,6 +552,7 @@ main[role="main"]{
padding-top: 35px;
height:calc(100% - 35px);
overflow-y: auto;
overflow-x: hidden;
// box-sizing: content-box;
// outline: 1px solid green;
ul,li{
@@ -502,6 +563,13 @@ main[role="main"]{
display: inline-block; vertical-align: top;
width:49%; margin-bottom: 0.5em;
white-space: nowrap;
>div{
display:inline-block;
padding-right: 2em;
&.ui-draggable{
cursor:grab;
}
}
.entrees{
line-height: 0;
span{
@@ -523,6 +591,7 @@ main[role="main"]{
}
}
$compo_square_size:12px;
.composition_ui{
height:50%;
&>h2{
@@ -543,12 +612,16 @@ main[role="main"]{
overflow: hidden;
white-space: nowrap;
section.compositions-list, section.composer{
display: inline-block; vertical-align: top;
display: inline-block; vertical-align: bottom;
height: 100%;
}
.compositions-list{
width:30%; height:100%;
width:30%;
height:100%; // this is not working
overflow-y: auto;
box-sizing: border-box;
padding-right: 0.5em;
border-right: 1px solid #aaa;
li{
opacity: 1;
transition: opacity 0.3s ease-in-out;
@@ -563,10 +636,25 @@ main[role="main"]{
}
a{
font-size: 0.756em;
$w:7px;
$s:7px; $m:5px;
&.composition-link{
display: inline-block;
width: calc(100% - #{$s +$m +2});
box-sizing: border-box;
// width:100%;
width: calc(100% - #{$w +$s +$m +2});
&:before{
content: "";
width:$w; height:$w;
border: 1px solid black;
background-color: white;
display: inline-block;
vertical-align: middle;
margin-right: $m;
}
&.is-active:before{
background-color: black;
}
}
&.delete-composition-link{
display: inline-block;
@@ -584,12 +672,13 @@ main[role="main"]{
// padding-left: 1em;
&:before{
content:"+";
font-weight: bold;
margin-right: 0.2em;
// font-weight: bold;
margin-right: $m;
}
display: inline-block;
vertical-align: top;
overflow: hidden;
margin-top: 0.4em;
height:1em;
transition: height 0.2s ease-in-out;
&.folded{
@@ -622,13 +711,77 @@ main[role="main"]{
}
}
.composer{
box-sizing: content-box;
position: relative;
box-sizing: border-box;
padding-left: 0.5em;
width:69%;
padding-left: 1em;
border-left: 1px solid #aaa;
$header_height:25px;
$actions_height:25px;
$padding:5px;
>*{
box-sizing: border-box;
}
>header{
height:$header_height;
padding-bottom:$padding;
}
>.composition{
position: relative;
height:calc(100% - #{$header_height + $actions_height + $padding*2});
// outline: 1px solid red;
padding-bottom: 1em;
.field--name-documents{
position: relative;
box-sizing: border-box;
height: 100%;
width: 100%; padding:0 0.5em;
$h:29px; $w:calc(100% - 2px); $c:#A1A1A1;
&:before, &:after{
content: "";
width:$w;
position: absolute;
bottom:0; left:0;
// z-index: -1;
}
&:before{
border-top: 1px solid $c;
height:$h /2;
}
&:after{
border-left: 1px solid $c;
border-right: 1px solid $c;
height:$h;
}
.field__item{
@include draggable_sortable_field__item;
}
}
.remove-drop-zone{
position: absolute;
top:0; left:0; width:100%; height:45%;
z-index: 150;
// &.ui-droppable-hover{
// background-color: red;
// }
}
}
>.actions{
padding-top:$padding;
height:$actions_height;
// outline: 1px solid blue;
}
}
}
}
// drag and drop specifics
// created by js
.field__item.ui-draggable-dragging{
// outline: 1px solid green;
@include draggable_sortable_field__item;
}
}
sites/all/themes/custom/edlptheme/assets/styles/base/_layout.scss
+14 -5
View File
@@ -9,7 +9,9 @@ body, html{
padding:0;
// background-color: rgb(219, 219, 219);
}
body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
padding-top: 24px!important;
}
// div.layout-container{
// position: relative;
// width:100%; height:100%;
@@ -57,7 +59,7 @@ main[role="main"]{
padding:7em 2em 9em;
overflow: hidden;
pointer-events: none;
height:auto;
height:100%;
.layout-content{
width: 100%; height:100%;
overflow:hidden;
@@ -67,10 +69,17 @@ main[role="main"]{
}
}
body[corpus-map="ready"] main[role="main"]{
height:100%;
// overflow-y: hidden;
body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
main[role="main"]{
padding-top: 7em + 1em;
}
}
// body.toolbar-fixed.toolbar-tray-open{
// main[role="main"]{
// padding-top: 7em + 4em;
// // overflow-y: hidden;
// }
// }
footer[role="contentinfo"]{
// outline: 1px solid pink;