Refactoring the component styling

WebMemex · Apr 4, 2017 · 58f4b77 · 58f4b77
1 parent 89ea17a
commit 58f4b77
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 40 deletions.
diff --git a/src/overview/components/ResultList.css b/src/overview/components/ResultList.css
@@ -2,14 +2,14 @@
     list-style: none;
     margin: 40px auto;
     padding: 0;
-    width: 60%;
+    width: 850px;
 }
 
 .timestamp {
     display: inline-block;
     text-align: center;
     width: 100%;
-    font-family: 'Crimson', serif;
+    font-family: 'Arial', serif;
 
     &::before {
         content: '— ';
@@ -20,15 +20,6 @@
     }
 }
 
-.clustered {
-    margin-bottom: -90px;
-    transition: transform 100ms;
-
-    &:hover, &:focus {
-        transform: translate(-5px, -75px) rotateZ(-5deg);
-    }
-}
-
 .noResultMessage {
     text-align: center;
     margin-top: 80px;

diff --git a/src/overview/components/VisitAsListItem.css b/src/overview/components/VisitAsListItem.css
@@ -1,17 +1,15 @@
 .root {
     position: relative;
     display: flex;
-    height: 90px;
+    height: 10vh;
     box-sizing: content-box;
     justify-content: space-between;
     overflow: hidden;
-    min-height: 70px;
+    min-height: 100px;
     min-width: 500px;
     margin-top: 15px;
     border: 1px solid grey;
-    border-radius: 5px;
     background-color: snow;
-    box-shadow: 2px 3px 3px #888;
     color: inherit;
     text-decoration: none;
 
@@ -21,6 +19,10 @@
         box-shadow: 3px 4px 3px #888;
         margin-left: -1px;
     }
+
+    &:hover .icons_container{
+        opacity: 0.7;
+    }
 }
 
 .compact {
@@ -33,56 +35,88 @@
     }
 }
 
-.thumbnail {
-    display: block;
-    height: 100%;
-    width: 100%;
-    opacity: 0.6;
-}
-
 .logo {
     flex: 1 1 100px;
     overflow: hidden;
     color: #333;
 }
 
-.title{
+.result_content{
     flex: 1 1 740px;
+    flex-direction: column;
     font-size: 1.2em;
+    padding-top: 10px;
     overflow: hidden;
 }
 
-.title div{
+.result_content .title{
     white-space: nowrap;
     margin: 0;
     padding: 0;
-    font-size: 1.5em;
+    font-size: 18px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.result_content .url {
+    font-size: 15px;
+    margin-top: 3px;
+    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
+.result_content .time {
+    font-size: 13px;
+    margin-top: 20px;
+}
+
 .favicon {
     display: table;
-    height: 50%;
-    margin: 20px auto;
+    height: 40%;
+    margin-top: 35%;
+    margin-left: 25%;
+
 }
 
-.linkToLocalVersion {
+.icons_container {
     display: flex;
     flex: 1 1 15px;
+    margin-top: 5px;
+    margin-right:5px;
     flex-direction: column;
     color: inherit;
     text-decoration: none;
+    opacity: 0.2; 
 }
 
-.linkToLocalVersion img{
+.icons_container img{
     height: 15px;
-    width: 15px;
+    padding: 5px;
+    width: 15px;   
 }
 
-.screenshot{
+.screenshot_container{
     flex: 1 1 175px;
     text-align: center;
     color: #D3D3D3;
-    border: 0.5px solid grey;
+    overflow:hidden;    
+    display: inline-block;
+    border-left: 0.5px solid grey;
+}
+
+.screenshot_container img {
+    display: block;
+    height: 100%;
+    width: 100%;
+    transform:scale(1.3);
+    margin-top:15px;
 }
+
+.no_screenshot_available {
+    display: block;
+    height: 100%;
+    width: 100%;
+    transform:scale(1.3);
+    margin-top:45px;
+}
diff --git a/src/overview/components/VisitAsListItem.js b/src/overview/components/VisitAsListItem.js
@@ -25,12 +25,12 @@ const VisitAsListItem = ({doc, compact}) => {
                         : <img className={styles.favicon} src='img/null-icon.png' />
                     }
                 </span>
-                <div className={styles.title}>
-                    <div><strong>{doc.page.title}</strong></div>
-                    <div>{doc.page.url}</div>
-                    <div>{niceTime(doc.visitStart)}</div>
+                <div className={styles.result_content}>
+                    <div className={styles.title}><strong>{doc.page.title}</strong></div>
+                    <div className={styles.url}>{doc.page.url}</div>
+                    <div className={styles.time}>{niceTime(doc.visitStart)}</div>
                 </div>
-                <div className={styles.linkToLocalVersion}>
+                <div className={styles.icons_container}>
                     {localVersionAvailable({page: doc.page})
                         ? <LinkToLocalVersion page={doc.page}>
                         <img src='img/save-icon.png' alt='save-icon' />
@@ -39,10 +39,10 @@ const VisitAsListItem = ({doc, compact}) => {
                     }
                     <img src='img/trash-icon.png' alt='trash-icon' />
                 </div>
-                <div className={styles.screenshot}>
+                <div className={styles.screenshot_container}>
                     {doc.page.screenshot
-                    ? <img className={styles.thumbnail} src={doc.page.screenshot} />
-                    : <p className={styles.thumbnail}>No screenshot available.</p>
+                    ? <img src={doc.page.screenshot} />
+                    : <p className={styles.no_screenshot_available}>No screenshot available.</p>
                     }
                 </div>