Improve presentation of homepage
Collapse search button into icon, deemphasize copy and remove extraneous borders.
This commit is contained in:
Tom MacWright
Tom Hughes
parent
b27e74eaac
commit
f436a5cd2b
7 changed files with 132 additions and 33 deletions
BIN
app/assets/images/sprite.png
Normal file
BIN
app/assets/images/sprite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
75
app/assets/images/sprite.svg
Normal file
75
app/assets/images/sprite.svg
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="300"
|
||||
height="200"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.2 r9819"
|
||||
inkscape:export-filename="/Users/tmcw/src/openstreetmap-website/app/assets/images/sprite.png"
|
||||
inkscape:export-xdpi="90"
|
||||
inkscape:export-ydpi="90"
|
||||
sodipodi:docname="New document 1">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="28.421709"
|
||||
inkscape:cx="7.0037552"
|
||||
inkscape:cy="187.29226"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="true">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid2985"
|
||||
empspacing="5"
|
||||
visible="true"
|
||||
enabled="true"
|
||||
snapvisiblegridlinesonly="true" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-852.36218)">
|
||||
<path
|
||||
style="color:#000000;fill:#999999;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.55720866px;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
|
||||
d="m 8.4000012,852.36218 c -3.3137081,0 -5.9999994,2.68629 -5.9999994,6 0,3.31371 2.6862913,6 5.9999994,6 3.3137078,0 5.9999988,-2.68629 5.9999988,-6 0,-3.31371 -2.686291,-6 -5.9999988,-6 z m 0,2.4 c 1.9882248,0 3.5999988,1.61178 3.5999988,3.6 0,1.98822 -1.611774,3.6 -3.5999988,3.6 -1.9882249,0 -3.5999997,-1.61178 -3.5999997,-3.6 0,-1.98822 1.6117748,-3.6 3.5999997,-3.6 z"
|
||||
id="path2987"
|
||||
inkscape:connector-curvature="0" />
|
||||
<rect
|
||||
style="color:#000000;fill:#999999;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.55720866px;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
|
||||
id="rect3033"
|
||||
width="7"
|
||||
height="3"
|
||||
x="679.2984"
|
||||
y="-530.39673"
|
||||
transform="matrix(-0.60876143,0.79335334,-0.79335334,-0.60876143,0,0)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
|
|
@ -86,12 +86,16 @@ h2 {
|
|||
/* Rules for the introductory text displayed in the left sidebar to new users */
|
||||
|
||||
.sidebar-copy {
|
||||
border-top: 1px solid #ccc;
|
||||
padding: 0px 5px;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
.sidebar-copy p {
|
||||
margin: 5px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.sidebar-copy.intro {
|
||||
margin-top: -1px;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -141,7 +145,6 @@ h2 {
|
|||
padding: 5px 10px;
|
||||
margin: 4px 0;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
|
|
@ -193,7 +196,6 @@ h2 {
|
|||
.optionalbox {
|
||||
padding: 5px 10px;
|
||||
margin: 4px 0;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.optionalbox h1 {
|
||||
|
|
@ -207,8 +209,6 @@ h2 {
|
|||
/* Rules for the search box */
|
||||
|
||||
.whereami {
|
||||
line-height: 20px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
#search_field form {
|
||||
|
|
@ -217,19 +217,52 @@ h2 {
|
|||
padding: 0px;
|
||||
}
|
||||
|
||||
#search_field {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
#search_field input[type="text"] {
|
||||
width: 130px;
|
||||
width: 165px;
|
||||
padding: 5px;
|
||||
font-size: 14px;
|
||||
line-height: 15px;
|
||||
height: 25px;
|
||||
box-shadow: inset #DDD 0px 1px 3px;
|
||||
box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
}
|
||||
|
||||
#search_field input[type="text"]:focus {
|
||||
outline: none;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
#search_field input[type="submit"] {
|
||||
width: 26px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border:0;
|
||||
text-indent:-1000px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
background: url(sprite.png);
|
||||
position:absolute;
|
||||
right:2px;
|
||||
top:5px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.search_help {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 0px;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.deemphasize {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.deemphasize a {
|
||||
color: #7092FF;
|
||||
}
|
||||
|
||||
/* Rules for donation request box */
|
||||
|
|
@ -238,13 +271,17 @@ h2 {
|
|||
width: 153px;
|
||||
margin: 10px 10px;
|
||||
padding: 5px;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid #AED1A0;
|
||||
background: #cbeea7;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
}
|
||||
|
||||
.donate a {
|
||||
color:#222;
|
||||
}
|
||||
|
||||
/* Rules for Creative Commons logo button */
|
||||
|
|
@ -1016,7 +1053,7 @@ input[type="email"],
|
|||
input[type="url"],
|
||||
input[type="password"],
|
||||
textarea {
|
||||
border: 1px solid #888;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/* Rules for user images */
|
||||
|
|
|
|||
|
|
@ -40,12 +40,6 @@ html body {
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
/* Rules for the search box */
|
||||
|
||||
.whereami {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* Rules for tabbed navigation bar */
|
||||
|
||||
#top-bar {
|
||||
|
|
|
|||
|
|
@ -40,12 +40,6 @@ html body {
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
/* Rules for the search box */
|
||||
|
||||
.whereami {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* Rules for tabbed navigation bar */
|
||||
|
||||
#top-bar {
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
<%= yield :optionals %>
|
||||
|
||||
<% unless @user %>
|
||||
<div class="sidebar-copy">
|
||||
<div class="sidebar-copy intro">
|
||||
<p>
|
||||
<%= t 'layouts.intro_1' %>
|
||||
</p>
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
<a href="http://donate.openstreetmap.org/" title="<%= h(t('layouts.make_a_donation.title')) %>"><%= h(t('layouts.make_a_donation.text')) %></a>
|
||||
</div>
|
||||
<div class='sidebar-copy'>
|
||||
<p><%= t 'layouts.partners_html',
|
||||
<p class='deemphasize'><%= t 'layouts.partners_html',
|
||||
:ucl => link_to(t('layouts.partners_ucl'), "http://www.vr.ucl.ac.uk"),
|
||||
:ic => link_to(t('layouts.partners_ic'), "http://www.imperial.ac.uk/"),
|
||||
:bytemark => link_to(t('layouts.partners_bytemark'), "http://www.bytemark.co.uk"),
|
||||
|
|
|
|||
|
|
@ -43,18 +43,17 @@
|
|||
|
||||
<% content_for :optionals do %>
|
||||
<div class="optionalbox">
|
||||
<span class="whereami"><a href="javascript:describeLocation()" title="<%= t 'site.search.where_am_i_title' %>"><%= t 'site.search.where_am_i' %></a></span>
|
||||
<h1><%= t 'site.search.search' %></h1>
|
||||
<div class="search_container">
|
||||
<div id="search_field">
|
||||
<%= form_tag "#", :id => "search_form" do %>
|
||||
<%= text_field_tag :query, h(params[:query]), :tabindex => "1" %>
|
||||
<%= submit_tag t('site.search.submit_text') %>
|
||||
<%= text_field_tag :query, h(params[:query]), :tabindex => "1", :placeholder => t('site.search.search') %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<p class="search_help">
|
||||
<p class='search_help deemphasize'>
|
||||
<%= raw(t 'site.search.search_help') %>
|
||||
<span class="whereami"><a href="javascript:describeLocation()" title="<%= t 'site.search.where_am_i_title' %>"><%= t 'site.search.where_am_i' %></a></span>
|
||||
</p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue