User menu, css cleanups

main/models.py

@@ -128,6 +128,13 @@ class UserProfile(models.Model):
         else:
             return datetime.min
 
+    def profile_image_url(self):
+        from django.templatetags.static import static
+        if self.image:
+            return static('img/unknown_person.png')
+
+        return self.image
+
     def __unicode__(self):
         return u"{0}".format(self.user)
 

static/sass/screen.scss

@@ -6,20 +6,70 @@
 @import "datepicker";
 
 body {
-
     h2 {
         margin-top: 0;
     }
+    .glyphicon .white {
+        color: white;
+    }
+}
+#header {
+    .dropdown-toggle {
+        padding-top: 0;
+        padding-bottom: 0;
 
-    #customer {
+        img {
+            width: 40px;
+            @include border-radius(50% 50%);
+        }
+        .name {
+            display: inline-block;
+            padding-top: 15px;
+            padding-bottom: 15px;
+            padding-left: 8px;
+        }
+    }
+}
+
+#customer {
+    ul {
+        @include inline-block-list;
+
+        li {
+            padding-top: 10px;
+            text-align: center;
+            width: 79px;
+            overflow: hidden;
+
+            &:hover {
+                background-color: #dddddd;
+                cursor: pointer;
+            }
+            &.marked {
+                color: #468847;
+                background-color: #DFF0D8;
+            }
+            &.hidden {
+                display: none !important;
+            }
+            .name {
+                font-weight: bold;
+            }
+        }
+    }
+}
+
+#register {
+    #products {
+        margin-bottom:2em;
         ul {
             @include inline-block-list;
             
             li {
                 padding-top: 10px;
+                padding-left: 20px;
+                padding-right: 20px;
                 text-align: center;
-                width: 79px;
-                overflow: hidden;
 
                 &:hover {
                     background-color: #dddddd;
@@ -29,8 +79,9 @@ body {
                     color: #468847;
                     background-color: #DFF0D8;
                 }
-                &.hidden {
+                .qty {
-                    display: none !important;
+                    font-size: 1.7em;
+                    font-weight: bold;
                 }
                 .name {
                     font-weight: bold;
@@ -39,120 +90,75 @@ body {
         }
     }
     
-    #register {
+    .total {
-        #products {
+        color: #ffffff;
-            margin-bottom:2em;
+        background-color: #222;
-            ul {
+        padding: 0 10px;
-                @include inline-block-list;
+        min-width:115px;
-                
-                li {
-                    padding-top: 10px;
-                    padding-left: 20px;
-                    padding-right: 20px;
-                    text-align: center;
-
-                    &:hover {
-                        background-color: #dddddd;
-                        cursor: pointer;
-                    }
-                    &.marked {
-                        color: #468847;
-                        background-color: #DFF0D8;
-                    }
-                    .qty {
-                        font-size: 1.7em;
-                        font-weight: bold;
-                    }
-                    .name {
-                        font-weight: bold;
-                    }
-                }
-            }
-        }
-        
-        .total {
-            color: #ffffff;
-            background-color: #222;
-            padding: 0 10px;
-            min-width:115px;
-            h2 {
-                color: #ffffff;
-                margin: 0.2em 0;
-            }
-        }
         h2 {
-            display: inline-block;
+            color: #ffffff;
-        }
+            margin: 0.2em 0;
-        input[name=customer_name] {
-            display: block;
         }
     }
-    #log {
+    h2 {
-        h2 {
+        display: inline-block;
-            display:inline-block;
+    }
+    input[name=customer_name] {
+        display: block;
+    }
+}
+#log {
+    h2 {
+        display:inline-block;
+    }
+    table {
+        tr{
+            text-align: middle;
         }
-        table {
+        .amount {
-            tr{
+            font-size: 2em;
-                text-align: middle;
+            font-weight: bold;
-            }
+        }
-            .amount {
+    }
-                font-size: 2em;
+}
+#inventory {
+    tr {
+        &.info {
+            border-left: 8px solid #d9edf7;
+        }
+        &.warning {
+            border-left: 8px solid #da7878;
+
+            .product-amount {
                 font-weight: bold;
             }
         }
-    }
+        &.success {
-    #inventory {
+            border-left: 8px solid darken(#dff0d8, 10%);
-        tr {
-            &.info {
-                border-left: 8px solid #d9edf7;
-            }
-            &.warning {
-                border-left: 8px solid #da7878;
-
-                .product-amount {
-                    font-weight: bold;
-                }
-            }
-            &.success {
-                border-left: 8px solid darken(#dff0d8, 10%);
-            }
-            > td {
-                background-color: inherit; 
-            }
-            &:nth-child(odd) td {
-                background-color: #f9f9f9;
-            }
-            &.inactive {
-                color: #888;
-            }
         }
-    }
+        > td {
-    #inventory-report {
+            background-color: inherit; 
-        .form-control {
-            width: auto;
         }
-        table {
+        &:nth-child(odd) td {
-            .positive {
+            background-color: #f9f9f9;
-                color: #468847;
+        }
-            }
+        &.inactive {
-            .negative {
+            color: #888;
-                color: #da7878;
-            }
         }
-    }
-    /* General styles*/
-    .glyphicon .white {
-        color: white;
     }
 }
-.form-login {
+#inventory-report {
-    max-width: 320px;
+    .form-control {
-    margin: 4em auto;
+        width: auto;
-    [type=submit] {
+    }
-        display: block;
+    table {
-        width: 100%;
+        .positive {
+            color: #468847;
+        }
+        .negative {
+            color: #da7878;
+        }
     }
-
 }
 #footer .credits {
     text-align: center;
@@ -175,3 +181,12 @@ body {
         height: 32px;
     }
 }
+.form-login {
+    max-width: 320px;
+    margin: 4em auto;
+    [type=submit] {
+        display: block;
+        width: 100%;
+    }
+
+}

templates/base.html

@@ -6,10 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="x-django-static-url" content="{{ STATIC_URL }}">
     <link rel="stylesheet" href="{{ STATIC_URL }}stylesheets/screen.css" type="text/css" media="screen, projection">
-    <link rel="stylesheet" href="{{ STATIC_URL }}stylesheets/print.css" type="text/css" media="print"> 
-    <!--[if lt IE 8]>
-    <link rel="stylesheet" href="{{ STATIC_URL }}stylesheets/ie.css" type="text/css" media="screen, projection">
-    <![endif]-->
     {%block headinc %}
     {%endblock%}
 </head>

templates/nav.html

@@ -22,7 +22,7 @@
             <li><a href="{% url 'login' %}">Logg inn</a></li>
             {% else %}
             <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Innstillinger <b class="caret"></b></a>
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="{{ user.get_profile.profile_image_url }}" /><span class="name">{{ user.first_name }}</span> <b class="caret"></b></a>
                 <ul class="dropdown-menu">
                     <li class="{% if active = "create_user" %}active{% endif %}"><a href="{% url 'create-user' %}"><i class="glyphicon glyphicon-plus"></i> Ny bruker</a></li>
                     {% if request.user.is_superuser %}<li><a href="/admin"><i class="glyphicon glyphicon-cog"></i> Administrasjon</a></li>{% endif %}