Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Merged
merged 3 commits into from almost 3 years ago

2 participants

C. Jordan Muir zackster
C. Jordan Muir

Depending on your policy for old browser support we might want to run some test before pushing it live. I tested it on chrome/safari/firefox builds.

C. Jordan Muir

I would also like to reorganize the main page to have even more focus on the venter/listener count. I kept the layout similar to how it was for the sake of time but I think a nice page focused on the count and joining a side would help engagement.

zackster zackster merged commit 6a0b00d into from
zackster
Owner

Merged

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 3 unique commits by 1 author.

Aug 15, 2011
C. Jordan Muir floating ui beta build ea08b0d
C. Jordan Muir floating fix merge 816cbe6
C. Jordan Muir floating cleanup unused css 6a0b00d
This page is out of date. Refresh to see the latest.
7 static/chat.js
@@ -121,7 +121,7 @@
121 121 $status.removeClass('errorMessage infoMessage');
122 122 $status.addClass(cssClass);
123 123 if(msgform) {
124   - $status.text("connected");
  124 + $status.text("Connected");
125 125 } else {
126 126 $status.text(msg);
127 127 }
@@ -157,6 +157,7 @@
157 157 });
158 158
159 159 $('#enable_sound').attr('checked', true);
  160 + $('#enable_typing').attr('checked', true);
160 161 info('Initializing');
161 162
162 163 $('#audioPlayer')
@@ -322,11 +323,11 @@
322 323 break;
323 324
324 325 case "start":
325   - $("#typing_status").text(type + ' is typing')
  326 + $("#typing_status").text(type + ' is typing');
326 327 break;
327 328
328 329 case "stop":
329   - $("#typing_status").text('')
  330 + $("#typing_status").text('');
330 331 break;
331 332 }
332 333 }
384 static/css/style.css
... ... @@ -1,182 +1,248 @@
1 1 /***** General Styles ******/
2 2
3   -.clear {
4   - clear:both;
  3 +body {
  4 + background: #21323b url("/img/bg.png") center;
  5 + font-family: sans-serif;
  6 + font-size: 13px;
5 7 }
6 8
7   -body {
8   - background: #fafafa url(/img/BG_gradient.png) repeat-x;
  9 +/***** Main Content Styles ******/
  10 +#header {
  11 + background: url("/img/logo.png") center center no-repeat;
  12 + height: 120px;
  13 + width: 960px;
  14 + margin: 0 auto;
  15 + display: block;
  16 + cursor: pointer;
9 17 }
10 18
11   -#container {
12   - background:transparent url(/img/BG_lighting.png) no-repeat;
13   - height:250px;
  19 +#main {
  20 + width:960px;
14 21 margin:0px auto;
15   - width:1020px;
  22 + box-shadow: 0px 0px 6px rgba(42,159,227,1), inset 0px 0px 250px rgba(216,243,255,0.5);
  23 + background: #fff;
  24 + overflow: hidden;
16 25 }
17 26
18   -/***** Header Styles ******/
  27 +#main #mainleft {
  28 + width:660px;
  29 + float: left;
  30 + padding: 10px;
  31 + text-align: center;
  32 +}
19 33
20   -img#logo {
21   - margin: 0px 30px 0px 55px;
  34 +#mainleft h2 {
  35 + color: rgba(42,159,227,1);
  36 + font-size: 24px;
  37 + padding-bottom: 10px;
22 38 }
23 39
24   -/***** Tagline Styles ******/
25   -
26   -#tagline {
27   - background:transparent url(/img/BG_redbar.png) no-repeat;
28   - height:100px;
29   - text-align:left;
30   - padding:0px 65px 35px 0px;
  40 +#mainleft p {
  41 + font-size: 14px;
31 42 }
32 43
33   -#tagline h1 {
34   - font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
35   - font-size:26px;
36   - color:#52B9DB;
37   - padding: 45px 0px 0px 60px;
38   - font-weight:normal;
  44 +#mainleft #counts{
  45 + color: rgba(42,159,227,1);
  46 + font-size: 20px;
