Permalink
Browse files

style updates

  • Loading branch information...
1 parent 917a566 commit c611b5d69c6a396860c1585b73864c9aae85f21c @smith committed Oct 20, 2009
Showing with 78 additions and 37 deletions.
  1. +13 −7 CollegeFootball/index.html
  2. +9 −1 CollegeFootball/js/ui.js
  3. +56 −29 CollegeFootball/resources/screen.css
View
20 CollegeFootball/index.html
@@ -14,7 +14,7 @@
<body id="standalone">
<div id="front" class="side">
- <div id="top">
+ <div class="top">
<img id="logo" src="" alt="" />
<h1 id="name"></h1>
<div id="links">
@@ -26,17 +26,23 @@ <h1 id="name"></h1>
<span id="flip">i</span>
</div>
<div id="back" class="side">
- <div id="about">
+ <div class="top" id="about">
<h1>College Sports</h1>
<a href="http://nlsmith.com/projects/">nlsmith.com</a>
</div>
<form method="get" action="">
- <label for="conference">Conference</label>
- <select id="conference" name="conference"></select>
- <label for="team">Team</label>
- <select id="team" name="team"></select>
+ <div class="item">
+ <label for="conference">Conference</label>
+ <select id="conference" name="conference"></select>
+ </div>
+ <div class="item">
+ <label for="team">Team</label>
+ <select id="team" name="team"></select>
+ </div>
+ <div class="item submit">
+ <button id="done">Done</button>
+ </div>
</form>
- <button id="done">Done</button>
</div>
</body>
</html>
View
10 CollegeFootball/js/ui.js
@@ -18,6 +18,7 @@ ui.load = function () {
news : $("#news"),
stats : $("#stats")
};
+ ui.front = $("#front");
ui.title = $("#name");
ui.logo = $("#logo");
ui.schedule = $("#schedule");
@@ -26,7 +27,10 @@ ui.load = function () {
ui.selects.conference.bind("change", w.setTeam);
ui.selects.team.bind("change", w.setTeam);
ui.buttons.flip.bind("click", ui.flip);
- ui.buttons.done.bind("click", ui.flip);
+ ui.buttons.done.bind("click", function (evt) {
+ evt.preventDefault();
+ ui.flip()
+ });
};
ui.populateSelect = function (info, select) {
@@ -64,6 +68,7 @@ ui.update = function (team) {
ui.updateLogo();
ui.updateTitle();
ui.updateTable();
+ ui.updateBackground();
ui.updateLinks();
ui.loading("off");
};
@@ -82,6 +87,9 @@ ui.updateLinks = function () {
});
};
+ui.updateBackground = function() {
+ ui.front.css("background-color", "#" + w.currentTeam.color);
+}
ui.updateTable = function () {
ui.schedule.html(w.currentTeam.html);
View
85 CollegeFootball/resources/screen.css
@@ -1,13 +1,12 @@
body {
margin: 0px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 12px;
color: white;
background: transparent;
- padding: 5px;
}
table {
- font-size: 12px;
width: 100%;
margin-left: auto;
margin-right: auto;
@@ -22,9 +21,7 @@ td {
}
a {
- font-size: 16px;
- font-weight: bold;
- color: white;
+ color: white;
text-decoration: none;
margin-bottom: 1px;
}
@@ -35,52 +32,65 @@ a:hover {
}
h1 {
- font-size: 16px;
- font-weight: bold;
- display: inline;
- height: 50px;
- vertical-align: middle;
+ font-size: 16px;
+ font-weight: bold;
+ display: inline;
+ vertical-align: middle;
+ margin: 0px 0px 0px 12px;
}
.side {
background: black;
+ margin: 12px;
+ padding: 12px 0px 12px 0px;
+ min-height: 412px;
+
border: 1px solid black;
border-radius : 12px;
-moz-border-radius : 12px;
-webkit-border-radius : 12px;
+ box-shadow: black 1px 6px 9px;
+ -moz-box-shadow: black 1px 6px 9px;
+ -webkit-box-shadow: black 1px 6px 9px;
}
-#top {
- padding : 10px;
-}
+.side .top { margin: 0px 12px 12px 12px; }
-#top img { width: 50px; height: 50px; }
+#front { position: relative; }
-#top #links {
- float: right;
-}
+#front .top img { width: 50px; height: 50px; vertical-align: middle; }
-#top #links a {
- display : block;
+.top #links {
+ float: right;
}
#flip {
- text-align: right;
+ position: absolute;
+ bottom: 3px;
+ right: 5px;
+ text-align: center;
display: block;
+ width: 18px;
+ font-size: 14px;
+ font-style: italic;
+ font-weight: bold;
+ font-family: Times, "Times New Roman", serif;
+ margin: auto;
}
-#teamLogo {
- position: absolute;
- left: 20px;
- top: 15px;
- z-index: 0;
- width: 50px;
- height: 50px;
- background-color: #000000;
+#flip:hover {
+ border-radius: 18px;
+ -moz-border-radius: 18px;
+ -webkit-border-radius: 8px;
+ background-color: white;
+ opacity: 0.4%;
+ color: black;
+ cursor: pointer;
}
-
#schedule {
+ overflow: auto;
+ margin: 0px 0px 18px 8px;
}
#about {
@@ -92,12 +102,29 @@ h1 {
display: none;
}
+#back .top {
+ padding: 24px 12px 24px 12px;
+}
#back h1 {
white-space: nowrap;
font-size: 24px;
font-family: "Rockwell Extra Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ margin-top: 2em;
+ margin-bottom: 4em;
+ display: block;
+}
+
+#back a {
+ text-align: right;
+ display: block;
}
+form { margin: 12px 0px 0px 24px; }
+form .item { width: 100%; clear: both; margin-bottom: 12px; }
+form label { width: 80px; float: left; display: block; margin-bottom: 12px; }
+form select { float: left; display: block; margin-bottom: 12px; }
#done {
+ float: right;
+ margin-right: 64px;
}

0 comments on commit c611b5d

Please sign in to comment.