CAMP/bestSMS
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

merged, edited settings for templates

Browse Source
This commit is contained in:
Sanj 2011-10-14 16:00:56 +05:30
commit bdc4d15712
5 changed files with 758 additions and 738 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
best/settings.py
View File

@ -95,12 +95,12 @@ INSTALLED_APPS = [
# tabbed navigation. when adding an app to INSTALLED_APPS, you may wish # tabbed navigation. when adding an app to INSTALLED_APPS, you may wish
# to add it here, also, to expose it in the rapidsms ui. # to add it here, also, to expose it in the rapidsms ui.
RAPIDSMS_TABS = [ RAPIDSMS_TABS = [
("rapidsms.contrib.messagelog.views.message_log", "Message Log"), ("rapidsms.contrib.messagelog.views.message_log", "SMS Log"),
# ("rapidsms.contrib.registration.views.registration", "Registration"), # ("rapidsms.contrib.registration.views.registration", "Registration"),
# ("rapidsms.contrib.messaging.views.messaging", "Messaging"), # ("rapidsms.contrib.messaging.views.messaging", "Messaging"),
# ("rapidsms.contrib.locations.views.locations", "Map"), # ("rapidsms.contrib.locations.views.locations", "Map"),
# ("rapidsms.contrib.scheduler.views.index", "Event Scheduler"), # ("rapidsms.contrib.scheduler.views.index", "Event Scheduler"),
("rapidsms.contrib.httptester.views.generate_identity", "Message Tester"), ("rapidsms.contrib.httptester.views.generate_identity", "SMS Tester"),
] ]
@ -155,6 +155,20 @@ TEMPLATE_CONTEXT_PROCESSORS = [
"django.core.context_processors.request", "django.core.context_processors.request",
] ]
TEMPLATE_LOADERS = (
'django.template.loaders.filesystem.Loader',
'django.template.loaders.app_directories.Loader',
'django.template.loaders.eggs.Loader',
)
TEMPLATE_DIRS = (
join(PROJECT_PATH, "templates"),
# Put strings here, like "/home/html/django_templates" or "C:/www/django/templates".
# Always use forward slashes, even on Windows.
# Don't forget to use absolute paths, not relative paths.
)
# -------------------------------------------------------------------- # # -------------------------------------------------------------------- #
# HERE BE DRAGONS! # # HERE BE DRAGONS! #

632
best/static/rapidsms/stylesheets/layout.css
View File