39 47 }
40 48
41   -/***** Main Content Styles ******/
  49 +#main #mainright {
  50 + width:280px;
  51 + float: right;
  52 +}
42 53
43   -#main {
44   - margin-bottom:20px;
  54 +#main #left {
  55 + width:680px;
  56 + height: 300px;
  57 + float: left;
45 58 }
46 59
47   -.separator {
48   - background:url(/img/separator.png) center;
49   - width:20px;
50   - height:290px;
51   - float:left;
  60 +#column_left_chat {
  61 + width: 660px;
  62 + overflow-y: scroll;
  63 + overflow-x: hidden;
  64 + height: 240px;
  65 + margin: 10px;
52 66 }
53 67
54   -#column_left {
55   - width:450px;
56   - float:left;
57   - padding:0px 20px 0px 60px;
  68 +#column_left_chat::-webkit-scrollbar {
  69 + width: 10px;
  70 + height: 260px;
58 71 }
59 72
60   -#column_left_wrap {
61   - width:680px;
62   - margin:0 0 0 40px;
63   - float:left;
64   - min-height: 300px;
  73 +#column_left_chat::-webkit-scrollbar-track {
  74 + background: rgba(42,159,227,0.1);
  75 + box-shadow: inset 0px 0px 2px rgba(42,159,227,0.8);
65 76 }
66 77
67   -#column_left_chat {
68   - width: 100%;
69   - background-color: #FFFFFF;
70   - border: 1px solid #4A7A8A;
71   - overflow-y: scroll;
72   - height: 300px;
  78 +#column_left_chat::-webkit-scrollbar-thumb {
  79 + background: rgba(42,159,227,1);
73 80 }
74 81
75   -#typing_status{
  82 +
  83 +#chatWindow{
  84 + width: 640px;
  85 + margin-right: 10px;
  86 +}
  87 +
  88 +#chatWindow tbody tr {
  89 + border-bottom: 1px solid rgba(42,159,227,0.1);
  90 +}
  91 +
  92 +#chatWindow tbody td {
  93 + padding: 5px;
  94 +}
  95 +
  96 +#left #inform {
76 97 height: 30px;
  98 + margin-bottom: 10px;
  99 + margin-left: 10px;
  100 + width: 600px;
  101 + border: 0;
  102 + padding: 0;
  103 + float: left;
  104 + font-size: 18px;
  105 + background: rgba(42,159,227,0.05);
  106 + box-shadow: inset 0px 0px 2px rgba(42,159,227,0.8);
77 107 }
78 108
79   -#column_left_chat_type {
80   - width:600px;
81   - float:left;
82   - padding:20px;
83   - margin:0 0 0 40px;
84   - background-color: #FFFFFF;
85   - height: 20px;
86   - border-top: 1px none #4A7A8A;
87   - border-right: 1px solid #4A7A8A;
88   - border-bottom: 1px solid #4A7A8A;
89   - border-left: 1px solid #4A7A8A;
  109 +#left #sendmessage {
  110 + height: 30px;
  111 + margin-bottom: 10px;
  112 + margin-right: 10px;
  113 + width: 60px;
  114 + background: #2a9fe3;
  115 + border: 0;
  116 + float: right;
  117 + cursor: pointer;
  118 + color: #fff;
  119 + font-weight: bold;
90 120 }
91 121
92   -#column_right {
93   - width:380px;
94   - float:right;
95   - padding:0px 20px;
  122 +#main #right {
  123 + width:280px;
  124 + height: 300px;
  125 + float: right;
96 126 }
97 127
98   -#column_right_chat {
99   - width:200px;
100   - float:left;
101   - padding:0px 0px 0px 20px;
  128 +#buttons1 {
  129 + width:280px;
