Triaging some bugs, adding homepage animation stops when out of view

10 years ago · 6c7f3b8ce6
5 changed files with 414 additions and 45 deletions
--- a/server/documents/hotfix.html.eco
+++ b/server/documents/hotfix.html.eco
@ -10,42 +10,30 @@ type   : 'Library'
 <!-- TEST JS HERE !-->
 <script>
 $(document).ready(function() {
-  $('.button')
-      .popup({
-          on: 'click',
-          inline: true,
-          preserve: true
-      })
-  ;
+
+
+$.fn.modal.settings.debug = true;
+var $m = $('#modal');
+$m.modal({duration: 3000}).modal('show')
+setTimeout(function(){
+    $m.modal('hide');
+}, 1500);
+
+
 });
 </script>

 <!-- TEST CSS HERE !-->
 <style type="text/css">
-.wide.popup {
-  max-width: 500px;
-  padding: 0em;
-}
 </style>

-
 <div class="main container">

-<h3>ui grid works ok</h3>
-<div class="ui grid">
-    <div class="eight wide computer only column">computer only</div>
-    <div class="eight wide tablet only column">tablet only</div>
-    <div class="eight wide mobile only column">mobile only</div>
-    <div class="eight wide column">all</div>
-</div>
-<h3>should ui stackable grid override the "x only" grid column styles?</h3>
-<div class="ui stackable grid">
-    <div class="eight wide computer only column">computer only</div>
-    <div class="eight wide tablet only column">tablet only</div>
-    <div class="eight wide mobile only column">mobile only</div>
-    <div class="eight wide column">all</div>
+<div class="ui modal" id="modal">
+    hey
 </div>


 </div>
+
 </body>
--- a/server/files/javascript/home.js
+++ b/server/files/javascript/home.js
@ -13,6 +13,11 @@ semantic.home.ready = function() {
  ;

  handler = {
+    endAnimation: function() {
+      $header
+        .addClass('stopped')
+      ;
+    },
    introduction: function() {
      // zoom out
      setTimeout(function() {
@ -20,6 +25,12 @@ semantic.home.ready = function() {
          .removeClass('zoomed')
        ;
      }, 1500);
+
+     /* setTimeout(function() {
+        $header
+          .addClass('colored')
+        ;
+      }, 10000);*/
      $ui.typed({
        replaceBaseText : true,
        strings         : [
@ -39,7 +50,8 @@ semantic.home.ready = function() {

  $('.masthead')
    .visibility({
-      onPassing: handler.introduction
+      onPassing      : handler.introduction,
+      onBottomPassed : handler.endAnimation
    })
  ;

@ -72,7 +84,7 @@ semantic.home.ready = function() {
    .checkbox()
  ;
  $('.ui.sidebar')
-    .sidebar('setting', 'transition', 'scale down')
+    .sidebar('setting', 'transition', 'slide along')
  ;

 };
--- a/server/files/javascript/library/less.js
+++ b/server/files/javascript/library/less.js
--- a/server/files/stylesheets/home.css
+++ b/server/files/stylesheets/home.css
@ -30,12 +30,53 @@
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;

+  -ms-transition: background-color 3s ease-in-out 2s;
+  -moz-transition: background-color 3s ease-in-out 2s;
+  -webkit-transition: background-color 3s ease-in-out 2s;
+  transition: background-color 3s ease-in-out 2s;
+
+  background-color: #00B5AD;
+  background-image: radial-gradient(farthest-corner, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.95));
+
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  -ms-perspective: 1000px;
  perspective: 1000px;
 }
+#example.index .masthead.colored {
+  -webkit-animation-name: colors;
+  -moz-animation-name: colors;
+  -o-animation-name: colors;
+  animation-name: colors;
+
+  -webkit-animation-delay: 0s;
+  -moz-animation-delay: 0s;
+  -ms-animation-delay: 0s;
+  -o-animation-delay: 0s;
+  animation-delay: 0s;
+
+  -webkit-animation-duration: 120s;
+  -moz-animation-duration: 120s;
+  -ms-animation-duration: 120s;
+  -o-animation-duration: 120s;
+  animation-duration: 120s;
+
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  -ms-animation-fill-mode: both;
+  -o-animation-fill-mode: both;
+  animation-fill-mode: both;
+
+  animation-timing-function: linear;
+  -webkit-animation-timing-function: linear;
+
+  -webkit-animation-iteration-count: infinite;
+  -moz-animation-iteration-count: infinite;
+  -ms-animation-iteration-count: infinite;
+  -o-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
 #example.index .masthead:before {
  position: absolute;
  z-index: 1;
@ -152,14 +193,8 @@
  -moz-transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(-2%) translateZ(300px);
  transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(-2%) translateZ(300px);
 }
-#example.index .masthead {
-  -ms-transition: background-color 3s ease-in-out 2s;
-  -moz-transition: background-color 3s ease-in-out 2s;
-  -webkit-transition: background-color 3s ease-in-out 2s;
-  transition: background-color 3s ease-in-out 2s;
-  background-color: #00B5AD;
-  background-image: radial-gradient(farthest-corner, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.95));
-}
+
+/* Zoomed Out */
 #example.index .masthead.zoomed {
  background-color: #444444;
 }
@ -181,7 +216,7 @@
    background-position: 0% 0%;
 }
 100% {
-    background-position: 0% -400px;
+    background-position: 0% -475px;
 }

 }
