From 9aebe0a81e63bb0243cc77246d92a1b9fc384d0e Mon Sep 17 00:00:00 2001
From: Martijn Vermaat <martijn@vermaat.name>
Date: Mon, 8 Dec 2014 13:09:43 +0100
Subject: [PATCH] More compact homepage
---
mutalyzer/website/templates/homepage.html | 47 +++++++------------
.../website/templates/static/css/style.css | 9 +++-
2 files changed, 24 insertions(+), 32 deletions(-)
diff --git a/mutalyzer/website/templates/homepage.html b/mutalyzer/website/templates/homepage.html
index 36b869e7..2f1ae2ca 100644
--- a/mutalyzer/website/templates/homepage.html
+++ b/mutalyzer/website/templates/homepage.html
@@ -12,11 +12,6 @@ nomenclature according to the
<a href="http://www.hgvs.org">Human Genome Variation Society</a>.
</p>
-<p>
-Different interfaces are provided to collect the information necessary
-for the checks:
-</p>
-
<div class="row">
<div class="col-md-12">
<div class="thumbnail thumb-home thumb-large">
@@ -32,7 +27,7 @@ for the checks:
<div class="input-group">
<input class="form-control form-control-small form-pre example-target" type="text" name="description" value="{{ description }}" placeholder="Variant description using HGVS format">
<span class="input-group-btn">
- <input type="submit" class="btn btn-primary pull-right" value="Try the Name Checker">
+ <input type="submit" class="btn btn-primary pull-right" value="Check variant description">
</span>
</div>
</form>
@@ -46,36 +41,32 @@ for the checks:
<div class="col-md-3">
<div class="thumbnail thumb-home clickbox color-1">
<div class="caption">
- <h3>Syntax Checker</h3>
- <p>The Syntax Checker takes the complete sequence variant description as input and checks whether the syntax is correct.</p>
- <a href="{{ url_for('.syntax_checker') }}" class="btn btn-default btn-small btn-home-down">Try this</a>
+ <h3><a href="{{ url_for('.syntax_checker') }}">Syntax Checker</a></h3>
+ <p>Takes the complete sequence variant description as input and checks whether the syntax is correct.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail thumb-home clickbox color-2">
<div class="caption">
- <h3>Position Converter</h3>
- <p>The Position Converter can convert chromosomal positions to transcript orientated positions and vice versa.</p>
- <a href="{{ url_for('.position_converter') }}" class="btn btn-default btn-small btn-home-down">Try this</a>
+ <h3><a href="{{ url_for('.position_converter') }}">Position Converter</a></h3>
+ <p>Converts chromosomal positions to transcript orientated positions and vice versa.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail thumb-home clickbox color-3">
<div class="caption">
- <h3>SNP Converter</h3>
- <p>The SNP Converter allows you to convert a dbSNP rsId to HGVS notation.</p>
- <a href="{{ url_for('.snp_converter') }}" class="btn btn-default btn-small btn-home-down">Try this</a>
+ <h3><a href="{{ url_for('.snp_converter') }}">SNP Converter</a></h3>
+ <p>Allows you to convert a dbSNP rsId to HGVS notation.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail thumb-home clickbox color-4">
<div class="caption">
- <h3>Name Generator</h3>
- <p>The Name Generator is a user friendly interface that helps to make a valid HGVS variant description.</p>
- <a href="{{ url_for('.name_generator') }}" class="btn btn-default btn-small btn-home-down">Try this</a>
+ <h3><a href="{{ url_for('.name_generator') }}">Name Generator</a></h3>
+ <p>A user friendly interface that helps to make a valid HGVS variant description.</p>
</div>
</div>
</div>
@@ -85,36 +76,32 @@ for the checks:
<div class="col-md-3">
<div class="thumbnail thumb-home clickbox color-5">
<div class="caption">
- <h3>Description Extractor</h3>
- <p>The Description Extractor allows you to generate the HGVS variant description from a reference sequence and an observed sequence.</p>
- <a href="{{ url_for('.description_extractor') }}" class="btn btn-default btn-small btn-home-down">Try this</a>
+ <h3><a href="{{ url_for('.description_extractor') }}">Description Extractor</a></h3>
+ <p>Allows you to generate the HGVS variant description from a reference sequence and an observed sequence.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail thumb-home clickbox color-6">
<div class="caption">
- <h3>Reference File Loader</h3>
- <p>The Reference File Loader allows you to load and use your own reference sequence.</p>
- <a href="{{ url_for('.reference_loader') }}" class="btn btn-default btn-small btn-home-down">Try this</a>
+ <h3><a href="{{ url_for('.reference_loader') }}">Reference File Loader</a></h3>
+ <p>Allows you to load and use your own reference sequence.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail thumb-home clickbox color-7">
<div class="caption">
- <h3>Batch Checkers</h3>
- <p>The Batch Checkers are interfaces that accept a list of inputs. These interfaces can be used for large quantities of checks is correct.</p>
- <a href="{{ url_for('.batch_jobs') }}" class="btn btn-default btn-small btn-home-down">Try this</a>
+ <h3><a href="{{ url_for('.batch_jobs') }}">Batch Checkers</a></h3>
+ <p>Interfaces accepting a list of inputs that can be used for large quantities of checks.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail thumb-home clickbox color-8">
<div class="caption">
- <h3>Web Services</h3>
- <p>The Web services page provides instructions for the web services.</p>
- <a href="{{ url_for('.webservices') }}" class="btn btn-default btn-small btn-home-down">Try this</a>
+ <h3><a href="{{ url_for('.webservices') }}">Web Services</a></h3>
+ <p>Provides instructions for the web services.</p>
</div>
</div>
</div>
diff --git a/mutalyzer/website/templates/static/css/style.css b/mutalyzer/website/templates/static/css/style.css
index 3f0bf879..4a0106f7 100644
--- a/mutalyzer/website/templates/static/css/style.css
+++ b/mutalyzer/website/templates/static/css/style.css
@@ -16,6 +16,11 @@ body{
text-decoration: none;
}
+.container-fluid .clickbox h3 a {
+ text-decoration: none;
+ color: inherit;
+}
+
.block {
background: white;
max-width: 1024px;
@@ -217,7 +222,7 @@ header.main-header {
.thumb-home {
background-color: #ebebeb;
- height: 240px;
+ height: 180px;
}
.thumb-home > .caption > h3 {
@@ -226,7 +231,7 @@ header.main-header {
@media (min-height: 850px) and (min-width: 992px) {
.thumb-home {
- height: 245px;
+ height: 185px;
margin-bottom: 30px;
}
--
GitLab