Several styles fixes/additions

- minor css fixes
- invitations 2 cols layout
- locally served html5shim
- new form error styles

astakos/im/static/im/grnetstyles/css/styles.css

@@ -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;

astakos/im/static/im/grnetstyles/css/styles.less

 @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 {

astakos/im/static/im/grnetstyles/js/form-errors.js

@@ -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);
     });
 
   };

astakos/im/static/im/grnetstyles/js/html5.js

+// 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

astakos/im/templates/account_base.html

 {% 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 %}

astakos/im/templates/base.html

@@ -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 %}

astakos/im/templates/invitations.html

@@ -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 %}
+