102 130 }
103 131
104   -h2 {
105   - color:#4A7A8A;
106   - font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
107   - font-size:22px;
108   - margin-bottom:20px;
  132 +#status {
  133 + margin: 10px 10px 97px 0px;
  134 + width: 250px;
  135 + padding: 10px;
  136 + text-align: center;
  137 + background: #2a9fe3;
  138 + color: #fff;
  139 + font-weight: bold;
109 140 }
110 141
111   -p {
112   - color:#000;
113   - font-family:Arial, Helvetica, sans-serif;
114   - font-size:12px;
115   - line-height:24px;
116   - margin-bottom:15px;
  142 +#buttons1 li {
  143 + display: block;
  144 + margin: 10px 10px 10px 0px;
  145 + width: 270px;
  146 + padding-top: 7px;
  147 + background: rgba(42,159,227,0.05);
  148 + box-shadow: inset 0px 0px 2px rgba(42,159,227,0.8);
  149 + text-align: center;
  150 + height: 23px;
  151 + color: rgba(42,159,227,1);
  152 + font-weight: bold;
117 153 }
118 154
119   -#column_left_chat p {
120   - color:#000;
121   - font-family:Arial, Helvetica, sans-serif;
122   - font-weight:bold;
123   - font-size:14px;
124   - line-height:24px;
125   - margin-bottom:15px;
  155 +#buttons1 a:link, #buttons1 a:active, #buttons1 a:visited, #buttons1 a:hover{
  156 + color: rgba(42,159,227,1);
126 157 }
127 158
128   -#column_left_chat p span {
129   - color:#666666;
130   - font-family:Arial, Helvetica, sans-serif;
131   - font-weight:normal;
132   - font-size:14px;
133   - line-height:20px;
134   - margin-bottom:30px;
  159 +.infoMessage {
  160 +}
  161 +
  162 +#typing_status{
  163 + margin: 10px 10px 10px 0px;
  164 + width: 270px;
  165 + padding-top: 8px;
  166 + text-align: center;
  167 + height: 22px;
  168 + color: rgba(42,159,227,1);
  169 + font-weight: bold;
135 170 }
136 171
137   -/***** Button Styles ******/
  172 +#fb{
  173 + text-align: center;
  174 +}
138 175
139   -/*- Buttons 1--------------------------- */
140   -
141   -#buttons1 {
142   - width: 320px;
143   - margin: 10px;
  176 +/***** Footer Styles ******/
  177 +
  178 +#footer {
  179 + background: url("/img/mainshadow.png") top center no-repeat;
  180 + height:60px;
  181 + width:940px;
  182 + margin: 0 auto;
  183 + padding: 10px 20px 10px 20px;
  184 +}
  185 +
  186 +#copyright_notice {
  187 + width: 340px;
144 188 float: left;
145   - margin-top:50px;
  189 + font-size: 12px;
  190 + color: #000;
146 191 }
147 192
148   -#buttons1 li {
149   - width: 62.5%;
  193 +#copyright_notice span {
  194 + color: #000;
150 195 }
151 196
152   -#buttons1 li.medium {
153   - width: 81.25%;
  197 +#nav {
  198 + float: right;
  199 + width: 600px;
  200 +}
  201 +
  202 +#nav ul#links {
  203 + margin: 0;
  204 + padding: 0;
  205 + list-style-type: none;
  206 + display: inline;
  207 + float: right;
154 208 }
155 209
156   -#buttons1 li.large {
157   - width: 100%;
  210 +#nav ul#links li {
  211 + float: left;
  212 + text-transform: uppercase;
  213 + font-size: 12px;
  214 + padding-left: 10px;
  215 + margin:0;
158 216 }
159 217
160   -#buttons1 li a {
  218 +#nav ul#links a:link, ul#links a:active, ul#links a:visited {
