From 98c069905d253265bd96db8aed4c1e6b84e7a285 Mon Sep 17 00:00:00 2001
From: sivashanmugam-kannan <sivashanmugam.kannan@funtoot.com>
Date: Thu, 9 Aug 2018 18:39:54 +0530
Subject: [PATCH 1/3] on drag image coming out got fixed

---
 renderer/js/mtftemplate.js |  8 +--
 renderer/styles/style.css  | 99 +++++++++++++++++++++++++++++++++++---
 2 files changed, 96 insertions(+), 11 deletions(-)

diff --git a/renderer/js/mtftemplate.js b/renderer/js/mtftemplate.js
index 6f32ecf..6c63c51 100644
--- a/renderer/js/mtftemplate.js
+++ b/renderer/js/mtftemplate.js
@@ -87,11 +87,11 @@ MTFController.getHorizontalLayout = function () {
         <div class='mtf-hori-ques-option'>\
           <div class='mtf-hori-ques-text'>\
             <div class='mtf-hori-ques-text-inner cont-dragula' id='right<%= (key+1) %>' mapIndex='<%= val.mapIndex %>'><% if(MTFController.selAns[key].selText < 1){ %>\
-              <p <% if(val.image) { %>  class='v-align-bottom' <% } else { %> class='v-align-middle' <% } %> onclick='MTFController.showImageModel(event, \"<%= val.image %>\")' >\
+              <p <% if(val.image) { %>  class='v-align-bottom mtf-hori-drag-item' <% } else { %> class='v-align-middle mtf-hori-drag-item' <% } %> onclick='MTFController.showImageModel(event, \"<%= val.image %>\")' >\
               <% if(val.image){ %> \
                 <span class='inner-image' >\
                   <span>\
-                    <img src='<%= val.image %>' /> \
+                    <img class='mtf-horizontal-drag-image' src='<%= val.image %>' /> \
                   </span>\
                 </span> \
                 <% } %> \
@@ -160,11 +160,11 @@ MTFController.getVerticalLayout = function () {
         <div class='mtf-vert-ques-option'>\
           <div class='mtf-vert-ques-text'>\
             <div class='mtf-vert-ques-text-inner cont-dragula' id='right<%= (key+1) %>' mapIndex='<%= val.mapIndex %>'><% if(MTFController.selAns[key].selText < 1){ %>\
-              <p <% if(val.image) { %>  class='v-align-bottom' <% } else { %> class='v-align-middle' <% } %> onclick='MTFController.showImageModel(event, \"<%= val.image %>\")' >\
+              <p  <% if(val.image) { %>  class='mtf-vert-drag-item v-align-bottom' <% } else { %> class='mtf-vert-drag-item v-align-middle' <% } %> onclick='MTFController.showImageModel(event, \"<%= val.image %>\")' >\
               <% if(val.image){ %> \
                 <span class='inner-image' >\
                   <span>\
-                    <img src='<%= val.image %>' /> \
+                    <img class='mtf-vertical-drag-image <%= MTFController.optionsHeight %>' src='<%= val.image %>' /> \
                   </span>\
                 </span> \
                 <% } %> \
diff --git a/renderer/styles/style.css b/renderer/styles/style.css
index d7ffbe0..d2d9c0b 100644
--- a/renderer/styles/style.css
+++ b/renderer/styles/style.css
@@ -85,6 +85,14 @@ header.mtf-header {
     word-break: break-word;
 }
 
+.mtf-hori-drag-item{
+    display:table-cell;
+    position: relative;
+    text-align: center;
+    width:100%;
+    height: 100%;
+}
+
 .mtf-hori-ques-text-inner p {
     display:table-cell;
     position: relative;
@@ -93,6 +101,15 @@ header.mtf-header {
     height: 100%;
 }
 
+.mtf-hori-drag-item .inner-image{
+    top:0;  
+    left:0;
+    position: absolute;
+    width: 100%;
+    height: 18vh;
+    margin:auto;
+}
+
 .mtf-hori-ques-text-inner p .inner-image{
     top:0;  
     left:0;
@@ -102,6 +119,13 @@ header.mtf-header {
     margin:auto;
 }
 
+.mtf-hori-drag-item .inner-image span{
+    display:table;
+    text-align:center;
+    width:100%;
+    height:100%;
+}
+
 .mtf-hori-ques-text-inner p .inner-image span{
     display:table;
     text-align:center;
@@ -109,6 +133,14 @@ header.mtf-header {
     height:100%;
 }
 
+.mtf-hori-drag-item p .inner-image span img{
+    display:table-cell;
+    height:auto;
+    max-height:23vh;
+    max-width:100%;
+    margin:auto;
+}
+
 .mtf-hori-ques-text-inner p .inner-image span img{
     display:table-cell;
     height:auto;
@@ -117,6 +149,14 @@ header.mtf-header {
     margin:auto;
 }
 
+.mtf-horizontal-drag-image{
+    display:table-cell;
+    height:auto;
+    max-height:23vh;
+    max-width:100%;
+    margin:auto;
+}
+
 [ng-drag].dragging {
     position: absolute;
     height: 18vh;
@@ -277,16 +317,16 @@ header.mtf-header {
     height: 17.7vh;
     overflow: hidden;
     text-overflow: ellipsis;
-    /* -webkit-line-clamp: 2; */
-    line-height: 1.8;
-    /* -webkit-box-orient: vertical;
-  display: -webkit-inline-box;       */
+    -webkit-line-clamp: 2;
+    line-height: 1.6;
+    -webkit-box-orient: vertical;
+  display: -webkit-inline-box;      
 }
 
 .qc-expand-ques-text {
     float: left;
     text-overflow: ellipsis;
-    line-height: 1.8;
+    line-height: 1.6;
     -webkit-box-orient: vertical;
     display: -webkit-inline-box;
 }
@@ -344,6 +384,14 @@ header.mtf-header {
     word-break: break-word;
 }
 
+.mtf-vert-drag-item{
+    position: absolute;
+    display:table-cell;
+    text-align: center;
+    height: 100%;
+    width: 100%;
+}
+
 .mtf-vert-ques-text-inner p {
     position: absolute;
     display:table-cell;
@@ -352,6 +400,15 @@ header.mtf-header {
     width: 100%;
 }
 
+.mtf-vert-drag-item .inner-image{
+    position: absolute;
+    top:0;
+    left:0;
+    margin:auto;
+    width:100%;
+    height:100%;
+}
+
 .mtf-vert-ques-text-inner p .inner-image{
     position: absolute;
     top:0;
@@ -361,6 +418,13 @@ header.mtf-header {
     height:100%;
 }
 
+.mtf-vert-drag-item .inner-image span{
+    display:table;
+    text-align:center;
+    width:100%;
+    height:100%;
+}
+
 .mtf-vert-ques-text-inner p .inner-image span{
     display:table;
     text-align:center;
@@ -368,6 +432,13 @@ header.mtf-header {
     height:100%;
 }
 
+.mtf-vert-drag-item .inner-image span img{
+    display:table-cell;
+    height:100%;
+    max-width:100%;
+    margin:auto;
+}
+
 .mtf-vert-ques-text-inner p .inner-image span img{
     display:table-cell;
     height:100%;
@@ -375,14 +446,28 @@ header.mtf-header {
     margin:auto;
 }
 
+.mtf-vertical-drag-image{
+    display:table-cell;
+    height:100%;
+    max-width:100%;
+    margin:auto;
+}
+
+.height3option.mtf-vertical-drag-image{
+    height:18.2vh;
+}
 .height3option .mtf-vert-ques-text-inner p .inner-image span img{
     height:18.2vh;
 }
-
+.height4option.mtf-vertical-drag-image{
+    height:14.8vh;
+}
 .height4option .mtf-vert-ques-text-inner p .inner-image span img{
     height:14.8vh;
 }
-
+.height5option.mtf-vertical-drag-image{
+    height:10vh;
+}
 .height5option .mtf-vert-ques-text-inner p .inner-image span img{
     height:10vh;
 }

From c87ac60e6b2f00bbdb882e60c6f28e7fa603c3e1 Mon Sep 17 00:00:00 2001
From: sivashanmugam-kannan <sivashanmugam.kannan@funtoot.com>
Date: Tue, 28 Aug 2018 10:12:54 +0530
Subject: [PATCH 2/3] mtf removal of background code

---
 renderer/js/mtftemplate.js | 2 --
 renderer/styles/style.css  | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/renderer/js/mtftemplate.js b/renderer/js/mtftemplate.js
index 339bb06..9e92168 100644
--- a/renderer/js/mtftemplate.js
+++ b/renderer/js/mtftemplate.js
@@ -12,8 +12,6 @@ MTFController.constant = {
  */
 MTFController.initTemplate = function (pluginInstance) {
   MTFController.pluginInstance = pluginInstance;
-  MTFController.constant.bgColor = MTFController.constant.bgColors[_.random(0, MTFController.constant.bgColors.length - 1)];
-  MTFController.bgLeftCircleTop = _.random(-6, 6) * 10;
 };
 
 
diff --git a/renderer/styles/style.css b/renderer/styles/style.css
index e4c1ffa..7f61b83 100644
--- a/renderer/styles/style.css
+++ b/renderer/styles/style.css
@@ -2,6 +2,7 @@
     width:100%;
     height:100%;
     overflow: hidden;
+    font-weight: 500;
 }
 .mtf-container .mtf-content-container{
     padding:0 10%;
@@ -158,7 +159,6 @@
     display: flex;
     align-items: center;
     font-size: 8.64vh;
-    font-weight: 500;
   }
 
 .mtf-container .mtf-content-container .mtf-options-container .mtf-options-vertical-container .lhs-rhs-container .lhs-rhs-block img.audio-image{

From de75109df9374ffb45bdf86fe44b4076836a756a Mon Sep 17 00:00:00 2001
From: sivashanmugam-kannan <sivashanmugam.kannan@funtoot.com>
Date: Tue, 28 Aug 2018 10:25:03 +0530
Subject: [PATCH 3/3] removed bg colors

---
 renderer/js/mtftemplate.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/renderer/js/mtftemplate.js b/renderer/js/mtftemplate.js
index 9e92168..e36b171 100644
--- a/renderer/js/mtftemplate.js
+++ b/renderer/js/mtftemplate.js
@@ -1,9 +1,7 @@
 var MTFController = MTFController || {};
 
 MTFController.constant = {
-  qsMTFElement: ".mtf-container",
-  bgColors: ["#5DC4F5", "#FF7474", "#F9A817", "#48DCB6", "#5B6066"],
-  bgColor: "#5DC4F5"
+  qsMTFElement: ".mtf-container"
 };
 
 /**