Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

UI #24

Merged
merged 3 commits into from

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
Commits on Aug 15, 2011
  1. C. Jordan Muir

    ui beta build

    floating authored
  2. C. Jordan Muir

    fix merge

    floating authored
  3. C. Jordan Muir

    cleanup unused css

    floating authored
This page is out of date. Refresh to see the latest.
7 static/chat.js
View
@@ -121,7 +121,7 @@
$status.removeClass('errorMessage infoMessage');
$status.addClass(cssClass);
if(msgform) {
- $status.text("connected");
+ $status.text("Connected");
} else {
$status.text(msg);
}
@@ -157,6 +157,7 @@
});
$('#enable_sound').attr('checked', true);
+ $('#enable_typing').attr('checked', true);
info('Initializing');
$('#audioPlayer')
@@ -322,11 +323,11 @@
break;
case "start":
- $("#typing_status").text(type + ' is typing')
+ $("#typing_status").text(type + ' is typing');
break;
case "stop":
- $("#typing_status").text('')
+ $("#typing_status").text('');
break;
}
}
384 static/css/style.css
View
@@ -1,182 +1,248 @@
/***** General Styles ******/
-.clear {
- clear:both;
+body {
+ background: #21323b url("/img/bg.png") center;
+ font-family: sans-serif;
+ font-size: 13px;
}
-body {
- background: #fafafa url(/img/BG_gradient.png) repeat-x;
+/***** Main Content Styles ******/
+#header {
+ background: url("/img/logo.png") center center no-repeat;
+ height: 120px;
+ width: 960px;
+ margin: 0 auto;
+ display: block;
+ cursor: pointer;
}
-#container {
- background:transparent url(/img/BG_lighting.png) no-repeat;
- height:250px;
+#main {
+ width:960px;
margin:0px auto;
- width:1020px;
+ box-shadow: 0px 0px 6px rgba(42,159,227,1), inset 0px 0px 250px rgba(216,243,255,0.5);
+ background: #fff;
+ overflow: hidden;
}
-/***** Header Styles ******/
+#main #mainleft {
+ width:660px;
+ float: left;
+ padding: 10px;
+ text-align: center;
+}
-img#logo {
- margin: 0px 30px 0px 55px;
+#mainleft h2 {
+ color: rgba(42,159,227,1);
+ font-size: 24px;
+ padding-bottom: 10px;
}
-/***** Tagline Styles ******/
-
-#tagline {
- background:transparent url(/img/BG_redbar.png) no-repeat;
- height:100px;
- text-align:left;
- padding:0px 65px 35px 0px;
+#mainleft p {
+ font-size: 14px;
}
-#tagline h1 {
- font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
- font-size:26px;
- color:#52B9DB;
- padding: 45px 0px 0px 60px;
- font-weight:normal;
+#mainleft #counts{
+ color: rgba(42,159,227,1);
+ font-size: 20px;
}
-/***** Main Content Styles ******/
+#main #mainright {
+ width:280px;
+ float: right;
+}
-#main {
- margin-bottom:20px;
+#main #left {
+ width:680px;
+ height: 300px;
+ float: left;
}
-.separator {
- background:url(/img/separator.png) center;
- width:20px;
- height:290px;
- float:left;
+#column_left_chat {
+ width: 660px;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ height: 240px;
+ margin: 10px;
}
-#column_left {
- width:450px;
- float:left;
- padding:0px 20px 0px 60px;
+#column_left_chat::-webkit-scrollbar {
+ width: 10px;
+ height: 260px;
}
-#column_left_wrap {
- width:680px;
- margin:0 0 0 40px;
- float:left;
- min-height: 300px;
+#column_left_chat::-webkit-scrollbar-track {
+ background: rgba(42,159,227,0.1);
+ box-shadow: inset 0px 0px 2px rgba(42,159,227,0.8);
}
-#column_left_chat {
- width: 100%;
- background-color: #FFFFFF;
- border: 1px solid #4A7A8A;
- overflow-y: scroll;
- height: 300px;
+#column_left_chat::-webkit-scrollbar-thumb {
+ background: rgba(42,159,227,1);
}
-#typing_status{
+
+#chatWindow{
+ width: 640px;
+ margin-right: 10px;
+}
+
+#chatWindow tbody tr {
+ border-bottom: 1px solid rgba(42,159,227,0.1);
+}
+
+#chatWindow tbody td {
+ padding: 5px;
+}
+
+#left #inform {
height: 30px;
+ margin-bottom: 10px;
+ margin-left: 10px;
+ width: 600px;
+ border: 0;
+ padding: 0;
+ float: left;
+ font-size: 18px;
+ background: rgba(42,159,227,0.05);
+ box-shadow: inset 0px 0px 2px rgba(42,159,227,0.8);
}
-#column_left_chat_type {
- width:600px;
- float:left;
- padding:20px;
- margin:0 0 0 40px;
- background-color: #FFFFFF;
- height: 20px;
- border-top: 1px none #4A7A8A;
- border-right: 1px solid #4A7A8A;
- border-bottom: 1px solid #4A7A8A;
- border-left: 1px solid #4A7A8A;
+#left #sendmessage {
+ height: 30px;
+ margin-bottom: 10px;
+ margin-right: 10px;
+ width: 60px;
+ background: #2a9fe3;
+ border: 0;
+ float: right;
+ cursor: pointer;
+ color: #fff;
+ font-weight: bold;
}
-#column_right {
- width:380px;
- float:right;
- padding:0px 20px;
+#main #right {
+ width:280px;
+ height: 300px;
+ float: right;
}
-#column_right_chat {
- width:200px;
- float:left;
- padding:0px 0px 0px 20px;
+#buttons1 {
+ width:280px;
}
-h2 {
- color:#4A7A8A;
- font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
- font-size:22px;
- margin-bottom:20px;
+#status {
+ margin: 10px 10px 97px 0px;
+ width: 250px;
+ padding: 10px;
+ text-align: center;
+ background: #2a9fe3;
+ color: #fff;
+ font-weight: bold;
}
-p {
- color:#000;
- font-family:Arial, Helvetica, sans-serif;
- font-size:12px;
- line-height:24px;
- margin-bottom:15px;
+#buttons1 li {
+ display: block;
+ margin: 10px 10px 10px 0px;
+ width: 270px;
+ padding-top: 7px;
+ background: rgba(42,159,227,0.05);
+ box-shadow: inset 0px 0px 2px rgba(42,159,227,0.8);
+ text-align: center;
+ height: 23px;
+ color: rgba(42,159,227,1);
+ font-weight: bold;
}
-#column_left_chat p {
- color:#000;
- font-family:Arial, Helvetica, sans-serif;
- font-weight:bold;
- font-size:14px;
- line-height:24px;
- margin-bottom:15px;
+#buttons1 a:link, #buttons1 a:active, #buttons1 a:visited, #buttons1 a:hover{
+ color: rgba(42,159,227,1);
}
-#column_left_chat p span {
- color:#666666;
- font-family:Arial, Helvetica, sans-serif;
- font-weight:normal;
- font-size:14px;
- line-height:20px;
- margin-bottom:30px;
+.infoMessage {
+}
+
+#typing_status{
+ margin: 10px 10px 10px 0px;
+ width: 270px;
+ padding-top: 8px;
+ text-align: center;
+ height: 22px;
+ color: rgba(42,159,227,1);
+ font-weight: bold;
}
-/***** Button Styles ******/
+#fb{
+ text-align: center;
+}
-/*- Buttons 1--------------------------- */
-
-#buttons1 {
- width: 320px;
- margin: 10px;
+/***** Footer Styles ******/
+
+#footer {
+ background: url("/img/mainshadow.png") top center no-repeat;
+ height:60px;
+ width:940px;
+ margin: 0 auto;
+ padding: 10px 20px 10px 20px;
+}
+
+#copyright_notice {
+ width: 340px;
float: left;
- margin-top:50px;
+ font-size: 12px;
+ color: #000;
}
-#buttons1 li {
- width: 62.5%;
+#copyright_notice span {
+ color: #000;
}
-#buttons1 li.medium {
- width: 81.25%;
+#nav {
+ float: right;
+ width: 600px;
+}
+
+#nav ul#links {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ display: inline;
+ float: right;
}
-#buttons1 li.large {
- width: 100%;
+#nav ul#links li {
+ float: left;
+ text-transform: uppercase;
+ font-size: 12px;
+ padding-left: 10px;
+ margin:0;
}
-#buttons1 li a {
+#nav ul#links a:link, ul#links a:active, ul#links a:visited {
text-decoration: none;
- border-radius: 5px;
- background: #4a7a8a;
- color: #FFF;
- font-family:Arial, Helvetica, sans-serif;
- font-size:13px;
- display: block;
- padding: 8px 8px 10px 10px;
- margin-bottom:20px;
-}
-#buttons1 li a:hover {
- background: #52b9db;
+ color: #000;
+ font-weight: bold;
+}
+
+#nav ul#links a:hover {
+ text-decoration:none;
+ color: rgba(42,159,227,1);
+}
+
+
+#extra{
+ padding: 0 15px 15px 15px;
+}
+
+#extra h2{
+ color: rgba(42,159,227,1);
+ font-size: 17px;
+ padding-bottom: 5px;
+ padding-top: 20px;
}
-#buttons1 li a.disabled, a.disabled:hover {
- background: #8a8a8a;
- cursor:default;
+#extra p{
+ padding-bottom: 5px;
}
+
/*- Buttons 2--------------------------- */
#buttons2 {
@@ -259,105 +325,32 @@ input#submit {
cursor:pointer;
}
-/***** Footer Styles ******/
-
-#footer {
- background:transparent url(/img/bg_footer.png) no-repeat;
- height:62px;
- width:900px;
- padding:23px 40px 50px 60px;
-}
-
-#copyright_notice {
- font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
- font-size:12px;
- font-weight:normal;
- color:#555252;
- width:350px;
- float:left;
-}
-
-#copyright_notice span {
- color:#4A7A8A;
-}
-
-#nav {
- float:left;
- width:550px;
-}
-
-ul#links {
- margin: 0;
- padding: 0;
- list-style-type: none;
- display: inline;
- float:right;
-}
-
-ul#links li {
- float: left;
- font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
- font-size:12px;
- font-weight:bold;
- color:#555252;
- text-transform:uppercase;
- padding: 0 10px;
- margin:0;
-}
-
-ul#links a:link, ul#links a:active, ul#links a:visited {
- text-decoration:none;
- color:#555252;
-}
-
-ul#links a:hover {
- text-decoration:none;
- color:#52B9DB;
-}
-#header {
- padding-top: 10px;
-}
-#header h1 {
- background: url("/img/logo.png");
- width: 250px;
- height: 70px;
- text-indent: -5000px;
- margin: 0px 30px 0px 55px;
-}
#column_full {
padding:0px 60px 0px 60px;
}
.white-row {
- background-color:#fff; /* this probably isn't necessary... */
}
.off-white-row {
- background-color:#f7f7f7;
+ background: rgba(42,159,227,0.05);
}
.blue-row {
- background-color:#add8e6;
+ background-color: rgba(42,159,227,0.2);
}
.yellow-row {
background-color:#faec87;
}
-#status {
- font-weight: bold;
-}
-
.errorMessage {
color: red;
}
-.infoMessage {
- color: blue;
-}
#version-bar a, #version-bar a:link, #version-bar a:visited, #version-bar a:active {
display: block;
@@ -365,7 +358,6 @@ ul#links a:hover {
background:#ffffe1;
border-bottom:1px outset;
text-decoration:none;
- font-family:Verdana,Arial,Helvetica,sans-serif;
}
#version-bar a:hover {
BIN  static/img/bg.png
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  static/img/logo.png
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  static/img/mainshadow.png
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 views/about-us.jade
View
@@ -1,8 +1,5 @@
-#tagline
- h1 About Us
-
#main
- #column_left
+ #extra
//- Should probably move this out to not be hard-coded
:markdown
About CompassionPit
@@ -35,9 +32,3 @@
-----------
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-/).
- br.clear
-
- #column_right
- #buttons1
-
- br.clear
57 views/chat.jade
View
@@ -1,47 +1,38 @@
-script
- //- Google Website Optimizer Tracking Script
- var _gaq = _gaq || [];
- _gaq.push(['gwo._setAccount', 'UA-17971348-2']);
- _gaq.push(['gwo._trackPageview', '/1104807929/goal']);
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
-
-script
- window.CLIENT_TYPE = !{JSON.stringify(type)};
-
#audioPlayer
-#tagline
- h1
- #status
#main
- #column_left_wrap
+ #left
#column_left_chat
- table#chatWindow(width="100%")
+ table#chatWindow
tr
- td
- br
#chat_input
form
input#inform(type="text", autocomplete="off", size="110")
- input(type="submit", value="Send Chat")
- br
- #typing_status
- #column_right_chat
+ input#sendmessage(type="submit", value="SEND")
+ #right
#buttons1
+ #status
ul
li
a(href="#", id="newPartner") Find a new partner
- li(style="font-family:Arial, Helvetica, sans-serif;font-size:.8em")
+ li
label
input(type="checkbox", id="enable_sound")
- #{"Enable sound"}
- br
+ #{" Enable Sound"}
+ li
+ label
input(type="checkbox", id="enable_typing")
- #{"Let others see when I'm typing"}
- li(style="display:none")
- a(href="#") Report ABUSE
-
- br.clear
+ #{" Visible Typing"}
+ #typing_status
+script
+ //- Google Website Optimizer Tracking Script
+ var _gaq = _gaq || [];
+ _gaq.push(['gwo._setAccount', 'UA-17971348-2']);
+ _gaq.push(['gwo._trackPageview', '/1104807929/goal']);
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+
+script
+ window.CLIENT_TYPE = !{JSON.stringify(type)};
49 views/index.jade
View
@@ -23,56 +23,47 @@ script
script
window.startingRoomCounts = !{JSON.stringify(roomCounts)};
-
-#tagline
- script utmx_section("Headline")
- h1 Chat Anonymously
- </noscript>
-
#main
- #column_left
- script utmx_section("Subheadline")
+ #mainleft
h2 Vent anonymously ...without being embarrassed
- </noscript>
- script utmx_section("Explanatory Paragraph")
- p Get it off your chest<br />Without it biting you in the ass
- </noscript>
- p
- b Pick an option to the right, and then you will be randomly connected to a chat with an anonymous partner.
-
+ p Get it off your chest without it biting you in the ass.
+ br
+ br
+ p
+ b Pick an option to the right, and then you will be randomly connected to a chat with an anonymous partner.
+ br
+ br
p#counts(style="display:none")
#{"There are "}
span#listener-count 0
#{" listeners and "}
span#venter-count 0
#{" venters."}
-
p#need-listeners(style="display:none")
- b There are venters who need someone to talk to -- please join as a listener.
+ | There are venters who need someone to talk to -- please join as a listener.
p#need-venters(style="display:none")
- 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.
+ | 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.
p#need-anyone(style="display:none")
b Nobody's online right now, please join in and keep things going!
-
+ br
+ br
p
#{"*"}
strong(style="color:red") NEW
#{"* "}
a(href="/forum/", target="_blank") The CompassionPit forum
#{"!"}
-
- br.clear
-
- .separator
-
- #column_right
- #buttons1
+ #mainright
+ #buttons1
ul
li(class="large")
a(href="/vent") Share what's bothering you
li(class="large")
a(href="/listen") Participate as a listener
- 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")
-
- br.clear
+ 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")
+
+
+
+
+
5 views/layout.jade
View
@@ -32,10 +32,9 @@ html
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
body
+ #wrap
#container
- #header
- a(href="/")
- h1 Compassion Pit
+ a(href="/")#header
!= body
#footer
#copyright_notice
12 views/privacy-policy.jade
View
@@ -1,8 +1,5 @@
-#tagline
- h1 Privacy Policy
-
#main
- #column_left
+ #extra
//- Should probably move this out to not be hard-coded
:markdown
Privacy Policy
@@ -12,10 +9,3 @@
Contact
-------
If you have any questions, you can contact us at _zackster_@_gmail_._com_. Please put "CompassionPit Privacy Policy" in the subject line. Thanks!
-
- br.clear
-
- #column_right
- #buttons1
-
- br.clear
13 views/terms-of-service.jade
View
@@ -1,8 +1,6 @@
-#tagline
- h1 Terms of Service
#main
- #column_left
+ #extra
//- Should probably move this out to not be hard-coded
:markdown
Terms of Service
@@ -13,11 +11,4 @@
Contact
-------
- If you have any questions, you can contact us at _zackster_@_gmail_._com_. Please put "CompassionPit TOS" in the subject line. Thanks!
-
- br.clear
-
- #column_right
- #buttons1
-
- br.clear
+ If you have any questions, you can contact us at _zackster_@_gmail_._com_. Please put "CompassionPit TOS" in the subject line. Thanks!
Something went wrong with that request. Please try again.