Merge pull request #224 from YaleDHLab/attract-mode

Attract mode
pleonard212 · Aug 19, 2021 · 2519dee · 2519dee
2 parents fd45a47 + fbefab9
commit 2519dee
Show file tree

Hide file tree

Showing 4 changed files with 232 additions and 101 deletions.
diff --git a/pixplot/web/assets/css/style.css b/pixplot/web/assets/css/style.css
@@ -184,7 +184,6 @@ select:disabled {
   position: absolute;
   top: 0;
   left: 0;
-  display: inline-block;
   z-index: 10;
   height: inherit;
   overflow: hidden;
@@ -193,19 +192,21 @@ select:disabled {
 
 #logo {
   width: 33px;
-  padding: 10px;
+  padding: 0 10px;
   position: relative;
-  top: 2px;
+}
+
+#app-name-container {
+  background: #444;
+  height: 100%;
 }
 
 #app-name {
   display: inline-block;
-  height: 100%;
   vertical-align: top;
-  padding: 11px 34px;
+  padding: 0 34px;
   box-sizing: border-box;
   font-weight: 300;
-  background: #444;
   color: #fff;
   font-size: 21px;
   letter-spacing: 0.1em;
@@ -216,17 +217,16 @@ select:disabled {
 .tagline {
   color: #999;
   font-size: 16px;
-  padding: 20px 25px;
+  padding: 5px 25px;
   font-weight: 400;
   letter-spacing: .025em;
   display: inline-block;
   vertical-align: top;
   height: 100%;
   box-sizing: border-box;
-  background: inherit;
+  background: #333333;
   position: relative;
   z-index: 1;
-  display: none;
 }
 
 @media(max-width: 335px) {
@@ -1190,44 +1190,49 @@ noscript {
   background: rgba(17, 17, 17, 0.98);
   z-index: 11;
   display: none;
+  transition: opacity 0.3s;
+  animation: fade-in 0.3s forwards;
 }
 
-#selected-image,
-#previous-image {
-  max-height: 100%;
-  max-width: 100%;
-  box-sizing: border-box;
-  background-color: #222;
+#selected-image-modal .modal-top {
+  transition: opacity 0.2s;
+  opacity: 0;
 }
 
-#selected-image {
+#selected-image-container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  max-height: 100%;
   position: relative;
-  z-index: 100;
-}
-
-#previous-image {
-  display: none;
 }
 
-#selected-image-modal .modal-content {
-  justify-content: center;
-}
-
-#selected-image-modal .modal-top-content {
-  background: transparent;
+#selected-image-target {
   height: 100%;
-  position: relative;
-  padding: 0;
-  text-align: center;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   justify-content: center;
   align-items: center;
 }
 
 #selected-image {
+  max-height: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  background-color: #222;
   padding: 25px;
   background-color: #333;
+  position: relative;
+  z-index: 100;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 .image-caret {
@@ -1241,11 +1246,11 @@ noscript {
 }
 
 #caret-left {
-  left: -150px;
+  left: -80px;
 }
 
 #caret-right {
-  right: -150px;
+  right: -30px;
   transform: rotate(180deg);
 }
 
@@ -1256,10 +1261,8 @@ noscript {
 .icons {
   display: inline-block;
   width: 40px;
-  position: absolute;
-  bottom: 25px;
-  right: -50px;
   white-space: initial;
+  margin-left: 10px;
 }
 
 .icons a,
@@ -1286,31 +1289,6 @@ noscript {
   opacity: 1;
 }
 
-/**
-* Selected Image SVG
-**/
-
-#selected-image-svg {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  padding: 25px;
-  box-sizing: border-box;
-  z-index: 10;
-}
-
-#svg-image-unfiltered {
-  mask: url(#blur-mask);
-}
-
-#selected-image-svg rect {
-  fill: transparent;
-}
-
 /**
 * Selected Image Meta
 **/