align long video names properly, add video link (#264)

aerokube · Nov 18, 2019 · 0ff4997 · 0ff4997
1 parent cd055e4
commit 0ff4997
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/ui/src/components/Videos/index.js b/ui/src/components/Videos/index.js
@@ -48,7 +48,9 @@ const RecordedVideo = ({ src, session, file, preload }) => {
             <div className="video">
                 <div className="controls">
                     <div className="control">
-                        <i title="Delete" className="icon dripicons-trash" />
+                        <a href={src}>
+                            <i title="Link" className="icon dripicons-link" />
+                        </a>
                     </div>
                 </div>
                 <div className="content">

diff --git a/ui/src/components/Videos/style.css.js b/ui/src/components/Videos/style.css.js
@@ -2,6 +2,7 @@ import styled from "styled-components/macro";
 
 const contentBgColor = "#131614";
 const colorBorder = "#555f6a";
+const colorAccent = "#59a781";
 
 export const StyledVideo = styled.div`
     display: flex;
@@ -14,16 +15,20 @@ export const StyledVideo = styled.div`
     &:hover {
         .video {
             .controls {
-                //visibility: visible; //todo enable
+                visibility: visible;
             }
         }
     }
 
     .name {
         color: #fff;
-        font-size: 1.2em;
+        font-size: 1.3em;
+        font-weight: 300;
         padding: 0 5px 10px 0;
         border-bottom: 1px dashed ${colorBorder};
+        overflow-y: scroll;
+        line-height: 30px;
+        height: 30px;
     }
 
     .video {
@@ -46,6 +51,17 @@ export const StyledVideo = styled.div`
                 display: flex;
                 justify-content: center;
                 align-items: center;
+                width: 100%;
+                border-bottom: 1px dashed ${colorBorder};
+
+                a {
+                    text-decoration: none;
+                    color: #fff;
+
+                    &:hover {
+                        color: ${colorAccent};
+                    }
+                }
             }
         }