ctakes-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From seanfi...@apache.org
Subject svn commit: r1662557 - in /ctakes/site/new: css/examples.css examples.html
Date Thu, 26 Feb 2015 20:19:03 GMT
Author: seanfinan
Date: Thu Feb 26 20:19:02 2015
New Revision: 1662557

URL: http://svn.apache.org/r1662557
Log:
Using fade-in instead of slide for carousel animation

Modified:
    ctakes/site/new/css/examples.css
    ctakes/site/new/examples.html

Modified: ctakes/site/new/css/examples.css
URL: http://svn.apache.org/viewvc/ctakes/site/new/css/examples.css?rev=1662557&r1=1662556&r2=1662557&view=diff
==============================================================================
--- ctakes/site/new/css/examples.css (original)
+++ ctakes/site/new/css/examples.css Thu Feb 26 20:19:02 2015
@@ -1,14 +1,37 @@
 
-#neg-uncertain {
+.carousel-fade .carousel-inner .item {
+   /* Fade between carousel items instead of slide */
+  opacity: 0;
+  -webkit-transition-property: opacity;
+  transition-property: opacity;
+  -webkit-transition-delay: 0s;
+  transition-delay: 0s;
+  -webkit-transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transition:         opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.carousel-fade .carousel-inner .active {
+  opacity: 1
+}
+
+.carousel-indicators li {
+  /* lightish blue */
+  background-color: #2FA4E7;
+}
+
+.carousel-indicators .active {
+  /* blue */
+  background-color: #195C97;
+}
+
+.markuper {
     /* Chrome, Safari, Opera */
-    -webkit-animation-name: fadein1;
     -webkit-animation-duration: 20s;
     -webkit-animation-timing-function: linear;
     -webkit-animation-delay: 0s;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-play-state: running;
     /* Standard syntax */
-    animation-name: fadein1;
     animation-duration: 20s;
     animation-timing-function: linear;
     animation-delay: 0s;
@@ -16,93 +39,63 @@
     animation-play-state: running;
 }
 
+#neg-uncertain {
+    -webkit-animation-name: fadein1;
+    animation-name: fadein1;
+}
+
 #coreference {
-    /* Chrome, Safari, Opera */
     -webkit-animation-name: fadein2;
-    -webkit-animation-duration: 20s;
-    -webkit-animation-timing-function: linear;
-    -webkit-animation-delay: 0s;
-    -webkit-animation-iteration-count: infinite;
-    -webkit-animation-play-state: running;
-    /* Standard syntax */
     animation-name: fadein2;
-    animation-duration: 20s;
-    animation-timing-function: linear;
-    animation-delay: 0s;
-    animation-iteration-count: infinite;
-    animation-play-state: running;
 }
 
 #locationof {
-    /* Chrome, Safari, Opera */
     -webkit-animation-name: fadein3;
-    -webkit-animation-duration: 20s;
-    -webkit-animation-timing-function: linear;
-    -webkit-animation-delay: 0s;
-    -webkit-animation-iteration-count: infinite;
-    -webkit-animation-play-state: running;
-    /* Standard syntax */
     animation-name: fadein3;
-    animation-duration: 20s;
-    animation-timing-function: linear;
-    animation-delay: 0s;
-    animation-iteration-count: infinite;
-    animation-play-state: running;
 }
 
 #tlink {
-    /* Chrome, Safari, Opera */
     -webkit-animation-name: fadein4;
-    -webkit-animation-duration: 20s;
-    -webkit-animation-timing-function: linear;
-    -webkit-animation-delay: 0s;
-    -webkit-animation-iteration-count: infinite;
-    -webkit-animation-play-state: running;
-    /* Standard syntax */
     animation-name: fadein4;
