diff --git a/projectSecondPart/src/photo-share/pages/Global.css b/projectSecondPart/src/photo-share/pages/Global.css new file mode 100644 index 0000000000000000000000000000000000000000..0d04a58e659c7b5722dabdd204bd3b4625e8ff84 --- /dev/null +++ b/projectSecondPart/src/photo-share/pages/Global.css @@ -0,0 +1,61 @@ +.button { + position: relative; + display: inline-block; + border-radius: 4px; + background-color: #3F51B5; + border: none; + color: #FFFFFF; + text-align: center; + font-size: 28px; + padding: 10px; + width: 170px; + transition: all 0.5s; + cursor: pointer; + overflow: hidden; + margin: 5px; +} + +.button span { + cursor: pointer; + display: inline-block; + position: relative; + transition: 0.5s; +} + +.button span:after { + content: '\00bb'; + position: absolute; + opacity: 0; + top: 0; + right: -20px; + transition: 0.5s; +} + +.button:hover span { + padding-right: 25px; +} + +.button:hover span:after { + opacity: 1; + right: 0; +} + +.button:after { + content: ""; + background: #3F51B5; + display: block; + position: absolute; + padding-top: 300%; + padding-left: 350%; + margin-left: -20px !important; + margin-top: -120%; + opacity: 0; + transition: all 0.8s +} + +.button:active:after { + padding: 0; + margin: 0; + opacity: 1; + transition: 0s +} diff --git a/projectSecondPart/src/photo-share/pages/user-detail/UserDetail.jsx b/projectSecondPart/src/photo-share/pages/user-detail/UserDetail.jsx index a02227b52b19eb8e80188cee78ab5f4a5ce795c3..6f45837e60835967ef0c15cd69a1e51ebdd671d9 100644 --- a/projectSecondPart/src/photo-share/pages/user-detail/UserDetail.jsx +++ b/projectSecondPart/src/photo-share/pages/user-detail/UserDetail.jsx @@ -5,6 +5,7 @@ import { } from '@material-ui/core'; import {Link, withRouter} from 'react-router-dom'; import './UserDetail.css'; +import '../Global.css'; import fetchModel from '../../../lib/fetchModelData'; /** @@ -51,9 +52,12 @@ class UserDetail extends React.Component { render() { return ( <> + <Link to={`/photo-share/photos/${this.props.match.params.userId}`}> + <button type="button" className="button"> + <span>Photos</span> + </button> + </Link> {this.generateUserPreview()} - <Button variant="outlined" component={Link} to={`/photo-share/photos/${this.props.match.params.userId}`}>See - Photos!</Button> </> ); } diff --git a/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx b/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx index 56534c2867bb8a88450450c3256c45442f990f7b..3a8a77315bedf4a5aa46ea4758f3d6d28c1d61b6 100644 --- a/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx +++ b/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx @@ -1,5 +1,6 @@ import React from 'react'; import './UserPhotos.css'; +import '../Global.css'; import PROG2053Models from '../../../model-data/PhotoApp'; import {withRouter} from 'react-router'; import * as path from 'path'; @@ -34,7 +35,8 @@ class UserPhotos extends React.Component { getAuthor = (user) => { if (user) { - return <Link className="text-link" to={`/photo-share/users/${user._id}`}>{user.first_name} {user.last_name}</Link>; + return <Link className="text-link" + to={`/photo-share/users/${user._id}`}>{user.first_name} {user.last_name}</Link>; } return ''; }; @@ -60,20 +62,27 @@ class UserPhotos extends React.Component { render() { return ( - <div id="divImageList"> - {this.state.userPhotos.map((image) => ( - // eslint-disable-next-line react/jsx-key - <div className="divImageItem" key={image._id}> - <div className="divImage"> - <img src={path.join(__dirname, 'images', image.file_name)}/> - </div> - <div className="divPhotoInfo"> - {this.generateComments(image)} - <span>Created {image.date_time}</span> + <> + <Link to={`/photo-share/users/${this.props.match.params.userId}`}> + <button type="button" className="button"> + <span>User Info</span> + </button> + </Link> + <div id="divImageList"> + {this.state.userPhotos.map((image) => ( + // eslint-disable-next-line react/jsx-key + <div className="divImageItem" key={image._id}> + <div className="divImage"> + <img src={path.join(__dirname, 'images', image.file_name)}/> + </div> + <div className="divPhotoInfo"> + {this.generateComments(image)} + <span>Created {image.date_time}</span> + </div> </div> - </div> - ))} - </div> + ))} + </div> + </> ); } }