Tweak CSS. Switch from Open sans to Source sans pro and use it throug…

…hout. Adjust whitespace in database listing, hide resize grabber on textarea. Use Source sans pro throughout (header, body, tooltip, visualisations). Previously we had Open sans in body and Roboto in headers. Source sans pro is much cleaner than Open sans. Additionally, remove some dead CSS and structures the CSS a bit. Signed-off-by: Anurag Priyam <anurag08priyam@gmail.com>
wurmlab · Sep 9, 2015 · f2ddd4c · f2ddd4c
1 parent 6a23e60
commit f2ddd4c
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 89 deletions.
diff --git a/public/css/custom.css b/public/css/custom.css
@@ -6,9 +6,9 @@
  * For scrollspy, etc.
  */
 body {
-  font-family: "Open sans","Helvetica Neue",Helvetica,Arial,sans-serif;
-  font-size: 13px;
+  font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
   position: relative;
+  color: black;
 }
 
 /**
@@ -18,6 +18,13 @@ a:hover, .btn-link:hover {
   text-decoration: none;
 }
 
+/**
+ * Disable resize grabber on textarea.
+ */
+textarea {
+  resize: none;
+}
+
 /**
  * Use normal font weight for labels and indicate they are clickable by setting
  * `cursor: pointer`.
@@ -55,7 +62,6 @@ a.disabled:hover {
   height: auto;
   padding: 20px 15px;
   font-size: 32px;
-  font-family: "Roboto";
   color: rgb(51, 51, 51);
 }
 .navbar-brand > small {
@@ -93,18 +99,23 @@ a.disabled:hover {
   padding: 5px 0 0 5px;
 }
 
+/**
+ * Take out border, cut down margin and padding, and remove background color
+ * from panel.
+ */
 .panel {
   border: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
 }
 .panel .panel-heading {
-  color: #428BCE;
-  padding: 10px 1px;
-  font-family: "Roboto";
+  padding: 4px 1px;
   background-color: inherit;
 }
+.panel .panel-heading h4 {
+  margin: 0;
+}
 
 /**
  * Take padding-right out of .control-label and keep padding of .input-group.
@@ -134,6 +145,13 @@ a.disabled:hover {
   border-bottom: 1px solid #ddd;
 }
 
+/**
+ * Set max-width and font-family on tooltips.
+ */
+.tooltip-inner {
+  max-width: 350px;
+  font-family: "Source sans pro","Helvetica Neue",Helvetica,Arial,sans-serif;
+}
 
 /********************
  * Extend Bootstrap *
@@ -213,6 +231,16 @@ a.disabled:hover {
   padding: 10px 15px;
 }
 
+/**
+ * Reset Bootstrap's CSS for pre tags.
+ */
+.pre-reset {
+  margin: 0 0;
+  border: none;
+  padding: 0;
+  border-radius: 0;
+  background-color: inherit;
+}
 
 /***************************
  * SequenceServer specific *
@@ -254,37 +282,48 @@ a.disabled:hover {
   -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
   box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-  font-size: 14px;
   font-weight: bold;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
   text-align: center;
   padding: 6px 12px 6px 12px;
 }
 
 .databases-container {
-  margin-top: -15px;
+  margin-top: -10px;
 }
 
-.databases-container .btn {
-  text-align: left;
-  white-space: normal;
+.databases .list-group-item {
+  border: none;
+  padding: 3px 0 0;
 }
 
-.database {
-  border-bottom: 0;
-  border-left: 0;
-  border-right: 0;
-}
-.database:first-child {
-  border-top: 0;
+.databases .list-group-item:first-child {
+  padding: 5px 0 0;
 }
 
-.databaseholder {
-  max-height: 220px;
-  overflow: auto;
-  border: 1px solid lightgray;
-  border-radius: 4px;
-}
+/* DON'T REMOVE - used for experimental database widget ... commenting out to
+ * exclude from minified build */
+
+/*.databases-container .btn {*/
+  /*text-align: left;*/
+  /*white-space: normal;*/
+/*}*/
+
+/*.database {*/
+  /*border-bottom: 0;*/
+  /*border-left: 0;*/
+  /*border-right: 0;*/
+/*}*/
+/*.database:first-child {*/
+  /*border-top: 0;*/
+/*}*/
+
+/*.databaseholder {*/
+  /*max-height: 220px;*/
+  /*overflow: auto;*/
+  /*border: 1px solid lightgray;*/
+  /*border-radius: 4px;*/
+/*}*/
 
 #blast > .form-group:last-child {
   margin-top: -5px;