@ -1,316 +1,316 @@
/* vim:set et ts=4 sw=4 */ /* vim:set et ts=4 sw=4 */
body { body {
background: #eee url("../images/body-bg.png"); background: #eee url("../images/body-bg.png");
font: 9pt "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; font: 9pt "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
line-height: 1; line-height: 1;
color: #333; color: #333;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
a { a {
text-decoration: none; text-decoration: none;
color: #33a7d2; color: #33a7d2;
} }
a:hover { a:hover {
text-decoration: underline; } text-decoration: underline; }
abbr { abbr {
cursor: help; } cursor: help; }
p { p {
line-height: 1.4; } line-height: 1.4; }
/* this is not okay. but it is, unfortunately, the least error-prone way /* this is not okay. but it is, unfortunately, the least error-prone way
* (that i know) of fixing broken floaty layouts in IE6 */ * (that i know) of fixing broken floaty layouts in IE6 */
div.clear-hack { div.clear-hack {
overflow: hidden; overflow: hidden;
clear: both; clear: both;
height: 0; height: 0;
} }
#wrapper { #wrapper {
width: 80em; width: 80em;
background: #fff; background: #fff;
margin: 0.5em auto 0 auto; margin: 0.5em auto 0 auto;
/* a little pretty for the 10/dec demo */ /* a little pretty for the 10/dec demo */
-moz-box-shadow: 4px 4px 8px #aaa; -moz-box-shadow: 4px 4px 8px #aaa;
box-shadow: 4px 4px 8px #aaa; box-shadow: 4px 4px 8px #aaa;
-moz-border-radius-bottomright: 1em; -moz-border-radius-bottomright: 1em;
-moz-border-radius-bottomleft: 1em; -moz-border-radius-bottomleft: 1em;
} }
/* no scaling for ie6 */ /* no scaling for ie6 */
* html #wrapper { * html #wrapper {
width: 960px; } width: 960px; }
/* the header is based roughly upon unicef.org, with rapidsms colors */ /* the header is based roughly upon unicef.org, with rapidsms colors */
#header { #header {
height:122px; height:122px;
width:960px; width:960px;
text-align:right; text-align:right;
position: relative; position: relative;
color: #CCF; color: #CCF;
background: #94997e; /* Old browsers */ background: #94997e; /* Old browsers */
background: -moz-linear-gradient(top, #94997e 0%, #d2dab3 10%, #d2dab3 80%, #94997e 100%); /* FF3.6+ */ background: -moz-linear-gradient(top, #94997e 0%, #d2dab3 10%, #d2dab3 80%, #94997e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#94997e), color-stop(10%,#d2dab3), color-stop(80%,#d2dab3), color-stop(100%,#94997e)); /* Chrome,Safari4+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#94997e), color-stop(10%,#d2dab3), color-stop(80%,#d2dab3), color-stop(100%,#94997e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #94997e 0%,#d2dab3 10%,#d2dab3 80%,#94997e 100%); /* Chrome10+,Safari5.1+ */ background: -webkit-linear-gradient(top, #94997e 0%,#d2dab3 10%,#d2dab3 80%,#94997e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #94997e 0%,#d2dab3 10%,#d2dab3 80%,#94997e 100%); /* Opera11.10+ */ background: -o-linear-gradient(top, #94997e 0%,#d2dab3 10%,#d2dab3 80%,#94997e 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #94997e 0%,#d2dab3 10%,#d2dab3 80%,#94997e 100%); /* IE10+ */ background: -ms-linear-gradient(top, #94997e 0%,#d2dab3 10%,#d2dab3 80%,#94997e 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94997e', endColorstr='#94997e',GradientType=0 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94997e', endColorstr='#94997e',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #94997e 0%,#d2dab3 10%,#d2dab3 80%,#94997e 100%); /* W3C */} background: linear-gradient(top, #94997e 0%,#d2dab3 10%,#d2dab3 80%,#94997e 100%); /* W3C */}
} }
/* hide the log in/out links in the top right. this doesn't need to /* hide the log in/out links in the top right. this doesn't need to
* be especially discoverable; when the user tries to do something * be especially discoverable; when the user tries to do something
* requiring a login, they should be redirected automatically */ * requiring a login, they should be redirected automatically */
#header #auth { #header #auth {
font-size: 80%; font-size: 80%;
position: absolute; position: absolute;
line-height: 22px; line-height: 22px;
margin: 0 10px; margin: 0 10px;
right: 0; right: 0;
top: 0; top: 0;;}
}
#header #auth a {
#header #auth a { color: #000;
color: #CE0000; padding-right:6px;
padding-right:6px; font-size:80%;
font-size:80%; position:relative;
z-index:1;
} }
#branding { #branding {
padding: 2px 10px; padding: 2px 10px;
} }
/* align in the middle of the unicef blue stripe of header bg, and /* align in the middle of the unicef blue stripe of header bg, and
* display logo on the right. TODO: extract the unicef branding */ * display logo on the right. TODO: extract the unicef branding */
#branding h1 { #branding h1 {
background: url(../images/bessms_header07d.png) no-repeat; background: url(../images/bessms_header07d.png) no-repeat;
height: 108px; height: 108px;
color: #fff; color: #fff;
margin: 0; margin: 0;
width:960px; width:960px;
position:absolute; position:absolute;
top:6px; top:6px;
left:0px; left:0px;
} }
* html #branding h1 { * html #branding h1 {
width: 940px; } width: 940px; }
#branding h1 a { #branding h1 a {
height: 65px; height: 65px;
width: 245px; width: 245px;
display: block; display: block;
/*background: url("../images/rapidsms-logo.png") no-repeat 0 50%;*/ /*background: url("../images/rapidsms-logo.png") no-repeat 0 50%;*/
/* float the RapidSMS logo, in case any app would like to /* float the RapidSMS logo, in case any app would like to
* append anything to the light blue (empty) stripe */ * append anything to the light blue (empty) stripe */
float: left; float: left;
} }
#branding h1 a span { #branding h1 a span {
position: absolute; position: absolute;
left: -9999px; left: -9999px;
} }
#tabs, #tabs,
#page-tabs { #page-tabs {
position: absolute; position: absolute;
height: 28px; height: 28px;
bottom: 0; bottom: 0;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
/* global tabs sit on the right, page-specific tabs sit on the left. /* global tabs sit on the right, page-specific tabs sit on the left.
* to draw more attention. TODO: maybe re-think this */ * to draw more attention. TODO: maybe re-think this */
#tabs { right: 0; } #tabs { right: 0; }
#page-tabs { left: 0; } #page-tabs { left: 0; }
#tabs li, #tabs li,
#page-tabs li { #page-tabs li {
display: block; display: block;
float: left; float: left;
line-height: 28px; line-height: 28px;
} }
/* 5px spacing between each tab, to match the top gap, since /* 5px spacing between each tab, to match the top gap, since
* we're using pixel-positioned backgrounds there */ * we're using pixel-positioned backgrounds there */
#tabs li { margin-right: 5px; } #tabs li { margin-right: 5px; }
#page-tabs li { margin-left: 5px; } #page-tabs li { margin-left: 5px; }
#tabs li a, #tabs li a,
#page-tabs li a { #page-tabs li a {
color: white; color: white;
display: block; display: block;
padding: 0 1em; padding: 0 1em;
border-right: 1px solid #FE0000; border-right: 1px solid #FE0000;
border-left: 1px solid #FE0000; border-left: 1px solid #FE0000;
outline: none; outline: none;
background-color:#CE0000; } background-color:#CE0000; }
/* there are unread messages in this tab! TODO: is this just /* there are unread messages in this tab! TODO: is this just
* for the training app? if so, move it there! */ * for the training app? if so, move it there! */
#tabs li.unread a span { #tabs li.unread a span {
display: block; display: block;
padding-right: 21px; padding-right: 21px;
background: url("../icons/silk/email_open.png") no-repeat 100% 50%; background: url("../icons/silk/email_open.png") no-repeat 100% 50%;
} }
/* always highlight the active (in the navigation sense, not /* always highlight the active (in the navigation sense, not
* the css :active sense) tab, even when it's being hovered * the css :active sense) tab, even when it's being hovered
* or focused, since clicking it again is mostly useless */ * or focused, since clicking it again is mostly useless */
#tabs li.active a, #page-tabs li.active a, #tabs li.active a, #page-tabs li.active a,
#tabs li.active a:hover, #page-tabs li.active a:hover, #tabs li.active a:hover, #page-tabs li.active a:hover,
#tabs li.active a:focus, #page-tabs li.active a:focus { #tabs li.active a:focus, #page-tabs li.active a:focus {
background: #fff url("../images/tab-bg-active.png") repeat-x; background: #fff url("../images/tab-bg-active.png") repeat-x;
text-decoration: none; text-decoration: none;
text-shadow: none; text-shadow: none;
color: #000; color: #000;
/* the same color as the strip in header-bg.png */ /* the same color as the strip in header-bg.png */
border: 1px solid #cef1f5; border: 1px solid #cef1f5;
border-bottom: 0; border-bottom: 0;
/* nudge the active tab north by one pixel, to line it /* nudge the active tab north by one pixel, to line it
* up with the tops of the other tabs */ * up with the tops of the other tabs */
margin-top: -1px; margin-top: -1px;
} }
/* brighten up inactive tabs when hovering or tab-focusing /* brighten up inactive tabs when hovering or tab-focusing
* with the keyboard (we removed the outline, above) */ * with the keyboard (we removed the outline, above) */
#tabs li a:hover, #page-tabs li a:hover, #tabs li a:hover, #page-tabs li a:hover,
#tabs li a:focus, #page-tabs li a:focus { #tabs li a:focus, #page-tabs li a:focus {
/*background-image: url("../images/tab-bg-hover.png");*/ /*background-image: url("../images/tab-bg-hover.png");*/
text-shadow: #FB8C07 1px 1px 2px; text-shadow: #FB8C07 1px 1px 2px;
text-decoration: none; text-decoration: none;
} }
#breadcrumbs { #breadcrumbs {
color: #ccc; color: #ccc;
font-size: 2em; font-size: 2em;
line-height: 1; line-height: 1;
padding: 0.5em; padding: 0.5em;
text-shadow: #eee 2px 2px 2px; text-shadow: #eee 2px 2px 2px;
border-bottom: 1px dotted #eee; border-bottom: 1px dotted #eee;
} }
#breadcrumbs a { #breadcrumbs a {
color: #000; color: #000;
} }
.module a .module a
{color:#CE0000;} {color:#CE0000;}
#inner { #inner {
padding: 1em; padding: 1em;
position: relative; position: relative;
} }
/* some parts of the page title are dynamic (or otherwise really /* some parts of the page title are dynamic (or otherwise really
* important), like search terms. highlight them! */ * important), like search terms. highlight them! */
#inner h1 span.highlight { #inner h1 span.highlight {
background: #ffa; background: #ffa;
-moz-border-radius: 5px; -moz-border-radius: 5px;
border: 2px solid #ff0; border: 2px solid #ff0;
padding: 0 4px; padding: 0 4px;
margin-left: -4px; margin-left: -4px;
} }
/* when an app has something really important to say, it can use the /* when an app has something really important to say, it can use the
* apps/webui/templates/message.html template to display a huge blob * apps/webui/templates/message.html template to display a huge blob
* of text. this should probably be replaced with flash messages */ * of text. this should probably be replaced with flash messages */
#inner div.message { #inner div.message {
text-align: center; text-align: center;
padding: 4em 25%; padding: 4em 25%;
} }
#inner div.message p { #inner div.message p {
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
font-size: 2em; font-size: 2em;
} }
/* some apps (erm, just the querylog, actually) add big triggers to the /* some apps (erm, just the querylog, actually) add big triggers to the
* bottom of the page to show or perform some action. */ * bottom of the page to show or perform some action. */
div.trigger { div.trigger {
font-size: 80%; font-size: 80%;
text-align: center; text-align: center;
padding: 0.625em; padding: 0.625em;
background: #f8f8f8; background: #f8f8f8;
cursor: pointer; cursor: pointer;
color: #aaa; color: #aaa;
} }
div.trigger.warn { div.trigger.warn {
background: #fdd; background: #fdd;
color: #f00; color: #f00;
} }
#footer { #footer {
border-top: 1px dotted #eee; border-top: 1px dotted #eee;
padding: 0.5em; padding: 0.5em;
clear: both; clear: both;
color: #ccc; color: #ccc;
/* reserve space for at two lines of links @ LH=1.4 (for the /* reserve space for at two lines of links @ LH=1.4 (for the
* copyright and licensing/download info) */ * copyright and licensing/download info) */
min-height: 2.8em; min-height: 2.8em;
} }
/* bump the footer links down a line, to align them with the second /* bump the footer links down a line, to align them with the second
* line of legal junk on the right. reduce the opacity until hover, * line of legal junk on the right. reduce the opacity until hover,
* to keep them out of view until they're needed. */ * to keep them out of view until they're needed. */
#footer .footer-region { #footer .footer-region {
margin-top: 1.4em; margin-top: 1.4em;
line-height: 1.4; line-height: 1.4;
opacity: 0.25; opacity: 0.25;
float: left; float: left;
} }
#footer .footer-region:hover { #footer .footer-region:hover {
opacity: 1; } opacity: 1; }
#footer .footer-region a { margin-right: 0.5em; } #footer .footer-region a { margin-right: 0.5em; }
#footer .footer-region a:last-child { margin-right: 0; } #footer .footer-region a:last-child { margin-right: 0; }
#footer a #footer a
{color:#CE0000;} {color:#CE0000;}
#footer p.rights { #footer p.rights {
text-align: right; text-align: right;
float: right; float: right;
margin: 0; margin: 0;
} }

