ui updates

4 files changed, 27 insertions, 36 deletions

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 95c7476..b6cc570 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -7,11 +7,11 @@
         {{- block "main" . }}{{- end }}
         </div>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-        <script src="/js/grid.js?v=0.1.9"></script>
+        <script src="/js/grid.js?v=0.3.3"></script>
         <script>
             $(function() {
                 Grid.init();
             });
         </script>
     </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index cb708f5..4d7efdd 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -9,7 +9,7 @@
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 
-    <link rel="stylesheet" type="text/css" href="/css/main.css?v=1.2.9" />
+    <link rel="stylesheet" type="text/css" href="/css/main.css?v=1.3.2" />
     <link rel="stylesheet" type="text/css" href="/css/component.css?v=0.0.9" />
 
 	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
diff --git a/static/css/component.css b/static/css/component.css
index 7037215..cdc7a94 100644
--- a/static/css/component.css
+++ b/static/css/component.css
@@ -40,7 +40,7 @@
 
 .og-expander {
 	position: absolute;
-	background: #ddd;
+	background: white;
 	top: auto;
 	left: 0;
 	width: 100%;
@@ -139,7 +139,7 @@
 }
 
 .og-details a::before {
-	content: '\2192';
+	/*content: '\2192';*/
 	display: inline-block;
 	margin-right: 10px;
 }
@@ -153,7 +153,7 @@
 	width: 20px;
 	height: 20px;
 	border-radius: 50%;
-	background: #ddd;
+	background: #f8f9fa;
 	box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
 	position: absolute;
 	top: 50%;
@@ -165,21 +165,21 @@
 }
 
 @-webkit-keyframes loader {
-	0% { background: #ddd; }
-	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
-	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
+	0% { background: #f8f9fa; }
+	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #f8f9fa; }
+	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #f8f9fa, -15px 30px 1px #ccc; }
 }
 
 @-moz-keyframes loader {
-	0% { background: #ddd; }
-	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
-	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
+	0% { background: #f8f9fa; }
+	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #f8f9fa; }
+	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #f8f9fa, -15px 30px 1px #ccc; }
 }
 
 @keyframes loader {
-	0% { background: #ddd; }
-	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
-	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
+	0% { background: #f8f9fa; }
+	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #f8f9fa; }
+	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #f8f9fa, -15px 30px 1px #ccc; }
 }
 
 @media screen and (max-width: 830px) {
diff --git a/static/js/grid.js b/static/js/grid.js
index 9e0f1b8..3fda246 100644
--- a/static/js/grid.js
+++ b/static/js/grid.js
@@ -184,7 +184,7 @@ var Grid = (function() {
         support = Modernizr.csstransitions,
         settings = {
             minHeight : 500,
-            speed : 350,
+            speed : 250,
             easing : 'ease'
         };
 
@@ -425,26 +425,17 @@ var Grid = (function() {
             }
         },
         positionPreview : function() {
-            // var position = this.$item.data('offsetTop'),
-            //     previewOffsetTop = this.$previewElement.offset().top - scrollExtra,
-            //     scrollValue = this.height + this.$item.data('height');
-            //
-            //     if (marginExpanded <= winSize.height) {
-            //         scrollValue += position;
-            //     } else if (this.height < winSize.height) {
-            //         scrollValue += previewOffsetTop - (winSize.height - this.height)
-            //     } else {
-            //         scrollValue += previewOffsetTop;
-            //     }
-
-            // scroll page
-            // case 1 : preview height + item height fits in window´s height
-            // case 2 : preview height + item height does not fit in window´s height and preview height is smaller than window´s height
-            // case 3 : preview height + item height does not fit in window´s height and preview height is bigger than window´s height
-            var position = this.$item.data( 'offsetTop' ),
-                previewOffsetT = this.$previewElement.offset().top - scrollExtra,
-                scrollValue = this.height + this.$item.data( 'height' ) + marginExpanded <= winSize.height ? position : this.height < winSize.height ? previewOffsetT - ( winSize.height - this.height ) : previewOffsetT;
-
+            var position = this.$item.data('offsetTop'),
+                previewOffsetTop = this.$previewElement.offset().top - scrollExtra,
+                scrollValue = this.height + this.$item.data('height');
+
+                if (marginExpanded <= winSize.height) {
+                    scrollValue = position;
+                } else if (this.height < winSize.height) {
+                    scrollValue = previewOffsetTop - (winSize.height - this.height)
+                } else {
+                    scrollValue = previewOffsetTop;
+                }
 
             $body.animate({scrollTop : scrollValue}, settings.speed);
         },