Add floating tip to top sites

int128 · Jul 19, 2014 · a3ea708 · a3ea708
1 parent 1c2be19
commit a3ea708
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 14 deletions.
diff --git a/src/main/less/app.less b/src/main/less/app.less
@@ -10,27 +10,42 @@
 }
 
 .site-tile-inner(@padding) {
-  position: relative;
-  height: 100%;
   padding: @padding;
 }
 
 .site-tile-inner-with-icon(@padding, @icon-size) {
   .site-tile-inner(@padding);
+  min-height: @icon-size;
   padding-left: @padding + @padding + @icon-size;
   background-repeat: no-repeat;
   background-position-x: @padding;
   background-position-y: @padding;
   // background-image should be given in HTML
 }
 
+.tip(@width) {
+  position: absolute;
+  z-index: 10;
+  max-width: @width;
+  border-radius: 3px;
+  margin-top: 5px;
+  padding: 5px;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
 
 body {
   font-size: 10.5pt;
   font-family: 'PT Sans', 'Trebuchet MS', sans-serif;
   background-color: #e9eaed;
 }
 
+a {
+  color: #000;
+  text-decoration: none;
+}
+
 .container {
   margin-left: 2em;
   margin-right: 2em;
@@ -48,14 +63,10 @@ body {
 }
 
 .site {
+  background-color: #fff;
   border-color: #eee #ddd #ddd;
   border-radius: 3px;
 
-  >div {
-    background-color: #fff;
-    color: #000;
-  }
-
   &:hover {
     box-shadow: 0 0 10px #9ad;
   }
@@ -66,10 +77,21 @@ body {
   .folder {
     .site-tile(51px, 48px, 5px);
   }
+
   .site {
     .site-tile(48px, 48px, 5px);
-    >div {
+    .site-icon {
       .site-tile-inner-with-icon(16px, 16px);
+      .site-icon-text {
+        display: none;
+      }
+    }
+    .site-tip {
+      .tip(160px);
+      display: none;
+    }
+    &:hover .site-tip {
+      display: block;
     }
   }
 }
@@ -78,10 +100,14 @@ body {
   .folder {
     .site-tile(160px, 48px, 5px);
   }
+
   .site {
     .site-tile(160px, 48px, 5px);
-    >div {
+    .site-icon {
       .site-tile-inner-with-icon(5px, 16px);
     }
+    .site-tip {
+      display: none;
+    }
   }
 }
diff --git a/src/main/static/newtab.html b/src/main/static/newtab.html
@@ -30,13 +30,16 @@
   </script>
 
   <script type="text/ng-template" id="site.html">
-    <a href="{{item.url}}">
-      <div class="site">
-        <div style="background-image: url('chrome://favicon/{{item.url}}')">
-          {{item.title}}
+    <div class="site">
+      <a href="{{item.url}}">
+        <div class="site-icon" style="background-image: url('chrome://favicon/{{item.url}}')">
+          <div class="site-icon-text">{{item.title}}</div>
         </div>
+      </a>
+      <div class="site-tip">
+        <div class="site-tip-text">{{item.title}}</div>
       </div>
-    </a>
+    </div>
   </script>
 
 </body>