personal-notes display for card medium and cardfull is ok

sites/all/themes/gui/materiobasetheme/js/script.js

@@ -560,7 +560,7 @@
         .each(function(i){
           protectFigures(this);
           if(_isLoggedIn){
-            if(!$container.is('.modal-content')){
+            if(!$container.is('.modal-content') && !$(this).is('.vm-cardfull')){
               // do not add preview btn if we are already on a preview
               initPreview(this);
             }else{
@@ -750,8 +750,9 @@
     };
 
     MaterioBaseTheme.prototype.on_click_cardmedium = function(event){
-      // trace('on_click_cardmedium', event);
-      if(!$(event.target).is('.flag') && !$(event.target).parent().is('.flag'))
+      trace('on_click_cardmedium', event);
+      // if(!$(event.target).is('.flag') && !$(event.target).parent().is('.flag'))
+      if($(event.target).is('.side') || $(event.target).parents('.side').length)
         sideSwitcher(event);
     };
 

sites/all/themes/gui/materiobasetheme/package.json

@@ -8,11 +8,12 @@
   "homepage": "https://materio.com",
   "devDependencies": {
     "gulp": "latest",
-    "gulp-autoprefixer": "latest",
+    "gulp-autoprefixer": "^4.0.0",
     "gulp-jsmin": "latest",
     "gulp-rename": "latest",
     "gulp-sass": "latest",
     "gulp-strip-debug": "latest",
     "gulp-watch": "latest"
-  }
+  },
+  "dependencies": {}
 }

sites/all/themes/gui/materiobasetheme/scss/styles.scss

@@ -1392,7 +1392,7 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
     .search-results, .actuality-items, .flaglist-items{
       font-size:0;
       >*{font-size:16px;}
-      text-align:center;
+      text-align:left;
       >*{text-align:left;}
 
     }
@@ -1446,9 +1446,11 @@ $cardbig_h:610px;
 $cardfull_w:850px;
 $cardfull_h:610px;
 
+$cardmargin:7px;
+
 @mixin card-box($w, $h){
   width:$w; height:$h;
-  @include inlineblock(); position:relative; margin:7px;
+  @include inlineblock(); position:relative; margin:$cardmargin;
 
   @include rounded(5px); background-color: #FFF;
   @include drop-shadow(0, 0, 5px, 0.2);
@@ -1463,7 +1465,7 @@ $cardfull_h:610px;
   }
 
   // .no-touch &:hover{ @include drop-shadow(0, 0, 5px, 0.7); }
-  &.focused{ @include drop-shadow(0, 0, 7px, 0.9); }
+  &.focused{ @include drop-shadow(0, 0, $cardmargin, 0.9); }
 
   &.just-added{ opacity:0; }
 
@@ -1490,7 +1492,10 @@ $cardfull_h:610px;
   // }
 
   nav.nav{
-    position:absolute; top:0; right:0; z-index:11;
+    position:absolute; top:0; z-index:11;
+    width:24px;
+    left:$w - 24px;
+    // right:0;
     padding: 5px 0;
     @include border-radius(0, 5px, 0, 3px);
     @include fs11;
@@ -1504,15 +1509,12 @@ $cardfull_h:610px;
     a{color:#000;}
     ul{background-color: rgba(255, 255, 255, 0.9);}
     span.op{@include fs900; @include fs14;}
-
     ul{padding: 0; margin: 0;}
-
     section{
       position:relative;
 
       &>i, &>a{margin: 0 5px; &:hover{cursor:pointer;}}
     }
-
     ul{
       position:absolute; right:0; top:0; margin-right:22px; min-width:80px; padding: 0; display:block;
       @include rounded(3px); @include drop-shadow(-2px, 2px, 5px, 0.2);
@@ -1557,8 +1559,6 @@ $cardfull_h:610px;
       }
       .ie8 &{background:#FFF;}
     }
-
-
     section:hover{
       ul{
         padding: 5px 5px;
@@ -1571,9 +1571,7 @@ $cardfull_h:610px;
 
     }
 
-    // display:none;
   }
-  // &:hover{nav.nav{display:block;}}
 
   div.workflow{
     position:absolute; bottom:0; right:0; z-index:11;
@@ -1603,6 +1601,57 @@ $cardfull_h:610px;
       text-align: center; text-decoration: none;
     }
   }
+
+  // NOTES
+  transition: width 0.3s ease-in-out;
+  &.node-materiau.vm-cardmedium.note-opened,
+  &.node-materiau.vm-cardbig.note-opened{
+
+    >div.side{
+      width:$w;
+    }
+
+    width:$w*2+$cardmargin*2;
+    nav.nav{
+      border-radius: 0 0 0 3px;
+    }
+
+    .note-wrapper{
+      width:$w+$cardmargin*2; height:$h;
+      position :absolute; top:0; right:0;
+      .close{
+        position: absolute;
+        width:15px; height:15px; top:5px; right:5px;
+        // padding: 3px 3px 0 0;
+        // border-radius: 0 7px 0 0;
+        background-color: #fff!important;
+        background-image: url(../img/close2.png);
+        background-size: contain;
+        background-position: center;
+        cursor: pointer;
+      }
+      .form-item{
+        margin:0;
+      }
+      $label_h:20px;
+      label{
+        // display: none;
+        height:$label_h;
+        @include fs14;
+        margin:0 5px;
+        line-height: 1.6;
+      }
+      textarea{
+        border: #ccc 1px solid;
+        border-radius: 0 7px 7px 0;
+        resize:none;
+        padding:5px; margin:5px;
+        height:$h - 10px - $label_h;
+        width:$w+$cardmargin*2 - 10px;
+        @include fs12;
+      }
+    }
+  }
 }// .card()
 
 /*
@@ -1785,7 +1834,6 @@ article.node-materiau.vm-cardmedium, article.node-breve.vm-cardmedium{
   }
 
   .field-name-field-materiau-ref, .field-name-field-source, .field-name-field-attachments{
-
     @include fs12; padding: 5px; @include fs300; a{color:#000;}
   }
   .field-label{@include fs900; margin: 1em 0 0.5em;}
@@ -1795,6 +1843,8 @@ article.node-materiau.vm-cardmedium, article.node-breve.vm-cardmedium{
   .no-touch &:not(.focused) div.workflow{@include op-hidden;}
 
   .ie8 &{nav.nav{background: #FFF}}
+
+
 }
 
 /*
@@ -1808,12 +1858,20 @@ article.node-materiau.vm-cardmedium, article.node-breve.vm-cardmedium{
 article.node-materiau.vm-cardbig, article.node-breve.vm-cardbig{
   @include card($cardbig_w, $cardbig_h); //width:425px; height:610px;
 
-  .side{
-    @include layer(); background-color:#fff; height:270px; top:340px; cursor:pointer;
+  >.side{
+    @include layer();
+    background-color:#fff;
+    height:270px;
+    top:340px; cursor:pointer;
+
     &:nth-child(2){z-index:1;}
+
   }
 
-  .group-side1{position:relative; @include border-radius(5px, 5px, 0, 0); overflow:hidden;}
+  .group-side1{
+    position:relative; @include border-radius(5px, 5px, 0, 0); overflow:hidden;
+    width:$cardbig_w;
+  }
 
   .group-header{
     position:absolute; bottom:0; z-index:2;
@@ -1882,6 +1940,8 @@ article.node-materiau.vm-cardbig, article.node-breve.vm-cardbig{
       border: 2px solid #69CDCF; background-color:#69CDCF;
     }
   }
+
+
 }
 
 /*
@@ -1964,7 +2024,7 @@ article.node-materiau.vm-cardfull, article.node-breve.vm-cardfull{
   .field-label{@include fs900; margin: 0 0 0.5em;}
 
   // nav
-  nav.nav{ margin: 5px; }
+  // nav.nav{ margin: 5px; }
 
   div.workflow{ margin: 5px; }