From 03ada135f4015581ed85619f2dcc34913a687422 Mon Sep 17 00:00:00 2001 From: Karen Date: Fri, 14 Oct 2011 01:01:03 +0530 Subject: [PATCH] made changes to login, insrtuctions, etc. --- best/settings.py | 4 +- best/static/rapidsms/stylesheets/layout.css | 632 +++++++++---------- best/static/rapidsms/stylesheets/modules.css | 269 ++++---- best/static/rapidsms/stylesheets/splits.css | 103 +-- best/static/rapidsms/stylesheets/tables.css | 474 +++++++------- 5 files changed, 744 insertions(+), 738 deletions(-) diff --git a/best/settings.py b/best/settings.py index e0f703b..377f723 100644 --- a/best/settings.py +++ b/best/settings.py @@ -95,12 +95,12 @@ INSTALLED_APPS = [ # tabbed navigation. when adding an app to INSTALLED_APPS, you may wish # to add it here, also, to expose it in the rapidsms ui. 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.messaging.views.messaging", "Messaging"), # ("rapidsms.contrib.locations.views.locations", "Map"), # ("rapidsms.contrib.scheduler.views.index", "Event Scheduler"), - ("rapidsms.contrib.httptester.views.generate_identity", "Message Tester"), + ("rapidsms.contrib.httptester.views.generate_identity", "SMS Tester"), ] diff --git a/best/static/rapidsms/stylesheets/layout.css b/best/static/rapidsms/stylesheets/layout.css index abfcba3..231a91c 100644 --- a/best/static/rapidsms/stylesheets/layout.css +++ b/best/static/rapidsms/stylesheets/layout.css @@ -1,316 +1,316 @@ -/* vim:set et ts=4 sw=4 */ - -body { - background: #eee url("../images/body-bg.png"); - font: 9pt "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; - line-height: 1; - color: #333; - padding: 0; - margin: 0; -} - -a { - text-decoration: none; - color: #33a7d2; -} - - a:hover { - text-decoration: underline; } - -abbr { - cursor: help; } - -p { - line-height: 1.4; } - -/* this is not okay. but it is, unfortunately, the least error-prone way - * (that i know) of fixing broken floaty layouts in IE6 */ -div.clear-hack { - overflow: hidden; - clear: both; - height: 0; -} - - - - -#wrapper { - width: 80em; - background: #fff; - margin: 0.5em auto 0 auto; - - /* a little pretty for the 10/dec demo */ - -moz-box-shadow: 4px 4px 8px #aaa; - box-shadow: 4px 4px 8px #aaa; - -moz-border-radius-bottomright: 1em; - -moz-border-radius-bottomleft: 1em; -} - - /* no scaling for ie6 */ - * html #wrapper { - width: 960px; } - - - - -/* the header is based roughly upon unicef.org, with rapidsms colors */ -#header { -height:122px; -width:960px; -text-align:right; -position: relative; -color: #CCF; -background: #94997e; /* Old browsers */ -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-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: -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 */ -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 - * be especially discoverable; when the user tries to do something - * requiring a login, they should be redirected automatically */ - #header #auth { - font-size: 80%; - position: absolute; - line-height: 22px; - margin: 0 10px; - right: 0; - top: 0; -} - - #header #auth a { - color: #CE0000; - padding-right:6px; - font-size:80%; - - } - - - #branding { - padding: 2px 10px; - } - - /* align in the middle of the unicef blue stripe of header bg, and - * display logo on the right. TODO: extract the unicef branding */ - #branding h1 { - background: url(../images/bessms_header07d.png) no-repeat; - height: 108px; - color: #fff; - margin: 0; - width:960px; - position:absolute; - top:6px; - left:0px; - } - - * html #branding h1 { - width: 940px; } - - #branding h1 a { - height: 65px; - width: 245px; - display: block; - /*background: url("../images/rapidsms-logo.png") no-repeat 0 50%;*/ - - /* float the RapidSMS logo, in case any app would like to - * append anything to the light blue (empty) stripe */ - float: left; - } - - #branding h1 a span { - position: absolute; - left: -9999px; - } - - #tabs, - #page-tabs { - position: absolute; - height: 28px; - bottom: 0; - padding: 0; - margin: 0; - } - - /* global tabs sit on the right, page-specific tabs sit on the left. - * to draw more attention. TODO: maybe re-think this */ - #tabs { right: 0; } - #page-tabs { left: 0; } - - #tabs li, - #page-tabs li { - display: block; - float: left; - line-height: 28px; - } - - /* 5px spacing between each tab, to match the top gap, since - * we're using pixel-positioned backgrounds there */ - #tabs li { margin-right: 5px; } - #page-tabs li { margin-left: 5px; } - - #tabs li a, - #page-tabs li a { - color: white; -display: block; -padding: 0 1em; -border-right: 1px solid #FE0000; -border-left: 1px solid #FE0000; -outline: none; -background-color:#CE0000; } - - /* there are unread messages in this tab! TODO: is this just - * for the training app? if so, move it there! */ - #tabs li.unread a span { - display: block; - padding-right: 21px; - background: url("../icons/silk/email_open.png") no-repeat 100% 50%; - } - - /* always highlight the active (in the navigation sense, not - * the css :active sense) tab, even when it's being hovered - * or focused, since clicking it again is mostly useless */ - #tabs li.active a, #page-tabs li.active a, - #tabs li.active a:hover, #page-tabs li.active a:hover, - #tabs li.active a:focus, #page-tabs li.active a:focus { - - background: #fff url("../images/tab-bg-active.png") repeat-x; - text-decoration: none; - text-shadow: none; - color: #000; - - /* the same color as the strip in header-bg.png */ - border: 1px solid #cef1f5; - border-bottom: 0; - - /* nudge the active tab north by one pixel, to line it - * up with the tops of the other tabs */ - margin-top: -1px; - } - - /* brighten up inactive tabs when hovering or tab-focusing - * with the keyboard (we removed the outline, above) */ - #tabs li a:hover, #page-tabs li a:hover, - #tabs li a:focus, #page-tabs li a:focus { - /*background-image: url("../images/tab-bg-hover.png");*/ - text-shadow: #FB8C07 1px 1px 2px; - text-decoration: none; - } - - - - -#breadcrumbs { - color: #ccc; - font-size: 2em; - line-height: 1; - padding: 0.5em; - text-shadow: #eee 2px 2px 2px; - border-bottom: 1px dotted #eee; -} - - #breadcrumbs a { - color: #000; - } - - - - -.module a -{color:#CE0000;} - -#inner { - padding: 1em; - position: relative; -} - - /* some parts of the page title are dynamic (or otherwise really - * important), like search terms. highlight them! */ - #inner h1 span.highlight { - background: #ffa; - -moz-border-radius: 5px; - border: 2px solid #ff0; - padding: 0 4px; - margin-left: -4px; - } - - /* when an app has something really important to say, it can use the - * apps/webui/templates/message.html template to display a huge blob - * of text. this should probably be replaced with flash messages */ - #inner div.message { - text-align: center; - padding: 4em 25%; - } - - #inner div.message p { - margin: 0 0 0.5em 0; - font-size: 2em; - } - - - - -/* some apps (erm, just the querylog, actually) add big triggers to the - * bottom of the page to show or perform some action. */ -div.trigger { - font-size: 80%; - text-align: center; - padding: 0.625em; - background: #f8f8f8; - cursor: pointer; - color: #aaa; -} - - div.trigger.warn { - background: #fdd; - color: #f00; - } - - - - -#footer { - border-top: 1px dotted #eee; - padding: 0.5em; - clear: both; - color: #ccc; - - /* reserve space for at two lines of links @ LH=1.4 (for the - * copyright and licensing/download info) */ - min-height: 2.8em; -} - - /* 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, - * to keep them out of view until they're needed. */ - #footer .footer-region { - margin-top: 1.4em; - line-height: 1.4; - opacity: 0.25; - float: left; - } - - #footer .footer-region:hover { - opacity: 1; } - - #footer .footer-region a { margin-right: 0.5em; } - #footer .footer-region a:last-child { margin-right: 0; } - - - #footer a -{color:#CE0000;} - - #footer p.rights { - text-align: right; - float: right; - margin: 0; - } +/* vim:set et ts=4 sw=4 */ + +body { + background: #eee url("../images/body-bg.png"); + font: 9pt "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; + line-height: 1; + color: #333; + padding: 0; + margin: 0; +} + +a { + text-decoration: none; + color: #33a7d2; +} + + a:hover { + text-decoration: underline; } + +abbr { + cursor: help; } + +p { + line-height: 1.4; } + +/* this is not okay. but it is, unfortunately, the least error-prone way + * (that i know) of fixing broken floaty layouts in IE6 */ +div.clear-hack { + overflow: hidden; + clear: both; + height: 0; +} + + + + +#wrapper { + width: 80em; + background: #fff; + margin: 0.5em auto 0 auto; + + /* a little pretty for the 10/dec demo */ + -moz-box-shadow: 4px 4px 8px #aaa; + box-shadow: 4px 4px 8px #aaa; + -moz-border-radius-bottomright: 1em; + -moz-border-radius-bottomleft: 1em; +} + + /* no scaling for ie6 */ + * html #wrapper { + width: 960px; } + + + + +/* the header is based roughly upon unicef.org, with rapidsms colors */ +#header { +height:122px; +width:960px; +text-align:right; +position: relative; +color: #CCF; +background: #94997e; /* Old browsers */ +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-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: -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 */ +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 + * be especially discoverable; when the user tries to do something + * requiring a login, they should be redirected automatically */ + #header #auth { + font-size: 80%; + position: absolute; + line-height: 22px; + margin: 0 10px; + right: 0; + top: 0;;} + + #header #auth a { + color: #000; + padding-right:6px; + font-size:80%; + position:relative; + z-index:1; + } + + + #branding { + padding: 2px 10px; + } + + /* align in the middle of the unicef blue stripe of header bg, and + * display logo on the right. TODO: extract the unicef branding */ + #branding h1 { + background: url(../images/bessms_header07d.png) no-repeat; + height: 108px; + color: #fff; + margin: 0; + width:960px; + position:absolute; + top:6px; + left:0px; + } + + * html #branding h1 { + width: 940px; } + + #branding h1 a { + height: 65px; + width: 245px; + display: block; + /*background: url("../images/rapidsms-logo.png") no-repeat 0 50%;*/ + + /* float the RapidSMS logo, in case any app would like to + * append anything to the light blue (empty) stripe */ + float: left; + } + + #branding h1 a span { + position: absolute; + left: -9999px; + } + + #tabs, + #page-tabs { + position: absolute; + height: 28px; + bottom: 0; + padding: 0; + margin: 0; + } + + /* global tabs sit on the right, page-specific tabs sit on the left. + * to draw more attention. TODO: maybe re-think this */ + #tabs { right: 0; } + #page-tabs { left: 0; } + + #tabs li, + #page-tabs li { + display: block; + float: left; + line-height: 28px; + } + + /* 5px spacing between each tab, to match the top gap, since + * we're using pixel-positioned backgrounds there */ + #tabs li { margin-right: 5px; } + #page-tabs li { margin-left: 5px; } + + #tabs li a, + #page-tabs li a { + color: white; +display: block; +padding: 0 1em; +border-right: 1px solid #FE0000; +border-left: 1px solid #FE0000; +outline: none; +background-color:#CE0000; } + + /* there are unread messages in this tab! TODO: is this just + * for the training app? if so, move it there! */ + #tabs li.unread a span { + display: block; + padding-right: 21px; + background: url("../icons/silk/email_open.png") no-repeat 100% 50%; + } + + /* always highlight the active (in the navigation sense, not + * the css :active sense) tab, even when it's being hovered + * or focused, since clicking it again is mostly useless */ + #tabs li.active a, #page-tabs li.active a, + #tabs li.active a:hover, #page-tabs li.active a:hover, + #tabs li.active a:focus, #page-tabs li.active a:focus { + + background: #fff url("../images/tab-bg-active.png") repeat-x; + text-decoration: none; + text-shadow: none; + color: #000; + + /* the same color as the strip in header-bg.png */ + border: 1px solid #cef1f5; + border-bottom: 0; + + /* nudge the active tab north by one pixel, to line it + * up with the tops of the other tabs */ + margin-top: -1px; + } + + /* brighten up inactive tabs when hovering or tab-focusing + * with the keyboard (we removed the outline, above) */ + #tabs li a:hover, #page-tabs li a:hover, + #tabs li a:focus, #page-tabs li a:focus { + /*background-image: url("../images/tab-bg-hover.png");*/ + text-shadow: #FB8C07 1px 1px 2px; + text-decoration: none; + } + + + + +#breadcrumbs { + color: #ccc; + font-size: 2em; + line-height: 1; + padding: 0.5em; + text-shadow: #eee 2px 2px 2px; + border-bottom: 1px dotted #eee; +} + + #breadcrumbs a { + color: #000; + } + + + + +.module a +{color:#CE0000;} + +#inner { + padding: 1em; + position: relative; +} + + /* some parts of the page title are dynamic (or otherwise really + * important), like search terms. highlight them! */ + #inner h1 span.highlight { + background: #ffa; + -moz-border-radius: 5px; + border: 2px solid #ff0; + padding: 0 4px; + margin-left: -4px; + } + + /* when an app has something really important to say, it can use the + * apps/webui/templates/message.html template to display a huge blob + * of text. this should probably be replaced with flash messages */ + #inner div.message { + text-align: center; + padding: 4em 25%; + } + + #inner div.message p { + margin: 0 0 0.5em 0; + font-size: 2em; + } + + + + +/* some apps (erm, just the querylog, actually) add big triggers to the + * bottom of the page to show or perform some action. */ +div.trigger { + font-size: 80%; + text-align: center; + padding: 0.625em; + background: #f8f8f8; + cursor: pointer; + color: #aaa; +} + + div.trigger.warn { + background: #fdd; + color: #f00; + } + + + + +#footer { + border-top: 1px dotted #eee; + padding: 0.5em; + clear: both; + color: #ccc; + + /* reserve space for at two lines of links @ LH=1.4 (for the + * copyright and licensing/download info) */ + min-height: 2.8em; +} + + /* 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, + * to keep them out of view until they're needed. */ + #footer .footer-region { + margin-top: 1.4em; + line-height: 1.4; + opacity: 0.25; + float: left; + } + + #footer .footer-region:hover { + opacity: 1; } + + #footer .footer-region a { margin-right: 0.5em; } + #footer .footer-region a:last-child { margin-right: 0; } + + + #footer a +{color:#CE0000;} + + #footer p.rights { + text-align: right; + float: right; + margin: 0; + } diff --git a/best/static/rapidsms/stylesheets/modules.css b/best/static/rapidsms/stylesheets/modules.css index 84bf9c8..271a5d4 100644 --- a/best/static/rapidsms/stylesheets/modules.css +++ b/best/static/rapidsms/stylesheets/modules.css @@ -1,132 +1,137 @@ -/* vim:set et ts=4 sw=4 */ - -div.module { - margin-top: 2em; - position: relative; -} - - div.module div.module { - border: 1px solid #8fbcc9; } - -div.module:first-child { - margin-top: 0; } - - - - -div.module.collapsed { - overflow-y: hidden; - height: 2.6em; -} - - div.module.collapsed h2 { - background-image: url("../images/h2-bg-collapsed.png"); } - - div.module.collapsed + div.module { - margin-top: 1px; } - - div.module.collapsed h2 span.toggler, - div.module.expanded h2 span.toggler { - background: no-repeat 50% 50%; - text-indent: -9999px; - cursor: pointer; - width: 16px; - height: 2.6em; - overflow: hidden; - position: absolute; - padding: 0 0.5em; - right: 0; - top: 0; - } - - div.module.collapsed h2 span.toggler { background-image: url("../icons/silk/section_collapsed--bright.png"); } - div.module.expanded h2 span.toggler { background-image: url("../icons/silk/section_expanded--bright.png"); } - - - - -/* module headers are mostly ripped off from django admin, although - * here, we never use , to keep things simple. (they have - * surprisingly confusing layout rules.) */ -div.module h2, -div.module h3 { - margin: 0; - background-repeat: repeat-x; - background-position: 0 100%; - white-space: nowrap; - font-weight: normal; - line-height: 1; - color: #fff; -} - - div.module h2 { - background-color: #000; - background-image: url("../images/h2-bg.png"); - text-shadow: #000 2px 2px 1px; - padding: 0.3125em; - font-size: 160%; - } - - /* less important info can be wrapped in a span to dull it */ - div.module h2 span { - text-shadow: none; - font-size: 62.5%; - opacity: 0.8; - } - - /* subheaders are almost the same. to dull things, i just made the - * h2-bg image 80% opaque and re-saved it. STILL TODO: ask meghana - * 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; - border-left: 0.5em solid #ffb; - background: #ffc; - padding: 1em; -} - - div.module div.help p { - margin: 0; } - - -/* modules can optionally contain a small "toolbar", which hangs in the - * top right, overlapping the

, if there is one */ -div.module div.toolbar { - position: absolute; - top: 0; - right: 0; - line-height: 2.6em; -} - - div.module div.toolbar a, - div.module div.toolbar span { - display: block; - float: right; - color: #eee; - margin-right: 0.625em; - padding-left: 21px; - background-repeat: no-repeat; - background-position: 0 50%; - font-size: 80%; - cursor: pointer; - } - - /* 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"); } +/* vim:set et ts=4 sw=4 */ + + +#instruction h2/*THE CSS FOR THE INSTRUCTIONS FROM WIKI*/ +{font-weight:bold;} + +div.module { + margin-top: 2em; + position: relative; + +} + + div.module div.module { + border: 1px solid #8fbcc9; } + +div.module:first-child { + margin-top: 0; } + + + + +div.module.collapsed { + overflow-y: hidden; + height: 2.6em; +} + + div.module.collapsed h2 { + background-image: url("../images/h2-bg-collapsed.png"); } + + div.module.collapsed + div.module { + margin-top: 1px; } + + div.module.collapsed h2 span.toggler, + div.module.expanded h2 span.toggler { + background: no-repeat 50% 50%; + text-indent: -9999px; + cursor: pointer; + width: 16px; + height: 2.6em; + overflow: hidden; + position: absolute; + padding: 0 0.5em; + right: 0; + top: 0; + } + + div.module.collapsed h2 span.toggler { background-image: url("../icons/silk/section_collapsed--bright.png"); } + div.module.expanded h2 span.toggler { background-image: url("../icons/silk/section_expanded--bright.png"); } + + + + +/* module headers are mostly ripped off from django admin, although + * here, we never use , to keep things simple. (they have + * surprisingly confusing layout rules.) */ +div.module h2, +div.module h3 { + margin: 0; + background-repeat: repeat-x; + background-position: 0 100%; + white-space: nowrap; + font-weight: normal; + line-height: 1; + color: #fff; +} + + div.module h2 { + background-color: #000; + background-image: url("../images/h2-bg.png"); + text-shadow: #000 2px 2px 1px; + padding: 0.3125em; + font-size: 160%; + } + + /* less important info can be wrapped in a span to dull it */ + div.module h2 span { + text-shadow: none; + font-size: 62.5%; + opacity: 0.8; + } + + /* subheaders are almost the same. to dull things, i just made the + * h2-bg image 80% opaque and re-saved it. STILL TODO: ask meghana + * 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; + border-left: 0.5em solid #ffb; + background: #ffc; + padding: 1em; +} + + div.module div.help p { + margin: 0; } + + +/* modules can optionally contain a small "toolbar", which hangs in the + * top right, overlapping the

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