From 0ea0c7f5d04fa9ee6c073a9255ce608e755c899b Mon Sep 17 00:00:00 2001
From: Ivan Smolin <ivan.smolin@touchin.ru>
Date: Tue, 17 Oct 2017 22:19:59 +0300
Subject: [PATCH] add splitter and fix UI bugs

---
 Web-documentation/blocks/scripts.html.twig  |   1 +
 Web-documentation/css/main.css              |  57 +++++++++++++++-----
 Web-documentation/images/vertical-split.png | Bin 0 -> 91 bytes
 Web-documentation/js/main.js                |   5 ++
 4 files changed, 50 insertions(+), 13 deletions(-)
 create mode 100755 Web-documentation/images/vertical-split.png

diff --git a/Web-documentation/blocks/scripts.html.twig b/Web-documentation/blocks/scripts.html.twig
index cea75c5..b0a8a94 100644
--- a/Web-documentation/blocks/scripts.html.twig
+++ b/Web-documentation/blocks/scripts.html.twig
@@ -1,3 +1,4 @@
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
+<script src="https://unpkg.com/split.js/split.min.js"></script>
 <script type="text/javascript" src="{{ jsFolderPath }}/main.js?v=1.02"></script>
 <script type="text/javascript" src="{{ jsFolderPath }}/searchItems.js?v=1.00"></script>
\ No newline at end of file
diff --git a/Web-documentation/css/main.css b/Web-documentation/css/main.css
index 341d469..029ad0b 100755
--- a/Web-documentation/css/main.css
+++ b/Web-documentation/css/main.css
@@ -21,6 +21,17 @@ body {
     font-weight: 400;
 }
 
+.main-page {
+    display: flex;
+}
+.gutter {
+    cursor: col-resize;
+    background-image: url("../images/vertical-split.png");
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: 50%;
+}
+
 .aside {
     display: inline-block;
     vertical-align: top;
@@ -39,7 +50,7 @@ body {
 }
 
 .aside-left {
-    width: 38.85rem;
+    min-width: 300px;
 }
 
 .aside-left .header {
@@ -138,7 +149,6 @@ body {
 
 .aside-left .content {
     background-color: #222933;
-    border-right: 1px solid #888d94;
 }
 
 menu li {
@@ -161,7 +171,7 @@ menu li {
     font-size: 1.57rem;
     color: #BEBFC1;
     text-decoration: none;
-    transition: line-height .3s ease-out 0s;
+    transition: color .25s, background .25s linear;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -169,10 +179,9 @@ menu li {
 
 .aside-left menu.main>li a:hover,
 .aside-left menu.main>li.active a {
-    line-height: 5.28rem;
     background-color: #222933;
     padding-left: 3.14rem;
-    border-left: 6px solid #0ca9e6;
+    border-left: 0.43rem solid #0ca9e6;
     color: white
 }
 
@@ -183,7 +192,7 @@ menu li {
 .aside-left menu.secondary {
     list-style: none;
     margin: 0;
-    padding: 3.57rem 0 0 6.28rem;
+    padding: 3.57rem 0 3.57rem 6.28rem;
 }
 
 .aside-left menu.secondary li a {
@@ -217,9 +226,10 @@ menu li {
     display: none;
     list-style: none;
     margin: 6px 0;
-    padding-left: 1.57rem;
+    padding: 0 3.75rem 0 1.57rem;
     border-left: 1px solid #fff;
-    width: 205px;
+    min-width: 205px;
+    width: auto;
 }
 
 .aside-left menu.child>li>a {
@@ -260,7 +270,7 @@ menu li {
     background-color: white;
     min-height: calc(100vh - 9rem);
     border: 1px solid #e9ebee;
-    padding: 5.28rem 14rem 5.28rem 6.14rem;
+    padding: 5.28rem;
 }
 
 .page-data h2 {
@@ -281,17 +291,38 @@ menu li {
     margin: 0.85rem 0 0;
 }
 
-.page-data a.info {
-    color: #0ca9e6;
+.page-data p.sub-header {
+}
+
+.page-data a {
+    color: #000000;
     cursor: pointer;
     text-decoration: none;
 }
 
-.page-data a.info:hover {
+.page-data a:hover {
     text-decoration: underline;
 }
 
-.page-data p.sub-header {
+.page-data a.info,
+.page-data li a {
+    color: #0ca9e6;
+}
+
+.page-data h3 {
+    font-size: 1.75rem;
+    margin: 1.2rem 0;
+    line-height: 2rem;
+    font-weight: 500;
+}
+
+.page-data li {
+    list-style: none;
+    font-size: 1.57rem;
+    color: #838890;
+    line-height: 2.2rem;
+    margin: 0.85rem 0 0;
+    padding-left: 1.5rem;
 }
 
 .table--small.table {
diff --git a/Web-documentation/images/vertical-split.png b/Web-documentation/images/vertical-split.png
new file mode 100755
index 0000000000000000000000000000000000000000..0ac8fa1e03fd46c25f1b22ad9eac95b825edbf91
GIT binary patch
literal 91
zcmeAS@N?(olHy`uVBq!ia0vp^tUxTs!3HFs)Lq#Nq?9~e978mMlP!v$ov9aKV`7t-
p&A3{jqq%P*ci$|_EVVde#<~+X&uyMGX&+EEgQu&X%Q~loCIHDl8R-B3

literal 0
HcmV?d00001

diff --git a/Web-documentation/js/main.js b/Web-documentation/js/main.js
index b499a22..b794b5c 100644
--- a/Web-documentation/js/main.js
+++ b/Web-documentation/js/main.js
@@ -1,6 +1,11 @@
 $(function () {
     $(document).ready(function () {
 
+        window.Split(['.aside-left', '.aside-right'], {
+            sizes: [30, 70],
+            minSize: [200, 769]
+        })
+
         $('.part-example-response .text-response').css('height', $('.inputs').height() - 21);
 
         $(document).on('click', 'menu li', function (e) {