Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Martin Wighus Holtmon
PROG2053-Project
Commits
631216d3
Commit
631216d3
authored
Nov 22, 2021
by
Martin Wighus Holtmon
Browse files
projectSecondPart/Problem2 - Added button to switch between user info and photos
parent
69db7154
Changes
3
Hide whitespace changes
Inline
Side-by-side
projectSecondPart/src/photo-share/pages/Global.css
0 → 100644
View file @
631216d3
.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
}
projectSecondPart/src/photo-share/pages/user-detail/UserDetail.jsx
View file @
631216d3
...
...
@@ -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
>
</>
);
}
...
...
projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx
View file @
631216d3
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
>
</>
);
}
}
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment