Skip to content

Commit

Permalink
Improved responsive layout of thumbnail and citation on datatset pg […
Browse files Browse the repository at this point in the history 
…ref #6684]
  • Loading branch information
@mheppler
mheppler committed Mar 18, 2020
1 parent 139e040 commit 9d5699d
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 43 deletions.
88 changes: 53 additions & 35 deletions src/main/webapp/dataset-citation.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,28 @@
<div class="row">
<!-- TO-DO, REVIEW USE OF vcenter CLASS IN CITATION VS THUMBNAIL -->
<!-- TO-DO, REVIEW INCLUSION OF THUMBNAIL IN WIDGET VIEW -->
<div class="col-xs-2 col-sm-3 col-md-2 center-block preview-icon-block">
<img src="#{DatasetPage.thumbnailString}" class="img-responsive" style="min-height:114px;/*TO-DO, FIX SM THUMBNAIL HACK*/" jsf:rendered="#{!empty DatasetPage.thumbnailString}" alt="#{DatasetPage.datasetVersionUI.title.value}"/>
<span class="icon-dataset" jsf:rendered="#{empty DatasetPage.thumbnailString}"/>
<div class="col-xs-2 center-block preview-icon-block" style="padding:0;">
<!-- TO-DO, FIX THUMBNAIL SIZE, MIN-HEIGHT HACK TO FIX RESPONSIVE ORDER HACK -->
<style>
@media(min-width:768px){
.preview-icon-block {min-height:110px;}
}
</style>
<img src="#{DatasetPage.thumbnailString}"
class="img-responsive"
style="/*min-height:114px;TO-DO, FIX SM THUMBNAIL HACK*/"
jsf:rendered="#{!empty DatasetPage.thumbnailString}"
alt="#{DatasetPage.datasetVersionUI.title.value}"/>

<!-- TO-DO, FIX ICON SIZE, VISIBLE-XS HACK TO DISPLAY SMALLER ICON -->
<!-- XS -->
<span class="icon-dataset visible-xs-block" style="font-size:350% !important;" jsf:rendered="#{empty DatasetPage.thumbnailString}"/>
<!-- SM -->
<span class="icon-dataset hidden-xs" jsf:rendered="#{empty DatasetPage.thumbnailString}"/>
</div>
<div class="col-xs-10 col-sm-9 col-md-10 citation">
<div class="col-xs-10 citation">
<div class="row">
<div class="col-xs-12 margin-bottom">
<div class="col-xs-12 margin-bottom" style="word-wrap:break-word;">
<span class="citation-select" onclick="if (event.target) { selectText(event.target); } else{ selectText(this); }">
<h:outputText value="#{DatasetPage.displayCitation}" escape="false"/>
</span>
Expand All @@ -30,38 +45,41 @@
data-toggle="tooltip" data-placement="top" data-original-title="#{bundle['dataset.cite.title.deassessioned']}"/>
</div>
</div>
<div class="row">
<!-- TO-DO, REVIEW USE OF vcenter CLASS IN CITATION VS THUMBNAIL -->
<div class="col-xs-3 col-sm-4 col-md-3 citation-download vcenter" jsf:rendered="#{!DatasetPage.workingVersion.deaccessioned}">
<div class="btn-group">
<button type="button" style="padding:0;" class="btn btn-link dropdown-toggle downloadCitation" data-toggle="dropdown">
#{bundle['dataset.cite.downloadBtn']} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a jsf:id="endNoteLink" jsf:action="#{DatasetPage.fileDownloadService.downloadDatasetCitationXML(DatasetPage.dataset)}" >
#{bundle['dataset.cite.downloadBtn.xml']}
</a>
</li>
<li>
<a jsf:id="risLink" jsf:actionListener="#{DatasetPage.fileDownloadService.downloadDatasetCitationRIS(DatasetPage.dataset)}">
#{bundle['dataset.cite.downloadBtn.ris']}
</a>
</li>
<li>
<a jsf:id="bibLink" jsf:actionListener="#{DatasetPage.fileDownloadService.downloadDatasetCitationBibtex(DatasetPage.dataset)}" target="_blank">
#{bundle['dataset.cite.downloadBtn.bib']}
</a>
</li>
</ul>
</div>
</div>
<!-- TO-DO, REVIEW USE OF vcenter CLASS IN CITATION VS THUMBNAIL -->
<div class="col-xs-9 col-sm-8 col-md-9 small text-muted citation-standards vcenter" jsf:rendered="#{!DatasetPage.workingVersion.deaccessioned}">
<h:outputText value="#{bundle['dataset.cite.standards.tip']}" escape="false"/>
</div>
</div>
<!-- TO-DO, REVIEW USE OF vcenter CLASS IN CITATION VS THUMBNAIL -->
<div class="col-xs-12 col-sm-4 col-md-3 citation-download" jsf:rendered="#{!DatasetPage.workingVersion.deaccessioned}">
<div class="btn-group">
<button type="button" style="padding:0;" class="btn btn-link dropdown-toggle downloadCitation" data-toggle="dropdown">
#{bundle['dataset.cite.downloadBtn']} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a jsf:id="endNoteLink" jsf:action="#{DatasetPage.fileDownloadService.downloadDatasetCitationXML(DatasetPage.dataset)}" >
#{bundle['dataset.cite.downloadBtn.xml']}
</a>
</li>
<li>
<a jsf:id="risLink" jsf:actionListener="#{DatasetPage.fileDownloadService.downloadDatasetCitationRIS(DatasetPage.dataset)}">
#{bundle['dataset.cite.downloadBtn.ris']}
</a>
</li>
<li>
<a jsf:id="bibLink" jsf:actionListener="#{DatasetPage.fileDownloadService.downloadDatasetCitationBibtex(DatasetPage.dataset)}" target="_blank">
#{bundle['dataset.cite.downloadBtn.bib']}
</a>
</li>
</ul>
</div>
</div>
<!-- BOOTSTRAP 3 CLEARFIX SPACER -->
<div class="clearfix visible-xs" style="line-height:.5;">&#160;</div>
<!-- END: BOOTSTRAP 3 CLEARFIX SPACER -->
<!-- TO-DO, REVIEW USE OF vcenter CLASS IN CITATION VS THUMBNAIL -->
<div class="col-xs-12 col-sm-8 col-md-7 small text-muted citation-standards"
style="line-height:2.1;"
jsf:rendered="#{!DatasetPage.workingVersion.deaccessioned}">
<h:outputText value="#{bundle['dataset.cite.standards.tip']}" escape="false"/>
</div>
</div>

</div>
Expand Down
20 changes: 12 additions & 8 deletions src/main/webapp/dataset.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,29 +232,33 @@
<ul class="dropdown-menu pull-right text-left">
<!-- Publish LINKS x5 -->
<li>
<p:commandLink styleClass="#{DatasetPage.locked and !DatasetPage.dataset.latestVersion.inReview ? 'disabled' : ''}" onclick="PF('publishConfirm').show()"
<p:commandLink styleClass="#{DatasetPage.locked and !DatasetPage.dataset.latestVersion.inReview ? 'disabled' : ''}"
rendered="#{!DatasetPage.dataset.released
and DatasetPage.dataset.latestVersion.versionState=='DRAFT' and DatasetPage.dataset.owner.released
and permissionsWrapper.canIssuePublishDatasetCommand(DatasetPage.dataset)}">
and permissionsWrapper.canIssuePublishDatasetCommand(DatasetPage.dataset)}"
onclick="PF('publishConfirm').show()">
#{bundle['dataset.publish.btn']}
</p:commandLink>
<p:commandLink styleClass="#{DatasetPage.locked and !DatasetPage.dataset.latestVersion.inReview ? 'disabled' : ''}" onclick="PF('releaseDraft').show()"
<p:commandLink styleClass="#{DatasetPage.locked and !DatasetPage.dataset.latestVersion.inReview ? 'disabled' : ''}"
rendered="#{DatasetPage.dataset.released and DatasetPage.dataset.latestVersion.versionState=='DRAFT' and DatasetPage.dataset.owner.released
and permissionsWrapper.canIssuePublishDatasetCommand(DatasetPage.dataset)}">
and permissionsWrapper.canIssuePublishDatasetCommand(DatasetPage.dataset)}"
onclick="PF('releaseDraft').show()">
#{bundle['dataset.publish.btn']}
</p:commandLink>
<!-- 4.2.1: replaced permissionServiceBean.on(DatasetPage.dataset.owner).has('PublishDataverse') with DatasetPage.canPublishDataverse() -->
<p:commandLink styleClass="#{DatasetPage.locked and !DatasetPage.dataset.latestVersion.inReview ? 'disabled' : ''}" onclick="PF('mayNotRelease').show()"
<p:commandLink styleClass="#{DatasetPage.locked and !DatasetPage.dataset.latestVersion.inReview ? 'disabled' : ''}"
rendered="#{DatasetPage.dataset.latestVersion.versionState=='DRAFT' and !DatasetPage.dataset.owner.released
and permissionsWrapper.canIssuePublishDatasetCommand(DatasetPage.dataset)
and !DatasetPage.canPublishDataverse()}">
and !DatasetPage.canPublishDataverse()}"
onclick="PF('mayNotRelease').show()">
#{bundle['dataset.publish.btn']}
</p:commandLink>
<p:commandLink styleClass="#{DatasetPage.locked and !DatasetPage.dataset.latestVersion.inReview ? 'disabled' : ''}" onclick="PF('publishParent').show()"
<p:commandLink styleClass="#{DatasetPage.locked and !DatasetPage.dataset.latestVersion.inReview ? 'disabled' : ''}"
rendered="#{DatasetPage.dataset.latestVersion.versionState=='DRAFT' and !DatasetPage.dataset.owner.released
and DatasetPage.canPublishDataverse()
and (DatasetPage.dataset.owner.owner == null or (DatasetPage.dataset.owner.owner != null and DatasetPage.dataset.owner.owner.released))
and permissionsWrapper.canIssuePublishDatasetCommand(DatasetPage.dataset)}">
and permissionsWrapper.canIssuePublishDatasetCommand(DatasetPage.dataset)}"
onclick="PF('publishParent').show()">
#{bundle['dataset.publish.btn']}
</p:commandLink>
<p:commandLink styleClass="#{DatasetPage.locked and !DatasetPage.dataset.latestVersion.inReview ? 'disabled' : ''}"
Expand Down

0 comments on commit 9d5699d

Please sign in to comment.