@ -191,7 +226,7 @@
   background-position: 0% 0%;
 }
 100% {
-   background-position: 0% -400px;
+   background-position: 0% -475px;
 }

 }
@ -201,7 +236,7 @@
   background-position: 0% 0%;
 }
 100% {
-   background-position: 0% -400px;
+   background-position: 0% -475px;
 }

 }
@ -211,7 +246,7 @@
   background-position: 0% 0%;
 }
 100% {
- background-position: 0% -400px;
+  background-position: 0% -475px;
 }
 }

@ -220,12 +255,170 @@
   background-position: 0% 0%;
 }
 100% {
-   background-position: 0% -400px;
+   background-position: 0% -475px;
 }

 }


+@keyframes colors {
+  0% {
+    background-color: #00B5AD;
+  }
+  12% {
+    background-color: #3B83C0;
+  }
+  25% {
+    background-color: #E07B53;
+  }
+  37% {
+    background-color: #D9499A;
+  }
+  50% {
+    background-color: #564F8A;
+  }
+  62% {
+    background-color: #F2C61F;
+  }
+  75% {
+    background-color: #D95C5C;
+  }
+  87% {
+    background-color: #5BBD72;
+  }
+  100% {
+    background-color: #F2C61F;
+  }
+}
+
+@-moz-keyframes colors {
+  0% {
+    background-color: #00B5AD;
+  }
+  12% {
+    background-color: #3B83C0;
+  }
+  25% {
+    background-color: #E07B53;
+  }
+  37% {
+    background-color: #D9499A;
+  }
+  50% {
+    background-color: #564F8A;
+  }
+  62% {
+    background-color: #F2C61F;
+  }
+  75% {
+    background-color: #D95C5C;
+  }
+  87% {
+    background-color: #5BBD72;
+  }
+  100% {
+    background-color: #F2C61F;
+  }
+}
+
+@-webkit-keyframes colors {
+  0% {
+    background-color: #00B5AD;
+  }
+  12% {
+    background-color: #3B83C0;
+  }
+  25% {
+    background-color: #E07B53;
+  }
+  37% {
+    background-color: #D9499A;
+  }
+  50% {
+    background-color: #564F8A;
+  }
+  62% {
+    background-color: #F2C61F;
+  }
+  75% {
+    background-color: #D95C5C;
+  }
+  87% {
+    background-color: #5BBD72;
+  }
+  100% {
+    background-color: #F2C61F;
+  }
+}
+
+@-ms-keyframes colors {
+  0% {
+    background-color: #00B5AD;
+  }
+  12% {
+    background-color: #3B83C0;
+  }
+  25% {
+    background-color: #E07B53;
+  }
+  37% {
+    background-color: #D9499A;
+  }
+  50% {
+    background-color: #564F8A;
+  }
+  62% {
+    background-color: #F2C61F;
+  }
+  75% {
+    background-color: #D95C5C;
+  }
+  87% {
+    background-color: #5BBD72;
+  }
+  100% {
+    background-color: #F2C61F;
+  }
+}
+@-o-keyframes colors {
+  0% {
+    background-color: #00B5AD;
+  }
+  12% {
+    background-color: #3B83C0;
+  }
+  25% {
+    background-color: #E07B53;
+  }
+  37% {
+    background-color: #D9499A;
+  }
+  50% {
+    background-color: #564F8A;
+  }
+  62% {
+    background-color: #F2C61F;
+  }
+  75% {
+    background-color: #D95C5C;
+  }
+  87% {
+    background-color: #5BBD72;
+  }
+  100% {
+    background-color: #F2C61F;
+  }
+}
+
+
+#example.index .masthead.stopped:after {
+  -webkit-animation-name: none;
+  -moz-animation-name: none;
+  -o-animation-name: none;
+  animation-name: none;
+}
+
+
 #example.index .masthead.segment .typed-cursor {
  position: relative;
  top: -0.05em;
@ -553,10 +746,18 @@
  }
 }

+@media only screen and (max-width : 600px) {
+  #example.index .fixed.launch.button {
+    display: none;
+  }
+}
@media only screen and (min-width : 600px) {
  #example.index .main.menu {
    display: none;
  }
+  #example.index .fixed.launch.button {
+    display: block;
+  }
 }


