Skip to content

Commit

Permalink
Reduce thumbnail size in detail panel and move title and author (#348)
Browse files Browse the repository at this point in the history 
* thumbnail set up

* check editPreview

* restyle image

* style tabs

* style tabs
  • Loading branch information
@luorlandini
luorlandini authored Jul 22, 2021
1 parent 0208cbb commit 2ecdde5
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 95 deletions.
166 changes: 86 additions & 80 deletions geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ function DetailsPanel({
</Button>
</div>
}
{!activeEditMode && <div className="gn-details-panel-preview">
{!activeEditMode && !editThumbnail && <div className="gn-details-panel-preview">
<div
className="gn-loader-placeholder"
style={{
Expand All @@ -312,7 +312,7 @@ function DetailsPanel({
}}>
<FaIcon name={icon} />
</div>
{embedUrl && !editThumbnail
{embedUrl
? <iframe
key={embedUrl}
src={embedUrl}
Expand All @@ -323,7 +323,7 @@ function DetailsPanel({
}}
frameBorder="0"
/>
: (<ThumbnailPreview
: (!embedUrl && !editThumbnail ? (<ThumbnailPreview
src={resource?.thumbnail_url}
style={{
position: 'absolute',
Expand All @@ -333,6 +333,7 @@ function DetailsPanel({
left: 0,
backgroundColor: 'inherit'
}} />)
: undefined )
}
{loading && <div
className="gn-details-panel-preview-loader"
Expand All @@ -352,109 +353,114 @@ function DetailsPanel({
</div>}
</div>}

{activeEditMode && editThumbnail && <div className="gn-details-panel-preview inediting"> <EditThumbnail onEdit={editThumbnail} image={resource?.thumbnail_url} /> </div>}
<div className="gn-details-panel-content">
{editThumbnail && <div className="gn-details-panel-content-img">
{!activeEditMode && <ThumbnailPreview src={resource?.thumbnail_url} />}
{activeEditMode && <div className="gn-details-panel-preview inediting"> <EditThumbnail onEdit={editThumbnail} image={resource?.thumbnail_url} /> </div>}
</div>
}


<div className="gn-details-panel-content">
<div className="gn-details-panel-title" >
<div className="gn-details-panel-content-text">
<div className="gn-details-panel-title" >

{!editModeTitle && <h1>
{icon && <><FaIcon name={icon} /></>}
{resource?.title}
</h1>
}
{activeEditMode && !editModeTitle && <span onClick={handleEditModeTitle} ><FaIcon name={'edit'} /></span>}
{!editModeTitle && <h1>
{icon && <><FaIcon name={icon} /></>}
{resource?.title}
</h1>
}
{activeEditMode && !editModeTitle && <span onClick={handleEditModeTitle} ><FaIcon name={'edit'} /></span>}


{editModeTitle && <h1>
<EditTitle title={resource?.title} onEdit={editTitle} />
<span className="inEdit" onClick={handleEditModeTitle} ><FaIcon name={'check-circle'} /></span>
</h1>
}
{
<div className="gn-details-panel-tools">
{
enableFavorite &&
{editModeTitle && <h1>
<EditTitle title={resource?.title} onEdit={editTitle} />
<span className="inEdit" onClick={handleEditModeTitle} ><FaIcon name={'check-circle'} /></span>
</h1>
}
{
<div className="gn-details-panel-tools">
{
enableFavorite &&
<Button
variant="default"
onClick={debounce(handleFavorite, 500)}>
<FaIcon stylePrefix={favorite ? `fa` : `far`} name="star" />
</Button>
}
{documentDownloadUrl &&
}
{documentDownloadUrl &&
<Button variant="default"
href={documentDownloadUrl} >
<FaIcon name="download" />
</Button>}

{detailUrl && <CopyToClipboard
tooltipPosition="top"
tooltipId={
copiedResourceLink
? 'gnhome.copiedResourceUrl'
: 'gnhome.copyResourceUrl'
{detailUrl && <CopyToClipboard
tooltipPosition="top"
tooltipId={
copiedResourceLink
? 'gnhome.copiedResourceUrl'
: 'gnhome.copyResourceUrl'
}
text={formatResourceLinkUrl(detailUrl)}
>
<Button
variant="default"
onClick={handleCopyPermalink}>
<FaIcon name="share-alt" />
</Button>
</CopyToClipboard>
}
text={formatResourceLinkUrl(detailUrl)}
>
<Button
{detailUrl && !editThumbnail && <Button
variant="default"
onClick={handleCopyPermalink}>
<FaIcon name="share-alt" />
</Button>
</CopyToClipboard>
}
{detailUrl && !editThumbnail && <Button
variant="default"
href={detailUrl}
rel="noopener noreferrer">
<Message msgId={`gnhome.view${name || ''}`} />
</Button>}
</div>
}
href={detailUrl}
rel="noopener noreferrer">
<Message msgId={`gnhome.view${name || ''}`} />
</Button>}
</div>
}


</div>
</div>


{<p>
{resource?.owner && <><a href={formatHref({
query: {
'filter{owner.username.in}': resource.owner.username
}
})}>{getUserName(resource.owner)}</a></>}
{(resource?.date_type && resource?.date)
{<p>
{resource?.owner && <><a href={formatHref({
query: {
'filter{owner.username.in}': resource.owner.username
}
})}>{getUserName(resource.owner)}</a></>}
{(resource?.date_type && resource?.date)
&& <>{' '}/{' '}{moment(resource.date).format('MMMM Do YYYY')}</>}
</p>
}
<div className="gn-details-panel-description">
{editModeAbstract && <>
<EditAbstract abstract={resource?.abstract} onEdit={editAbstract} />
<span className="inEdit" onClick={handleEditModeAbstract} ><FaIcon name={'check-circle'} /></span>

</>
</p>
}
{
!editModeAbstract && resource?.abstract ?
<span className="gn-details-panel-text" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(resource.abstract) }} />
: null
}
{activeEditMode && !editModeAbstract && <span onClick={handleEditModeAbstract} ><FaIcon name={'edit'} /></span>}
</div>
<div className="gn-details-panel-description">
{editModeAbstract && <>
<EditAbstract abstract={resource?.abstract} onEdit={editAbstract} />
<span className="inEdit" onClick={handleEditModeAbstract} ><FaIcon name={'check-circle'} /></span>

</>
}
{
!editModeAbstract && resource?.abstract ?
<span className="gn-details-panel-text" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(resource.abstract) }} />
: null
}
{activeEditMode && !editModeAbstract && <span onClick={handleEditModeAbstract} ><FaIcon name={'edit'} /></span>}
</div>

<p>
{resource?.category?.identifier && <div>
<Message msgId="gnhome.category" />:{' '}
<a href={formatHref({
query: {
'filter{category.identifier.in}': resource.category.identifier
}
})}>{resource.category.identifier}</a>
</div>}
</p>

{editTitle && <Tabs itemsTab={itemsTab} />}
<p>
{resource?.category?.identifier && <div>
<Message msgId="gnhome.category" />:{' '}
<a href={formatHref({
query: {
'filter{category.identifier.in}': resource.category.identifier
}
})}>{resource.category.identifier}</a>
</div>}
</p>

</div>
</div>
{editTitle && <div className="gn-details-panel-info"><Tabs itemsTab={itemsTab} /></div>}
</section>
</div>
);
Expand Down
41 changes: 26 additions & 15 deletions geonode_mapstore_client/client/themes/geonode/less/_details-panel.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
.background-color-var(@theme-vars[placeholder-bg]);
}
}
.gn-details-panel-content {
.gn-details-panel-info {
.DList-containner{
.DList-cell--medium {
.background-color-var(@theme-vars[main-variant-bg]);
Expand Down Expand Up @@ -94,11 +94,8 @@
margin-right: 0.5rem;
}
&.imagepreview {
padding: 0rem 5rem;
width: 250px;
z-index: 1;
.dropzone-thumbnail-container {
height: 340px;
}
.icon-image-preview {
position: absolute;
top: 50%;
Expand Down Expand Up @@ -130,22 +127,28 @@
padding-bottom:0
}
}

.gn-details-panel-content {
padding: 1rem;
font-size: 0.9em;
.fa-edit, .fa-check-circle{
font-size: 0.9rem;
margin: 0.2em 0 0 0;
}
.gn-details-panel-content-text {
flex: 1;
}
.gn-details-panel-info{
.tabs-info {
margin-top: 2em;
.tab-content{
padding: 2em;
}
}
}
.gn-details-panel-content, .gn-details-panel-info {
padding: 1rem;
font-size: 0.9em;
display: flex;
flex: 1 1 auto;
.fa-edit, .fa-check-circle{
font-size: 0.9rem;
margin: 0.2em 0 0 0;
}
.DList-containner {
margin: 0 0 2em 0;
margin: 0 0 2.8em 0;
.DList {
display: flex;
flex-wrap: wrap;
Expand Down Expand Up @@ -174,6 +177,14 @@

}

.gn-details-panel-content-img {
margin: 0 1.2em 0 0;
img {
width: 250px;
height: auto;
object-fit: cover;
}
}
.gn-details-panel-title {
display: flex;
margin-bottom: 1rem;
Expand All @@ -194,7 +205,7 @@
justify-content: flex-end;
align-items: center;
button, a{
padding: 0.1rem 0 0 0.5rem;
padding: 0 0 0 0.5rem;
}
}
.inEdit{
Expand Down

0 comments on commit 2ecdde5

Please sign in to comment.