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

2018-03-13 00:05:49 +01:00
parent 76dd9ddbc9
commit 4b8d6d0a65
13 changed files with 460 additions and 26 deletions
@@ -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;
+      }
+    }
  }
 }