-    animation-duration: 20s;
-    animation-timing-function: linear;
-    animation-delay: 0s;
-    animation-iteration-count: infinite;
-    animation-play-state: running;
 }
 
 /* Chrome, Safari, Opera */
 @-webkit-keyframes fadein1 {
     0%   {
         opacity: 0.0;
-        filter: alpha(opacity=0); /* For IE8 and earlier */ }
+         /* For IE8 and earlier */
+        filter: alpha(opacity=0); }
     5%   {
         opacity: 1.0;
-        filter: alpha(opacity=100); /* For IE8 and earlier */ }
+        filter: alpha(opacity=100); }
     20%   {
         opacity: 1.0;
-        filter: alpha(opacity=100); /* For IE8 and earlier */ }
+        filter: alpha(opacity=100); }
     25%  {
          opacity: 0.0;
-         filter: alpha(opacity=0); /* For IE8 and earlier */ }
+         filter: alpha(opacity=0); }
     100% {
            opacity: 0.0;
-           filter: alpha(opacity=0); /* For IE8 and earlier */ }
+           filter: alpha(opacity=0); }
 }
 
 /* Standard syntax */
 keyframes fadein1 {
     0%   {
         opacity: 0.0;
-        filter: alpha(opacity=0); /* For IE8 and earlier */ }
+        filter: alpha(opacity=0); }
     5%   {
         opacity: 1.0;
-        filter: alpha(opacity=100); /* For IE8 and earlier */ }
+        filter: alpha(opacity=100); }
     20%   {
         opacity: 1.0;
-        filter: alpha(opacity=100); /* For IE8 and earlier */ }
+        filter: alpha(opacity=100); }
     25%  {
          opacity: 0.0;
-         filter: alpha(opacity=0); /* For IE8 and earlier */ }
+         filter: alpha(opacity=0); }
     100% {
            opacity: 0.0;
-           filter: alpha(opacity=0); /* For IE8 and earlier */ }
+           filter: alpha(opacity=0); }
 }
 
 
@@ -111,44 +104,44 @@ keyframes fadein1 {
 @-webkit-keyframes fadein2 {
     0%   {
            opacity: 0.0;
-           filter: alpha(opacity=0); /* For IE8 and earlier */ }
+           filter: alpha(opacity=0); }
     25%  {
          opacity: 0.0;
-         filter: alpha(opacity=0); /* For IE8 and earlier */ }
+         filter: alpha(opacity=0); }
     30%  {
           opacity: 1.0;
-          filter: alpha(opacity=100); /* For IE8 and earlier */ }
+          filter: alpha(opacity=100); }
     45%  {
           opacity: 1.0;
-          filter: alpha(opacity=100); /* For IE8 and earlier */ }
+          filter: alpha(opacity=100); }
     50% {
            opacity: 0.0;
-           filter: alpha(opacity=0); /* For IE8 and earlier */ }
+           filter: alpha(opacity=0); }
     100% {
            opacity: 0.0;
-           filter: alpha(opacity=0); /* For IE8 and earlier */ }
+           filter: alpha(opacity=0); }
 }
 
 /* Standard syntax */
 @keyframes fadein2 {
     0%   {
            opacity: 0.0;
-           filter: alpha(opacity=0); /* For IE8 and earlier */ }
+           filter: alpha(opacity=0); }
     25%  {
          opacity: 0.0;
-         filter: alpha(opacity=0); /* For IE8 and earlier */ }
+         filter: alpha(opacity=0); }
     30%  {
           opacity: 1.0;
-          filter: alpha(opacity=100); /* For IE8 and earlier */ }
+          filter: alpha(opacity=100); }
     45%  {
           opacity: 1.0;
-          filter: alpha(opacity=100); /* For IE8 and earlier */ }
+          filter: alpha(opacity=100); }
     50% {
            opacity: 0.0;
-           filter: alpha(opacity=0); /* For IE8 and earlier */ }
+           filter: alpha(opacity=0); }
     100% {
            opacity: 0.0;
-           filter: alpha(opacity=0); /* For IE8 and earlier */ }
+           filter: alpha(opacity=0); }
 }
 
 
@@ -157,44 +150,44 @@ keyframes fadein1 {
 @-webkit-keyframes fadein3 {
     0%   {
            opacity: 0.0;
-           filter: alpha(opacity=0); /* For IE8 and earlier */ }
+           filter: alpha(opacity=0); }
     50%  {
          opacity: 0.0;
-         filter: alpha(opacity=0); /* For IE8 and earlier */ }
+         filter: alpha(opacity=0); }
     55%  {
           opacity: 1.0;
-          filter: alpha(opacity=100); /* For IE8 and earlier */ }
+          filter: alpha(opacity=100); }
     70%  {
           opacity: 1.0;
-          filter: alpha(opacity=100); /* For IE8 and earlier */ }
+          filter: alpha(opacity=100); }
     75% {
            opacity: 0.0;
-           filter: alpha(opacity=0); /* For IE8 and earlier */ }
+           filter: alpha(opacity=0); }
     100% {
            opacity: 0.0;
-           filter: alpha(opacity=0); /* For IE8 and earlier */ }
+           filter: alpha(opacity=0); }
 }
 
 /* Standard syntax */
 keyframes fadein3 {
     0%   {
            opacity: 0.0;
-           filter: alpha(opacity=0); /* For IE8 and earlier */ }
+           filter: alpha(opacity=0); }
     50%  {
          opacity: 0.0;
-         filter: alpha(opacity=0); /* For IE8 and earlier */ }
+         filter: alpha(opacity=0); }
     55%  {
           opacity: 1.0;
-          filter: alpha(opacity=100); /* For IE8 and earlier */ }
+          filter: alpha(opacity=100); }
     70%  {
           opacity: 1.0;
-          filter: alpha(opacity=100); /* For IE8 and earlier */ }
+          filter: alpha(opacity=100); }
     75% {
            opacity: 0.0;
-           filter: alpha(opacity=0); /* For IE8 and earlier */ }
+           filter: alpha(opacity=0); }
     100% {
            opacity: 0.0;
-           filter: alpha(opacity=0); /* For IE8 and earlier */ }
+           filter: alpha(opacity=0); }
 }
 
 
@@ -203,38 +196,38 @@ keyframes fadein3 {
 @-webkit-keyframes fadein4 {
     0%   {
            opacity: 0.0;
-           filter: alpha(opacity=0); /* For IE8 and earlier */ }
+           filter: alpha(opacity=0); }
     75%  {
          opacity: 0.0;
-         filter: alpha(opacity=0); /* For IE8 and earlier */ }
+         filter: alpha(opacity=0); }
     80%  {
           opacity: 1.0;
-          filter: alpha(opacity=100); /* For IE8 and earlier */ }
+          filter: alpha(opacity=100); }
     95%  {
           opacity: 1.0;
-          filter: alpha(opacity=100); /* For IE8 and earlier */ }
+          filter: alpha(opacity=100); }
     100% {
            opacity: 0.0;
-           filter: alpha(opacity=0); /* For IE8 and earlier */ }
+           filter: alpha(opacity=0); }
 }
 
 /* Standard syntax */
 @keyframes fadein4 {
     0%   {
            opacity: 0.0;
-           filter: alpha(opacity=0); /* For IE8 and earlier */ }
+           filter: alpha(opacity=0); }
     75%  {
          opacity: 0.0;
-         filter: alpha(opacity=0); /* For IE8 and earlier */ }
+         filter: alpha(opacity=0); }
     80%  {
           opacity: 1.0;
-          filter: alpha(opacity=100); /* For IE8 and earlier */ }
+          filter: alpha(opacity=100); }
     95%  {
           opacity: 1.0;
-          filter: alpha(opacity=100); /* For IE8 and earlier */ }
+          filter: alpha(opacity=100); }
     100% {
            opacity: 0.0;
-           filter: alpha(opacity=0); /* For IE8 and earlier */ }
+           filter: alpha(opacity=0); }
 }
 
 
@@ -244,30 +237,30 @@ keyframes fadein3 {
 @-webkit-keyframes fadein {
     0%   {
         opacity: 0.0;
-        filter: alpha(opacity=0); /* For IE8 and earlier */ }
+        filter: alpha(opacity=0); }
     25%  {
          opacity: 1.0;
-         filter: alpha(opacity=100); /* For IE8 and earlier */ }
+         filter: alpha(opacity=100); }
     75%  {
           opacity: 1.0;
-          filter: alpha(opacity=100); /* For IE8 and earlier */ }
+          filter: alpha(opacity=100); }
     100% {
            opacity: 0.0;
-           filter: alpha(opacity=0); /* For IE8 and earlier */ }
+           filter: alpha(opacity=0); }
 }
 
 /* Standard syntax */
 @keyframes fadein {
     0%   {
            opacity: 0.0;
-           filter: alpha(opacity=0); /* For IE8 and earlier */ }
+           filter: alpha(opacity=0); }
     25%  {
          opacity: 1.0;
-         filter: alpha(opacity=100); /* For IE8 and earlier */ }
+         filter: alpha(opacity=100); }
     75%  {
           opacity: 1.0;
-          filter: alpha(opacity=100); /* For IE8 and earlier */ }
+          filter: alpha(opacity=100); }
     100% {
            opacity: 0.0;
-           filter: alpha(opacity=0); /* For IE8 and earlier */ }
+           filter: alpha(opacity=0); }
 }

Modified: ctakes/site/new/examples.html
URL: http://svn.apache.org/viewvc/ctakes/site/new/examples.html?rev=1662557&r1=1662556&r2=1662557&view=diff
==============================================================================
--- ctakes/site/new/examples.html (original)
+++ ctakes/site/new/examples.html Thu Feb 26 20:19:02 2015
@@ -20,8 +20,7 @@
 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link href="css/main.css" rel="stylesheet">
-   <!-- TODO: Add any additional css that might be necessary -->
-   <!-- css for marked text animation -->
+   <!-- css for carousel and marked text animation -->
    <link href="css/examples.css" rel="stylesheet">
 
    <script type="text/javascript">
@@ -106,9 +105,18 @@
 
 <div class="container">
 
-   <div id="guiCarousel" class="carousel slide" data-interval="3000" style="width: 100%;
height: 300px;">
+   <div id="guiCarousel" class="carousel slide carousel-fade"  data-ride="carousel" data-interval="5000"
style="width: 100%; height: 300px;">
+      <!-- Indicators -->
+      <ol class="carousel-indicators">
+         <li data-target="#guiCarousel" data-slide-to="0" class="active"></li>
+         <li data-target="#guiCarousel" data-slide-to="1"></li>
+         <li data-target="#guiCarousel" data-slide-to="2"></li>
+         <li data-target="#guiCarousel" data-slide-to="3"></li>
+         <li data-target="#guiCarousel" data-slide-to="4"></li>
+         <li data-target="#guiCarousel" data-slide-to="5"></li>
+      </ol>
       <!-- Slides -->
-      <div class="carousel-inner">
+      <div class="carousel-inner" role="listbox">
          <!-- Slide 1 -->
          <div class="item active">
             <div class="row">
@@ -205,6 +213,7 @@
                </div>
             </div>
          </div>
+
       </div>
    </div>
    <!-- End Carousel -->
@@ -213,10 +222,10 @@
    <div class="container-fluid">
       <div class="row" style="position: relative;">
          <img class="img-responsive" src="images/MarkedText.png">
-         <img id="neg-uncertain" class="img-responsive" src="images/NegAndUncertain2.png"
style="position: absolute; top: 19.3%">
-         <img id="coreference" class="img-responsive" src="images/Coreference2.png" style="position:
absolute; top: 62%">
-         <img id="locationof" class="img-responsive" src="images/LocationOf2.png" style="position:
absolute; top: 50.7%">
-         <img id="tlink" class="img-responsive" src="images/Tlink2.png" style="position:
absolute; top: 70.5%">
+         <img id="neg-uncertain" class="markuper img-responsive" src="images/NegAndUncertain2.png"
style="position: absolute; top: 19.3%">
+         <img id="coreference" class="markuper img-responsive" src="images/Coreference2.png"
style="position: absolute; top: 62%">
+         <img id="locationof" class="markuper img-responsive" src="images/LocationOf2.png"
style="position: absolute; top: 50.7%">
+         <img id="tlink" class="markuper img-responsive" src="images/Tlink2.png" style="position:
absolute; top: 70.5%">
       </div>
    </div>
 
@@ -228,7 +237,9 @@
    <hr>
    Apache cTAKES, cTAKES, Apache, and the cTAKES logo are trademarks of
    <a href="http://www.apache.org">The Apache Software Foundation</a>.
-   <img src="images/feather_20v.png" style="max-height: 20px; float: right; margin-right:
20px;">
+   <a href="http://www.apache.org">
+      <img src="images/feather_20v.png" style="max-height: 20px; float: right; margin-right:
20px;">
+   </a>
 </footer>
 
 <script src="https://code.jquery.com/jquery.js"></script>



Mime
View raw message