161 219 text-decoration: none;
162   - border-radius: 5px;
163   - background: #4a7a8a;
164   - color: #FFF;
165   - font-family:Arial, Helvetica, sans-serif;
166   - font-size:13px;
167   - display: block;
168   - padding: 8px 8px 10px 10px;
169   - margin-bottom:20px;
170   -}
171   -#buttons1 li a:hover {
172   - background: #52b9db;
  220 + color: #000;
  221 + font-weight: bold;
  222 +}
  223 +
  224 +#nav ul#links a:hover {
  225 + text-decoration:none;
  226 + color: rgba(42,159,227,1);
  227 +}
  228 +
  229 +
  230 +#extra{
  231 + padding: 0 15px 15px 15px;
  232 +}
  233 +
  234 +#extra h2{
  235 + color: rgba(42,159,227,1);
  236 + font-size: 17px;
  237 + padding-bottom: 5px;
  238 + padding-top: 20px;
173 239 }
174 240
175   -#buttons1 li a.disabled, a.disabled:hover {
176   - background: #8a8a8a;
177   - cursor:default;
  241 +#extra p{
  242 + padding-bottom: 5px;
178 243 }
179 244
  245 +
180 246 /*- Buttons 2--------------------------- */
181 247
182 248 #buttons2 {
@@ -259,105 +325,32 @@ input#submit {
259 325 cursor:pointer;
260 326 }
261 327
262   -/***** Footer Styles ******/
263   -
264   -#footer {
265   - background:transparent url(/img/bg_footer.png) no-repeat;
266   - height:62px;
267   - width:900px;
268   - padding:23px 40px 50px 60px;
269   -}
270   -
271   -#copyright_notice {
272   - font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
273   - font-size:12px;
274   - font-weight:normal;
275   - color:#555252;
276   - width:350px;
277   - float:left;
278   -}
279   -
280   -#copyright_notice span {
281   - color:#4A7A8A;
282   -}
283   -
284   -#nav {
285   - float:left;
286   - width:550px;
287   -}
288   -
289   -ul#links {
290   - margin: 0;
291   - padding: 0;
292   - list-style-type: none;
293   - display: inline;
294   - float:right;
295   -}
296   -
297   -ul#links li {
298   - float: left;
299   - font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
300   - font-size:12px;
301   - font-weight:bold;
302   - color:#555252;
303   - text-transform:uppercase;
304   - padding: 0 10px;
305   - margin:0;
306   -}
307   -
308   -ul#links a:link, ul#links a:active, ul#links a:visited {
309   - text-decoration:none;
310   - color:#555252;
311   -}
312   -
313   -ul#links a:hover {
314   - text-decoration:none;
315   - color:#52B9DB;
316   -}
317 328
318   -#header {
319   - padding-top: 10px;
320   -}
321 329
322   -#header h1 {
323   - background: url("/img/logo.png");
324   - width: 250px;
325   - height: 70px;
326   - text-indent: -5000px;
327   - margin: 0px 30px 0px 55px;
328   -}
329 330
330 331 #column_full {
331 332 padding:0px 60px 0px 60px;
332 333 }
333 334
334 335 .white-row {
335   - background-color:#fff; /* this probably isn't necessary... */
336 336 }
337 337
338 338 .off-white-row {
339   - background-color:#f7f7f7;
  339 + background: rgba(42,159,227,0.05);
340 340 }
341 341
342 342 .blue-row {
343   - background-color:#add8e6;
  343 + background-color: rgba(42,159,227,0.2);
344 344 }
345 345
346 346 .yellow-row {
347 347 background-color:#faec87;
348 348 }
349 349
350   -#status {
351   - font-weight: bold;
352   -}
353   -
354 350 .errorMessage {
355 351 color: red;
356 352 }
357 353
358   -.infoMessage {
359   - color: blue;
360   -}
361 354
362 355 #version-bar a, #version-bar a:link, #version-bar a:visited, #version-bar a:active {
363 356 display: block;
@@ -365,7 +358,6 @@ ul#links a:hover {
365 358 background:#ffffe1;
366 359 border-bottom:1px outset;
367 360 text-decoration:none;
368   - font-family:Verdana,Arial,Helvetica,sans-serif;
369 361 }
370 362
371 363 #version-bar a:hover {
BIN  static/img/bg.png
BIN  static/img/logo.png
BIN  static/img/mainshadow.png
11 views/about-us.jade
... ... @@ -1,8 +1,5 @@
1   -#tagline
2   - h1 About Us
3   -
4 1 #main
5   - #column_left
  2 + #extra
