assets/buttonbg.psd assets/search.psd public/images/buttonbg.gif public/images/clearicon.png public/images/search-big.png public/images/search.gif public/images/search.png public/images/system-search.gif public/javascript/application.js public/javascript/jquery.js public/stylesheets/iphone.css public/stylesheets/iphone2.css public/stylesheets/palm_pre.css public/stylesheets/sass/iphone.sass public/stylesheets/sass/iphone2.sass public/stylesheets/sass/palm_pre.sass @@ -18,8 +18,9 @@ module Merb language_object["go"] || "Go" end - def button_to(text, to) - %|<form method="get" action="#{to}"><button type="submit">#{text}</button></form>| + def button_to(text, to, id = nil) + id ||= text.downcase + %|<form method="get" action="#{to}"><button type="submit" id="#{id}Button">#{text}</button></form>| end def stop_redirect_notice(path) app/helpers/global_helpers.rb @@ -25,7 +25,11 @@ class Device when /Android/ :android when /iPhone.* Safari/ - :iphone + if user_agent.include?("iPhone OS 2") + :iphone2 + else + :iphone + end when /iPhone/ :native_iphone when /Pre\// app/models/device.rb @@ -9,7 +9,4 @@ - elsif current_name != "" :javascript var title = "#{@name}"; - var server = "#{current_server.base_url}"; - -- if request.device.format_name == :native_iphone - <script type="text/javascript" language="javascript" SRC="/jquery.js"></script> \ No newline at end of file + var server = "#{current_server.base_url}"; \ No newline at end of file app/views/layout/_javascript.html.haml @@ -1,8 +1,12 @@ #header %img{:src => "/images/w.gif", :id => "logo", :alt => "W logo"}/ %form.search_bar{:action => "/wiki", :method => "get"} - %input{:name => "search", :type => "text", :size => "28", :value => CGI::unescape(current_name).force_encoding("UTF-8")}/ - %button{:type => "submit"}= go_text + %input#searchField{:name => "search", :type => "text", :size => "28", :value => CGI::unescape(current_name).force_encoding("UTF-8")}/ + -# Had to do the clearText() for android + #clearButton + %img{:src => "/images/clearicon.png"} + %button#goButton{:type => "submit"} + #nav = button_to language_object["home_button"], "/wiki/::Home" - = button_to language_object["random_button"], "/wiki/::Random" + = button_to language_object["random_button"], "/wiki/::Random", "random" app/views/layout/_search_webkit.html.haml @@ -10,7 +10,9 @@ <link rel="apple-touch-icon" href="http://en.m.wikipedia.org/apple-touch-icon.png" /> - if request.device.supports_javascript = partial "layout/javascript" - <script type="text/javascript" language="javascript" SRC="/webkit.js"></script> + <script type="text/javascript" language="javascript" SRC="/javascript/jquery.js"></script> + <script type="text/javascript" language="javascript" SRC="/javascript/application.js"></script> + %body #content_wrapper app/views/layout/application.html.haml @@ -13,13 +13,18 @@ webkit: &webkit <<: *capable search_bar: 'webkit' css_file_name: 'webkit' - + android: <<: *webkit css_file_name: "android" iphone: <<: *webkit + css_file_name: 'iphone' + +iphone2: + <<: *webkit + css_file_name: 'iphone2' native_iphone: <<: *capable @@ -27,6 +32,7 @@ native_iphone: palm_pre: <<: *webkit + css_file_name: 'palm_pre' kindle2: <<: *defaults config/formats.yaml @@ -33,10 +33,11 @@ Merb::Router.prepare do match("/wiki/\:\:Home").to(:action => "home") match(/\/wiki\/::Random/).to(:action => "random") + with(:action => "show") do # Primary HTML way to access information - match(/\/wiki\/?(.*)/).to(:title => "[1]") + match(/\/wiki\/(.*)/).to(:title => "[1]") match(/\/wiki\/?/).to(:action => "show") # Legacy support for iwik match(/\/lookup\/([a-z]*).wikipedia.org\/(.*)/).to(:title => "[2]", :lang => "[1]") config/router.rb @@ -102,11 +102,34 @@ table.admin { #header #logo { float: left; padding-right: 5px; } + #header #clearButton { + clear: none; + float: left; + padding: 0; + margin: 0 0 0 -25px; } + #header #clearButton img { + margin: 0; + padding: 0; + border: 0; + clear: none; } + #header input#searchField { + float: left; + height: 20px; + width: 195px; + margin-top: -3px; + border: 1px solid grey; } + #header button#goButton { + float: right; + margin: -5px 8px 0 0; + height: 30px; + width: 30px; + background: #FFF url(/images/search.gif) no-repeat center; + border: 0; } #nav { display: none; height: 28px; - width: 135px; + width: 185px; clear: both; z-index: 1; background: white; @@ -117,14 +140,20 @@ table.admin { -webkit-border-radius: 2px; -moz-border-radius: 2px; } #nav button { - float: left; } + float: left; + background: url(/images/buttonbg.gif) no-repeat center; + margin-left: 3px; + border: 0px; + height: 23px; + width: 83px; } .notice { padding: 5px; background: #ddd; -webkit-border-radius: 5px; margin-top: 5px; - text-align: center; } + text-align: center; + border: 1px solid grey; } .notice #perm { margin-top: 10px; font-size: 80%; } @@ -228,22 +257,10 @@ img.thumbborder { body { font-size: 140%; } -input { - width: 190px; } +#searchField { + padding-top: 5px; + width: 20px; } -form.search_bar { - margin-top: -5px; - position: absolute; - margin-left: 45px; } - -#header { - height: 35px; - padding-top: 10px; } - -#nav { - width: 200px; - height: 40px; - margin-top: -2px; - padding-top: 0px; } - #nav button { - margin-left: 18px; } +#clearButton { + margin-top: 0px; + display: none; } public/stylesheets/android.css @@ -105,11 +105,34 @@ table.admin { #header #logo { float: left; padding-right: 5px; } + #header #clearButton { + clear: none; + float: left; + padding: 0; + margin: 0 0 0 -25px; } + #header #clearButton img { + margin: 0; + padding: 0; + border: 0; + clear: none; } + #header input#searchField { + float: left; + height: 20px; + width: 195px; + margin-top: -3px; + border: 1px solid grey; } + #header button#goButton { + float: right; + margin: -5px 8px 0 0; + height: 30px; + width: 30px; + background: #FFF url(/images/search.gif) no-repeat center; + border: 0; } #nav { display: none; height: 28px; - width: 135px; + width: 185px; clear: both; z-index: 1; background: white; @@ -120,14 +143,20 @@ table.admin { -webkit-border-radius: 2px; -moz-border-radius: 2px; } #nav button { - float: left; } + float: left; + background: url(/images/buttonbg.gif) no-repeat center; + margin-left: 3px; + border: 0px; + height: 23px; + width: 83px; } .notice { padding: 5px; background: #ddd; -webkit-border-radius: 5px; margin-top: 5px; - text-align: center; } + text-align: center; + border: 1px solid grey; } .notice #perm { margin-top: 10px; font-size: 80%; } public/stylesheets/blackberry.css @@ -102,11 +102,34 @@ table.admin { #header #logo { float: left; padding-right: 5px; } + #header #clearButton { + clear: none; + float: left; + padding: 0; + margin: 0 0 0 -25px; } + #header #clearButton img { + margin: 0; + padding: 0; + border: 0; + clear: none; } + #header input#searchField { + float: left; + height: 20px; + width: 195px; + margin-top: -3px; + border: 1px solid grey; } + #header button#goButton { + float: right; + margin: -5px 8px 0 0; + height: 30px; + width: 30px; + background: #FFF url(/images/search.gif) no-repeat center; + border: 0; } #nav { display: none; height: 28px; - width: 135px; + width: 185px; clear: both; z-index: 1; background: white; @@ -117,14 +140,20 @@ table.admin { -webkit-border-radius: 2px; -moz-border-radius: 2px; } #nav button { - float: left; } + float: left; + background: url(/images/buttonbg.gif) no-repeat center; + margin-left: 3px; + border: 0px; + height: 23px; + width: 83px; } .notice { padding: 5px; background: #ddd; -webkit-border-radius: 5px; margin-top: 5px; - text-align: center; } + text-align: center; + border: 1px solid grey; } .notice #perm { margin-top: 10px; font-size: 80%; } public/stylesheets/default.css @@ -102,11 +102,34 @@ table.admin { #header #logo { float: left; padding-right: 5px; } + #header #clearButton { + clear: none; + float: left; + padding: 0; + margin: 0 0 0 -25px; } + #header #clearButton img { + margin: 0; + padding: 0; + border: 0; + clear: none; } + #header input#searchField { + float: left; + height: 20px; + width: 195px; + margin-top: -3px; + border: 1px solid grey; } + #header button#goButton { + float: right; + margin: -5px 8px 0 0; + height: 30px; + width: 30px; + background: #FFF url(/images/search.gif) no-repeat center; + border: 0; } #nav { display: none; height: 28px; - width: 135px; + width: 185px; clear: both; z-index: 1; background: white; @@ -117,14 +140,20 @@ table.admin { -webkit-border-radius: 2px; -moz-border-radius: 2px; } #nav button { - float: left; } + float: left; + background: url(/images/buttonbg.gif) no-repeat center; + margin-left: 3px; + border: 0px; + height: 23px; + width: 83px; } .notice { padding: 5px; background: #ddd; -webkit-border-radius: 5px; margin-top: 5px; - text-align: center; } + text-align: center; + border: 1px solid grey; } .notice #perm { margin-top: 10px; font-size: 80%; } public/stylesheets/firefox.css @@ -3,22 +3,10 @@ body font-size: 140% -input - width: 190px - -form.search_bar - margin-top: -5px - position: absolute - margin-left: 45px - -#header - height: 35px - padding-top: 10px - -#nav - width: 200px - height: 40px - margin-top: -2px - padding-top: 0px - button - margin-left: 18px \ No newline at end of file +#searchField + padding-top: 5px + width: 20px +#clearButton + margin-top: 0px + //margin-right: -18px + display: none \ No newline at end of file public/stylesheets/sass/android.sass @@ -1,5 +1,6 @@ @import _tables.sass + #header width: 293px height: 30px @@ -14,10 +15,37 @@ #logo float: left padding-right: 5px + + #clearButton + clear: none + float: left + padding: 0 + margin: 0 0 0 -25px + img + margin: 0 + padding: 0 + border: 0 + clear: none + + input#searchField + float: left + height: 20px + width: 195px + margin-top: -3px + border: 1px solid grey + + button#goButton + float: right + margin: -5px 8px 0 0 + height: 30px + width: 30px + background: #FFF url(/images/search.gif) no-repeat center + border: 0 + #nav display: none height: 28px - width: 135px + width: 185px clear: both z-index: 1 background: white @@ -29,6 +57,11 @@ -moz-border-radius: 2px button float: left + background: url(/images/buttonbg.gif) no-repeat center + margin-left: 3px + border: 0px + height: 23px + width: 83px .notice padding: 5px @@ -36,6 +69,7 @@ -webkit-border-radius: 5px margin-top: 5px text-align: center + border: 1px solid grey #perm margin-top: 10px font-size: 80% public/stylesheets/sass/webkit.sass @@ -102,11 +102,34 @@ table.admin { #header #logo { float: left; padding-right: 5px; } + #header #clearButton { + clear: none; + float: left; + padding: 0; + margin: 0 0 0 -25px; } + #header #clearButton img { + margin: 0; + padding: 0; + border: 0; + clear: none; } + #header input#searchField { + float: left; + height: 20px; + width: 195px; + margin-top: -3px; + border: 1px solid grey; } + #header button#goButton { + float: right; + margin: -5px 8px 0 0; + height: 30px; + width: 30px; + background: #FFF url(/images/search.gif) no-repeat center; + border: 0; } #nav { display: none; height: 28px; - width: 135px; + width: 185px; clear: both; z-index: 1; background: white; @@ -117,14 +140,20 @@ table.admin { -webkit-border-radius: 2px; -moz-border-radius: 2px; } #nav button { - float: left; } + float: left; + background: url(/images/buttonbg.gif) no-repeat center; + margin-left: 3px; + border: 0px; + height: 23px; + width: 83px; } .notice { padding: 5px; background: #ddd; -webkit-border-radius: 5px; margin-top: 5px; - text-align: center; } + text-align: center; + border: 1px solid grey; } .notice #perm { margin-top: 10px; font-size: 80%; } public/stylesheets/webkit.css public/images/arrow.gif public/images/merb.jpg public/jquery.js public/webkit.js 344bb35d0d302856eb29dd629fbdc7c2fcd55c86 Hampton Catlin hcatlin@gmail.com http://github.com/hcatlin/wikimedia-mobile/commit/2dd80ca4d8e6fdeaa1bc5ff3d2a7a7fcb44fe533 2dd80ca4d8e6fdeaa1bc5ff3d2a7a7fcb44fe533 2009-07-26T14:46:50-07:00 2009-07-26T14:46:50-07:00 big reworking of the button bar at the top. should work great in the Big 3 Devices 650135058e472dab5061054a1b4197598846f906 Hampton Catlin hcatlin@gmail.com