Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

styled the app

  • Loading branch information...
commit 77ac7af62ebc5ebfe32de39b331efdd0cc06ee32 1 parent c5b0bcf
@ryanbetts ryanbetts authored
Showing with 65 additions and 47 deletions.
  1. +58 −43 assets/css/master.css
  2. +7 −4 index.html
View
101 assets/css/master.css
@@ -1,42 +1,54 @@
body {
- background: blue;
+ background: #fff;
+ background: -webkit-gradient(linear, 100% 0%, 0% 0%, from(#C8C8C8), color-stop(0.47, white), to(#C8C8C8));
margin: 0;
font: 18px Helvetica;
text-align: center;
}
#title_bar {
- background: black;
- color: white;
- height: 25px;
- padding: 10px 5%;
- width: 90%;
+ /* need a position set to something for z-index to take effect */
+ position: relative;
+ z-index: 1;
+ background: #ccc;
+ background: -webkit-gradient(linear, 0 0, 0 70%, from(#fff), to(#ccc));
+ background: linear-gradient(#fff, #ccc 70%);
+ color: #444;
+ text-shadow: 0 1px 0 #fff;
+ border-bottom: 1px solid #999;
+ height: 44px;
+ line-height: 44px;
+ padding: 0;
+ -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.3);
+ box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
-.app_button {
- background: gold;
- border: khaki;
- margin: 15px auto;
- padding: 5px;
+.app_button, button {
+ -webkit-border-radius: 20px;
+ border-radius: 20px;
+ display: inline-block;
+ padding: 0 20px;
+ margin-bottom: 20px;
+ cursor: pointer;
width: 200px;
- -webkit-border-radius: 5px;
+ background:#F7941E;
+ background: -webkit-gradient(linear, 0 0, 0 70%, from(#F7941E), to(#D37F18));
+ background: linear-gradient(#F7941E, #D37F18 70%);
+ border: 1px solid #C97917;
+ font-weight: 200;
+ text-shadow: 0 -1px 0 #7E4B0D;
+ height: 40px;
+ line-height: 40px;
+ color:#fff;
+ text-align: center;
}
#back_button {
background: grey;
}
-
-/**
- * Since all of the views are the same, we'll set them to static widths and heights to match our device.
- **/
.view {
- width: 320px;
- /* on the iPhone, we have to account for the 20px status bar at the top */
- /* 480 - 20 = 460 */
- /* then 460 - 40 to account for our title bar */
- height: 420px;
-
+ padding: 35px;
/* only one view is displayed at a time
so we'll set the views to default to be un-displayed
and then override this based on the element id */
@@ -46,29 +58,32 @@ body {
#welcome {
display: block;
}
-#settings {
- background: white;
-}
-#map {
- background: black;
- color: white;
-}
-.map_image {
- margin: auto;
- height: 250px;
- padding-top: 35px;
- width: 250px;
+#map {
+ text-shadow: 0 1px 0 #fff;
}
-#settings_form {
- display: block;
- padding: 20px;
-}
+ .map_image {
+ margin: auto;
+ height: 250px;
+ width: 250px;
+ border: 1px solid #aaa;
+ }
-button {
- font: 18px Helvetica;
- height: 30px;
- width: 100px;
- -webkit-appearance:push-button;
+#settings {
}
+
+ legend {
+ font-weight: bold;
+ text-shadow: 0 1px 0 #fff;
+ }
+
+ fieldset {
+ margin-bottom: 20px;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ }
+
+ input {
+ margin-bottom: 8px;
+ }
View
11 index.html
@@ -23,7 +23,7 @@
</head>
<body>
- <div id="title_bar">PhoneGap Training App</div>
+ <div id="title_bar">Phone<strong>Gap</strong> Training App</div>
<div id="welcome" class="view">
<div class="app_button" id="map_button">Show My Location</div>
@@ -40,18 +40,21 @@
<div id="settings" class="view">
<form id="settings_form">
- <p>Map Type</p>
+ <fieldset>
+ <legend>Map Type</legend>
<input type="radio" name="map" value="roadmap" checked>Road Map<br/>
<input type="radio" name="map" value="satellite">Satellite<br/>
<input type="radio" name="map" value="terrain">Terrain<br/>
<input type="radio" name="map" value="hybrid">Hybrid<br/>
- <p>Zoom Level</p>
+ </fieldset>
+ <fieldset>
+ <legend>Zoom Level</legend>
<input type="radio" name="zoom" value="10">Super Far<br/>
<input type="radio" name="zoom" value="12">Far<br/>
<input type="radio" name="zoom" value="15" checked>Normal<br/>
<input type="radio" name="zoom" value="18">Close<br/>
<input type="radio" name="zoom" value="20">Super Close<br/>
- <br />
+ </fieldset>
<button id="save_button">Save</button>
</form>
</div>
Please sign in to comment.
Something went wrong with that request. Please try again.