Commit 1d0c1a68 authored by Maxime Chaillet's avatar Maxime Chaillet

Set the new layout for the doi alnding page. Change the bootstrap version due...

Set the new layout for the doi alnding page. Change the bootstrap version due to badly supported card-footer class
parent b3f5df10
......@@ -65,6 +65,27 @@ body {
padding-bottom:15px;
}
.padding-left-15{
padding-left:15px;
}
/* ######################## For doi landing page ######### */
.border-left{
border-left-color: #132577;
border-left-width: 8px;
border-left-style: solid;
padding-left:10px;
}
hr{
margin-top: 30px;
margin-bottom: 30px;
}
label{
margin-bottom: 0px;
}
/* ######################## For welcome page ############# */
.padding10{
padding:10px;
......
......@@ -3,7 +3,9 @@
<head>
<meta charset="UTF-8">
<title>ESRF</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="/min/output.min.css" >
</head>
......
html{position:relative;min-height:100%}body{margin-bottom:60px}.footer{position:absolute;bottom:0;width:100%;height:60px;line-height:60px;background-color:#f4f4f4}.container{width:auto;max-width:680px;padding:0 15px}.flex{display:flex}.doiTitle{font-size:30px}.blueBackground{background-color:#132577!important}.lightRedBackground{background-color:#ffcaca!important}.grayBackground{background-color:#dcdee2}.whiteVCenteredFont{color:#fff;margin-top:auto;margin-bottom:auto}.padding-top-15{padding-top:15px}.padding-bottom-15{padding-bottom:15px}.padding10{padding:10px}.padding-0{padding-right:0;padding-left:0}.whiteBackground{background-color:#fff}.welcomeBanner{heigth:100px}.whiteFont{color:#fff}.flexCentered{display:flex;justify-content:center;align-items:center}.height100p{height:100%}.btn{white-space:normal}.btn-primary:hover{}.btn-primary{border-color:#132577;background-color:#132577}.btn-primary.disabled{background-color:#132577;border-color:#132577}.btn.disabled{opacity :.50}label{font-weight:700}#logo{height:50px}.card-header{background-color:#CFD1D2}.modal{display:none;position:absolute;z-index:1000;top:82px;bottom:60px;background:rgba(0,0,0,.05) url(../src/images/ajax-loader.gif) 50% 50% no-repeat}body.loading{overflow:hidden}body.loading .modal{display:block}
\ No newline at end of file
html{position:relative;min-height:100%}body{margin-bottom:60px}.footer{position:absolute;bottom:0;width:100%;height:60px;line-height:60px;background-color:#f4f4f4}.container{width:auto;max-width:680px;padding:0 15px}.flex{display:flex}.doiTitle{font-size:30px}.blueBackground{background-color:#132577!important}.lightRedBackground{background-color:#ffcaca!important}.grayBackground{background-color:#dcdee2}.whiteVCenteredFont{color:#fff;margin-top:auto;margin-bottom:auto}.padding-top-15{padding-top:15px}.padding-bottom-15{padding-bottom:15px}.padding-left-15{padding-left:15px}.border-left{border-left-color:#132577;border-left-width:8px;border-left-style:solid;padding-left:10px}hr{margin-top:30px;margin-bottom:30px}label{margin-bottom:0}.padding10{padding:10px}.padding-0{padding-right:0;padding-left:0}.whiteBackground{background-color:#fff}.welcomeBanner{heigth:100px}.whiteFont{color:#fff}.flexCentered{display:flex;justify-content:center;align-items:center}.height100p{height:100%}.btn{white-space:normal}.btn-primary:hover{}.btn-primary{border-color:#132577;background-color:#132577}.btn-primary.disabled{background-color:#132577;border-color:#132577}.btn.disabled{opacity :.50}label{font-weight:700}#logo{height:50px}.card-header{background-color:#CFD1D2}.modal{display:none;position:absolute;z-index:1000;top:82px;bottom:60px;background:rgba(0,0,0,.05) url(../src/images/ajax-loader.gif) 50% 50% no-repeat}body.loading{overflow:hidden}body.loading .modal{display:block}
\ No newline at end of file
This diff is collapsed.
<div class="container-fluid">
<br />
<br />
<div class="row">
<div class="col-8">
<label>Title</label>
<div class="alert alert-dark" role="alert">
{data.title}
</div>
<label> Abstract </label>
<div class="alert alert-warning alert-dismissible fade show text-center align-middle" role="alert">
There is no abstract for this DOI
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<div class="row">
<div class="col-12 h2 text-center text-uppercase font-weight-bold">{data.title}</div>
</div>
<label> Experimental report </label>
<div class="row padding10">
<div class="col-12 alert-warning padding-top-15 padding-bottom-15">
<button type="button" class="btn btn-primary btn-lg btn-block disabled">Download experimental report</button>
</div>
</div>
<hr>
<label> Download data </label>
<div class="row padding10">
<div class="col-12 alert-warning padding-top-15 padding-bottom-15">
<p> The data is currently only available to download if you are a member of the proposal team. </p>
<form action="https://icat.esrf.fr/#/browse/facility/ESRF/proposal/{data.proposalNumber}/investigation/{data.investigationId}/dataset">
<button type="submit" class="btn btn-primary btn-lg btn-block">Download data</button>
</form>
</div>
</div>
</div>
<div class="col-4">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header text-center">
<label>Authors </label>
</div>
<div class="card-body text-center">
{#data.author} {?.given} {.given} {.family} </br> {:else} {.literal} </br> {/.given} {/data.author}
</div>
<div class="col-3">
<div class="border-left">
<label> Proposal Number </label>
<div class="padding-left-15">{data.proposalNumber}</div>
</div>
</div>
<div class="col-3">
<div class="border-left">
<label> Release year </label>
<div class="padding-left-15">{data.issued.date-parts}</div>
</div>
</div>
<div class="col-6">
<div class="border-left">
<label>Publisher </label>
<div class="padding-left-15">{data.publisher}</div>
</div>
</div>
</div>
<br/>
<div class="row">
<div class="padding-top-15"></div>
<div class="row">
<div class="col-6">
<div class="border-left">
<label> Beamline </label>
{@eq key=data.beamlineUrl value="noLink"}
<div class="padding-left-15">{data.beamline}</div>
{:else}
<div class="padding-left-15">
<a href="{data.beamlineUrl}"> {data.beamline} </a>
</div>
{/eq}
</div>
</div>
<div class="col-6">
<div class="border-left">
<label>Proposal type </label>
<div class="padding-left-15">{data.proposalType}</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header text-center">
<label>Beamline </label>
<div class="border-left">
<label> Abstract </label>
<div class="padding-left-15 alert alert-warning fade show text-center align-middle" role="alert">
There is no abstract for this DOI
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
{@eq key=data.beamlineUrl value="noLink"}
<div class="card-body text-center"> {data.beamline} </div>
{:else}
<div class="card-body text-center"><a href="{data.beamlineUrl}"> {data.beamline} </a> </div>
{/eq}
</div>
</div>
</div>
</div>
<br/>
<hr>
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-header text-center">
<label>Proposal number </label>
<div class="col-12">
<div class="card-deck">
<div class="card">
<div class="card-header text-center">
<label>Experimental report </label>
</div>
<div class="card-body">
</div>
<div class="card-footer">
<button type="button" class="btn btn-primary btn-lg btn-block disabled">Download</button>
</div>
</div>
<div class="card-body text-center height100p">{data.proposalNumber}</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-header text-center">
<label>Proposal type </label>
<div class="card">
<div class="card-header text-center">
<label>Experimental data </label>
</div>
<div class="card-body">
<p>The data is currently only available to download if you are a member of the proposal team.</p>
</div>
<div class="card-footer">
<form action="https://icat.esrf.fr/#/browse/facility/ESRF/proposal/{data.proposalNumber}/investigation/{data.investigationId}/dataset">
<button type="submit" class="btn btn-primary btn-lg btn-block">Download </button>
</form>
</div>
</div>
<div class="card-body text-center height100p">{data.proposalType}</div>
</div>
</div>
</div>
<br/>
</div>
<div class="col-4">
<div class="row">
<div class="col-lg-6">
<div class="col-12">
<div class="card">
<div class="card-header text-center">
<label>Release year </label>
<label>Authors </label>
</div>
<div class="card-body text-center" style="height: 100%;">{data.issued.date-parts}</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-header text-center">
<label>Publisher </label>
<div class="card-body text-center">
{#data.author} {?.given} {.given} {.family} </br> {:else} {.literal} </br> {/.given} {/data.author}
</div>
<div class="card-body text-center">{data.publisher}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
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