FORMS-732 : Improve BO multiview to show all history in detailed view

webapp/css/admin/plugins/forms/forms.css

@@ -51,22 +51,24 @@ body, .wrapper{ height: 100%; overflow: visible; }
 .timeline-form > li:before {content: ' ';background: white;display: inline-block; position: absolute; border-radius: 50%; border: 3px solid #22c0e8; left: 20px; width: 20px; height: 20px; z-index: 400;}
 
 /* Multiview - Aside - Scroll 													*/
-#scroll { position:fixed; right:60px; bottom: 60px; cursor:pointer; width:50px; height:50px; background-color:#1d98f6; text-indent:-9999px; display:none; -webkit-border-radius:60px;-moz-border-radius:60px; border-radius:60px}
+#scroll { position: fixed; right:60px; bottom: 60px; cursor:pointer; width:50px; height:50px; background-color:#1d98f6; text-indent:-9999px; display:none; -webkit-border-radius:60px;-moz-border-radius:60px; border-radius:60px}
 #scroll span { position:absolute; top:50%;left:50%; margin-left:-8px;margin-top:-12px; height:0; width:0; border:8px solid transparent; border-bottom-color:#fff; }
 #scroll:hover { background-color:#e74c3c; opacity:1;filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)" }
 
 /* Multiview - TOC  															*/
-#response-right{ position: fixed; top: 72px; width:23%; overflow-y: auto; height: 100vh }
+#response-right{ position: fixed; top: 70px; width: 25vw; overflow-y: auto; height: 90vh; padding-bottom: 10vh; }
 #response-right h2{ font-size: 140%; color:#1d98f6; border-bottom: 1px solid #555 }
-#response-right .img-action{ position: absolute; left: 20px; width:24px }
+#response-right .img-action{ position: absolute; left: 16px; width: 16px }
 
 /* Multiview - Step TOC  														*/
-#toc-box{ position: fixed; top: 72px; left: 15px; overflow-y: auto; height: 100vh; width:16%; } 
-#toc-compress-toggle{  position: absolute; top: 5px; right: 0;}
-#toc-expand-toggle{  position: fixed; z-index: 99; top: 80px; left: 0; padding: 5px 2px; border: 1px solid #DDD; border-left: 0;  border-bottom-right-radius: 3px; border-top-right-radius: 3px;}
+#toc-box{ position: fixed; top: 70px; left: 15px; overflow-y: auto; height: auto; width: 15vw; } 
+#toc-box .card-header{ padding: .55rem } 
+#toc-box .card-body{ padding: 0 } 
+#toc-compress-toggle{ position: absolute; top: 10px; right: 10px; }
+#toc-expand-toggle{ position: fixed; z-index: 99; top: 80px; left: 0; padding: 5px 2px; border: 1px solid #DDD; border-left: 0; border-bottom-right-radius: 3px; border-top-right-radius: 3px; }
 #toc-expand-toggle:hover{ cursor: pointer; }
 
-#step-toc{ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none;  /* Firefox */; height: 75vh; padding: 0 5px; position: relative; overflow-y: scroll;   }
+#step-toc{ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none;  /* Firefox */; height: 75vh; padding: 0 5px; position: relative; overflow-y: scroll; }
 #step-toc::-webkit-scrollbar {	display: none;  }
 #step-toc .nav-pills{  position: absolute; top: 10px; left: 0; padding: 5px; height: auto; z-index: 1000 }
 #step-toc .nav-pills:hover{ cursor: pointer; outline: 1px dotted #000 }