Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Genesys PGR
Genesys Website
Commits
533595c7
Commit
533595c7
authored
Oct 25, 2018
by
Matija Obreza
Browse files
Crop list uses 200x200 thumb or crop-placeholder.jpg
Signed-off-by:
Matija Obreza
<
matija.obreza@croptrust.org
>
parent
1d6f90c8
Changes
3
Hide whitespace changes
Inline
Side-by-side
assets/images/crop-placeholder.jpg
0 → 100644
View file @
533595c7
44.5 KB
src/crop/ui/BrowsePage.tsx
View file @
533595c7
...
...
@@ -40,7 +40,7 @@ class BrowsePage extends React.Component<IBrowsePageProps> {
</
Authorize
>
<
PageContents
>
<
GridLayout
>
{
crops
&&
crops
.
map
((
crop
)
=>
<
CropCard
key
=
{
crop
.
shortName
}
crop
=
{
crop
}
compact
/>)
}
{
crops
&&
crops
.
sort
((
a
,
b
)
=>
a
.
name
.
localeCompare
(
b
.
name
)).
map
((
crop
)
=>
<
CropCard
key
=
{
crop
.
shortName
}
crop
=
{
crop
}
compact
/>)
}
</
GridLayout
>
</
PageContents
>
</
PageLayout
>
...
...
src/crop/ui/c/CropCard.tsx
View file @
533595c7
import
*
as
React
from
'
react
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
{
Link
}
from
'
react-router-dom
'
;
// Models
import
CropDetails
from
'
model/genesys/CropDetails
'
;
// UI
import
Card
,
{
CardHeader
,
CardContent
,
CardMedia
,
CardActions
}
from
'
ui/common/Card
'
;
import
{
Properties
,
PropertiesItem
}
from
'
ui/common/Properties
'
;
import
Card
,
{
CardHeader
,
CardContent
,
CardActions
}
from
'
ui/common/Card
'
;
import
{
Properties
,
PropertiesItem
}
from
'
ui/common/Properties
'
;
import
PrettyDate
from
'
ui/common/time/PrettyDate
'
;
import
Grid
from
'
@material-ui/core/Grid
'
;
import
withStyles
from
'
@material-ui/core/styles/withStyles
'
;
import
Button
from
'
@material-ui/core/Button
'
;
import
Authorize
from
'
ui/common/authorized/Authorize
'
;
import
Number
from
'
ui/common/Number
'
;
const
style
=
(
theme
)
=>
({
root
:
{
...
...
@@ -22,10 +21,44 @@ const style = (theme) => ({
display
:
'
flex
'
,
},
media
:
{
height
:
150
,
// marginTop: '-25%',
height
:
200
,
display
:
'
inline-block
'
as
'
inline-block
'
,
// vertical-align: top; /*not required*/
position
:
'
relative
'
as
'
relative
'
,
overflow
:
'
hidden
'
as
'
hidden
'
,
},
mediaImage
:
{
// maxHeight: '100%',
minWidth
:
'
100%
'
,
width
:
'
auto
'
as
'
auto
'
,
height
:
'
auto
'
as
'
auto
'
,
position
:
'
absolute
'
as
'
absolute
'
,
top
:
0
,
bottom
:
0
,
left
:
0
,
right
:
0
,
margin
:
'
auto
'
as
'
auto
'
,
},
});
const
CropImage
=
({
classes
,
crop
}:
{
classes
:
any
,
crop
:
CropDetails
})
=>
{
// console.log(`renderImage`, crop);
const
hasCover
=
crop
.
covers
&&
crop
.
covers
.
length
>
0
;
const
image
=
hasCover
?
crop
.
covers
[
0
]
:
null
;
return
(
<
div
className
=
{
classes
.
media
}
>
{
hasCover
&&
<
img
className
=
{
classes
.
mediaImage
}
srcSet
=
{
`/proxy/uploads/d/_thumbs
${
image
.
thumbnailPath
}
/200x200.png 1x, /proxy/uploads/d
${
image
.
storagePath
}
4x`
}
src
=
{
`/proxy/uploads/d
${
image
.
storagePath
}
`
}
alt
=
{
crop
.
name
}
/>
}
{
!
hasCover
&&
<
img
className
=
{
classes
.
mediaImage
}
src
=
{
`images/crop-placeholder.jpg`
}
alt
=
{
crop
.
name
}
/>
}
</
div
>
);
};
const
CropCard
=
({
crop
,
classes
,
compact
=
false
,
edit
=
false
,
...
other
}:
{
crop
:
CropDetails
,
classes
?:
any
,
compact
?:
boolean
,
edit
?:
boolean
})
=>
{
if
(
!
crop
)
{
return
null
;
...
...
@@ -34,15 +67,12 @@ const CropCard = ({crop, classes, compact = false, edit = false, ...other}: { cr
return
compact
?
(
<
Grid
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
lg
=
{
3
}
xl
=
{
2
}
>
<
Card
className
=
{
classes
.
root
}
>
{
crop
.
covers
&&
crop
.
covers
.
length
>
0
&&
<
CardMedia
class
Nam
e
=
{
classes
.
media
}
title
=
{
crop
.
name
}
image
=
{
`/proxy/uploads/d
${
crop
.
covers
[
0
].
storagePath
}
`
}
/>
}
<
CropImage
classe
s
=
{
classes
}
crop
=
{
crop
}
/>
<
CardHeader
title
=
{
<
Link
to
=
{
`/c/
${
crop
.
shortName
}${
edit
?
'
/edit
'
:
''
}
`
}
>
{
crop
.
name
}
</
Link
>
}
/>
<
CardContent
>
<
Number
value
=
{
crop
.
accessionCount
}
/>
</
CardContent
>
</
Card
>
</
Grid
>
)
...
...
Matija Obreza
@mobreza
mentioned in issue
#106 (closed)
·
Oct 25, 2018
mentioned in issue
#106 (closed)
mentioned in issue #106
Toggle commit list
Write
Preview
Markdown
is supported
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