Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Styles for the demo static page, and some quick attempts at delineati…

…ng what the template might look like.
  • Loading branch information...
commit 495282b1a1ce8df4587cd90f5e5085a9bb9e2ce2 1 parent 838b8d0
mofro authored
View
6 readme.md
@@ -4,3 +4,9 @@ Departure and arrival times for your frequently visited places.
http://appsforsepta.org
http://setpa.org
+
+A quick (changing) list of things I think are still undone (FE):
+
+1. Passing the initial location call to the (heroku) app
+2. getting zip or geo-location data from the user
+3. Creating the Jinja template
View
5 static/afs.html
@@ -1,8 +1,9 @@
<html>
<head>
<title>TravelBoard - Apps For SEPTA</title>
+ <link type="text/css" rel="stylesheet" href="css/transitboard.css" media="screen" />
</head>
-<body>
+<body class="demo">
<h1>TravelBoard</h1>
<h3>Departure and arrival times for your frequently visited places.</h3>
<ul>
@@ -12,7 +13,7 @@
<p>Open source, of course. <a href="http://github.com/jwalgran/transitboard">http://github.com/jwalgran/transitboard</a></p>
- <p>Requests and Suggestions:</p>
+ <h3>Requests and Suggestions:</h3>
<ul>
<li><a href="http://twitter.com/mofro">@mofro</li>
<li><a href="http://twitter.com/jwalgran">@jwalgran</li>
View
33 static/css/transitboard.css
@@ -17,11 +17,25 @@ body {
);
font: bold 100%/1 sans-serif, Cambria, Georgia, serif;
-webkit-text-size-adjust: auto;
- color:#533;
+ color:#000;
margin:0;
padding: 0;
background-color:white;
}
+body.demo {
+ -webkit-text-size-adjust: auto;
+ padding: 5px;
+}
+.demo p {
+ -webkit-text-size-adjust: auto;
+ color:#533;
+ margin:10px;
+ padding: 5px;
+ color: #533;
+}
+.demo li {
+ margin-bottom: 10px;
+}
dl, dd {
margin:0;
}
@@ -29,13 +43,20 @@ h3 {
margin: 8px 0 8px 0;
display: block;
}
-header {
+header, h1 {
background-color: #060;
height: 28px;
font: normal 100%/1 Cambria, Georgia, serif;
color:#ddd;
display: block;
}
+h1 {
+ font-size: 50px;
+ height: 27px;
+ line-height: 40px;
+ overflow: hidden;
+ padding: 10px;
+}
a:link {
background:transparent;
text-decoration: none;
@@ -310,16 +331,16 @@ nav li {
display: inline-block;
margin-top: -28px;
}
-.walk {
+.Walk {
background-image: url('../images/walk.gif');
}
-.bus {
+.Bus {
background-image: url('../images/bus.gif');
}
-.train {
+.Train {
background-image: url('../images/rail.gif');
}
-.metro {
+.Metro {
background-image: url('../images/metro.gif');
}
View
82 templates/index.html
@@ -35,7 +35,7 @@ <h3 class="originName">Home</h3>
<div>Destination</div>
<div>Status</div>
<div>Must Leave By</div>
- <div>Should Arrive By</div>
+ <div>Should Arrive By</divW
<div>Control</div>
<div>Steps</div>
</dt>
@@ -45,28 +45,28 @@ <h3 class="listItem placeName">Grocery Store</h3>
<div class="listItem intervalA">5 mins</div>
<div class="listItem timePoint">3:35pm</div>
<div class="listItem control"><a onclick=""></a></div>
- <div class="stepType"><b class="step walk"></b><b class="step train"></b><b class="step bus"></b><b class="step walk"></b></div>
+ <div class="stepType"><b class="step Walk"></b><b class="step Train"></b><b class="step Bus"></b><b class="step walk"></b></div>
</dt>
<dd>
<table class="steps">
<tr>
<td>
- <p><b class="step walk"></b> Walk to ??stop location$$</p><p><span class="parenthetical">About ??walktime$$ mins (??walk distance$$ mi)</span></p>
+ <p><b class="step Walk"></b> Walk to ??stop location$$</p><p><span class="parenthetical">About ??walktime$$ mins (??walk distance$$ mi)</span></p>
</td>
</tr>
<tr>
<td>
- <p><b class="step train"></b>??Train line & Number$$</p><p>4:43pm - 5:57pm <span class="parenthetical">(??time$$ mins ??number$$ stops)</span></p>
+ <p><b class="step Train"></b>??Train line & Number$$</p><p>4:43pm - 5:57pm <span class="parenthetical">(??time$$ mins ??number$$ stops)</span></p>
</td>
</tr>
<tr>
<td>
- <p><b class="step bus"></b>??Bus line & Number$$</p><p>4:43pm - 5:57pm <span class="parenthetical">(??time$$ mins ??number$$ stops)</span></p>
+ <p><b class="step Bus"></b>??Bus line & Number$$</p><p>4:43pm - 5:57pm <span class="parenthetical">(??time$$ mins ??number$$ stops)</span></p>
</td>
</tr>
<tr>
<td>
- <p><b class="step walk"></b> Walk to ??stop location$$</p><p><span class="parenthetical">About ??walktime$$ mins (??walk distance$$ mi)</span></p>
+ <p><b class="step Walk"></b> Walk to ??stop location$$</p><p><span class="parenthetical">About ??walktime$$ mins (??walk distance$$ mi)</span></p>
</td>
</tr>
</table>
@@ -89,28 +89,28 @@ <h3 class="listItem placeName">Gym</h3>
<div class="listItem intervalA">45 mins</div>
<div class="listItem timePoint">10:17pm</div>
<div class="listItem control"><a onclick=""></a></div>
- <div class="stepType"><b class="step walk"></b><b class="step train"></b><b class="step bus"></b><b class="step walk"></b></div>
+ <div class="stepType"><b class="step Walk"></b><b class="step Train"></b><b class="step Bus"></b><b class="step Walk"></b></div>
</dt>
<dd class="steps">
<table>
<tr>
<td>
- <p><b class="step walk"></b> Walk to ??stop location$$</p><p><span class="parenthetical">About ??walktime$$ mins (??walk distance$$ mi)</span></p>
+ <p><b class="step Walk"></b> Walk to ??stop location$$</p><p><span class="parenthetical">About ??walktime$$ mins (??walk distance$$ mi)</span></p>
</td>
</tr>
<tr>
<td>
- <p><b class="step train"></b>??Train line & Number$$</p><p>4:43pm - 5:57pm <span class="parenthetical">(??time$$ mins ??number$$ stops)</span></p>
+ <p><b class="step Train"></b>??Train line & Number$$</p><p>4:43pm - 5:57pm <span class="parenthetical">(??time$$ mins ??number$$ stops)</span></p>
</td>
</tr>
<tr>
<td>
- <p><b class="step bus"></b>??Bus line & Number$$</p><p>4:43pm - 5:57pm <span class="parenthetical">(??time$$ mins</span></p>
+ <p><b class="step Bus"></b>??Bus line & Number$$</p><p>4:43pm - 5:57pm <span class="parenthetical">(??time$$ mins</span></p>
</td>
</tr>
<tr>
<td>
- <p><b class="step walk"></b> Walk to ??stop location$$</p><p><span class="parenthetical">About ??walktime$$ mins (??walk distance$$ mi)</span></p>
+ <p><b class="step Walk"></b> Walk to ??stop location$$</p><p><span class="parenthetical">About ??walktime$$ mins (??walk distance$$ mi)</span></p>
</td>
</tr>
</table>
@@ -129,35 +129,37 @@ <h3 class="listItem placeName">Gym</h3>
</footer>
</html>
-<script id="templateTest" type="x-tmpl-mustache">
-
- ??#Sections$$
- <ul>
- <li class="location">
- <dl class="origin">
- <dt id="header">
- <h3 class="listItem placeName">??PlaceName$$</h3>
- <div class="listItem statusTags">??StatusTag$$</div>
- <div class="listItem intervalA">??ArrivalTime$$</div>
- <div class="listItem timePoint">??DestinationTime$$</div>
- <div class="listItem control"><a onclick=""></a></div>
- <div class="stepType">??#Steps$$<b class="step ??IconType$$"></b>??/Steps$$</div>
- </dt>
- <dd class="steps">
- <table>
- ??#Routes$$
- <tr>
- <td>
- <p><b class="step ??IconType$$"></b> ??Message$$</p><p><span class="parenthetical">About ??Time$$ ??Distance$$</span></p>
- </td>
- </tr>
- ??/Routes$$
- </table>
- </dd>
- </dl>
- </li>
- </ul>
- ??/Sections$$
+<!--
+# place for messing with the Jinja Template>
+#
+# ****LOOP STARTS HERE **********
+# <ul>
+# <li class="location">
+# <dl class="origin">
+# <dt id="header">
+# <h3 class="listItem placeName">{ location }</h3>
+# <div class="listItem statusTags">{ status }</div>
+# <div class="listItem intervalA">??ArrivalTime$$</div>
+# <div class="listItem timePoint">??DestinationTime$$</div>
+# <div class="listItem control"><a onclick=""></a></div>
+# <div class="stepType">??#Steps$$<b class="step ??IconType$$"></b>??/Steps$$</div>
+# </dt>
+# <dd class="steps">
+# <table>
+# ****INNER STEPS LOOP STARTS HERE **********
+# <tr>
+# <td>
+# <p><b class="step { type }"></b> { instruction.text }</p><p><span class="parenthetical">About { duration / 60} mins { distance_in_miles } miles</span></p>
+# </td>
+# </tr>
+# ******INNER STEPS LOOP ENDS HERE ******
+# </table>
+# </dd>
+# </dl>
+# </li>
+# </ul>
+# ****** LOOP ENDS HERE ******
+ -->
</script>
Please sign in to comment.
Something went wrong with that request. Please try again.