Commit e1eb4999 authored by Maxime Chaillet's avatar Maxime Chaillet

Merge branch 'issue51' into 'master'

Issue51

See merge request !55
parents 5a43330c 3b917310
Pipeline #3168 passed with stages
in 2 minutes and 1 second
......@@ -3,13 +3,27 @@
html {
position: relative;
min-height: 100%;
font-size: 10px;
}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
font-size: 14px;
font-size: 1.6rem;
}
hr {
margin-top: 15px;
margin-bottom: 15px;
}
label {
margin-bottom: 0px;
font-weight: bold;
}
/* ########################################### */
/* override bootstrap specific classes */
/* ########################################### */
.footer {
position: absolute;
bottom: 0;
......@@ -19,19 +33,24 @@ body {
background-color: #f4f4f4;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.card-header {
background-color: #CFD1D2;
}
.card-footer {
background-color: #FFFFFF;
border: 0;
}
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
/* sets the display of the element to flex */
.flex {
display:flex;
}
/* ########################################### */
/* the backgrounds */
/* ########################################### */
/* sets the background color as esrf blue*/
.blueBackground {
......@@ -46,6 +65,29 @@ body {
background-color: #dcdee2;
}
.whiteBackground {
background-color: #ffffff;
}
/* ########################################### */
/* the fonts */
/* ########################################### */
.font-3p2rem{
font-size:3.2rem;
}
.font-1p4rem{
font-size:1.4rem;
}
.whiteFont {
color: #ffffff;
}
.fontSize-20 {
font-size: 20px;
}
/* vertically center the font and sets its color to white */
.whiteVCenteredFont {
color: white;
......@@ -53,14 +95,17 @@ body {
margin-bottom:auto;
}
.fontSize-20 {
font-size: 20px;
}
/* ########################################### */
/* the padding */
/* ########################################### */
.padding-top-15 {
padding-top:15px;
}
.padding-top-5 {
padding-top:5px;
}
.padding-bottom-15 {
padding-bottom:15px;
}
......@@ -73,7 +118,44 @@ body {
padding-bottom:10px;
}
/* ######################## For DOI badge ################ */
.padding10 {
padding:10px;
}
.padding-left-0 {
padding-left:0;
}
.padding-right-0 {
padding-right:0;
}
.padding-right-2{
padding-right:2px;
}
.padding-left-2{
padding-left:2px;
}
/* ########################################### */
/* the margin */
/* ########################################### */
.marging-right-10 {
marging-right:10px;
}
.margin-left-0{
margin-left:0px;
}
.margin-right-0{
margin-right:0px;
}
/* ########################################### */
/* the DOI badge */
/* ########################################### */
.borderRadius-5 {
border-radius: 5px;
}
......@@ -108,51 +190,18 @@ span.doiBadge a {
padding-left:10px;
}
.card-footer {
background-color: #FFFFFF;
border: 0;
}
hr {
margin-top: 30px;
margin-bottom: 30px;
}
label {
margin-bottom: 0px;
}
.scroll-box {
overflow-y: auto;
overflow-x: hidden;
height: 175px;
height: 130px;
}
/* ######################## For welcome page ############# */
.padding10 {
padding:10px;
}
.padding-left-0 {
padding-left:0;
}
.padding-right-0 {
padding-right:0;
}
.whiteBackground {
background-color: #ffffff;
}
.welcomeBanner {
heigth:100px;
}
.whiteFont {
color: #ffffff;
}
.flexCentered {
display:flex;
justify-content: center; /* align horizontal */
......@@ -164,11 +213,15 @@ label {
}
/* ########################################### */
/* the buttons */
/* the form elements */
/* ########################################### */
/* make all button's text to wrap to a new line */
.form-control {
font-size: 1.6rem;
}
.btn {
white-space: normal;
font-size: 1.6rem;
}
/* when the buttons are hovered */
......@@ -191,21 +244,13 @@ label {
opacity : .50
}
/* ############## end the buttons ############## */
/*sets all labels to bold */
label {
font-weight: bold;
}
/* ################# esrf logo ############### */
#logo {
height: 50px;
}
/* ############### right side metadata ##########*/
.card-header {
background-color: #CFD1D2;
}
/* ######################################################### */
/* ## the please-wait-loading-animation ## */
......@@ -240,3 +285,9 @@ body.loading .modal {
}
/* ######################################################### */
/* sets the display of the element to flex */
.flex {
display:flex;
}
......@@ -51,8 +51,9 @@
<div class="container-fluid">
<div class="row align-items-center blueBackground">
<div class="col-12 col-sm-4" > <img id="logo" style="height:80px;" src="/src/images/esrflogo.png" alt="the ESRF logo"> </img> </div>
<div class="col-12 col-sm-8">
<div id="doiPanel" class="row">
<div class="col"> </div>
<div class="col-auto">
<div class="whiteFont font-3p2rem" id="doiValue">
<!-- filled by the js code -->
</div>
</div>
......
......@@ -36,8 +36,9 @@
<div class="container-fluid">
<div class="row align-items-center blueBackground">
<div class="col-12 col-sm-4" > <img id="logo" style="height:80px;" src="/src/images/esrflogo.png" alt="the ESRF logo"> </img> </div>
<div class="col-12 col-sm-8">
<div id="doiPanel" class="row">
<div class="col"> </div>
<div class="col-auto">
<div class="whiteFont font-3p2rem" id="doiValue">
<!-- filled by the js code -->
</div>
</div>
......
......@@ -42,8 +42,9 @@
<div class="container-fluid">
<div class="row align-items-center blueBackground">
<div class="col-12 col-sm-4" > <img id="logo" style="height:80px;" src="/src/images/esrflogo.png" alt="the ESRF logo"> </img> </div>
<div class="col-12 col-sm-8">
<div id="doiPanel" class="row">
<div class="col"> </div>
<div class="col-auto">
<div class="whiteFont font-3p2rem" id="doiValue">
<!-- filled by the js code -->
</div>
......
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
......@@ -3,6 +3,11 @@ function DoiData() {
}
/**
* Get the accessibility status
* @param {string} sessionDate The timeStamp the experiment was started
* @param {string} publiclyAccessibleYear The year the data will be publicly accesssible.
* @return {string}
* "Open access" : the data is publicly accessible
* "Restricted access" : the data is still under embargo. Only accessible to experimental team members
*
* */
DoiData.prototype.getAccessibilityStatus = function( sessionDate, publiclyAccessibleYear ) {
......@@ -14,7 +19,7 @@ DoiData.prototype.getAccessibilityStatus = function( sessionDate, publiclyAccess
if ( now > publiclyAvailableDate ) {
return "Open access";
} else if ( now <= publiclyAvailableDate ) {
return "Under embargo";
return "Restricted access";
}
}
console.log( "Failed to determine whether the accessibility of the DOI." );
......
......@@ -37,8 +37,7 @@ DOIController.prototype.isValidDOIData = function(doiData) {
DOIController.prototype.getData = function(doi) {
var _this = this;
this.view.setDOI(doi);
this.view.setDOILink(_this.doiServer + doi);
this.view.setDOIInTopBanner(doi);
if (this.hasAcceptedPrefix(doi)) {
$.ajax({
......@@ -65,6 +64,8 @@ DOIController.prototype.getData = function(doi) {
} else {
var doiData = new DoiData();
doiData.title = data.title;
doiData.doi = data.doi.toUpperCase();
doiData.dataciteLink = _this.doiServer + doi;
doiData.publisher = data.publisher;
doiData.creator = data.creator;
......
......@@ -19,25 +19,11 @@ DOIView.prototype.setLoading = function( message ) {
};
/**
* Set the doi prefix/suffix text in the doi landing page.
* Set the doi prefix/suffix text in the top banner of the doi landing page. This is done before the template is rendered.
*
*/
DOIView.prototype.setDOI = function( doiCode ) {
// $( "#doiPanel" ).text( doiCode.toUpperCase() );
$( "#doiPanel" ).html(
"<div class='col'> </div> " +
"<div class='col-auto mr-3 borderRadius-5 whiteBackground' style='padding:10px;'>" +
"<span class='doiBadge borderRadius-5 fontSize-20'> <a id='doiLink' href=''>" +
doiCode.toUpperCase() +
"</a> </span> </div>" );
};
/**
* Set the doi http link in the doi landing page. It is the http address at datacite server which will redirect to the DOI landing page.
*
*/
DOIView.prototype.setDOILink = function( doiLink ) {
$( "#doiLink" ).attr( "href", doiLink.toUpperCase() );
DOIView.prototype.setDOIInTopBanner = function( doiCode ) {
$( "#doiValue" ).text( "DOI > " + doiCode.toUpperCase() );
};
/**
......@@ -167,9 +153,9 @@ DOIView.prototype.renderBadges = function( data ) {
DOIView.prototype.setDataAccessMessage = function( doiData ) {
if ( doiData.accessibility === "Open access" ) {
return "The data can be accessed by clicking on the link below";
} else if ( doiData.accessibility === "Under embargo" ) {
return "The data is under embargo until <b>" + doiData.publiclyAccessibleYear + "</b> but could be released earlier. </p> " +
" <p> Currently, it is only accessible to proposal team members. </p>";
} else if ( doiData.accessibility === "Restricted access" ) {
return "The data is under embargo until <b>" + doiData.publiclyAccessibleYear + "</b> but could be released earlier." +
" Currently, it is only accessible to proposal team members.";
}
};
<div class="row margin-left-0 margin-right-0">
{@eq key=data.resourceTypeGeneral value="Dataset"}
{@eq key=data.resourceType value="Experiment Session"}
<div class="col-auto">
<span class="badge badge-secondary" style="font-size:14px;"> Dataset(s) / session </span>
</div>
<div class="col-auto padding-right-2 padding-left-2">
<span class="badge badge-secondary font-1p4rem " > Session </span>
</div>
{/eq}
<div class="col"> </div>
{@eq key=data.resourceTypeGeneral value="Dataset"}
<div class="col-auto padding-right-2 padding-left-2">
<span class="badge badge-secondary font-1p4rem"> Dataset </span>
</div>
{/eq}
{/eq}
{@eq key=data.accessibility value="Open access"}
<div class="col-auto">
<span class="badge badge-success" style="font-size:14px;"> Open access </span>
{@eq key=data.accessibility value="Open access"}
<div class="col-auto padding-right-2 padding-left-2">
<span class="badge badge-success font-1p4rem "> Open access </span>
</div>
{/eq}
{/eq}
{@eq key=data.accessibility value="Under embargo"}
<div class="col-auto">
<span class="badge badge-warning" style="font-size:14px;"> Under embargo </span>
{@eq key=data.accessibility value="Restricted access"}
<div class="col-auto padding-right-2 padding-left-2">
<span class="badge badge-warning font-1p4rem "> Restricted access </span>
</div>
{/eq}
\ No newline at end of file
{/eq}
</div>
\ No newline at end of file
......@@ -3,31 +3,46 @@
</div>
<div class="card-body padding10">
{?data}
{@eq key=data.length value=1}
<p> <b> One </b> report has been found for this proposal. </p>
{?data}
{@eq key=data.length value=1}
<p class="card-text"> <b> One </b> report has been found for this proposal. </p>
</div>
<div class="card-footer">
<button type="button" class="btn btn-primary btn-lg btn-block" onclick="javascript:(function(){ var expRep = new ExperimentalReportController(); expRep.openFileInNewTab('{data[0]}'); })()" > <span class="fa fa-download whiteFont"></span> {data[0]} </button>
</div>
<div class="card-body">
<button type="button" class="btn btn-primary btn-lg btn-block" onclick="javascript:(function(){ var expRep = new ExperimentalReportController(); expRep.openFileInNewTab('{data[0]}'); })()" > <span class="fa fa-download whiteFont"></span> {data[0]} </button>
</div>
{/eq}
{@gt key=data.length value=1}
<p> In total, <b> {data.length} </b> reports have been found for this proposal: </p>
<div class="scroll-box">
{#data}
<div class="row">
<div class="col-1"> </div>
<div class="col-10 padding-bottom-10">
<button type="button" class="btn btn-primary btn-lg btn-block" onclick="javascript:(function(){ var expRep = new ExperimentalReportController(); expRep.openFileInNewTab('{.}'); })()" > <span class="fa fa-download whiteFont"></span> <span class="whitefont"> {.}</span> </button>
{@gt key=data.length value=1}
<p class="card-text"> In total, <b> {data.length} </b> reports have been found for this proposal: </p>
</div>
<div class="card-body">
<div class="scroll-box">
{#data}
{@sep}
<div class="row">
<div class="col-1"> </div>
<div class="col-10 padding-bottom-10">
<button type="button" class="btn btn-primary btn-lg btn-block" onclick="javascript:(function(){ var expRep = new ExperimentalReportController(); expRep.openFileInNewTab('{.}'); })()" > <span class="fa fa-download whiteFont"></span> <span class="whitefont"> {.}</span> </button>
</div>
<div class="col-1"> </div>
</div>
{/sep}
{@last}
<div class="row">
<div class="col-1"> </div>
<div class="col-10">
<button type="button" class="btn btn-primary btn-lg btn-block" onclick="javascript:(function(){ var expRep = new ExperimentalReportController(); expRep.openFileInNewTab('{.}'); })()" > <span class="fa fa-download whiteFont"></span> <span class="whitefont"> {.}</span> </button>
</div>
<div class="col-1"> </div>
</div>
{/last}
{/data}
</div>
</div>
<div class="col-1"> </div>
</div>
{/data}
</div>
{/gt}
</div>
{:else}
<p> There is currently no experimental report. </p>
{/gt}
{:else}
<p class="card-text"> There is currently no experimental report. </p>
</div>
{/data}
......
<div class="container-fluid">
<div class="row padding-top-15">
<div class="col-8">
<div class="col-12 col-md-9">
<div class="row">
<div class="col-12">
<div id="badges"> </div>
</div>
</div>
<div class="row">
<div class="col-12 fontSize-20 text-center text-uppercase font-weight-bold py-3">{data.title}</div>
</div>
<hr>
<div class="row">
<div class="col-4">
<div class="col-12">
<div class="myBorder-left">
<label> Proposal </label>
{?data.proposalNumber}
<div class="padding-left-15">{data.proposalNumber}</div>
{:else}
<div class="padding-left-15"> Not available</div>
{/data.proposalNumber}
<div>
<cite>
{#data.creator} {?.givenName} {.givenName} {.familyName} ; {:else} {.name} ; {/.givenName} {/data.creator}
</cite>
</div>
</div>
</div>
<div class="col-4">
<div class="myBorder-left">
<label> Publication year </label>
{?data.mintingYear}
<div class="padding-left-15">{data.mintingYear}</div>
{:else}
<div class="padding-left-15"> Not available</div>
{/data.mintingYear}
</div>
</div>
<div class="col-4">
<div class="myBorder-left">
<label> Beamline </label>
{?data.beamline}
{@eq key=data.beamlineUrl value="noLink"}
<div class="padding-left-15">{data.beamline}</div>
{:else}
<div class="padding-left-15">
<a href="{data.beamlineUrl}" target="_blank"> {data.beamline} </a>
</div>
{/eq}
{:else}
<div class="padding-left-15">Not available</div>
{/data.beamline}
</div>
<div class="padding-top-15"></div>
</div>
<div class="col-12 col-md-3">
<div class="card">
<div class="card-body">
<div class="card-text">
<label> DOI </label>
<div class="padding-left-15">
<span class="doiBadge borderRadius-5 font-1p4rem">
<a id="doiLink" href={data.dataciteLink}> {data.doi} </a>
</span>
</div>
<label class="padding-top-5"> Licence (for files) </label>
<div class="padding-left-15">
<p> <a href="https://creativecommons.org/licenses/by/4.0/"> Creative Common Attribution 4.0 </a> </p>
</div>
</div>
</div>
</div>
<div class="padding-top-15"></div>
<div class="row">
<div class="col-4">
<div class="myBorder-left">
<label> Session date </label>
{?data.sessionDate}
<div class="padding-left-15">{data.sessionDate}</div>
</div>
</div>
<hr>
<div class="row">
<div class="col">
<div class="myBorder-left">
<label> Proposal </label>
{?data.proposalNumber}
<div class="padding-left-15">{data.proposalNumber}</div>
{:else}
<div class="padding-left-15"> Not available</div>
{/data.sessionDate}
</div>
</div>
<div class="col-4">
<div class="myBorder-left">
<label>Category </label>
{?data.proposalType}
<div class="padding-left-15">{data.proposalType}</div>
{/data.proposalNumber}
</div>
</div>
<div class="col">
<div class="myBorder-left">
<label> Publication year </label>
{?data.mintingYear}
<div class="padding-left-15">{data.mintingYear}</div>
{:else}
<div class="padding-left-15"> Not available</div>
{/data.mintingYear}
</div>
</div>
<div class="col">
<div class="myBorder-left">
<label> Beamline </label>
{?data.beamline}
{@eq key=data.beamlineUrl value="noLink"}
<div class="padding-left-15">{data.beamline}</div>
{:else}
<div class="padding-left-15"> Not available</div>
{/data.proposalType}
</div>
</div>
<div class="col-4">
<div class="myBorder-left">
<label>Publisher </label>
<div class="padding-left-15"><a href="http://www.esrf.fr"> {data.publisher} </a> </div>
</div>
</div>
<div class="padding-left-15">
<a href="{data.beamlineUrl}" target="_blank"> {data.beamline} </a>
</div>
{/eq}
{:else}
<div class="padding-left-15">Not available</div>
{/data.beamline}
</div>
</div>
<div class="col">
<div class="myBorder-left">
<label> Session date </label>
{?data.sessionDate}
<div class="padding-left-15">{data.sessionDate}</div>
{:else}
<div class="padding-left-15"> Not available</div>
{/data.sessionDate}
</div>
</div>
<div class="col-4">
<div class="myBorder-left">
<label>Category </label>
{?data.proposalType}
<div class="padding-left-15">{data.proposalType}</div>
{:else}
<div class="padding-left-15"> Not available</div>
{/data.proposalType}
</div>
</div>
</div>
<hr>
<hr>
<div class="row">
<div class="col-12">
<div class="myBorder-left">
<label> Abstract </label>
<div class="padding-left-15">
There is no abstract for this session.
</div>
</div>
<div class="row">
<div class="col-12">
<div class="myBorder-left">
<label> Abstract </label>
<div class="padding-left-15">
There is no abstract for this session.
</div>
</div>
</div>
</div>
</div>
<hr>
<hr>
<div class="row">
<div class="col-12">
<div class="card-deck">
<div class="card" id="expReport">
<div class="card-header text-center">
<label>Experimental report </label>
</div>
</div>
<div class="card">
<div class="card-header text-center">
<label>Experimental data </label>
</div>
<div class="card-body padding10">
<p class="card-text" >{data.accessMessage|s}</p>
</div>
<div class="card-footer">
<form action="https://icat.esrf.fr/#/browse/facility/ESRF/proposal/{data.proposalNumber}/investigation/{data.investigationId}/dataset" target="_blank">
<button type="submit" class="btn btn-primary btn-lg btn-block"> Access data </button>
</form>
</div>
</div>
</div>