Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

style updates

  • Loading branch information...
commit c611b5d69c6a396860c1585b73864c9aae85f21c 1 parent 917a566
Nathan L Smith authored October 19, 2009
20  CollegeFootball/index.html
@@ -14,7 +14,7 @@
14 14
 
15 15
 <body id="standalone">
16 16
   <div id="front" class="side">
17  
-    <div id="top">
  17
+    <div class="top">
18 18
       <img id="logo" src="" alt="" />
19 19
       <h1 id="name"></h1>
20 20
       <div id="links">
@@ -26,17 +26,23 @@ <h1 id="name"></h1>
26 26
     <span id="flip">i</span>
27 27
   </div>
28 28
   <div id="back" class="side">
29  
-    <div id="about">
  29
+    <div class="top" id="about">
30 30
       <h1>College Sports</h1>
31 31
       <a href="http://nlsmith.com/projects/">nlsmith.com</a>
32 32
     </div>
33 33
     <form method="get" action="">
34  
-      <label for="conference">Conference</label>
35  
-      <select id="conference" name="conference"></select>
36  
-      <label for="team">Team</label>
37  
-      <select id="team" name="team"></select>
  34
+      <div class="item">
  35
+        <label for="conference">Conference</label>
  36
+        <select id="conference" name="conference"></select>
  37
+      </div>
  38
+      <div class="item">
  39
+        <label for="team">Team</label>
  40
+        <select id="team" name="team"></select>
  41
+      </div>
  42
+      <div class="item submit">
  43
+        <button id="done">Done</button>
  44
+      </div>
38 45
     </form>
39  
-    <button id="done">Done</button>
40 46
   </div>
41 47
 </body>
42 48
 </html>
10  CollegeFootball/js/ui.js
@@ -18,6 +18,7 @@ ui.load = function () {
18 18
         news : $("#news"),
19 19
         stats : $("#stats")
20 20
     };
  21
+    ui.front = $("#front");
21 22
     ui.title = $("#name");
22 23
     ui.logo = $("#logo");
23 24
     ui.schedule = $("#schedule");
@@ -26,7 +27,10 @@ ui.load = function () {
26 27
     ui.selects.conference.bind("change", w.setTeam);
27 28
     ui.selects.team.bind("change", w.setTeam);
28 29
     ui.buttons.flip.bind("click", ui.flip);
29  
-    ui.buttons.done.bind("click", ui.flip);
  30
+    ui.buttons.done.bind("click", function (evt) { 
  31
+        evt.preventDefault();
  32
+        ui.flip()
  33
+    });
30 34
 };
31 35
 
32 36
 ui.populateSelect = function (info, select) {
@@ -64,6 +68,7 @@ ui.update = function (team) {
64 68
     ui.updateLogo();
65 69
     ui.updateTitle();
66 70
     ui.updateTable();
  71
+    ui.updateBackground();
67 72
     ui.updateLinks();
68 73
     ui.loading("off");
69 74
 };
@@ -82,6 +87,9 @@ ui.updateLinks = function () {
82 87
     });
83 88
 };
84 89
 
  90
+ui.updateBackground = function() {
  91
+    ui.front.css("background-color", "#" + w.currentTeam.color);
  92
+}
85 93
 
86 94
 ui.updateTable = function () {
87 95
     ui.schedule.html(w.currentTeam.html);
85  CollegeFootball/resources/screen.css
... ...
@@ -1,13 +1,12 @@
1 1
 body { 
2 2
     margin: 0px; 
3 3
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  4
+    font-size: 12px;
4 5
     color: white;
5 6
     background: transparent;
6  
-    padding: 5px;
7 7
 }
8 8
 
9 9
 table {
10  
-    font-size: 12px;
11 10
     width: 100%;
12 11
     margin-left: auto;
13 12
     margin-right: auto;
@@ -22,9 +21,7 @@ td {
22 21
 }
23 22
 
24 23
 a {
25  
-    font-size: 16px;
26  
-    font-weight: bold;
27  
-	color: white;
  24
+    color: white;
28 25
     text-decoration: none;
29 26
     margin-bottom: 1px;
30 27
 }
@@ -35,52 +32,65 @@ a:hover {
35 32
 }
36 33
 
37 34
 h1 {
38  
-  font-size: 16px;
39  
-  font-weight: bold;
40  
-  display: inline;
41  
-  height: 50px;
42  
-  vertical-align: middle;
  35
+    font-size: 16px;
  36
+    font-weight: bold;
  37
+    display: inline;
  38
+    vertical-align: middle;
  39
+    margin: 0px 0px 0px 12px;
43 40
 }
44 41
 
45 42
 .side {
46 43
     background: black;
  44
+    margin: 12px;
  45
+    padding: 12px 0px 12px 0px;
  46
+    min-height: 412px;
  47
+
47 48
     border: 1px solid black;
48 49
     border-radius : 12px;
49 50
     -moz-border-radius : 12px;
50 51
     -webkit-border-radius : 12px;
51 52
 
  53
+    box-shadow: black 1px 6px 9px;
  54
+    -moz-box-shadow: black 1px 6px 9px;
  55
+    -webkit-box-shadow: black 1px 6px 9px;
52 56
 }
53 57
 
54  
-#top {
55  
-    padding : 10px;
56  
-}
  58
+.side .top { margin: 0px 12px 12px 12px; }
57 59
 
58  
-#top img { width: 50px; height: 50px; }
  60
+#front { position: relative; }
59 61
 
60  
-#top #links {
61  
-    float: right;
62  
-}
  62
+#front .top img { width: 50px; height: 50px; vertical-align: middle; }
63 63
 
64  
-#top #links a {
65  
-    display : block;
  64
+.top #links {
  65
+    float: right;
66 66
 }
67 67
 
68 68
 #flip {
69  
-    text-align: right;
  69
+    position: absolute;
  70
+    bottom: 3px;
  71
+    right: 5px;
  72
+    text-align: center;
70 73
     display: block;
  74
+    width: 18px;
  75
+    font-size: 14px;
  76
+    font-style: italic;
  77
+    font-weight: bold;
  78
+    font-family: Times, "Times New Roman", serif;
  79
+    margin: auto;
71 80
 }
72 81
 
73  
-#teamLogo {
74  
-    position: absolute;
75  
-    left: 20px;
76  
-    top: 15px;
77  
-    z-index: 0;
78  
-    width: 50px;
79  
-    height: 50px;
80  
-    background-color: #000000;
  82
+#flip:hover { 
  83
+    border-radius: 18px;
  84
+    -moz-border-radius: 18px;
  85
+    -webkit-border-radius: 8px;
  86
+    background-color: white;
  87
+    opacity: 0.4%;
  88
+    color: black;
  89
+    cursor: pointer;
81 90
 }
82  
-
83 91
 #schedule {
  92
+    overflow: auto;
  93
+    margin: 0px 0px 18px 8px;
84 94
 }
85 95
 
86 96
 #about {
@@ -92,12 +102,29 @@ h1 {
92 102
     display: none;
93 103
 }
94 104
 
  105
+#back .top {
  106
+    padding: 24px 12px 24px 12px;
  107
+}
95 108
 #back h1 {
96 109
     white-space: nowrap;
97 110
     font-size: 24px;
98 111
     font-family: "Rockwell Extra Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
  112
+    margin-top: 2em;
  113
+    margin-bottom: 4em;
  114
+    display: block;
  115
+}
  116
+
  117
+#back a {
  118
+    text-align: right;
  119
+    display: block;
99 120
 }
100 121
 
  122
+form { margin: 12px 0px 0px 24px; }
  123
+form .item { width: 100%; clear: both; margin-bottom: 12px; }
  124
+form label { width: 80px; float: left; display: block; margin-bottom: 12px; }
  125
+form select { float: left; display: block; margin-bottom: 12px; }
101 126
 #done {
  127
+    float: right;
  128
+    margin-right: 64px;
102 129
 }
103 130
 

0 notes on commit c611b5d

Please sign in to comment.
Something went wrong with that request. Please try again.