--- a/server/layouts/basic.html.eco
+++ b/server/layouts/basic.html.eco
@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+  <!-- Standard Meta -->
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+
+  <link rel="image_src" type="image/jpeg" href="images/share.png" />
+
+  <!-- Site Properities -->
+  <%- @getBlock('meta').toHTML() %>
+  <title><%= @getPreparedTitle() %></title>
+
+  <meta name="description" content="<%= @getPreparedDescription() %>" />
+  <meta name="keywords" content="<%= @getPreparedKeywords() %>" />
+
+  <% if 'development' in @getEnvironments(): %>
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/globals/reset.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/globals/site.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/icon.css">
+
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/button.css">
+
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/divider.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/flag.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/header.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/image.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/input.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/label.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/list.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/loader.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/rail.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/reveal.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/segment.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/step.css">
+
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/collections/breadcrumb.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/collections/form.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/collections/grid.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/collections/menu.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/collections/message.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/collections/table.css">
+
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/views/card.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/views/comment.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/views/feed.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/views/item.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/views/statistic.css">
+
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/modal.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/accordion.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/dropdown.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/nag.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/popup.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/progress.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/rating.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/sidebar.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/search.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/shape.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/sticky.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/tab.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/checkbox.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/dimmer.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/transition.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/video.css">
+  <% else: %>
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/packaged/definitions/css/semantic.min.css">
+  <% end %>
+
+  <!-- <link rel="stylesheet/less" type="text/css" href="/build/less/definitions/site.less" /> -->
+  <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,700italic' rel='stylesheet' type='text/css'>
+
+  <link rel="stylesheet" type="text/css" href="/stylesheets/doc-icon.css">
+  <link rel="stylesheet" type="text/css" href="/stylesheets/semantic.css">
+
+  <% if 'development' in @getEnvironments(): %>
+  <script>
+  (function () {
+    var
+      eventSupport = ('querySelector' in document && 'addEventListener' in window)
+      jsonSupport  = (typeof JSON !== 'undefined'),
+      jQuery       = (eventSupport && jsonSupport)
+        ? '/javascript/library/jquery.js'
+        : '/javascript/library/jquery.legacy.js'
+    ;
+    document.write('<script src="' + jQuery + '"><\/script>');
+  }());
+  </script>
+  <% else: %>
+  <script>
+  (function () {
+    var
+      eventSupport = ('querySelector' in document && 'addEventListener' in window)
+      jsonSupport  = (typeof JSON !== 'undefined'),
+      jQuery       = (eventSupport && jsonSupport)
+        ? '/javascript/library/jquery.min.js'
+        : '/javascript/library/jquery.legacy.min.js'
+    ;
+    document.write('<script src="' + jQuery + '"><\/script>');
+  }());
+  </script>
+  <% end %>
+  <script src="/javascript/library/history.js"></script>
+  <script src="/javascript/library/easing.js"></script>
+  <script src="/javascript/library/ace/ace.js"></script>
+  <script src="/javascript/library/tablesort.js"></script>
+  <script src="/javascript/library/typing.js"></script>
+
+  <% if 'development' in @getEnvironments(): %>
+  <script src="/build/uncompressed/definitions/globals/site.js"></script>
+  <script src="/build/uncompressed/definitions/behaviors/api.js"></script>
+  <script src="/build/uncompressed/definitions/behaviors/visibility.js"></script>
+  <script src="/build/uncompressed/definitions/behaviors/state.js"></script>
+  <script src="/build/uncompressed/definitions/modules/accordion.js"></script>
+  <script src="/build/uncompressed/definitions/modules/checkbox.js"></script>
+  <script src="/build/uncompressed/definitions/modules/dimmer.js"></script>
+  <script src="/build/uncompressed/definitions/modules/dropdown.js"></script>
+  <script src="/build/uncompressed/definitions/modules/modal.js"></script>
+  <script src="/build/uncompressed/definitions/modules/nag.js"></script>
+  <script src="/build/uncompressed/definitions/modules/popup.js"></script>
+  <script src="/build/uncompressed/definitions/modules/progress.js"></script>
+  <script src="/build/uncompressed/definitions/modules/rating.js"></script>
+  <script src="/build/uncompressed/definitions/modules/search.js"></script>
+  <script src="/build/uncompressed/definitions/modules/shape.js"></script>
+  <script src="/build/uncompressed/definitions/modules/sidebar.js"></script>
+  <script src="/build/uncompressed/definitions/modules/sticky.js"></script>
+  <script src="/build/uncompressed/definitions/modules/tab.js"></script>
+  <script src="/build/uncompressed/definitions/modules/transition.js"></script>
+  <script src="/build/uncompressed/definitions/modules/video.js"></script>
+  <% else: %>
+  <script src="/build/packaged/definitions/javascript/semantic.min.js"></script>
+  <% end %>
+
+  <script src="/javascript/semantic.js"></script>
+  <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-44039803-2', 'auto');
+    ga('send', 'pageview');
+
+  </script>
+  <script type="text/javascript">
+    window.liveSettings = {
+      api_key    : '9ede3015b9f84c1aabc81ab839c55d74',
+      parse_attr : [
+        'data-title',
+        'data-content'
+      ],
+      detectlang   : true,
+      autocollect  : true,
+      ignore_tags  : ['i'],
+      parse_attr   : ['data-title', 'data-content', 'data-text'],
+      ignore_class : ["code", "ace_editor"]
+    };
+  </script>
+  <script type="text/javascript" src="http://cdn.transifex.com/live.js"></script>
+</head>
+<body id="example" class="pushable <%= @document.css %>" ontouchstart="">
+  <%- @content %>
+  <script src="/javascript/library/less.js"></script>
+</body>
+
+</html>