Commit 35a62b9d authored by Kostas Papadimitriou's avatar Kostas Papadimitriou
Browse files

Several styles fixes/additions

- minor css fixes
- invitations 2 cols layout
- locally served html5shim
- new form error styles
parent d20cecdc
......@@ -204,6 +204,207 @@ textarea {
background-color: #f89a1c;
}
/*addon to style django forms rendered with as_p filter*/
/*
* Tables.less
* Tables for, you guessed it, tabular data
* ---------------------------------------- */
table {
width: 100%;
margin-bottom: 22px;
padding: 0;
font-size: 14px;
border-collapse: collapse;
}
table th, table td {
padding: 10px 10px 9px;
line-height: 22px;
text-align: left;
}
table th {
padding-top: 9px;
font-weight: bold;
vertical-align: middle;
}
table td {
vertical-align: top;
border-top: 1px solid #ddd;
}
table tbody th {
border-top: 1px solid #ddd;
vertical-align: top;
}
.condensed-table th, .condensed-table td {
padding: 5px 5px 4px;
}
.bordered-table {
border: 1px solid #ddd;
border-collapse: separate;
*border-collapse: collapse;
/* IE7, collapse table to remove spacing */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.bordered-table th + th, .bordered-table td + td, .bordered-table th + td {
border-left: 1px solid #ddd;
}
.bordered-table thead tr:first-child th:first-child, .bordered-table tbody tr:first-child td:first-child {
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
border-radius: 4px 0 0 0;
}
.bordered-table thead tr:first-child th:last-child, .bordered-table tbody tr:first-child td:last-child {
-webkit-border-radius: 0 4px 0 0;
-moz-border-radius: 0 4px 0 0;
border-radius: 0 4px 0 0;
}
.bordered-table tbody tr:last-child td:first-child {
-webkit-border-radius: 0 0 0 4px;
-moz-border-radius: 0 0 0 4px;
border-radius: 0 0 0 4px;
}
.bordered-table tbody tr:last-child td:last-child {
-webkit-border-radius: 0 0 4px 0;
-moz-border-radius: 0 0 4px 0;
border-radius: 0 0 4px 0;
}
table .span1 {
width: 40px;
}
table .span2 {
width: 120px;
}
table .span3 {
width: 200px;
}
table .span4 {
width: 280px;
}
table .span5 {
width: 360px;
}
table .span6 {
width: 440px;
}
table .span7 {
width: 520px;
}
table .span8 {
width: 600px;
}
table .span9 {
width: 680px;
}
table .span10 {
width: 760px;
}
table .span11 {
width: 840px;
}
table .span12 {
width: 920px;
}
table .span13 {
width: 1000px;
}
table .span14 {
width: 1080px;
}
table .span15 {
width: 1160px;
}
table .span16 {
width: 1240px;
}
.zebra-striped tbody tr:nth-child(odd) td, .zebra-striped tbody tr:nth-child(odd) th {
background-color: #f9f9f9;
}
.zebra-striped tbody tr:hover td, .zebra-striped tbody tr:hover th {
background-color: #f5f5f5;
}
table .header {
cursor: pointer;
}
table .header:after {
content: "";
float: right;
margin-top: 7px;
border-width: 0 4px 4px;
border-style: solid;
border-color: #000 transparent;
visibility: hidden;
}
table .headerSortUp, table .headerSortDown {
background-color: rgba(141, 192, 219, 0.25);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}
table .header:hover:after {
visibility: visible;
}
table .headerSortDown:after, table .headerSortDown:hover:after {
visibility: visible;
filter: alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
table .headerSortUp:after {
border-bottom: none;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000;
visibility: visible;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
filter: alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
table .blue {
color: #3582ac;
border-bottom-color: #3582ac;
}
table .headerSortUp.blue, table .headerSortDown.blue {
background-color: #c1ddec;
}
table .green {
color: #46a546;
border-bottom-color: #46a546;
}
table .headerSortUp.green, table .headerSortDown.green {
background-color: #cdeacd;
}
table .red {
color: #9d261d;
border-bottom-color: #9d261d;
}
table .headerSortUp.red, table .headerSortDown.red {
background-color: #f4c8c5;
}
table .yellow {
color: #ffc40d;
border-bottom-color: #ffc40d;
}
table .headerSortUp.yellow, table .headerSortDown.yellow {
background-color: #fff6d9;
}
table .orange {
color: #f89406;
border-bottom-color: #f89406;
}
table .headerSortUp.orange, table .headerSortDown.orange {
background-color: #fee9cc;
}
table .purple {
color: #7a43b6;
border-bottom-color: #7a43b6;
}
table .headerSortUp.purple, table .headerSortDown.purple {
background-color: #e2d5f0;
}
body {
font-family: 'Antic', sans-serif;
font-size: 14px;
......@@ -277,9 +478,8 @@ a img {
}
.header {
position: relative;
height: 44px;
margin-top: 88px;
margin-bottom: 66px;
margin-bottom: 22px;
}
.header h1 {
color: #cfcdc7;
......@@ -316,7 +516,7 @@ ul.inline li {
.mainnav.quicknav {
position: absolute;
right: 0;
top: 1em;
top: -44px;
margin: 0;
}
.mainnav.quicknav li {
......@@ -325,8 +525,9 @@ ul.inline li {
}
.mainnav {
font-size: 1.2em;
margin-top: 44px;
height: 22px;
}
.mainnav li {
margin-top: 66px;
}
.mainnav li.active a {
border-bottom: 1px solid #f89a1c;
......@@ -500,12 +701,10 @@ form .with-errors label {
color: #e4776f;
}
.form-error {
position: absolute;
background-color: #9d261d;
color: #fff;
font-size: 0.8em;
padding: 2px 5px;
border-radius: 5px;
padding: 5px 5px;
}
.form-errors.all .form-error {
position: relative;
......
@import "../less/bootstrap.less";
@import "../less/django_forms.less";
@import "../less/tables.less";
body {
#font.main();
......@@ -59,9 +60,8 @@ a img {
.header {
position: relative;
height: 2*@gridGutterWidth;
margin-top: 4*@gridGutterWidth;
margin-bottom: 3*@gridGutterWidth;
margin-bottom: @gridGutterWidth;
h1 {
color: @shadowColor;
display: inline;
......@@ -95,7 +95,7 @@ ul.inline {
.mainnav.quicknav {
position: absolute;
right: 0;
top: 1em;
top: -2*@gridGutterWidth;
margin:0;
li {
......@@ -107,9 +107,10 @@ ul.inline {
.mainnav {
font-size: 1.2em;
margin-top: 2*@gridGutterWidth;
li {
margin-top: 3*@gridGutterWidth;
}
height: 1*@gridGutterWidth;
li.active {
a {
border-bottom: 1px solid @linkColor;
......@@ -278,12 +279,10 @@ form {
}
.form-error {
position: absolute;
background-color: @red;
color: #fff;
font-size: 0.8em;
padding: 2px 5px;
border-radius: 5px;
padding: 5px 5px;
}
.form-errors.all {
......
......@@ -3,22 +3,49 @@
$.fn.formErrors = function(options) {
return this.each(function() {
var $this = $(this);
// does the field has any errors ?
var errors = $this.find(".errorlist");
if (errors.length == 0) {
return;
}
// create the custom error message block
// and copy the contents of the original
// error list
var el = $('<div class="form-error" />');
errors.find("li").each(function(){
el.html(el.html() + $(this).text() + "<br />");
})
var formel = $this.find("input, select");
var lbl = $this.find("label");
var form = $this.closest("form");
$("body").append(el);
var left = $this.offset().left + $this.width() - 20;
var top = $this.offset().top + el.height()/2 - 2;
el.css({left: left + "px", top: top + "px", width: 'auto'});
// append element on form row
// and apply the appropriate styles
formel.closest(".form-row").append(el);
errors.remove();
var left = formel.width();
var top = formel.height();
var marginleft = lbl.width();
// identify the position
// forms with innerlbales class
// display the label within the input fields
if ($(form).hasClass("innerlabels")) {
marginleft = 0;
}
var styles = {
left: left + "px",
top: top + "px",
width: formel.outerWidth() - 10,
marginLeft: marginleft,
marginBottom: 5
}
el.css(styles);
});
};
......
// HTML5 Shiv v3 | @jon_neal @afarkas @rem | MIT/GPL2 Licensed
// Uncompressed source: https://github.com/aFarkas/html5shiv
(function(a,b){function f(a){var c,d,e,f;b.documentMode>7?(c=b.createElement("font"),c.setAttribute("data-html5shiv",a.nodeName.toLowerCase())):c=b.createElement("shiv:"+a.nodeName);while(a.firstChild)c.appendChild(a.childNodes[0]);for(d=a.attributes,e=d.length,f=0;f<e;++f)d[f].specified&&c.setAttribute(d[f].nodeName,d[f].nodeValue);c.style.cssText=a.style.cssText,a.parentNode.replaceChild(c,a),c.originalElement=a}function g(a){var b=a.originalElement;while(a.childNodes.length)b.appendChild(a.childNodes[0]);a.parentNode.replaceChild(b,a)}function h(a,b){b=b||"all";var c=-1,d=[],e=a.length,f,g;while(++c<e){f=a[c],g=f.media||b;if(f.disabled||!/print|all/.test(g))continue;d.push(h(f.imports,g),f.cssText)}return d.join("")}function i(c){var d=new RegExp("(^|[\\s,{}])("+a.html5.elements.join("|")+")","gi"),e=c.split("{"),f=e.length,g=-1;while(++g<f)e[g]=e[g].split("}"),b.documentMode>7?e[g][e[g].length-1]=e[g][e[g].length-1].replace(d,'$1font[data-html5shiv="$2"]'):e[g][e[g].length-1]=e[g][e[g].length-1].replace(d,"$1shiv\\:$2"),e[g]=e[g].join("}");return e.join("{")}var c=function(a){return a.innerHTML="<x-element></x-element>",a.childNodes.length===1}(b.createElement("a")),d=function(a,b,c){return b.appendChild(a),(c=(c?c(a):a.currentStyle).display)&&b.removeChild(a)&&c==="block"}(b.createElement("nav"),b.documentElement,a.getComputedStyle),e={elements:"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video".split(" "),shivDocument:function(a){a=a||b;if(a.documentShived)return;a.documentShived=!0;var f=a.createElement,g=a.createDocumentFragment,h=a.getElementsByTagName("head")[0],i=function(a){f(a)};c||(e.elements.join(" ").replace(/\w+/g,i),a.createElement=function(a){var b=f(a);return b.canHaveChildren&&e.shivDocument(b.document),b},a.createDocumentFragment=function(){return e.shivDocument(g())});if(!d&&h){var j=f("div");j.innerHTML=["x<style>","article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}","audio{display:none}","canvas,video{display:inline-block;*display:inline;*zoom:1}","[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}","mark{background:#FF0;color:#000}","</style>"].join(""),h.insertBefore(j.lastChild,h.firstChild)}return a}};e.shivDocument(b),a.html5=e;if(c||!a.attachEvent)return;a.attachEvent("onbeforeprint",function(){if(a.html5.supportsXElement||!b.namespaces)return;b.namespaces.shiv||b.namespaces.add("shiv");var c=-1,d=new RegExp("^("+a.html5.elements.join("|")+")$","i"),e=b.getElementsByTagName("*"),g=e.length,j,k=i(h(function(a,b){var c=[],d=a.length;while(d)c.unshift(a[--d]);d=b.length;while(d)c.unshift(b[--d]);c.sort(function(a,b){return a.sourceIndex-b.sourceIndex}),d=c.length;while(d)c[--d]=c[d].styleSheet;return c}(b.getElementsByTagName("style"),b.getElementsByTagName("link"))));while(++c<g)j=e[c],d.test(j.nodeName)&&f(j);b.appendChild(b._shivedStyleSheet=b.createElement("style")).styleSheet.cssText=k}),a.attachEvent("onafterprint",function(){if(a.html5.supportsXElement||!b.namespaces)return;var c=-1,d=b.getElementsByTagName("*"),e=d.length,f;while(++c<e)f=d[c],f.originalElement&&g(f);b._shivedStyleSheet&&b._shivedStyleSheet.parentNode.removeChild(b._shivedStyleSheet)})})(this,document)
\ No newline at end of file
{% extends "base_two_cols.html" %}
{% block page.title %}Profile{% endblock %}
{% block page.nav.classes %}{% endblock %}
{% block page.quicknav.items %}
......@@ -24,7 +25,7 @@
{% endblock %}
{% block page.body %}
<div class="maincol full">
<div class="maincol {% block innerpage.class %}full{% endblock %}">
{% block body %}{% endblock %}
</div>
{% endblock %}
......@@ -20,7 +20,7 @@
{% block page.js %}
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="{{ IM_MEDIA_URL }}js/html5.js"></script>
<![endif]-->
{% endblock %}
......@@ -34,6 +34,8 @@
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{ IM_MEDIA_URL }}css/styles.css"
type='text/css'>
<link rel="stylesheet" href="{{ IM_MEDIA_URL }}css/custom.css"
type='text/css'>
{% endblock page.css %}
{% block headjs %}
......
......@@ -2,51 +2,59 @@
{% load formatters %}
{% block body %}
<h3>You have {{ inviter.invitations }} invitation{{ inviter.invitations|pluralize }} left.</h3>
<table class="zebra-striped id-sorted">
<thead>
<tr>
<th>Email</th>
<th>Real Name</th>
<th>Consumed</th>
</tr>
</thead>
<tbody>
{% for inv in sent %}
<tr>
<td>{{ inv.email }}</td>
<td>{{ inv.realname }}</td>
<td>{{ inv.is_consumed }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% block page.body %}
<div class="maincol {% block innerpage.class %}{% endblock %}">
<div class="section">
<h2>You have <em>{{ inviter.invitations }}</em> invitation{{ inviter.invitations|pluralize }} left.</h2>
{% if sent|length %}
<table class="zebra-striped id-sorted">
<thead>
<tr>
<th>Email</th>
<th>Real Name</th>
<th>Consumed</th>
</tr>
</thead>
<tbody>
{% for inv in sent %}
<tr>
<td>{{ inv.email }}</td>
<td>{{ inv.realname }}</td>
<td>{{ inv.is_consumed }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p>No invitations sent</p>
{% endif %}
</div>
</div>
<div class="rightcol">
{% if inviter.invitations %}
<br />
<h4>Invite someone else:</h4>
<form action="{% url astakos.im.views.invite %}" method="post"
class="withlabels">{% csrf_token %}
<div class="clearfix f">
class="innerlabels">{% csrf_token %}
<h2>INVITE SOMEONE ELSE</h2>
<div class="form-row">
<label for="user-realname">Name</label>
<div class="input">
<input type="text" class="span4" id="user-realname" name="realname" />
<input type="text" class="text" id="user-realname" name="realname" />
</div>
</div>
<div class="clearfix">
<div class="form-row">
<label for="user-uniq">Email</label>
<div class="input">
<input type="text" class="span4" id="user-uniq" name="uniq" />
<input type="text" class="text" id="user-uniq" name="uniq" />
</div>
</div>
<div class="form-row submit">
<input type="submit" class="submit altcol" value="INVITE" />
<input type="submit" class="submit altcol" value="SEND" />
</div>
</form>
{% endif %}
{% endblock body %}
</div>
{% endblock %}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment