Adds basic styling (using compass, sass and bp)

.gitignore

@@ -2,4 +2,4 @@
 *.pyc
 settings.py
 test.db
-
+static/style/.sass-cache/

static/style/config.rb

@@ -0,0 +1,24 @@
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "javascripts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

static/style/sass/ie.scss

@@ -0,0 +1,16 @@
+@import "blueprint";
+
+// To generate css equivalent to the blueprint css but with your configuration applied, uncomment:
+// +blueprint-ie
+
+//Recommended Blueprint configuration with scoping and semantic layout:
+body.bp {
+  @include blueprint-ie(true);
+  // Note: Blueprint centers text to fix IE6 container centering.
+  // This means all your texts will be centered under all version of IE by default.
+  // If your container does not have the .container class, don't forget to restore
+  // the correct behavior to your main container (but not the body tag!)
+  // Example:
+  // .my-container
+  //   text-align: left
+}

static/style/sass/partials/_base.scss

@@ -0,0 +1,20 @@
+// Here is where you can define your constants for your application and to configure the blueprint framework.
+// Feel free to delete these if you want keep the defaults:
+
+$blueprint-grid-columns: 24;
+$blueprint-container-size: 950px;
+$blueprint-grid-margin: 10px;
+
+// Use this to calculate the width based on the total width.
+// Or you can set $blueprint-grid-width to a fixed value and unset $blueprint-container-size -- it will be calculated for you.
+$blueprint-grid-width: ($blueprint-container-size + $blueprint-grid-margin) / $blueprint-grid-columns - $blueprint-grid-margin;
+
+$blueprint-font-size: 16px;
+$blueprint-background-color: #dadadc;
+//$font-color:#F09321;
+$container-background-color: #fff;
+$container-shadow-color: darken($blueprint-background-color, 40%);
+$section-background-color: #fff;
+$section-hover-color: darken($container-background-color, 3%);
+$section-border-color: darken($section-background-color, 20%);
+

static/style/sass/partials/_col.scss

@@ -0,0 +1,57 @@
+// Page layout can be done using mixins applied to your semantic classes and IDs
+// For instance this layout defines a two column layout on pages with
+// a body class of "two-col".
+//
+// The markup would look like:
+//    <div id="container">
+//      <div id="header"></div>
+//      <div id="sidebar"></div>
+//      <div id="content"></div>
+//      <div id="footer"></div>
+//    </div>
+//
+// and the layout would look like:
+//    +------------------------+
+//    |        #header         |
+//    +--------+---------------+
+//    |        |               |
+//    |#sidebar|    #content   |
+//    |        |               |
+//    +------------------------+
+//    |        #footer         |
+//    +--------+---------------+
+
+body.two-col {
+  #container {
+    @include container; }
+  #header, #footer {
+    @include column($blueprint-grid-columns); }
+  #sidebar {
+    // One third of the grid columns, rounding down. With 24 cols, this is 8.
+    $sidebar-columns: floor($blueprint-grid-columns / 3);
+    @include column($sidebar-columns); }
+  #content {
+    // Two thirds of the grid columns, rounding up.
+    // With 24 cols, this is 16.
+    $content-columns: ceil(2 * $blueprint-grid-columns / 3);
+    // true means it's the last column in the row
+    @include column($content-columns, true); } }
+
+body.three-col {
+    #container {
+        @include container;
+    }
+    #header, #footer {
+        @include column($blueprint-grid-columns);
+    }
+    section.column {
+        // One third of the grid columns
+        $sidebar-columns: $blueprint-grid-columns / 3;
+        @include column($sidebar-columns);
+    }
+    section.column.last {
+        // true means last
+        $sidebar-columns: $blueprint-grid-columns / 3 - 1;
+        @include column($sidebar-columns, true);
+    }
+}

static/style/sass/partials/_form.scss

@@ -0,0 +1,6 @@
+// Only apply the blueprint form styles to forms with
+// a class of "bp". This makes it easier to style
+// forms from scratch if you need to.
+
+form.bp {
+  @include blueprint-form; }

