Update front page with JavaScript function to enlarge infography/stats part :)

Former-commit-id: e767b09bb90f1e3614b3524e8503f0cf4fb67bbf

ippisite/ippidb/static/css/ippidb.css

@@ -630,11 +630,58 @@ display:block;
     font-family: "BrandonGrotesqueBld";
 }
 
-.main-info {
+.box {
     margin-top: 50px;
+    position: relative;
+    min-height: 500px;
+}
+
+.box__inner {
+    position: absolute;
+    min-width: 49%;
+    min-height: 49%;
+    text-align:center;
+    background-color:white;
+    transition:all .1s ease;
+}
+
+.box__inner h2 {
+    font-family: "BrandonGrotesqueBld";
+    font-size: 20px;
+    padding: 10px;
+}
+
+.box__inner.left {
+    left:0;
+    border: 1px solid #E8E0E0;
+    margin-right: 5px;
+}
+
+.box__inner.right {
+    right:0;
+    margin-right: 5px;
+}
+
+.box__inner.top {
+    top:0;
+    border: 1px solid #E8E0E0;
+    margin-bottom: 5px;
+}
+
+.box__inner.bottom {
+    bottom:0;
+    border: 1px solid #E8E0E0;
+    margin-top: 5px;
 }
 
-.left-top-info {
+.box__inner.box--active {
+    min-width:100%;
+    min-height:100%;
+    z-index:1;
+}
+
+
+/*.left-top-info {
     border: 1px solid #E8E0E0;
     width: 49%;
     position: relative;
@@ -677,6 +724,37 @@ display:block;
     margin-top: 5px;
     margin-left: 5px;
     height: 300px;
+}*/
+
+/*   READ MORE   */
+.read_more {
+    position: absolute;
+    bottom: 20px;
+    right:20px;
+}
+
+
+.read_more a {
+    font-family: "BrandonGrotesqueBlk";
+    color: #2D96FA;
+    font-size: 13px;
+    text-transform: uppercase;
+    padding-right: 6px;
+    text-decoration: none;
+}
+
+.read_more a::before{
+    content: "";
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 10px;
+    margin-top: -8px;
+    background-image: url("/static/images/Other/sprites.png");
+    background-position: -186px -164px;
+    width: 22px;
+    height: 8px;
+    text-decoration: none;
+
 }
 
 

ippisite/ippidb/static/js/ippidb.js

@@ -32,4 +32,13 @@ $("select").change(function(){
         }
     });
 }).change();
+});
+
+$(document).ready(function(){
+    $('.box').on('click','.box__inner',function() {
+      $(this).closest('.box').find('.box--active').removeClass('box--active');
+      $(this).addClass('box--active');
+    }).on('click','.box--active',function() {
+      $(this).removeClass('box--active');
+    })
 });
\ No newline at end of file

ippisite/ippidb/templates/index.html

@@ -40,22 +40,34 @@
 										<div class="block block-system block-system-main">
 											<div class="content">
 												<div class="main-content">
-													<div class="main-info">
-														<div class="left-top-info">
-															<a href="/about/general"> Infography summary
-															</a>
+													<div class="box">
+														<div class="box__inner left top">
+															<h2>Infography summary</h2>
+															<div class="read_more">
+																<a href="/about/general">Read more
+																</a>
+															</div>
 														</div>
-														<div class="right-top-info"> 
-															<a href="/about/pharmacology">Infography pharmacology
-															</a>
+														<div class="box__inner right top"> 
+															<h2>Infography Pharmacology</h2>
+															<div class="read_more">
+																<a href="/about/pharmacology">Read more
+																</a>
+															</div>
 														</div>
-														<div class="left-bottom-info"> 
-															<a href="/about/physicochemistry">Infography Physicochemistry
-															</a>
+														<div class="box__inner left bottom"> 
+															<h2>Infography Physicochemistry</h2>
+															<div class="read_more">
+																<a href="/about/physicochemistry">Read more
+																</a>
+															</div>
 														</div>
-														<div class="right-bottom-info"> 
-															<a href="/about/drug-candidate">Infography Drug Candidate
-															</a>
+														<div class="box__inner right bottom"> 
+															<h2>Infography Drug Candidate</h2>
+															<div class="read_more">
+																<a href="/about/drug-candidate">Read more
+																</a>
+															</div>
 														</div>
 													</div>
 												</div>