Skip to content

GitLab

Commit 59838ab0 authored by Maxime Chaillet's avatar Maxime Chaillet
Browse files

Merge branch 'issue67' into 'master' 

Issue67

Closes #67

See merge request icat/doi-landing-page!78
parents fcabea05 238b3aab
Expand all Hide whitespace changes
Inline Side-by-side
www/css/doi.css
View file @ 59838ab0
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
font-size: 10px;
position: relative;
min-height: 100%;
font-size: 10px;
}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
font-size: 1.6rem;
margin-bottom: 60px;
/* Margin bottom by footer height */
font-size: 1.6rem;
}
hr {
margin-top: 15px;
margin-bottom: 15px;
margin-top: 15px;
margin-bottom: 15px;
}
label {
margin-bottom: 0px;
font-weight: bold;
margin-bottom: 0px;
font-weight: bold;
}
@media only screen and (max-width: 768px) {
#footerLeft {
text-align: center;
}
#footerRight {
text-align: center;
}
#licenceImage {
display: block;
margin: auto;
}
.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;
}
}
@media only screen and (min-width: 769px) {
#footerLeft {
text-align: left;
}
#footerRight {
display:block;
float: right
}
.footer {
position: absolute;
bottom: 0;
height: 60px;
width: 100%;
/* Set the fixed height of the footer here */
line-height: 60px;
background-color: #f4f4f4;
}
}
@media only screen and (max-width: 1200px) {
.searchButtonDiv {
padding-left: 15px;
}
}
@media only screen and (min-width: 1201px) {
.searchButtonDiv {
padding-left: 0px;
}
}
/* ########################################### */
/* override bootstrap specific classes */
/* ########################################### */
.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;
}
.card-header {
background-color: #CFD1D2;
background-color: #CFD1D2;
}
.card-footer {
background-color: #FFFFFF;
border: 0;
background-color: #FFFFFF;
border: 0;
}
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
width: auto;
max-width: 680px;
padding: 0 15px;
}
/* ########################################### */
/* the backgrounds */
/* ########################################### */
/* sets the background color as esrf blue*/
.blueBackground {
background-color: #132577 !important;
background-color: #132577 !important;
}
.lightRedBackground {
background-color: #ffcaca !important;
background-color: #ffcaca !important;
}
.grayBackground {
background-color: #dcdee2;
background-color: #dcdee2;
}
.whiteBackground {
background-color: #ffffff;
background-color: #ffffff;
}
/* ########################################### */
/* the fonts */
/* ########################################### */
.font-3p2rem{
font-size:3.2rem;
.font-3p2rem {
font-size: 3.2rem;
}
.font-1p4rem{
font-size:1.4rem;
.font-1p4rem {
font-size: 1.4rem;
}
.whiteFont {
color: #ffffff;
color: #ffffff;
}
.fontSize-20 {
font-size: 20px;
font-size: 20px;
}
/* vertically center the font and sets its color to white */
.whiteVCenteredFont {
color: white;
margin-top: auto;
margin-bottom:auto;
color: white;
margin-top: auto;
margin-bottom: auto;
}
/* ########################################### */
/* the padding */
/* ########################################### */
.padding-top-15 {
padding-top:15px;
padding-top: 15px;
}
.padding-top-5 {
padding-top:5px;
padding-top: 5px;
}
.padding-bottom-15 {
padding-bottom:15px;
padding-bottom: 15px;
}
.padding-left-15 {
padding-left:15px;
padding-left: 15px;
}
.padding-bottom-10 {
padding-bottom:10px;
padding-bottom: 10px;
}
.padding10 {
padding:10px;
padding: 10px;
}
.padding-left-0 {
padding-left:0;
padding-left: 0;
}
.padding-right-0 {
padding-right:0;
padding-right: 0;
}
.padding-right-2{
padding-right:2px;
.padding-right-2 {
padding-right: 2px;
}
.padding-left-2{
padding-left:2px;
.padding-left-2 {
padding-left: 2px;
}
/* ########################################### */
/* the margin */
/* ########################################### */
.marging-right-10 {
marging-right:10px;
marging-right: 10px;
}
.margin-left-0{
margin-left:0px;
.margin-left-0 {
margin-left: 0px;
}
.margin-right-0{
margin-right:0px;
.margin-right-0 {
margin-right: 0px;
}
/* ########################################### */
/* the DOI badge */
/* ########################################### */
.borderRadius-5 {
border-radius: 5px;
border-radius: 5px;
}
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;
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";
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;
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:15px;
border-left-color: #cfd1d2;
border-left-width: 4px;
border-left-style: solid;
padding-left: 15px;
margin-bottom: 10px;
}
.scroll-box {
overflow-y: auto;
overflow-x: hidden;
height: 130px;
overflow-y: auto;
overflow-x: hidden;
height: 130px;
}
/* ######################## For welcome page ############# */
.welcomeBanner {
heigth:100px;
heigth: 100px;
}
.flexCentered {
display:flex;
justify-content: center; /* align horizontal */
align-items: center;
display: flex;
justify-content: center;
/* align horizontal */
align-items: center;
}
.height100p {
height:100%;
height: 100%;
}
/* ########################################### */
/* the form elements */
/* ########################################### */
.form-control {
font-size: 1.6rem;
font-size: 1.6rem;
}
.btn {
white-space: normal;
font-size: 1.6rem;
white-space: normal;
font-size: 1.6rem;
}
/* when the buttons are hovered */
.btn-primary:hover {
}
.btn-primary:hover {}
.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;
background-color: #132577;
border-color: #132577;
cursor: not-allowed;
}
.btn.disabled {
opacity : .50
opacity: .50
}
/* ################# esrf logo ############### */
#logo {
height: 50px;
height: 50px;
}
/* ############### right side metadata ##########*/
/* ######################################################### */
/* ## 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 */
.modal {
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;
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 */
body.loading {
overflow: hidden;
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modal {
display: block;
display: block;
}
/* ######################################################### */
/* sets the display of the element to flex */
.flex {
display:flex;
}
.flex {
display: flex;
}
\ No newline at end of file
www/index.html
View file @ 59838ab0
......@@ -3,6 +3,8 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/src/images/favicon.ico">
<title> ESRF - DOI </title>
......@@ -41,39 +43,48 @@
</head>
<body>
<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">
</div>
<div class="col"> </div>
<div class="col-auto">
<div class="whiteFont font-3p2rem" id="doiValue">
<!-- filled by the js code -->
</div>
<div class="align-items-center blueBackground" style="display:flex; flex-wrap: wrap">
<div style="flex: 0 0 auto; padding-left: 10px;">
<img id="logo" style="height:80px;" src="/src/images/esrflogo.png" alt="the ESRF logo">
</div>
<div style="flex: 1 1 auto; word-wrap: break-word;">
<div class="whiteFont font-3p2rem" style="text-align: right; padding-right: 10px" id="doiValue">
<!-- filled by the js code -->
</div>
</div>
</div>
<div id='main'></div>
<div id='error'></div>
<div class="modal">
<!-- nothing to write here -->
</div>
<footer class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-5">
<p><a style='font-weight:bold;' href="http://www.esrf.eu">European Synchrotron Radiation Facility</a></p>
<p id="footerLeft">
<a style='font-weight:bold;' href="http://www.esrf.eu">European Synchrotron Radiation Facility</a>
</p>
</div>
<div class="col-12 col-md-2">
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License"
style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a>
<p>
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/">
<img id="licenceImage" alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" />
</a>
</p>
</div>
<div class="col-12 col-md-5">
<p class="float-right" style="font-size:12px;display:block;"> Access to data is governed by the <a
href="http://www.esrf.eu/files/live/sites/www/files/about/organisation/ESRF%20data%20policy-web.pdf"
target="_blank">ESRF data policy</a>.</p>
<p id="footerRight" style="font-size:12px;">
Access to data is governed by the
<a href="http://www.esrf.eu/files/live/sites/www/files/about/organisation/ESRF%20data%20policy-web.pdf"
target="_blank">
ESRF data policy
</a>.
</p>
</div>
</div>
</div>
......
www/min/output.min.css
View file @ 59838ab0
This source diff could not be displayed because it is too large. You can view the blob instead.
www/min/precompiled.templates.min.js
View file @ 59838ab0
This diff is collapsed.
www/templates/metadata_tpl.js
View file @ 59838ab0
......@@ -3,7 +3,7 @@
<div class="row">
{?data.mergedProposalBeamlines}
{?data.mergedProposalBeamlines[0]}
<div class="col">
<div class="col-6 col-md">
<div class="myBorder-left">
<label> Proposal </label>
{?data.mergedProposalBeamlines[0].proposal}
......@@ -14,7 +14,7 @@
</div>
</div>
<div class="col">
<div class="col-6 col-md">
<div class="myBorder-left">
<label> Publication year </label>
{?data.mintingYear}
......@@ -25,7 +25,7 @@
</div>
</div>
<div class="col">
<div class="col-6 col-md">
<div class="myBorder-left">
<label> Beamline </label>
{?data.mergedProposalBeamlines[0].beamline}
......@@ -42,7 +42,7 @@
</div>
</div>
<div class="col">
<div class="col-6 col-md">
<div class="myBorder-left">
<label> Session date </label>
{?data.sessionDate}
......@@ -53,7 +53,7 @@
</div>
</div>
<div class="col-4">
<div class="col-12 col-md-4">
<div class="myBorder-left">
<label>Category </label>
{?data.proposalType}
......
www/templates/welcome_tpl.js
View file @ 59838ab0
<div class="container-fluid">
<div class="row">
<div class="col-12 flexCentered whiteFont" style="color:#132577; font-size: 6.4rem; height: 200px; margin-top: 10px; margin-bottom: 10px;">ESRF DOI Portal</div>
<div class="col-12 flexCentered whiteFont" style="color:#132577; font-size: 6.4rem; height: 200px; margin-top: 10px; margin-bottom: 10px; text-align: center;">ESRF DOI Portal</div>
</div>
</div>
......@@ -26,15 +26,18 @@
</div>
<div class="card-body padding10">
<p>
The search engine below only searches DOIs which have been minted at the ESRF. </br> Use <a href="https://doi.org">
doi.org </a> search engine for other DOIs.
The search engine below only searches DOIs which have been minted at the ESRF. <br/> Use
<a href="https://doi.org">
doi.org
</a>
search engine for other DOIs.
</p>
<div class="row">
<div class="col-xl-9 padding-right-0">
<p> <input id="doiSearchBox" class="form-control" placeholder="10.15151/ESRF-ES-90632078" type="text" required/> </p>
<div class="text-danger" id="error"> </div>
</div>
<div class="col padding-left-0">
<div class="col searchButtonDiv">
<input class="btn btn-primary" type="submit" value="Search" onclick="searchDOI()" />
</div>
</div>
......
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