static/style/sass/partials/_page.scss

@@ -0,0 +1,22 @@
+// Import the non-default scaffolding module to help us get started.
+@import "blueprint/scaffolding";
+
+// This configuration will only apply the
+// blueprint styles to pages with a body class of "bp"
+// This makes it easier to have pages without blueprint styles
+// when you're using a single/combined stylesheet.
+@import "compass/typography/lists/inline-list";
+@import "compass/typography/lists/inline-block-list";
+@import "compass/css3/text-shadow";
+@import "blueprint/liquid";
+
+body.bp {
+    @include blueprint-typography(true);
+    @include blueprint-utilities;
+    @include blueprint-debug;
+    @include blueprint-interaction;
+    // Remove the scaffolding when you're ready to start doing visual design.
+    // Or leave it in if you're happy with how blueprint looks out-of-the-box
+    @include blueprint-scaffolding; 
+
+}

static/style/sass/print.scss

@@ -0,0 +1,5 @@
+@import "blueprint";
+
+//Recommended Blueprint configuration with scoping and semantic layout:
+body.bp {
+  @include blueprint-print(true); }

static/style/sass/screen.scss

@@ -0,0 +1,43 @@
+// This import applies a global reset to any page that imports this stylesheet.
+@import "blueprint/reset";
+
+// To configure blueprint, edit the partials/base.sass file.
+@import "partials/base";
+
+// Import all the default blueprint modules so that we can access their mixins.
+@import "blueprint";
+
+// Combine the partials into a single screen stylesheet.
+@import "partials/page";
+@import "partials/form";
+@import "partials/_col";
+@import "compass/css3";
+
+body {
+    background-color: $blueprint-background-color;
+    #header {
+        padding-bottom:40px;
+    }
+    #container {
+        padding:10px;
+        background-color:$container-background-color;
+        @include box-shadow($container-shadow-color 2px 2px 6px);
+        @include border-radius(10px);
+
+        nav {
+            ul {
+                @include inline-block-list;
+            }
+        }
+
+        section {
+            background-color:$section-background-color;
+            border: solid 1px $section-border-color;
+            @include border-radius(6px);
+            min-height:170px;
+            &:hover {
+                background-color:$section-hover-color;
+            }
+        }
+    }
+}

static/style/stylesheets/ie.css

@@ -0,0 +1 @@
+body.bp{text-align:center}* html body.bp legend{margin:0px -8px 16px 0;padding:0}html > body.bp p code{*white-space:normal}body.bp .container{text-align:left}body.bp sup{vertical-align:text-top}body.bp sub{vertical-align:text-bottom}body.bp hr{margin:-8px auto 11px}body.bp img{-ms-interpolation-mode:bicubic}body.bp fieldset{padding-top:0}body.bp legend{margin-top:-0.2em;margin-bottom:1em;margin-left:-0.5em}body.bp fieldset,body.bp #IE8#HACK{padding-top:1.4em}body.bp legend,body.bp #IE8#HACK{margin-top:0;margin-bottom:0}body.bp textarea{overflow:auto}body.bp label{position:relative;top:-0.25em}body.bp input.text{margin:0.5em 0;background-color:white;border:1px solid #bbbbbb}body.bp input.text:focus{border:1px solid #666666}body.bp input.title{margin:0.5em 0;background-color:white;border:1px solid #bbbbbb}body.bp input.title:focus{border:1px solid #666666}body.bp input.checkbox{position:relative;top:0.25em}body.bp input.radio{position:relative;top:0.25em}body.bp input.button{position:relative;top:0.25em}body.bp textarea{margin:0.5em 0}body.bp select{margin:0.5em 0}body.bp button{position:relative;top:0.25em}

static/style/stylesheets/print.css

@@ -0,0 +1 @@
+body.bp{line-height:1.5;font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;color:black;background:none;font-size:10pt}body.bp .container{background:none}body.bp hr{background:#cccccc;color:#cccccc;width:100%;height:2px;margin:2em 0;padding:0;border:none}body.bp hr.space{background:white;color:white}body.bp h1,body.bp h2,body.bp h3,body.bp h4,body.bp h5,body.bp h6{font-family:"Helvetica Neue",Arial,Helvetica,sans-serif}body.bp code{font-size:0.9em;font-family:"andale mono","lucida console",monospace}body.bp a img{border:none}body.bp a:link,body.bp a:visited{background:transparent;font-weight:700;text-decoration:underline}body.bp p img.top{margin-top:0}body.bp blockquote{margin:1.5em;padding:1em;font-style:italic;font-size:0.9em}body.bp .small{font-size:0.9em}body.bp .large{font-size:1.1em}body.bp .quiet{color:#999999}body.bp .hide{display:none}

static/style/stylesheets/screen.css

@@ -0,0 +1 @@
+html{margin:0;padding:0;border:0}.bp-reset-element,body,h1,h2,h3,h4,h5,h6,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,blockquote,q,th,td,caption,table,div,span,object,iframe,p,pre,a,abbr,acronym,address,code,del,dfn,em,img,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tbody,tfoot,thead,tr{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}blockquote,q{quotes:"" ""}blockquote:before,blockquote:after,q:before,q:after{content:""}th,td,caption{float:none !important;text-align:left;font-weight:normal;vertical-align:middle}table{border-collapse:separate;border-spacing:0;vertical-align:middle}a img{border:none}body.bp{line-height:1.5;font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;color:#333;font-size:100%}body.bp h1,body.bp h2,body.bp h3,body.bp h4,body.bp h5,body.bp h6{font-weight:normal;color:#222}body.bp h1 img,body.bp h2 img,body.bp h3 img,body.bp h4 img,body.bp h5 img,body.bp h6 img{margin:0}body.bp h1{font-size:3em;line-height:1;margin-bottom:0.50em}body.bp h2{font-size:2em;margin-bottom:0.75em}body.bp h3{font-size:1.5em;line-height:1;margin-bottom:1.00em}body.bp h4{font-size:1.2em;line-height:1.25;margin-bottom:1.25em}body.bp h5{font-size:1em;font-weight:bold;margin-bottom:1.50em}body.bp h6{font-size:1em;font-weight:bold}body.bp p{margin:0 0 1.5em}body.bp p .left{display:inline;float:left;margin:1.5em 1.5em 1.5em 0;padding:0}body.bp p .right{display:inline;float:right;margin:1.5em 0 1.5em 1.5em;padding:0}body.bp a{text-decoration:underline;color:#06c}body.bp a:visited{color:#004c99}body.bp a:focus{color:#09f}body.bp a:hover{color:#09f}body.bp a:active{color:#bf00ff}body.bp blockquote{margin:1.5em;color:#666;font-style:italic}body.bp strong,body.bp dfn{font-weight:bold}body.bp em,body.bp dfn{font-style:italic}body.bp sup,body.bp sub{line-height:0}body.bp abbr,body.bp acronym{border-bottom:1px dotted #666666}body.bp address{margin:0 0 1.5em;font-style:italic}body.bp del{color:#666}body.bp pre{margin:1.5em 0;white-space:pre}body.bp pre,body.bp code,body.bp tt{font:1em "andale mono","lucida console",monospace;line-height:1.5}body.bp li ul,body.bp li ol{margin:0}body.bp ul,body.bp ol{margin:0 1.5em 1.5em 0;padding-left:1.5em}body.bp ul{list-style-type:disc}body.bp ol{list-style-type:decimal}body.bp dl{margin:0 0 1.5em 0}body.bp dl dt{font-weight:bold}body.bp dd{margin-left:1.5em}body.bp table{margin-bottom:1.4em;width:100%}body.bp th{font-weight:bold}body.bp thead th{background:#c3d9ff}body.bp th,body.bp td,body.bp caption{padding:4px 10px 4px 5px}body.bp table.striped tr:nth-child(even) td,body.bp table tr.even td{background:#e5ecf9}body.bp tfoot{font-style:italic}body.bp caption{background:#dadadc}body.bp .quiet{color:#666}body.bp .loud{color:#111}body.bp .clear{clear:both}body.bp .nowrap{white-space:nowrap}body.bp .clearfix{overflow:hidden;*zoom:1}body.bp .small{font-size:0.8em;margin-bottom:1.875em;line-height:1.875em}body.bp .large{font-size:1.2em;line-height:2.5em;margin-bottom:1.25em}body.bp .first{margin-left:0;padding-left:0}body.bp .last{margin-right:0;padding-right:0}body.bp .top{margin-top:0;padding-top:0}body.bp .bottom{margin-bottom:0;padding-bottom:0}body.bp .showgrid{background-image:-webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(5%, rgba(0,0,0,0.5)), color-stop(5%, rgba(0,0,0,0))),-webkit-gradient(linear, 0% 50%, 960 50%, color-stop(0%, rgba(0,0,0,0)), color-stop(0%, rgba(100,100,225,0.25)), color-stop(3.125%, rgba(100,100,225,0.25)), color-stop(3.125%, rgba(0,0,0,0)), color-stop(4.167%, rgba(0,0,0,0)), color-stop(4.167%, rgba(100,100,225,0.25)), color-stop(7.292%, rgba(100,100,225,0.25)), color-stop(7.292%, rgba(0,0,0,0)), color-stop(8.333%, rgba(0,0,0,0)), color-stop(8.333%, rgba(100,100,225,0.25)), color-stop(11.458%, rgba(100,100,225,0.25)), color-stop(11.458%, rgba(0,0,0,0)), color-stop(12.5%, rgba(0,0,0,0)), color-stop(12.5%, rgba(100,100,225,0.25)), color-stop(15.625%, rgba(100,100,225,0.25)), color-stop(15.625%, rgba(0,0,0,0)), color-stop(16.667%, rgba(0,0,0,0)), color-stop(16.667%, rgba(100,100,225,0.25)), color-stop(19.792%, rgba(100,100,225,0.25)), color-stop(19.792%, rgba(0,0,0,0)), color-stop(20.833%, rgba(0,0,0,0)), color-stop(20.833%, rgba(100,100,225,0.25)), color-stop(23.958%, rgba(100,100,225,0.25)), color-stop(23.958%, rgba(0,0,0,0)), color-stop(25%, rgba(0,0,0,0)), color-stop(25%, rgba(100,100,225,0.25)), color-stop(28.125%, rgba(100,100,225,0.25)), color-stop(28.125%, rgba(0,0,0,0)), color-stop(29.167%, rgba(0,0,0,0)), color-stop(29.167%, rgba(100,100,225,0.25)), color-stop(32.292%, rgba(100,100,225,0.25)), color-stop(32.292%, rgba(0,0,0,0)), color-stop(33.333%, rgba(0,0,0,0)), color-stop(33.333%, rgba(100,100,225,0.25)), color-stop(36.458%, rgba(100,100,225,0.25)), color-stop(36.458%, rgba(0,0,0,0)), color-stop(37.5%, rgba(0,0,0,0)), colLine truncated

templates/base.html

@@ -1,12 +1,21 @@
+<!doctype html>
 <html>
 <head>
     <title>{%block title%}Userinfo{%endblock%}</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="/static/style/stylesheets/screen.css" type="text/css" media="screen, projection">
+    <link rel="stylesheet" href="/static/style/stylesheets/print.css" type="text/css" media="print"> 
+    <!--[if lt IE 8]>
+    <link rel="stylesheet" href="/static/style/stylesheets/ie.css" type="text/css" media="screen, projection">
+    <![endif]-->
     {%block headinc %}
     {%endblock%}
 </head>
-<body>
-    {%block content%}
-    {%endblock%}
+<body class="bp three-col">
+    <div id="container">
+        {%block content%}
+        {%endblock%}
+    </div>
 
     {%block tailinc %}
     {%endblock%}

templates/private/profile.html

@@ -1,38 +1,49 @@
 {% extends "base.html" %}
 {% block headinc %}
-    <link rel="stylesheet"  type="text/css" href="/static/css/style.css" />
     <script type="text/javascript" src="/static/js/jquery-1.6.1.min.js"></script>
     <script type="text/javascript" src="/static/js/status.js"></script>
 {% endblock %}
 {% block content %}
-<h1>Meny</h1>
-<ul>
-    <li><a href="{% url django.contrib.auth.views.password_change %}">Endre passord</a></li>
-    {% if request.user.is_superuser %}
-    <li><a href="/admin">Administrasjon</a></li>
-    {% endif %}
-    <li><a href="{% url main.views.logout %}">Logg ut</a></li>
-</ul>
-<h1>Om deg</h1>
-<ul>
-    <li>Brukernavn: {{ldap_user.username}}</li>
-    <li>Navn: {{ldap_user.full_name}}</li>
-    <li>Mail: {{ldap_user.email}}</li>
-</ul>
-<h1>Dine grupper</h1>
-<ul>
-{% if groups %}
-    <li>{{ private_group }}</li>
-    {% for group in groups %}
-        <li>{{ group }}</li>
-    {% endfor %}
-{% else %}
-<li>Ingen grupper.</li>
-{% endif %}
-</ul>
-<h1>Dine tjenester</h1>
-<ul>
-    <li>Klientmaskiner<span id="client_status"></span></li>
-    <li>Trådløst nettverk<span id="wireless_status"></span></li>
-</ul>
+<div class="container">
+    <header id="header">
+        <nav>
+            <h2>Hva vil du gjøre?</h2>
+            <ul>
+                <li><a href="{% url django.contrib.auth.views.password_change %}">Endre passord</a></li>
+                {% if request.user.is_superuser %}
+                <li><a href="/admin">Administrasjon</a></li>
+                {% endif %}
+                <li><a href="{% url main.views.logout %}">Logg ut</a></li>
+            </ul>
+        </nav>
+    </header>
+    <section class="column">
+        <h2>Om deg</h2>
+        <ul>
+            <li>Brukernavn: {{ldap_user.username}}</li>
+            <li>Navn: {{ldap_user.full_name}}</li>
+            <li>Mail: {{ldap_user.email}}</li>
+        </ul>
+    </section>
+    <section class="column">
+        <h2>Dine grupper</h2>
+        <ul>
+        {% if groups %}
+            <li>{{ private_group }}</li>
+            {% for group in groups %}
+                <li>{{ group }}</li>
+            {% endfor %}
+        {% else %}
+            <li>Ingen grupper.</li>
+        {% endif %}
+        </ul>
+    </section>
+    <section class="column last">
+        <h2>Dine tjenester</h2>
+        <ul>
+            <li>Klientmaskiner<span id="client_status"></span></li>
+            <li>Trådløst nettverk<span id="wireless_status"></span></li>
+        </ul>
+    </section>
+</div>
 {%endblock%}

templates/registration/password_change_form.html

@@ -4,9 +4,11 @@
 <p>
 Allows a user to change their password.
 </p>
-<form method="post">
+<form method="post" class="bp">
     {% csrf_token %}
-    {{form}}
+    <table>
+    {{ form.as_table }}
+    </table>
     <input type="submit" />
 </form>
 {% endblock %}

templates/registration/password_reset_form.html

@@ -3,9 +3,9 @@
 {% block content %}
 <p>
 Allows a user to reset their password by generating a one-time use link that can be used to reset the password, and sending that link to the user's registered email address.
-<form method="post">
+<form method="post" class="bp">
     {% csrf_token %}
-    {{ form }}
+    {{ form.as_table }}
     <input type="submit" />
 </form>
 </p>