6 3 //- Should probably move this out to not be hard-coded
7 4 :markdown
8 5 About CompassionPit
@@ -35,9 +32,3 @@
35 32 -----------
36 33 The server powering the site is written in Node.js and I have released the source code for free. Take a look: [https://github.com/zackster/CompassionPit--Node-/](https://github.com/zackster/CompassionPit--Node-/).
37 34
38   - br.clear
39   -
40   - #column_right
41   - #buttons1
42   -
43   - br.clear
57 views/chat.jade
... ... @@ -1,47 +1,38 @@
1   -script
2   - //- Google Website Optimizer Tracking Script
3   - var _gaq = _gaq || [];
4   - _gaq.push(['gwo._setAccount', 'UA-17971348-2']);
5   - _gaq.push(['gwo._trackPageview', '/1104807929/goal']);
6   - (function() {
7   - var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
8   - ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
9   - var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
10   - })();
11   -
12   -script
13   - window.CLIENT_TYPE = !{JSON.stringify(type)};
14   -
15 1 #audioPlayer
16   -#tagline
17   - h1
18   - #status
19 2 #main
20   - #column_left_wrap
  3 + #left
21 4 #column_left_chat
22   - table#chatWindow(width="100%")
  5 + table#chatWindow
23 6 tr
24   - td
25   - br
26 7 #chat_input
27 8 form
28 9 input#inform(type="text", autocomplete="off", size="110")
29   - input(type="submit", value="Send Chat")
30   - br
31   - #typing_status
32   - #column_right_chat
  10 + input#sendmessage(type="submit", value="SEND")
  11 + #right
33 12 #buttons1
  13 + #status
34 14 ul
35 15 li
36 16 a(href="#", id="newPartner") Find a new partner
37   - li(style="font-family:Arial, Helvetica, sans-serif;font-size:.8em")
  17 + li
38 18 label
39 19 input(type="checkbox", id="enable_sound")
40   - #{"Enable sound"}
41   - br
  20 + #{" Enable Sound"}
  21 + li
  22 + label
42 23 input(type="checkbox", id="enable_typing")
43   - #{"Let others see when I'm typing"}
44   - li(style="display:none")
45   - a(href="#") Report ABUSE
46   -
47   - br.clear
  24 + #{" Visible Typing"}
  25 + #typing_status
  26 +script
  27 + //- Google Website Optimizer Tracking Script
  28 + var _gaq = _gaq || [];
  29 + _gaq.push(['gwo._setAccount', 'UA-17971348-2']);
  30 + _gaq.push(['gwo._trackPageview', '/1104807929/goal']);
  31 + (function() {
  32 + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  33 + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  34 + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  35 + })();
  36 +
  37 +script
  38 + window.CLIENT_TYPE = !{JSON.stringify(type)};
49 views/index.jade
@@ -23,56 +23,47 @@ script
23 23
24 24 script
25 25 window.startingRoomCounts = !{JSON.stringify(roomCounts)};
26   -
27   -#tagline
28   - script utmx_section("Headline")
29   - h1 Chat Anonymously
30   - </noscript>
31   -
32 26 #main
33   - #column_left
34   - script utmx_section("Subheadline")
  27 + #mainleft
35 28 h2 Vent anonymously ...without being embarrassed
36   - </noscript>
37 29
38   - script utmx_section("Explanatory Paragraph")
39   - p Get it off your chest<br />Without it biting you in the ass
40   - </noscript>
41   - p
42   - b Pick an option to the right, and then you will be randomly connected to a chat with an anonymous partner.
43   -
  30 + p Get it off your chest without it biting you in the ass.
  31 + br
  32 + br
  33 + p
  34 + b Pick an option to the right, and then you will be randomly connected to a chat with an anonymous partner.
  35 + br
  36 + br
44 37 p#counts(style="display:none")
45 38 #{"There are "}
46 39 span#listener-count 0
47 40 #{" listeners and "}
48 41 span#venter-count 0
49 42 #{" venters."}
50   -
51 43 p#need-listeners(style="display:none")
52   - b There are venters who need someone to talk to -- please join as a listener.
  44 + | There are venters who need someone to talk to -- please join as a listener.
53 45 p#need-venters(style="display:none")
54   - b If you join as a listener and aren't immediately paired up with a venter, your computer will play a sound when a venter joins your chat.
  46 + | If you join as a listener and aren't immediately paired up with a venter, your computer will play a sound when a venter joins your chat.
55 47 p#need-anyone(style="display:none")
56 48 b Nobody's online right now, please join in and keep things going!
57   -
  49 + br
  50 + br
58 51 p
59 52 #{"*"}
60 53 strong(style="color:red") NEW
61 54 #{"* "}
62 55 a(href="/forum/", target="_blank") The CompassionPit forum
63 56 #{"!"}
64   -
65   - br.clear
66   -
67   - .separator
68   -
69   - #column_right
70   - #buttons1
  57 + #mainright
  58 + #buttons1
71 59 ul
72 60 li(class="large")
73 61 a(href="/vent") Share what's bothering you
74 62 li(class="large")
75 63 a(href="/listen") Participate as a listener
76   - iframe(src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.compassionpit.com&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=35", scrolling="no", frameborder="0", style="border:none; overflow:hidden; width:450px; height:35px;", allowTransparency="true")
77   -
78   - br.clear
  64 + iframe(src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.compassionpit.com&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=35", scrolling="no", frameborder="0", style="border:none; overflow:hidden; width:280px; height:35px;", allowTransparency="true")
  65 +
  66 +
  67 +
  68 +
  69 +
5 views/layout.jade
@@ -32,10 +32,9 @@ html
32 32 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
33 33 })();
34 34 body
  35 + #wrap
35 36 #container
36   - #header
37   - a(href="/")
38   - h1 Compassion Pit
  37 + a(href="/")#header
39 38 != body
40 39 #footer
41 40 #copyright_notice
12 views/privacy-policy.jade
... ... @@ -1,8 +1,5 @@
1   -#tagline
2   - h1 Privacy Policy
3   -
4 1 #main
5   - #column_left
  2 + #extra
6 3 //- Should probably move this out to not be hard-coded
7 4 :markdown
8 5 Privacy Policy
@@ -12,10 +9,3 @@
12 9 Contact
13 10 -------
14 11 If you have any questions, you can contact us at _zackster_@_gmail_._com_. Please put "CompassionPit Privacy Policy" in the subject line. Thanks!
15   -
16   - br.clear
17   -
18   - #column_right
19   - #buttons1
20   -
21   - br.clear
13 views/terms-of-service.jade
... ... @@ -1,8 +1,6 @@
1   -#tagline
2   - h1 Terms of Service
3 1
4 2 #main
5   - #column_left
  3 + #extra
6 4 //- Should probably move this out to not be hard-coded
7 5 :markdown
8 6 Terms of Service
@@ -13,11 +11,4 @@
13 11
14 12 Contact
15 13 -------
16   - If you have any questions, you can contact us at _zackster_@_gmail_._com_. Please put "CompassionPit TOS" in the subject line. Thanks!
17   -
18   - br.clear
19   -
20   - #column_right
21   - #buttons1
22   -
23   - br.clear
  14 + If you have any questions, you can contact us at _zackster_@_gmail_._com_. Please put "CompassionPit TOS" in the subject line. Thanks!

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.