Commit aa4ef8ff authored by Maxime Chaillet's avatar Maxime Chaillet

make footer responsive

parent 6bc54bd8
/* 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;
}
}
/* ########################################### */
/* 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;
}
.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> ESRF - DOI </title>
<link rel="icon" href="/src/images/favicon.ico">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Using grunt-wiredep, the proper js files from bower components are included below -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/dustjs-linkedin/dist/dust-full.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/dustjs-helpers/dist/dust-helpers.min.js"></script>
<script src="bower_components/lodash/lodash.js"></script>
<script src="bower_components/moment/moment.js"></script>
<!-- endbower -->
<!-- Using grunt-include-source, the proper js files created by us (not minified) are included below -->
<script src="src/author.js"></script>
<script src="src/beamlineurl.js"></script>
<script src="src/citation.js"></script>
<script src="src/constants.js"></script>
<script src="src/doicontroller.js"></script>
<script src="src/doiData.js"></script>
<script src="src/doiview.js"></script>
<script src="src/ESRF-DC-142893590.js"></script>
<script src="src/ESRF-DC-142915526.js"></script>
<script src="src/event.js"></script>
<script src="src/experimentalreportcontroller.js"></script>
<script src="src/jsonextractor.js"></script>
<script src="src/metadataTableHelper.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<title> ESRF - DOI </title>
<link rel="icon" href="/src/images/favicon.ico">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Using grunt-wiredep, the proper js files from bower components are included below -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/dustjs-linkedin/dist/dust-full.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/dustjs-helpers/dist/dust-helpers.min.js"></script>
<script src="bower_components/lodash/lodash.js"></script>
<script src="bower_components/moment/moment.js"></script>
<!-- endbower -->
<!-- Using grunt-include-source, the proper js files created by us (not minified) are included below -->
<script src="src/author.js"></script>
<script src="src/beamlineurl.js"></script>
<script src="src/citation.js"></script>
<script src="src/constants.js"></script>
<script src="src/doicontroller.js"></script>
<script src="src/doiData.js"></script>
<script src="src/doiview.js"></script>
<script src="src/ESRF-DC-142893590.js"></script>
<script src="src/ESRF-DC-142915526.js"></script>
<script src="src/event.js"></script>
<script src="src/experimentalreportcontroller.js"></script>
<script src="src/jsonextractor.js"></script>
<script src="src/metadataTableHelper.js"></script>
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- Using grunt-include-source, the proper all dustjs templates files (not minified are included below -->
<script src="min/precompiled.templates.min.js"></script>
<link rel="stylesheet" href="/min/output.min.css">
<script type="text/javascript">
$(document).ready(function () {
var doi = document.location.search.substring(5);
if (doi === "") {
alert("Please use dev.html page as follow .../dev.html?DOI=prefix/suffix");
} else {
new DOIController(new DOIView()).getData(doi);
}
});
</script>
</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">
</img> </div>
<!-- Using grunt-include-source, the proper all dustjs templates files (not minified are included below -->
<script src="min/precompiled.templates.min.js"></script>
<link rel="stylesheet" href="/min/output.min.css" >
<script type="text/javascript">
$(document).ready(function() {
var doi = document.location.search.substring(5);
if (doi==="") {
alert ("Please use dev.html page as follow .../dev.html?DOI=prefix/suffix");
} else {
new DOIController(new DOIView()).getData(doi);
}
});
</script>
</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"> </img> </div>
<div class="col"> </div>
<div class="col-auto">
<div class="whiteFont font-3p2rem" id="doiValue">
<!-- filled by the js code -->
</div>
<div class="whiteFont font-3p2rem" id="doiValue">
<!-- filled by the js code -->
</div>
</div>
</div>
</div>
</div>
</div>
<div id="main"></div>
<div id='error'></div>
<div class="modal">
<div id="main"></div>
<div id='error' ></div>
<div class="modal">
<!-- nothing to write here -->
</div>
<footer class="footer">
<div class="container-fluid">
</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>
</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>
</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>
</div>
<div class="col-12 col-md-5" >
<p><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>
</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>
</div>
</div>
</div>
</footer>
</body>
</html>
\ No newline at end of file
</div>
</footer>
</body>
</html>
......@@ -62,20 +62,32 @@
<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>
......
This source diff could not be displayed because it is too large. You can view the blob instead.
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