@@ -295,7 +334,6 @@ a.disabled:hover {
 }
 
 label[for="advanced"] {
-  font-family: "Roboto";
   font-size: 16px;
   display: table-cell;
   width: 1%;
@@ -308,16 +346,16 @@ input[name="advanced"] {
   border-bottom-left-radius: 4px !important;
 }
 
-#methods {
-  font-family: "Roboto";
+#method {
+  letter-spacing: 1px;
 }
 
 #methods li {
-  font-size: 15px;
+  cursor: pointer;
   text-align: center;
   padding-top: 4px;
   padding-bottom: 4px;
-  cursor: pointer;
+  letter-spacing: 1px;
 }
 
 .dropdown-menu li {
@@ -328,11 +366,6 @@ input[name="advanced"] {
   border-bottom: 0;
 }
 
-h1,h2,h3,h4,h5,h6,.page-header {
-  font-family: "Roboto";
-  color: rgb(51, 51, 51);
-}
-
 .sidebar > .page-header > h4 {
   padding: 10px 0 0 0;
   font-size: 14px;
@@ -440,43 +473,9 @@ h1,h2,h3,h4,h5,h6,.page-header {
   font-size: 48px;
 }
 
-/* input form */
-.col-md-6 .panel-heading h4 {
-  margin: 0;
-}
-
-.list-group.databases {
-  padding: 0;
-}
-
-.list-group.databases .list-group-item {
-  border: none;
-  padding: 1px 0;
-}
-
-.list-group.databases .list-group-item input {
-    margin: 0;
-    padding: 0;
-    vertical-align: middle;
-    position: relative;
-    top: -1px;
-}
-
 .glow {
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
   border-left: 2px solid #f0ad4e;
   padding-left: 16px;
   padding-right: 16px;
 }
-
-.tooltip-inner {
-    max-width: 350px;
-}
-
-.pre-reset {
-  margin: 0 0;
-  border: none;
-  padding: 0;
-  border-radius: 0;
-  background-color: inherit;
-}
diff --git a/public/css/svg.css b/public/css/svg.css
@@ -6,8 +6,8 @@
 }
 
 .axis text {
-  font-family: "Open sans","Helvetica Neue",Helvetica,Arial,sans-serif;
-  font-size: 11px;
+  font-family: "Source sans pro","Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-size: 12px;
 }
 
 .hit {

diff --git a/public/js/search.js b/public/js/search.js
@@ -507,23 +507,21 @@ var DatabaseList = React.createClass({
                                         {
                                             _.map(this.databases(category), _.bind(function (database) {
                                                 return (
-                                                    <li className="list-group-item">
-                                                        <div
-                                                            className="checkbox"
+                                                    <li
+                                                        className="list-group-item">
+                                                        <label
                                                             className={(this.state.type && this.state.type !== database.type) && "disabled"}>
-                                                            <label>
-                                                                <input
-                                                                    type="checkbox" name="databases[]" value={database.id} data-type={database.type}
-                                                                    disabled={this.state.type && this.state.type !== database.type}
-                                                                    onChange=
-                                                                    {
-                                                                        _.bind(function () {
-                                                                            this.handleClick(database)
-                                                                        }, this)
-                                                                    }/>
-                                                                {" " + (database.title || database.name)}
-                                                            </label>
-                                                        </div>
+                                                            <input
+                                                                type="checkbox" name="databases[]" value={database.id} data-type={database.type}
+                                                                disabled={this.state.type && this.state.type !== database.type}
+                                                                onChange=
+                                                                {
+                                                                    _.bind(function () {
+                                                                        this.handleClick(database)
+                                                                    }, this)
+                                                                }/>
+                                                            {" " + (database.title || database.name)}
+                                                        </label>
                                                     </li>
                                                 );
                                             }, this))
@@ -887,7 +885,7 @@ var Options = React.createClass({
                         <div
                             className="input-group">
                             <label
-                                className="control-label cursor-pointer"
+                                className="control-label"
                                 htmlFor="advanced">
                                 Advanced Parameters:
                             </label>

diff --git a/views/layout.erb b/views/layout.erb
@@ -13,8 +13,7 @@
   <meta name="author" content="Yannick Wurm">
   <meta name="description" content="Custom BLAST server provided by SequenceServer (http://www.sequenceserver.com)"/>
 
-  <link rel='stylesheet' media="screen,print" type='text/css' href='http://fonts.googleapis.com/css?family=Open+Sans:400,700'>
-  <link rel='stylesheet' media="screen,print" type='text/css' href='http://fonts.googleapis.com/css?family=Roboto:400'>
+  <link rel='stylesheet' media="screen,print" type='text/css' href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700'>
   <link rel="stylesheet" media="screen,print" type="text/css" href="css/svg.css" class="svg-css"/>
   <% if settings.production? %>
     <link rel="stylesheet" media="screen,print" type="text/css" href="sequenceserver.min.css"/>