Commit 23a30927 authored by Maxime Chaillet's avatar Maxime Chaillet

Merge branch 'issue50' into 'master'

Issue50

See merge request !52
parents 26c7a74d 0904d753
Pipeline #3071 passed with stages
in 1 minute and 13 seconds
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
font-size: 14px;
margin-bottom: 60px; /* Margin bottom by footer height */
font-size: 14px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #f4f4f4;
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #f4f4f4;
}
/* Custom page CSS
-------------------------------------------------- */
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
/* sets the display of the element to flex */
.flex{
display:flex;
width: auto;
max-width: 680px;
padding: 0 15px;
}
.doiTitleFont{
font-size:20px;
/* sets the display of the element to flex */
.flex {
display:flex;
}
/* sets the background color as esrf blue*/
.blueBackground{
background-color: #132577 !important;
.blueBackground {
background-color: #132577 !important;
}
.lightRedBackground{
background-color: #ffcaca !important;
.lightRedBackground {
background-color: #ffcaca !important;
}
.grayBackground{
background-color: #dcdee2;
.grayBackground {
background-color: #dcdee2;
}
/* vertically center the font and sets its color to white */
.whiteVCenteredFont{
color: white;
margin-top: auto;
margin-bottom:auto;
.whiteVCenteredFont {
color: white;
margin-top: auto;
margin-bottom:auto;
}
.fontSize-20 {
font-size: 20px;
}
.padding-top-15 {
padding-top:15px;
}
.padding-bottom-15 {
padding-bottom:15px;
}
.padding-top-15{
padding-top:15px;
.padding-left-15 {
padding-left:15px;
}
.padding-bottom-15{
padding-bottom:15px;
.padding-bottom-10 {
padding-bottom:10px;
}
.padding-left-15{
padding-left:15px;
/* ######################## For DOI badge ################ */
.borderRadius-5 {
border-radius: 5px;
}
.padding-bottom-10{
padding-bottom:10px;
span.doiBadge {
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
color: white;
background: black;
text-decoration: none;
padding: 2px 0px 2px 4px;
border-color: black;
}
span.doiBadge::before {
content: "DOI";
}
span.doiBadge a {
color: white;
background: #0099cc;
text-decoration: none;
margin-left: 4px;
padding: 2px 5px 2px 4px;
border-radius: 0px 5px 5px 0px;
}
/* ######################## For doi landing page ######### */
.myBorder-left{
border-left-color: #cfd1d2;
border-left-width: 4px;
border-left-style: solid;
padding-left:10px;
.myBorder-left {
border-left-color: #cfd1d2;
border-left-width: 4px;
border-left-style: solid;
padding-left:10px;
}
.card-footer{
background-color: #FFFFFF;
border: 0;
.card-footer {
background-color: #FFFFFF;
border: 0;
}
hr{
margin-top: 30px;
margin-bottom: 30px;
hr {
margin-top: 30px;
margin-bottom: 30px;
}
label{
margin-bottom: 0px;
label {
margin-bottom: 0px;
}
.scroll-box {
overflow-y: auto;
overflow-x: hidden;
height: 175px;
}
overflow-y: auto;
overflow-x: hidden;
height: 175px;
}
/* ######################## For welcome page ############# */
.padding10{
padding:10px;
.padding10 {
padding:10px;
}
.padding-left-0{
padding-left:0;
.padding-left-0 {
padding-left:0;
}
.padding-right-0{
padding-right:0;
.padding-right-0 {
padding-right:0;
}
.whiteBackground{
background-color: #ffffff;
.whiteBackground {
background-color: #ffffff;
}
.welcomeBanner{
heigth:100px;
.welcomeBanner {
heigth:100px;
}
.whiteFont{
color: #ffffff;
.whiteFont {
color: #ffffff;
}
.flexCentered{
display:flex;
justify-content: center; /* align horizontal */
align-items: center;
.flexCentered {
display:flex;
justify-content: center; /* align horizontal */
align-items: center;
}
.height100p{
height:100%;
.height100p {
height:100%;
}
/* ########################################### */
/* the buttons */
/* ########################################### */
/* make all button's text to wrap to a new line */
.btn{
white-space: normal;
.btn {
white-space: normal;
}
/* when the buttons are hovered */
......@@ -151,71 +176,67 @@ label{
}
.btn-primary {
border-color: #132577;
background-color: #132577
border-color: #132577;
background-color: #132577
}
/* when the buttons are disabled */
.btn-primary.disabled{
background-color: #132577;
border-color: #132577;
cursor: not-allowed;
.btn-primary.disabled {
background-color: #132577;
border-color: #132577;
cursor: not-allowed;
}
.btn.disabled{
opacity : .50
.btn.disabled {
opacity : .50
}
/* ############## end the buttons ############## */
/*sets all labels to bold */
label{
font-weight: bold;
label {
font-weight: bold;
}
/* ################# esrf logo ############### */
#logo{
height: 50px;
#logo {
height: 50px;
}
/* ############### right side metadata ##########*/
.card-header{
background-color: #CFD1D2;
.card-header {
background-color: #CFD1D2;
}
/* ######################################################### */
/* ## the please-wait-loading-animation ## */
/* ######################################################### */
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
* Then we position it in relation to the viewport window
* with position:fixed. Width, height, top and left speak
* for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modal {
display: none;
position: absolute;
z-index: 1000;
top: 82px;
bottom: 60px;
background: rgba( 0, 0, 0, .05 )
display: none;
position: absolute;
z-index: 1000;
top: 82px;
bottom: 60px;
background: rgba( 0, 0, 0, .05 )
url('../src/images/ajaxloader.gif')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
the scrollbar off with overflow:hidden */
body.loading {
overflow: hidden;
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
modal element will be visible */
body.loading .modal {
display: block;
display: block;
}
/* ######################################################### */
......@@ -48,10 +48,15 @@
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-4 blueBackground" > <img id="logo" style="height:80px;" src="/src/images/esrflogo.png" alt="the ESRF logo"> </img> </div>
<div class="col-12 col-sm-8 blueBackground flex">
<div id="doiPanel" class="col-12 whiteVCenteredFont text-right doiTitle" > </div>
<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 class="row">
<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="doiPanel" href="http://dx.doi.org/10.5291/ILL-DATA.5-31-2457"></a> </span>
</div>
</div>
</div>
</div>
</div>
......
......@@ -34,10 +34,15 @@
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-4 blueBackground" > <img id="logo" style="height:80px;" src="/src/images/esrflogo.png" alt="the ESRF logo"> </img> </div>
<div class="col-12 col-sm-8 blueBackground flex">
<div id="doiPanel" class="col-12 whiteVCenteredFont text-right doiTitle" > </div>
<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 class="row">
<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="doiPanel" href="http://dx.doi.org/10.5291/ILL-DATA.5-31-2457"></a> </span>
</div>
</div>
</div>
</div>
</div>
......
......@@ -40,10 +40,15 @@
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-4 blueBackground" > <img id="logo" style="height:80px;" src="/src/images/esrflogo.png" alt="the ESRF logo"> </img> </div>
<div class="col-12 col-sm-8 blueBackground flex">
<div id="doiPanel" class="col-12 whiteVCenteredFont text-right doiTitle" > </div>
<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 class="row">
<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="doiPanel" href="http://dx.doi.org/10.5291/ILL-DATA.5-31-2457"></a> </span>
</div>
</div>
</div>
</div>
</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.
......@@ -38,6 +38,7 @@ DOIController.prototype.isValidDOIData = function(doiData) {
DOIController.prototype.getData = function(doi) {
var _this = this;
this.view.setDOI(doi);
this.view.setDOILink(_this.doiServer + doi);
if (this.hasAcceptedPrefix(doi)) {
$.ajax({
......
......@@ -17,8 +17,20 @@ DOIView.prototype.setLoading = function( message ) {
$( "body" ).addClass( "loading" );
};
DOIView.prototype.setDOI = function( doi ) {
$( "#doiPanel" ).html( doi.toUpperCase() );
/**
* Set the doi prefix/suffix text in the doi landing page.
*
*/
DOIView.prototype.setDOI = function( doiCode ) {
$( "#doiPanel" ).text( doiCode.toUpperCase() );
};
/**
* Set the doi http link in the doi landing page. It is the http adress at datacite server which will redirect to the DOI landing page.
*
*/
DOIView.prototype.setDOILink = function( doiLink ) {
$( "#doiPanel" ).attr("href", doiLink.toUpperCase() );
};
/**
......
......@@ -3,7 +3,7 @@
<div class="row padding-top-15">
<div class="col-8">
<div class="row">
<div class="col-12 doiTitleFont text-center text-uppercase font-weight-bold">{data.title}</div>
<div class="col-12 fontSize-20 text-center text-uppercase font-weight-bold">{data.title}</div>
</div>
<hr>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment