now diplaying composition list + new compo link which is working ajaxly

This commit is contained in:
Bachir Soussi Chiadmi
2018-03-13 00:05:49 +01:00
parent 76dd9ddbc9
commit 4b8d6d0a65
13 changed files with 460 additions and 26 deletions
@@ -1587,6 +1587,70 @@ body.ajax-loading main[role="main"]:before {
opacity: 0.8; }
#studio-ui .composition_ui {
height: 50%; }
#studio-ui .composition_ui > h2 {
z-index: 10;
position: absolute;
width: calc(100% - 20px);
margin: 0;
padding: 0.5em 0;
font-size: 1em;
font-weight: 500;
text-transform: uppercase;
background-color: white; }
#studio-ui .composition_ui > .wrapper {
padding-top: 35px;
height: calc(100% - 35px);
overflow: hidden;
white-space: nowrap; }
#studio-ui .composition_ui > .wrapper section.compositions-list, #studio-ui .composition_ui > .wrapper section.composer {
display: inline-block;
vertical-align: top;
height: 100%; }
#studio-ui .composition_ui > .wrapper .compositions-list {
width: 30%;
height: 100%;
overflow-y: auto; }
#studio-ui .composition_ui > .wrapper .compositions-list a {
font-size: 0.756em; }
#studio-ui .composition_ui > .wrapper .compositions-list a.new-composition-link {
display: inline-block;
vertical-align: top;
overflow: hidden;
height: 1em;
-webkit-transition: height 0.2s ease-in-out;
transition: height 0.2s ease-in-out; }
#studio-ui .composition_ui > .wrapper .compositions-list a.new-composition-link:before {
content: "+";
font-weight: bold;
margin-right: 0.2em; }
#studio-ui .composition_ui > .wrapper .compositions-list a.new-composition-link.folded {
height: 0; }
#studio-ui .composition_ui > .wrapper .compositions-list .new-compo-form {
opacity: 1;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out; }
#studio-ui .composition_ui > .wrapper .compositions-list .new-compo-form input[type="text"] {
font-size: 0.756em;
padding: 0 0.5em;
width: calc(100% - 50px);
height: 1.7em;
border: none;
border-top: 1px dotted red;
border-bottom: 1px dotted red; }
#studio-ui .composition_ui > .wrapper .compositions-list .new-compo-form button {
background: none;
border: none;
font-size: 1em;
line-height: 1;
font-weight: bold; }
#studio-ui .composition_ui > .wrapper .compositions-list .new-compo-form.ajax-loading {
opacity: 0.4; }
#studio-ui .composition_ui > .wrapper .composer {
-webkit-box-sizing: content-box;
box-sizing: content-box;
width: 69%;
padding-left: 1em;
border-left: 1px solid #aaa; }
body.path-agenda main .col > .wrapper {
height: 100%; }
@@ -484,6 +484,80 @@ main[role="main"]{
}
.composition_ui{
height:50%;
&>h2{
z-index: 10;
position: absolute;
width: calc(100% - 20px);
margin: 0;
padding:0.5em 0;
font-size: 1em;
font-weight: 500;
text-transform: uppercase;
// outline: 1px solid orange;
background-color: white;
}
>.wrapper{
padding-top: 35px;
height:calc(100% - 35px);
overflow: hidden;
white-space: nowrap;
section.compositions-list, section.composer{
display: inline-block; vertical-align: top;
height: 100%;
}
.compositions-list{
width:30%; height:100%;
overflow-y: auto;
a{
font-size: 0.756em;
&.new-composition-link{
// padding-left: 1em;
&:before{
content:"+";
font-weight: bold;
margin-right: 0.2em;
}
display: inline-block;
vertical-align: top;
overflow: hidden;
height:1em;
transition: height 0.2s ease-in-out;
&.folded{
height:0;
}
}
}
.new-compo-form{
input[type="text"]{
font-size: 0.756em;
padding:0 0.5em;
width:calc(100% - 50px);
height:1.7em;
border: none;
border-top:1px dotted red;
border-bottom:1px dotted red;
}
button{
background: none;
border: none;
font-size: 1em;
line-height: 1;
font-weight: bold;
}
opacity: 1;
transition: opacity 0.2s ease-in-out;
&.ajax-loading{
opacity: 0.4;
}
}
}
.composer{
box-sizing: content-box;
width:69%;
padding-left: 1em;
border-left: 1px solid #aaa;
}
}
}
}