Layout and scanner improvements

ui/src/Layout.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import styled from 'styled-components'
+import { Link } from 'react-router-dom'
 
 const Container = styled.div`
   height: 100%;
@@ -11,9 +12,9 @@ const LeftSidebar = styled.div`
   height: 100%;
   width: 80px;
   position: fixed;
-  top: 0;
+  top: 60px;
   left: 0;
-  background-color: #eee;
+  padding-top: 10px;
 `
 
 const RightSidebar = styled.div`
@@ -21,23 +22,55 @@ const RightSidebar = styled.div`
   width: 500px;
   position: fixed;
   right: 0;
-  top: 0;
-  background-color: #eee;
+  top: 60px;
+  background-color: white;
 `
 
 const Content = styled.div`
+  margin-top: 60px;
   margin-left: 80px;
   margin-right: 500px;
-  padding: 0 8px;
+  padding: 12px 8px 0;
+`
+
+const SideButton = styled(Link)`
+  border: 1px solid #eee;
+  text-align: center;
+  padding-top: 17px;
+  border-radius: 50%;
+  display: block;
+  width: 60px;
+  height: 60px;
+  margin: 10px;
+`
+
+const Header = styled.div`
+  height: 60px;
+  width: 100%;
+  position: fixed;
+  background: white;
+  top: 0;
+  /* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+`
+
+const Title = styled.h1`
+  font-size: 36px;
+  padding: 5px 12px;
 `
 
 class Layout extends Component {
   render() {
     return (
       <Container>
-        <LeftSidebar>Left</LeftSidebar>
+        <LeftSidebar>
+          <SideButton to="/">Albums</SideButton>
+        </LeftSidebar>
         <Content>{this.props.children}</Content>
         <RightSidebar>Right</RightSidebar>
+        <Header>
+          <Title>Photoview</Title>
+        </Header>
       </Container>
     )
   }

ui/src/Pages/AlbumPage/AlbumPage.js

@@ -91,10 +91,13 @@ class AlbumPage extends Component {
             })
 
             return (
-              <Gallery>
-                {photos}
-                <PhotoFiller />
-              </Gallery>
+              <div>
+                <h1>{data.album.title}</h1>
+                <Gallery>
+                  {photos}
+                  <PhotoFiller />
+                </Gallery>
+              </div>
             )
           }}
         </Query>

ui/src/Pages/HomePage/Albums.js

@@ -19,6 +19,13 @@ const getAlbumsQuery = gql`
   }
 `
 
+const Container = styled.div`
+  margin: -10px;
+  margin-top: 20px;
+  position: relative;
+  min-height: 500px;
+`
+
 const AlbumBoxLink = styled(Link)`
   width: 240px;
   height: 240px;
@@ -41,7 +48,7 @@ const AlbumBoxImage = styled.div`
 class Albums extends Component {
   render() {
     return (
-      <div style={{ position: 'relative', minHeight: '500px' }}>
+      <Container>
         <Query query={getAlbumsQuery}>
           {({ loading, error, data }) => {
             // if (loading) return <Loader active />
@@ -52,7 +59,9 @@ class Albums extends Component {
             if (data && data.myAlbums) {
               albums = data.myAlbums.map(album => (
                 <AlbumBoxLink key={album.id} to={`/album/${album.id}`}>
-                  <AlbumBoxImage image={album.photos[0].thumbnail.path} />
+                  <AlbumBoxImage
+                    image={album.photos[0] && album.photos[0].thumbnail.path}
+                  />
                   <p>{album.title}</p>
                 </AlbumBoxLink>
               ))
@@ -76,7 +85,7 @@ class Albums extends Component {
             )
           }}
         </Query>
-      </div>
+      </Container>
     )
   }
 }

ui/src/Pages/HomePage/HomePage.js

@@ -6,7 +6,7 @@ class HomePage extends Component {
   render() {
     return (
       <Layout>
-        <h1>Home</h1>
+        <h1>Albums</h1>
         <Albums />
       </Layout>
     )