basic layout with css / w3c conformity

5 files changed, 143 insertions, 27 deletions

diff --git a/application.rb b/application.rb
index b065a58..c5e1a83 100644
--- a/application.rb
+++ b/application.rb
@@ -301,4 +301,11 @@ class Application < Sinatra::Base
     @fp.sort!{|a,b| b["p_active"] <=> a["p_active"]}
     haml :fp
   end
+
+  # SASS stylesheet
+  get '/style.css' do
+    headers 'Content-Type' => 'text/css; charset=utf-8'
+    scss :style
+  end
+
 end
diff --git a/views/compound.haml b/views/compound.haml
index cea6fe8..0ed84c8 100644
--- a/views/compound.haml
+++ b/views/compound.haml
@@ -13,22 +13,23 @@
 
 %table
   %colgroup
-    %col{:width => "25%"}
-    %col{:width => "37%"}
-    %col{:width => "37%"}
+    %col{:style => "width: 300px"}
+    %col{:style => "width: 47%"}
+    %col{:style => "width: 47%"}
   %tr
-    %td{:valign => "top"}
-      %br
-        = name(@cid)
-        CID:
-        = @cid
-      %img{:src => image_uri(@cid)}
-    %td{:valign => "top"}
+    %th{:colspan => "3"}
+      = name(@cid)
+      CID:
+      = @cid
+  %tr
+    %td{:style => "vertical-align:top;"}
+      %img{:src => image_uri(@cid), :alt => "#{name(@cid)} CID: #{@cid}", :class => "compound"}
+    %td{:style => "vertical-align:top;"}
       .targets
       .predicted_targets
       .nontargets
       .predicted_nontargets
-    %td{:valign => "top"}
+    %td{:style => "vertical-align:top;"}
       .active_assays
       .predicted_active_assays
       .inactive_assays
diff --git a/views/layout.haml b/views/layout.haml
index 9b423fd..827baaf 100644
--- a/views/layout.haml
+++ b/views/layout.haml
@@ -1,6 +1,9 @@
 !!! 5
 %html
   %head
+    %meta{ :charset => "utf-8" }
+    %title= "PubChem read across"
+    %link{:rel=>'stylesheet', :href=>"#{'/style.css'}", :type => "text/css"}
     %script{:type => "text/javascript", :src  => "/jquery-1.8.2.js"}
     :javascript
       $(document).ready(function() { $.ajax({ url: "/cid/#{@cid}/experiments", cache: true }); });
diff --git a/views/neighbors.haml b/views/neighbors.haml
index 526f2bb..d6fbd7e 100644
--- a/views/neighbors.haml
+++ b/views/neighbors.haml
@@ -1,32 +1,33 @@
 %table
   %colgroup
-    %col{:width => "25%"}
-    %col{:width => "37%"}
-    %col{:width => "37%"}
+    %col{:style => "width: 300px"}
+    %col{:style => "width: 47%"}
+    %col{:style => "width: 47%"}
   - idx = 0
   - while idx < 10
     - neighbors(@cid).each do |n|
       - unless assays(n,"active").empty? and assays(n,"inactive").empty?
         %tr
-          %td{:valign => "top"}
-            %br
-              = name n
-              (
-              = similarity(@cid,n).round(3)
-              )
-            %img{:src => image_uri(n)}
-          %td{:valign => "top"}
-            %p{:id => "targets#{n}"}
+          %th{:valign => "top", :colspan => "3"}
+            = name n
+            (
+            = similarity(@cid,n).round(3)
+            )
+        %tr
+          %td{:style => "vertical-align:top;"}
+            %img{:src => image_uri(n), :alt => "#{name n}", :class => "compound"}
+          %td{:style => "vertical-align:top;"}
+            %p{:id => "targets#{n}", :class => "neighbors"}
               :javascript
                 hide("Measured gene/protein targets","#targets#{n}", "/cid/#{n}/targets/active");
-            %p{:id => "nontargets#{n}"}
+            %p{:id => "nontargets#{n}", :class => "neighbors"}
               :javascript
                 hide("Measured gene/protein non-targets","#nontargets#{n}", "/cid/#{n}/targets/inactive");
-          %td{:valign => "top"}
-            %p{:id => "assays#{n}"}
+          %td{:style => "vertical-align:top;"}
+            %p{:id => "assays#{n}", :class => "neighbors"}
               :javascript
                 hide("Other active assays","#assays#{n}", "/cid/#{n}/assays/active");
-            %p{:id => "inactive_assays#{n}"}
+            %p{:id => "inactive_assays#{n}", :class => "neighbors"}
               :javascript
                 hide("Other inactive assays","#inactive_assays#{n}", "/cid/#{n}/assays/inactive");
         
diff --git a/views/style.scss b/views/style.scss
new file mode 100644
index 0000000..77f2f5c
--- /dev/null
+++ b/views/style.scss
@@ -0,0 +1,104 @@
+/* conf */
+$formbg: #F5F5F5;
+$formborder: #D0D0D0;
+
+/* general */
+body {
+  margin: {
+    left: 20px;
+    right: 20px;
+    top: 0px;
+  }
+  font: {
+    family: arial,helvetica,clean,sans-serif;
+  }
+}
+
+/* headings */
+h1 {
+  font: {
+    family: Helvetia, Verdana, sans;
+    weight: bold;
+    size: 1.4em;
+  }
+  color: #333;
+  margin-top: 10px;
+}
+h4 {
+  color: #333;
+  font-size: 0.9em;
+  margin-top: 0px;
+  margin-bottom: 6px;
+  font-weight: 900;
+  border-bottom: {
+    color: #efefef;
+    style: solid;
+    width: 0.1px;
+  }
+}
+
+/* tables */
+th {
+  color: #333;
+  text-align: left;
+  font-size: 1em;
+}
+td {
+  vertical-align: top;
+}
+
+/* form */
+fieldset {
+  border: {
+    style: solid;
+    width: 1px;
+    color: $formborder;
+    radius: 4px;
+  }
+  background-color: $formbg;
+}
+button {
+  margin-bottom: 10px;
+}
+
+/* lists */
+dl {
+  border: {
+    style: solid;
+    width: 1px;
+    color: #efefef;
+    radius: 4px;
+  }
+}
+dt {
+  font-size: 0.9em;
+}
+dd {
+  font-size: 0.8em;
+}
+
+/* links */
+a {
+  text-decoration: none;
+  color: #00A;
+  &:hover { color: #A00; }
+}
+
+/* block-elements */
+p.neighbors {
+  margin-top: 0px;
+}
+
+/* others */
+em {
+  font-size: 0.8em;
+}
+
+img.compound {
+  border: {
+    width: 1px;
+    style: solid;
+    color: $formborder;
+    radius: 4px;
+  }
+}
\ No newline at end of file