Permalink
Browse files

CSS fleshed out w/ colors; lots of JS changes & refinements for bette…

…r visual notification of status change.
  • Loading branch information...
1 parent 1f422c4 commit 78254b02d299b96837e63bffbeefce4a868908b8 @akavlie committed Oct 9, 2010

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,33 @@
+(function($) {
+$.fn.placeholder = function(options) {
+ var defaults = {css_class: "placeholder"};
+ var options = $.extend(defaults, options);
+ this.each(function() {
+ if ($(this).attr('placeholder') !== undefined) {
+ var phvalue = $(this).attr("placeholder");
+ var currvalue = $(this).attr("value");
+ if (phvalue == currvalue) {
+ $(this).addClass(options.css_class);
+ }
+ if (currvalue == "") {
+ $(this).addClass(options.css_class);
+ $(this).val(phvalue);
+ }
+ $(this).focusin(function(){
+ var ph = $(this).attr("placeholder");
+ if (ph == $(this).val()) {
+ $(this).val("").removeClass(options.css_class);
+ }
+ });
+
+ $(this).focusout(function(){
+ var ph = $(this).attr("placeholder");
+ if ($(this).val() == "") {
+ $(this).val(ph).addClass(options.css_class);
+ }
+ });
+ }
+ });
+ return this;
+ };
+})(jQuery);
View
@@ -2,6 +2,12 @@ var status_checker = 0;
$(function() {
+ $('#test').click(function() {
+ //$(".sent_message").css("background-color", "#FFFF9C")
+ // .animate({ backgroundColor: "#FFFFFF", color: '#ffffff'}, 1500);
+ $('.sent_message, .status').effect('highlight', {color: '#ffffff'}, 1500);
+
+ });
// SMS SUBMISION
// -------------
$("#sms_form").submit(function() {
@@ -18,7 +24,7 @@ $(function() {
.removeClass('new');
// Check status of new messages at set interval
if(status_checker==0) {
- status_checker = setInterval('checkStatus()', 3000);
+ status_checker = setInterval('checkStatus()', 5000);
}
});
return false;
@@ -39,17 +45,25 @@ $(function() {
function checkStatus() {
// Check every message on the page with status "queued" or "sending" --
// Twilio's status possibilities for unsent messsages
- $('.queued, .sending').each(function(i) {
+ $($('.queued, .sending').get().reverse()).each(function() {
var sid = $(this).find('.sid').html();
+ var status = $(this).children('.status').html();
// Update status based on check with twilio
- $(this).children('.status').load($SCRIPT_ROOT + '/sms/update/' + sid, function(status) {
+ $(this).children('.status').load($SCRIPT_ROOT + '/sms/update/' + sid, function(data) {
// Add class based on current status; remove former status class
- $('.queued, .sending').addClass(status).removeClass('queued sending');
+ if(data != status) {
+ $(this).parent()
+ .fadeOut()
+ .removeClass('queued sending')
+ .addClass(data)
+ .fadeIn();
+ }
+ //.children('.sent_message, .status').effect('highlight', {color: '#ffffff'}, 3000);
});
});
// Stop checking message status if there aren't any left
- if($('.queued, .sending').length > 0) {
+ if($('.queued, .sending').length == 0) {
clearInterval(status_checker);
status_checker = 0;
}
View
@@ -4,7 +4,7 @@ body {
}
#page {
- margin: 50px 200px;
+ margin: 50px 300px;
}
h1 {
@@ -24,6 +24,24 @@ input.placeholder {
.clear {clear: both;}
.hidden {display: none;}
+
+/* ROUNDED CORNERS */
+
+.rounded {
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ -khtml-border-radius: 10px;
+ border-radius: 10px;
+}
+
+.rounded_top {
+ -moz-border-radius: 8px 8px 0px 0px;
+ -webkit-border-radius: 8px 8px 0px 0px;
+ -khtml-border-radius: 8px 8px 0px 0px;
+ border-radius: 8px 8px 0px 0px;
+}
+
+
.flash {
background: #CEE5F5;
padding: 0.5em;
@@ -32,37 +50,45 @@ input.placeholder {
/* SMS BOX */
#sms_box {
+ background-color: #EEEEEE;
border: 1px solid black;
+ padding: 10px;
}
#recipients {
+ background-color: white;
+ border: 1px solid black;
+}
+ #recipients td {
+ padding: 2px 50px 2px 0px;
+ }
+
+
+/* SMS FORM */
+
+#sms_form input {
+ font-size: 20px;
}
/* SENT MESSAGES */
#sent_message_list {
- width: 80%;
+ width: 100%;
}
.sent_message {
position: relative;
margin-bottom: 10px;
- border: 1px solid black;
height: 120px;
-
- -moz-border-radius: 10px;
- -webkit-border-radius: 10px;
- -khtml-border-radius: 10px;
- border-radius: 10px;
-
}
.sent_message .status {
- padding: 5px;
- border-bottom: 1px solid black;
+ padding: 8px;
+ color: white;
+ font-weight: bold;
}
.sent_message .sent_body {
- padding: 5px;
+ padding: 8px;
}
.sent_message .phone {
float: left;
@@ -84,12 +110,16 @@ input.placeholder {
}
.failed {
- border: 2px solid #CC0000;
background-color: #e7c5c5;
}
+ .failed .status {
+ background-color: #CC0000; /* red */
+ }
.sent {
- border: 2px solid #008C00;
background-color: #bfe3bf; /* pale green */
}
+ .sent .status {
+ background-color: #008C00; /* green */
+ }
View
@@ -6,35 +6,30 @@
<button id="test">Test!</button>
-<h2>Select Recipients</h2>
-<div id="sms_box">
+<div id="sms_box" class="rounded">
+ <h3>Select Recipients</h3>
<table id="recipients">
- <tr><td>test</td></tr>
{% for user in users %}
<tr>
+ <td><input type="checkbox" value="{{ user.id }}"></td>
<td>{{ user.first_name }} {{ user.last_name }}</td>
<td>{{ user.phone }}</td>
</tr>
{% endfor %}
</table>
- <form id="new_user" action="">
- Add user:
- <input type="text" name="user_name" placeholder="Name">
- <input type="text" name="user_phone" placeholder="Phone">
- <input type="submit" value="Add">
- </form>
<form id="sms_form" action="">
- <p><input type="text" name="phone_number" placeholder="Phone"></p>
- <p><input type="text" name="message" placeholder="Message">
+ <p>Other</p>
+ <p><input type="text" name="phone_number" size="10" placeholder="Phone"></p>
+ <p><input type="text" name="message" size="40" placeholder="Message">
<input type="submit" value="Send"></p>
</form>
</div>
<div id="sent_message_list">
<h2>Message History</h2>
{% for message in sent_messages %}
- <div class="sent_message {{ message.status }}">
- <div class="status">{{ message.status }}</div>
+ <div class="sent_message rounded {{ message.status }}">
+ <div class="status rounded_top">{{ message.status }}</div>
<div class="sent_body">
<div class="phone">{{ message.phone }}</div>
<div class="time">{{ message.date }}</div>
@@ -3,6 +3,7 @@
<title>SMSr</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
<script type="text/javascript" src="{{ url_for('static', filename='jquery-1.4.2.min.js') }}"></script>
+ <script type="text/javascript" src="{{ url_for('static', filename='jquery-ui-1.8.5.custom.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='jquery.placeholder.js') }}"></script>
<script type="text/javascript">
$SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
@@ -1,5 +1,5 @@
-<div class="sent_message new {{ sms.status }} hidden">
- <div class="status">{{ sms.status }}</div>
+<div class="sent_message rounded new {{ sms.status }} hidden">
+ <div class="status rounded_top">{{ sms.status }}</div>
<div class="sent_body">
<div class="phone">{{ sms.to }}</div>
<div class="time">{{ sms.date_created }}</div>

0 comments on commit 78254b0

Please sign in to comment.