269
best/static/rapidsms/stylesheets/modules.css
View File

@ -1,132 +1,137 @@
/* vim:set et ts=4 sw=4 */ /* vim:set et ts=4 sw=4 */
div.module {
margin-top: 2em; #instruction h2/*THE CSS FOR THE INSTRUCTIONS FROM WIKI*/
position: relative; {font-weight:bold;}
}
div.module {
div.module div.module { margin-top: 2em;
border: 1px solid #8fbcc9; } position: relative;
div.module:first-child { }
margin-top: 0; }
div.module div.module {
border: 1px solid #8fbcc9; }
div.module:first-child {
div.module.collapsed { margin-top: 0; }
overflow-y: hidden;
height: 2.6em;
}
div.module.collapsed h2 { div.module.collapsed {
background-image: url("../images/h2-bg-collapsed.png"); } overflow-y: hidden;
height: 2.6em;
div.module.collapsed + div.module { }
margin-top: 1px; }
div.module.collapsed h2 {
div.module.collapsed h2 span.toggler, background-image: url("../images/h2-bg-collapsed.png"); }
div.module.expanded h2 span.toggler {
background: no-repeat 50% 50%; div.module.collapsed + div.module {
text-indent: -9999px; margin-top: 1px; }
cursor: pointer;
width: 16px; div.module.collapsed h2 span.toggler,
height: 2.6em; div.module.expanded h2 span.toggler {
overflow: hidden; background: no-repeat 50% 50%;
position: absolute; text-indent: -9999px;
padding: 0 0.5em; cursor: pointer;
right: 0; width: 16px;
top: 0; height: 2.6em;
} overflow: hidden;
position: absolute;
div.module.collapsed h2 span.toggler { background-image: url("../icons/silk/section_collapsed--bright.png"); } padding: 0 0.5em;
div.module.expanded h2 span.toggler { background-image: url("../icons/silk/section_expanded--bright.png"); } right: 0;
top: 0;
}
div.module.collapsed h2 span.toggler { background-image: url("../icons/silk/section_collapsed--bright.png"); }
/* module headers are mostly ripped off from django admin, although div.module.expanded h2 span.toggler { background-image: url("../icons/silk/section_expanded--bright.png"); }
* here, we never use <caption>, to keep things simple. (they have
* surprisingly confusing layout rules.) */
div.module h2,
div.module h3 {
margin: 0; /* module headers are mostly ripped off from django admin, although
background-repeat: repeat-x; * here, we never use <caption>, to keep things simple. (they have
background-position: 0 100%; * surprisingly confusing layout rules.) */
white-space: nowrap; div.module h2,
font-weight: normal; div.module h3 {
line-height: 1; margin: 0;
color: #fff; background-repeat: repeat-x;
} background-position: 0 100%;
white-space: nowrap;
div.module h2 { font-weight: normal;
background-color: #000; line-height: 1;
background-image: url("../images/h2-bg.png"); color: #fff;
text-shadow: #000 2px 2px 1px; }
padding: 0.3125em;
font-size: 160%; div.module h2 {
} background-color: #000;
background-image: url("../images/h2-bg.png");
/* less important info can be wrapped in a span to dull it */ text-shadow: #000 2px 2px 1px;
div.module h2 span { padding: 0.3125em;
text-shadow: none; font-size: 160%;
font-size: 62.5%; }
opacity: 0.8;
} /* less important info can be wrapped in a span to dull it */
div.module h2 span {
/* subheaders are almost the same. to dull things, i just made the text-shadow: none;
* h2-bg image 80% opaque and re-saved it. STILL TODO: ask meghana font-size: 62.5%;
* to make this pretty */ opacity: 0.8;
div.module h3 { }
background-image: url("../images/h3-bg.png");
background-color: #333; /* subheaders are almost the same. to dull things, i just made the
padding: 0.5em; * h2-bg image 80% opaque and re-saved it. STILL TODO: ask meghana
font-size: 100%; * to make this pretty */
} div.module h3 {
background-image: url("../images/h3-bg.png");
background-color: #333;
padding: 0.5em;
font-size: 100%;
/* modules can (optionally) include help text, to explain how they can }
* be used. this is hidden by module-help.js, if it's available, but
* shouldn't be too verbose, in case it isn't */
div.module div.help,
div.module form.search {
border-right: 0.5em solid #ffb; /* modules can (optionally) include help text, to explain how they can
border-left: 0.5em solid #ffb; * be used. this is hidden by module-help.js, if it's available, but
background: #ffc; * shouldn't be too verbose, in case it isn't */
padding: 1em; div.module div.help,
} div.module form.search {
border-right: 0.5em solid #ffb;
div.module div.help p { border-left: 0.5em solid #ffb;
margin: 0; } background: #ffc;
padding: 1em;
}
/* modules can optionally contain a small "toolbar", which hangs in the
* top right, overlapping the <h2>, if there is one */ div.module div.help p {
div.module div.toolbar { margin: 0; }
position: absolute;
top: 0;
right: 0; /* modules can optionally contain a small "toolbar", which hangs in the
line-height: 2.6em; * top right, overlapping the <h2>, if there is one */
} div.module div.toolbar {
position: absolute;
div.module div.toolbar a, top: 0;
div.module div.toolbar span { right: 0;
display: block; line-height: 2.6em;
float: right; }
color: #eee;
margin-right: 0.625em; div.module div.toolbar a,
padding-left: 21px; div.module div.toolbar span {
background-repeat: no-repeat; display: block;
background-position: 0 50%; float: right;
font-size: 80%; color: #eee;
cursor: pointer; margin-right: 0.625em;
} padding-left: 21px;
background-repeat: no-repeat;
/* various common toolbar icons. should be from the famfamfam background-position: 0 50%;
* silk set, to fit in with the rest of RapidSMS. this will font-size: 80%;
* probably grow (and be abstracted) as apps do more things */ cursor: pointer;
div.module div.toolbar .add { background-image: url("../icons/silk/add.png"); } }
div.module div.toolbar .help { background-image: url("../icons/silk/help.png"); }
div.module div.toolbar .search { background-image: url("../icons/silk/magnifier.png"); } /* various common toolbar icons. should be from the famfamfam
* silk set, to fit in with the rest of RapidSMS. this will
* probably grow (and be abstracted) as apps do more things */
div.module div.toolbar .add { background-image: url("../icons/silk/add.png"); }
div.module div.toolbar .help { background-image: url("../icons/silk/help.png"); }
div.module div.toolbar .search { background-image: url("../icons/silk/magnifier.png"); }

103
best/static/rapidsms/stylesheets/splits.css
View File

@ -1,51 +1,52 @@
/* vim:set et ts=4 sw=4 */ /* vim:set et ts=4 sw=4 */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6 { .col-1, .col-2, .col-3, .col-4, .col-5, .col-6 {
margin-left: 1em; margin-left: 1em;
min-height: 1px; min-height: 1px;
float: left; float: left;
} }
.two-columns { padding-left: 1em; } .two-columns { padding-left: 1em; }
.two-columns .col-1 { margin-left: -1em; } .two-columns .col-1 { margin-left: -1em; }
.two-columns .col-1 .two-columns .col-1
{ {
width: 34%; } width: 34%; }
.two-columns .col-2 .two-columns .col-2
{ {
width: 66%; } width: 66%;
overflow:auto; }
.three-columns { padding-left: 2em; }
.three-columns .col-1 { margin-left: -2em; } .three-columns { padding-left: 2em; }
.three-columns .col-1 { margin-left: -2em; }
.three-columns .col-2 {
width: 34%; } .three-columns .col-2 {
width: 34%; }
.three-columns .col-1,
.three-columns .col-3 { .three-columns .col-1,
width: 33%; } .three-columns .col-3 {
width: 33%; }
.four-columns { padding-left: 3em; }
.four-columns .col-1 { margin-left: -3em; } .four-columns { padding-left: 3em; }
.four-columns .col-1 { margin-left: -3em; }
.four-columns .col-1,
.four-columns .col-2, .four-columns .col-1,
.four-columns .col-3, .four-columns .col-2,
.four-columns .col-4 { .four-columns .col-3,
width: 25%; } .four-columns .col-4 {
width: 25%; }
.five-columns { padding-left: 4em; }
.five-columns .col-1 { margin-left: -4em; } .five-columns { padding-left: 4em; }
.five-columns .col-1 { margin-left: -4em; }
.five-columns .col-1,
.five-columns .col-2, .five-columns .col-1,
.five-columns .col-3, .five-columns .col-2,
.five-columns .col-4, .five-columns .col-3,
.five-columns .col-5 { .five-columns .col-4,
width: 20%; } .five-columns .col-5 {
width: 20%; }

474
best/static/rapidsms/stylesheets/tables.css
View File

@ -1,237 +1,237 @@
/* vim:set et ts=4 sw=4 */ /* vim:set et ts=4 sw=4 */
table { table {
border-collapse: collapse; border-collapse: collapse;
width:100%;} width:100%;}
col { } col { }
/* highlight sorted columns just a little tiny bit. some people /* highlight sorted columns just a little tiny bit. some people
* won't be able to see it, but the header should contain some * won't be able to see it, but the header should contain some
* kind of indication, too. darker colors interfere with the * kind of indication, too. darker colors interfere with the
* grid lines, which are also very light. */ * grid lines, which are also very light. */
col.sorted { col.sorted {
background: #fcfcff; } background: #fcfcff; }
tr{ } tr{ }
td, th { td, th {
padding: 0.5em; padding: 0.5em;
border: 1px solid #ddd; border: 1px solid #ddd;
/* reset the "look" of headers to match regular cells, /* reset the "look" of headers to match regular cells,
* since they can appear anywhere (col or row scope) */ * since they can appear anywhere (col or row scope) */
font-weight: normal; font-weight: normal;
text-align: left; text-align: left;
} }
/* if this table is directly following a header, we don't /* if this table is directly following a header, we don't
* need a border top. it'd probably get lost, anyway */ * need a border top. it'd probably get lost, anyway */
h2 + table thead th { h2 + table thead th {
border-top: none; } border-top: none; }
thead th { thead th {
background: #e1e1e1 url(../images/table-header-bg.png) repeat-x 100% 0; background: #e1e1e1 url(../images/table-header-bg.png) repeat-x 100% 0;
color: #888; color: #888;
} }
thead th a, thead th a,
thead th span.unsortable { thead th span.unsortable {
color: #888; color: #888;
outline: 0; outline: 0;
border-left: 1px solid #f8f8f8; border-left: 1px solid #f8f8f8;
/* the padding/margin magic overlaps the padding /* the padding/margin magic overlaps the padding
* of the th, to make it all clickable */ * of the th, to make it all clickable */
padding: 0.5em; padding: 0.5em;
margin: -0.5em; margin: -0.5em;
/* if a sort marker is within this link, it'll /* if a sort marker is within this link, it'll
* need to position absolutely within */ * need to position absolutely within */
position: relative; position: relative;
display: block; display: block;
} }
/* highlight it when the th is hovered, a bit /* highlight it when the th is hovered, a bit
* like (most) native controls. this is crappy, * like (most) native controls. this is crappy,
* since the background image is sitting on top * since the background image is sitting on top
* of the th bg, not replacing it */ * of the th bg, not replacing it */
thead th a:hover { thead th a:hover {
background-image: url(../images/table-header-bg-highlight.png); background-image: url(../images/table-header-bg-highlight.png);
color: #000; color: #000;
} }
thead th.sorted a { thead th.sorted a {
padding-right: 26px; padding-right: 26px;
color: #000; color: #000;
} }
/* unfortunately, an extra element (a span) is /* unfortunately, an extra element (a span) is
* needed to display the sort marker. all of the * needed to display the sort marker. all of the
* other backgrounds are already busy. snap it * other backgrounds are already busy. snap it
* to the right/middle of the th */ * to the right/middle of the th */
thead th.sorted a span { thead th.sorted a span {
display: block; display: block;
position: absolute; position: absolute;
right: 5px; right: 5px;
top: 50%; top: 50%;
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-top: -8px; margin-top: -8px;
overflow: hidden; overflow: hidden;
text-indent: -9999px; text-indent: -9999px;
} }
thead th.asc a span { background-image: url("../icons/silk/sort_ascending.png"); } thead th.asc a span { background-image: url("../icons/silk/sort_ascending.png"); }
thead th.desc a span { background-image: url("../icons/silk/sort_descending.png"); } thead th.desc a span { background-image: url("../icons/silk/sort_descending.png"); }
/* make the grid lighter within the tbody, since it's /* make the grid lighter within the tbody, since it's
* only a visual hint to distinguish the rows + cols */ * only a visual hint to distinguish the rows + cols */
tbody th, tbody td { tbody th, tbody td {
border-color: #f8f8f8; } border-color: #f8f8f8; }
/* stripe the rows /* stripe the rows
tbody tr:nth-child(odd) { tbody tr:nth-child(odd) {
background: #f8f8f8; }*/ background: #f8f8f8; }*/
/* restore the dark outer borders of the tbody */ /* restore the dark outer borders of the tbody */
tbody tr:first-child th, tbody tr:first-child td { border-top-color: #ddd; } tbody tr:first-child th, tbody tr:first-child td { border-top-color: #ddd; }
tbody th:last-child, tbody td:last-child { border-right-color: #ddd; } tbody th:last-child, tbody td:last-child { border-right-color: #ddd; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom-color: #ddd; } tbody tr:last-child th, tbody tr:last-child td { border-bottom-color: #ddd; }
tbody th:first-child, tbody td:first-child { border-left-color: #ddd; } tbody th:first-child, tbody td:first-child { border-left-color: #ddd; }
/* some cells have nothing important to say, (like "none" or /* some cells have nothing important to say, (like "none" or
* "never"), but are required none the less. make them dull, * "never"), but are required none the less. make them dull,
* to highlight the rows which contain real data */ * to highlight the rows which contain real data */
td.na, th.na, td span.na, th span.na { td.na, th.na, td span.na, th span.na {
font-style: italic; font-style: italic;
color: #aaa; color: #aaa;
} }
/* when a row is "active" (eg. it is being viewed, edited, etc), it /* when a row is "active" (eg. it is being viewed, edited, etc), it
* is dimly highlighted. the bgcolor is 10% of #33a7d2 (links) * is dimly highlighted. the bgcolor is 10% of #33a7d2 (links)
* applied to the cells (not the row), to mask the stripes */ * applied to the cells (not the row), to mask the stripes */
tr.active td, tr.active th { tr.active td, tr.active th {
background: #ebf6fa url(../images/table-row-bg-active.png) repeat-x 100% 0; } background: #ebf6fa url(../images/table-row-bg-active.png) repeat-x 100% 0; }
tr.no-data { } tr.no-data { }
tr.no-data td { tr.no-data td {
text-align: center; text-align: center;
background: #f8f8ff no-repeat 50% 50%; background: #f8f8ff no-repeat 50% 50%;
padding: 2em; padding: 2em;
color: #aaa; color: #aaa;
} }
/* since no-data rows usually only have a single <td>, the /* since no-data rows usually only have a single <td>, the
* last-child rule above breaks their huge padding. this is * last-child rule above breaks their huge padding. this is
* a hack to restore it. */ * a hack to restore it. */
body:last-child tr.no-data td:last-child { body:last-child tr.no-data td:last-child {
padding-right: 2em; } padding-right: 2em; }
tr.no-data td a.add { tr.no-data td a.add {
display: block; display: block;
padding-top: 0.625em; padding-top: 0.625em;
font-size: 80%; font-size: 80%;
} }
/* since there is no data, it might be useful to point the /* since there is no data, it might be useful to point the
* user in the right direction. these arrows are very light, * user in the right direction. these arrows are very light,
* and displayed behind the "You haven't..." text. */ * and displayed behind the "You haven't..." text. */
tr.no-data.look-up td { background-image: url("../images/big-arrows/up.png"); } tr.no-data.look-up td { background-image: url("../images/big-arrows/up.png"); }
tr.no-data.look-right td { background-image: url("../images/big-arrows/right.png"); } tr.no-data.look-right td { background-image: url("../images/big-arrows/right.png"); }
tr.no-data.look-down td { background-image: url("../images/big-arrows/down.png"); } tr.no-data.look-down td { background-image: url("../images/big-arrows/down.png"); }
tr.no-data.look-left td { background-image: url("../images/big-arrows/left.png"); } tr.no-data.look-left td { background-image: url("../images/big-arrows/left.png"); }
/* if there is no data because an error occurred, make the /* if there is no data because an error occurred, make the
* table obviously busted by highlighting it in red. */ * table obviously busted by highlighting it in red. */
tr.no-data.error td { tr.no-data.error td {
color: #f66; color: #f66;
background-color: #fff8f8; background-color: #fff8f8;
background-image: url("../images/big-arrows/error.png"); background-image: url("../images/big-arrows/error.png");
} }
tr.depth-1 td.indent { padding-left: 2em; } tr.depth-1 td.indent { padding-left: 2em; }
tr.depth-2 td.indent { padding-left: 4em; } tr.depth-2 td.indent { padding-left: 4em; }
tr.depth-3 td.indent { padding-left: 6em; } tr.depth-3 td.indent { padding-left: 6em; }
tr.depth-4 td.indent { padding-left: 8em; } tr.depth-4 td.indent { padding-left: 8em; }
tr.depth-5 td.indent { padding-left: 10em; } tr.depth-5 td.indent { padding-left: 10em; }
tr.depth-6 td.indent { padding-left: 12em; } tr.depth-6 td.indent { padding-left: 12em; }
tr.depth-7 td.indent { padding-left: 14em; } tr.depth-7 td.indent { padding-left: 14em; }
tr.depth-8 td.indent { padding-left: 16em; } tr.depth-8 td.indent { padding-left: 16em; }
tfoot { tfoot {
background: #f8f8f8 url("../images/table-footer-bg.png") repeat-x 0 0; background: #f8f8f8 url("../images/table-footer-bg.png") repeat-x 0 0;
font-size: 80%; font-size: 80%;
} }
/* no padding in the footer cell; the links will float and pad /* no padding in the footer cell; the links will float and pad
* themselves, so the clickable blocks are easier to hit */ * themselves, so the clickable blocks are easier to hit */
tfoot td { tfoot td {
padding: 0; } padding: 0; }
/* footer links are dull, because they're less important /* footer links are dull, because they're less important
* than the data. TODO: is this totally stupid? (i don't * than the data. TODO: is this totally stupid? (i don't
* really care, it's pretty) */ * really care, it's pretty) */
tfoot a, tfoot a,
tfoot span { tfoot span {
display: block; display: block;
float: right; float: right;
padding: 0.625em; padding: 0.625em;
color: #aaa; color: #aaa;
} }
/* footer links can be broken up with spans, which look /* footer links can be broken up with spans, which look
* the same, except super dull (for things like disabled * the same, except super dull (for things like disabled
* pagination links */ * pagination links */
tfoot span { tfoot span {
color: #ddd; } color: #ddd; }
/* highlight hover links brighter than usual, since /* highlight hover links brighter than usual, since
* they're harder to spot */ * they're harder to spot */
tfoot a:hover { tfoot a:hover {
background: #fff; } background: #fff; }
/* move all paginator links to the left, to separate from /* move all paginator links to the left, to separate from
* additional views and export, which lives on the right */ * additional views and export, which lives on the right */
tfoot .paginator, tfoot .paginator,
tfoot .paginator a, tfoot .paginator a,
tfoot .paginator span { tfoot .paginator span {
float: left; } float: left; }
tfoot .paginator a.active { tfoot .paginator a.active {
background: #ddd; background: #ddd;
color: #fff; color: #fff;
} }
tfoot .paginator .first, tfoot .paginator .first,
tfoot .paginator .prev, tfoot .paginator .prev,
tfoot .paginator .next, tfoot .paginator .next,
tfoot .paginator .last { tfoot .paginator .last {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 50%; background-position: 0 50%;
text-indent: -9999px; text-indent: -9999px;
overflow: hidden; overflow: hidden;
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
width: 16px; width: 16px;
} }
/* links look something like: /* links look something like:
* << < 1 2 3 4 > >> */ * << < 1 2 3 4 > >> */
tfoot .paginator .first { background-image: url("../icons/silk/resultset_first.png"); } tfoot .paginator .first { background-image: url("../icons/silk/resultset_first.png"); }
tfoot .paginator .prev { background-image: url("../icons/silk/resultset_previous.png"); } tfoot .paginator .prev { background-image: url("../icons/silk/resultset_previous.png"); }
tfoot .paginator .next { background-image: url("../icons/silk/resultset_next.png"); } tfoot .paginator .next { background-image: url("../icons/silk/resultset_next.png"); }
tfoot .paginator .last { background-image: url("../icons/silk/resultset_last.png"); } tfoot .paginator .last { background-image: url("../icons/silk/resultset_last.png"); }
/* when a link is disabled, move the background image /* when a link is disabled, move the background image
* over to reveal the transparent sprite to the left */ * over to reveal the transparent sprite to the left */
tfoot .paginator span.na { tfoot .paginator span.na {
background-position: -16px 50%; } background-position: -16px 50%; }
/* the ... to indicate that page links have been hidden /* the ... to indicate that page links have been hidden
* (because there were too many) should be quite dull */ * (because there were too many) should be quite dull */
tfoot .paginator span.elipsis { tfoot .paginator span.elipsis {
letter-spacing: 1px; letter-spacing: 1px;
color: #888; color: #888;
} }