Do some CSS refactoring

9 files changed, 359 insertions, 393 deletions

diff --git a/hyperkitty/static/css/style.css b/hyperkitty/static/css/style.css
index 9c8e73c..e561a30 100644
--- a/hyperkitty/static/css/style.css
+++ b/hyperkitty/static/css/style.css
@@ -1,9 +1,17 @@
 body {
 	position: relative;
-	padding-top: 55px;
+	padding-top: 70px;
 	background-color: white;
 }
 
+
+ul.nav.auth {
+    float: right;
+    margin: 0;
+}
+
+
+
 .Sb {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
@@ -145,28 +153,6 @@ body {
    margin-left: 20px;
 }
 
-.user_nav {
-    float: right;
-    list-style: none;
-    margin: 0;
-    padding: 5px 0 0 0;
-}
-
-.user_nav a {
-	float: none;
-	padding: 10px 10px 11px;
-	line-height: 19px;
-	color: #999;
-	text-decoration: none;
-	text-shadow: 0 -1px 0 
-	rgba(0, 0, 0, 0.25);
-}
-
-.user_nav li {
-   float: left;
-   margin-left: 20px;
-}
-
 .nav .root {
     font-weight: bold;
 }
@@ -214,24 +200,19 @@ body {
 
 #recent_activities, #month-view {
     width: 88%;
-    margin-top: 20px;
     margin-right: 10px;
     float: right;
 }
 
-#archives{
+#archives {
     width: 9%;
-    margin-left: 10px;
-    margin-top: 20px;
     float: left;
-/*
-    margin-right: 2px;
-*/
 }
 
 #archives ul {
     padding: 0;
     margin: 0;
+    margin-bottom: 1em;
 }
 
 #archives li {
@@ -243,28 +224,28 @@ body {
 
 /* Month view header */
 
-#month-view header {
+#month-view .month-header {
     margin-bottom: 4em;
 }
 
-#month-view header .list-name {
+#month-view .month-header .list-name {
     display: inline;
     font-size: 190%;
     font-weight: bold;
     padding-right: 0.5em;
 }
 
-#month-view header .month-name {
+#month-view .month-header .month-name {
     display: inline;
     font-size: 190%;
     padding-right: 1em;
 }
 
-#month-view header .month-info {
+#month-view .month-header .month-info {
     display: inline;
     list-style-type: none;
 }
-#month-view header .month-info li {
+#month-view .month-header .month-info li {
     display: inline;
 }
 
@@ -415,3 +396,291 @@ li.attachments ul li {
     list-style-position: inside;
     padding-left: 0.5em;
 }
+
+ul.attachments-list li {
+    display: list-item;
+    list-style-type: disc;
+}
+
+
+/* Message view */
+
+.message-header {
+    margin-bottom: 3em;
+}
+
+.message-header .thread-back {
+    display: block;
+    padding-top: 38px;
+    width: 160px;
+    overflow: hidden;
+    background-repeat: no-repeat;
+    background-position: top center;
+    background-image: url('../img/button_back.png');
+    margin-bottom: 1em;
+}
+
+
+/* Thread view */
+
+.thread-header {
+    /*background-color: #f6f6f6;*/
+    /*border-bottom: 1px solid #b3b3b3;*/
+    margin-bottom: 6em;
+    padding: 1em 0;
+}
+
+.thread-header h1,
+.message-header h1 {
+    text-align: center;
+    font-size: 24px;
+    line-height: 26px;
+}
+
+.thread-header .thread-older,
+.thread-header .thread-newer {
+    display: block;
+    padding-top: 38px;
+    width: 160px;
+    overflow: hidden;
+    background-repeat: no-repeat;
+    background-position: top center;
+    text-align: center;
+    color: #aaaaaa;
+}
+.thread-header .thread-older {
+    float: right;
+    background-image: url('../img/button_older.png');
+}
+.thread-header .thread-newer {
+    float: left;
+    background-image: url('../img/button_newer.png');
+}
+
+#thread_nav{
+    margin:auto;
+    width:100%;
+    text-align:center;
+}
+
+#thread_nav * {
+    vertical-align: middle;
+}
+
+#thread_nav .thread_title{
+    margin:auto;
+    width: 50%;
+}
+
+#thread_nav br {
+    margin-top: 10px;
+}
+
+#thread_nav .thread_info {
+    margin-top:10px;
+    margin-bottom:10px;
+    font-size: 70%;
+    font-weight: normal;
+    text-align: center;
+}
+
+#thread_nav .thread_info li {
+    margin-left:3em;
+}
+
+#olderhread, #newewthread {
+    font-size: 70%;
+    color: rgb(167, 169, 172);
+}
+
+#olderhread {
+    float: right;
+    margin-top: 2em;
+    margin-right: 20px;
+}
+
+/* Define the two columns */
+#thread_content {
+    width: 74%;
+}
+
+#thread_overview_info {
+    float: right;
+    width: 22%;
+}
+
+/* Thread general information column */
+#days_old {
+    margin-left:1em;
+}
+
+.days_text {
+    font-size: 70%;
+}
+
+.days_num {
+    font-size: 200%;
+}
+
+#add_to_fav a{
+    color: rgb(167, 169, 172);
+}
+
+#grey {
+    color: rgb(167, 169, 172);
+    background-color: rgb(167, 169, 172);
+    margin: 0px;
+    border: 0 none;
+    height: 1px;
+}
+
+#tags {
+    color: rgb(167, 169, 172);
+    margin-top: 2em;
+}
+
+#tag_title {
+    color: rgb(77, 77, 77);
+    text-transform: uppercase;
+}
+
+#tags ul {
+    padding: 10px 0;
+    margin: 0;
+}
+
+#add_tag {
+    margin-top: 0.3em;
+}
+
+#participants {
+    margin-top: 2em;
+    color: rgb(167, 169, 172);
+}
+
+#participants_title {
+    color: rgb(77, 77, 77);
+    text-transform: uppercase;
+}
+
+#participants ul {
+    padding: 0;
+    margin: 0;
+}
+
+#participants li {
+    list-style-type: none;
+    margin: 1em 0;
+}
+
+#participants img {
+    width: 20px;
+    vertical-align: middle;
+}
+
+
+/* Main section with the whole thread */
+
+/* First email of the thread. */
+
+.first_email {
+}
+
+.email_header {
+    position:relative;
+    margin-bottom: 1em;
+    height: 40px;
+}
+
+.email_header .gravatar {
+    margin-right: 10px;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.email_author .name{
+    color: rgb(55, 113, 200);
+    font-weight: bold;
+}
+.email_author .rank{
+    color: rgb(167, 169, 172);
+    font-size: 80%;
+    font-weight: bold;
+}
+
+.email .email_date {
+    font-size: 90%;
+}
+.first_email .email_date span {
+    display: block;
+    text-align: right;
+}
+.email_date .date {
+    font-weight: bold;
+}
+.email_date .time {
+    color: rgb(167, 169, 172);
+    margin-left: 0.5em;
+}
+
+.add_comment {
+    float: right;
+}
+
+/* The email thread */
+.even, .odd {
+    border-top: 1px solid rgb(179, 179, 179);
+    padding: 1em;
+	margin: 20px 0px 20px 0px;
+}
+.even {
+    background-color: rgb(246, 246, 246);
+}
+.odd {
+    background-color: rgb(238, 238, 238);
+}
+
+.email {
+}
+
+.email .email_header {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.email .email_author {
+    font-size: 90%;
+}
+
+.first_email_body, .email_body {
+    white-space: pre;
+    display: inline-block;
+}
+.first_email_body {
+    width: 100%;
+    overflow: auto;
+}
+.email_body{
+    -webkit-border-radius: 5px 5px 5px 5px;
+    -moz-border-radius: 5px 5px 5px 5px;
+    border-radius: 5px 5px 5px 5px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: rgb(179, 179, 179);
+    padding: 5px;
+    min-height: 40px;
+    background-color: rgb(255, 255, 255);
+    width: 95%;
+}
+
+
+.email_body a {
+    float: right;
+    padding: 3px 10px 0px 0px;
+}
+
+.email_info {
+    padding: 0px;
+    margin-top: 5px;
+}
+
diff --git a/hyperkitty/static/css/thread.css b/hyperkitty/static/css/thread.css
deleted file mode 100644
index a59e51a..0000000
--- a/hyperkitty/static/css/thread.css
+++ /dev/null
@@ -1,281 +0,0 @@
-
-header {
-    /*background-color: #f6f6f6;*/
-    /*border-bottom: 1px solid #b3b3b3;*/
-    margin-bottom: 6em;
-    padding: 1em 0;
-}
-
-h1 {
-    text-align: center;
-    font-size: 24px;
-    line-height: 26px;
-}
-
-header .thread-older,
-header .thread-newer,
-header .thread-back {
-    display: block;
-    padding-top: 38px;
-    width: 160px;
-    overflow: hidden;
-    background-repeat: no-repeat;
-    background-position: top center;
-    text-align: center;
-    color: #aaaaaa;
-}
-header .thread-older {
-    float: right;
-    background-image: url('../img/button_older.png');
-}
-header .thread-newer {
-    float: left;
-    background-image: url('../img/button_newer.png');
-}
-header .thread-back {
-    background-image: url('../img/button_back.png');
-    margin-bottom: 2em;
-}
-
-#thread_nav{
-    margin:auto;
-    width:100%;
-    text-align:center;
-}
-
-#thread_nav * {
-    vertical-align: middle;
-}
-
-#thread_nav .thread_title{
-    margin:auto;
-    width: 50%;
-}
-
-#thread_nav br {
-    margin-top: 10px;
-}
-
-#thread_nav .thread_info {
-    margin-top:10px;
-    margin-bottom:10px;
-    font-size: 70%;
-    font-weight: normal;
-    text-align: center;
-}
-
-#thread_nav .thread_info li {
-    margin-left:3em;
-}
-
-#olderhread, #newewthread {
-    font-size: 70%;
-    color: rgb(167, 169, 172);
-}
-
-#olderhread {
-    float: right;
-    margin-top: 2em;
-    margin-right: 20px;
-}
-
-/* Define the two columns */
-#thread_content {
-    width: 74%;
-}
-
-#thread_overview_info {
-    float: right;
-    width: 22%;
-}
-
-/* Thread general information column */
-#days_old {
-    margin-left:1em;
-}
-
-.days_text {
-    font-size: 70%;
-}
-
-.days_num {
-    font-size: 200%;
-}
-
-#add_to_fav a{
-    color: rgb(167, 169, 172);
-}
-
-#grey {
-    color: rgb(167, 169, 172);
-    background-color: rgb(167, 169, 172);
-    margin: 0px;
-    border: 0 none;
-    height: 1px;
-}
-
-#tags {
-    color: rgb(167, 169, 172);
-    margin-top: 2em;
-}
-
-#tag_title {
-    color: rgb(77, 77, 77);
-    text-transform: uppercase;
-}
-
-#tags ul {
-    padding: 10px 0;
-    margin: 0;
-}
-
-#add_tag {
-    margin-top: 0.3em;
-}
-
-#participants {
-    margin-top: 2em;
-    color: rgb(167, 169, 172);
-}
-
-#participants_title {
-    color: rgb(77, 77, 77);
-    text-transform: uppercase;
-}
-
-#participants ul {
-    padding: 0;
-    margin: 0;
-}
-
-#participants li {
-    list-style-type: none;
-    margin: 1em 0;
-}
-
-#participants img {
-    width: 20px;
-    vertical-align: middle;
-}
-
-
-/* Main section with the whole thread */
-
-/* First email of the thread. */
-
-.first_email {
-}
-
-.email_header {
-    position:relative;
-    margin-bottom: 1em;
-}
-
-.email_header img {
-    width: 40px;
-    float: left;
-    margin-right: 10px;
-}
-
-.email_author {
-    height: 40px;
-}
-.email_author .name{
-    color: rgb(55, 113, 200);
-    font-weight: bold;
-}
-.email_author .rank{
-    color: rgb(167, 169, 172);
-    font-size: 80%;
-    font-weight: bold;
-}
-
-.email .email_date {
-    font-size: 90%;
-}
-.first_email .email_date span {
-    display: block;
-    text-align: right;
-}
-.email_date .date {
-    font-weight: bold;
-}
-.email_date .time {
-    color: rgb(167, 169, 172);
-    margin-left: 0.5em;
-}
-
-.add_comment {
-    float: right;
-}
-
-/* The email thread */
-.even, .odd {
-    border-top: 1px solid rgb(179, 179, 179);
-    padding: 1em;
-	margin: 20px 0px 20px 0px;
-}
-.even {
-    background-color: rgb(246, 246, 246);
-}
-.odd {
-    background-color: rgb(238, 238, 238);
-}
-
-.email {
-}
-
-.email .email_header {
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
-.email .email_author {
-    font-size: 90%;
-}
-
-.first_email_body, .email_body {
-    white-space: pre;
-    display: inline-block;
-}
-.first_email_body {
-    width: 100%;
-    overflow: auto;
-}
-.email_body{
-    -webkit-border-radius: 5px 5px 5px 5px;
-    -moz-border-radius: 5px 5px 5px 5px;
-    border-radius: 5px 5px 5px 5px;
-    border-style: solid;
-    border-width: 1px;
-    border-color: rgb(179, 179, 179);
-    padding: 5px;
-    min-height: 40px;
-    background-color: rgb(255, 255, 255);
-    width: 95%;
-}
-
-
-.email_body a {
-    float: right;
-    padding: 3px 10px 0px 0px;
-}
-
-.email_info {
-    padding: 0px;
-    margin-top: 5px;
-}
-
-.thread_email {
-    padding-left: 20px;
-    margin-left: 21px;
-    display: inline-block;
-    vertical-align: top;
-    white-space: pre;
-}
-
-ul.attachments-list li {
-    display: list-item;
-    list-style-type: disc;
-}
-
diff --git a/hyperkitty/templates/api.html b/hyperkitty/templates/api.html
index 0fa38c9..c6e2b85 100644
--- a/hyperkitty/templates/api.html
+++ b/hyperkitty/templates/api.html
@@ -1,9 +1,5 @@
 {% extends "base.html" %}
 
-{% block additional_stylesheets %}
-  <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/thread.css" />
-{% endblock %}
-
 {% block content %}
     <h2>REST API</h2>
     <p>
diff --git a/hyperkitty/templates/base.html b/hyperkitty/templates/base.html
index c679687..53d0ada 100644
--- a/hyperkitty/templates/base.html
+++ b/hyperkitty/templates/base.html
@@ -14,47 +14,40 @@
 	{% load i18n %}
 
 	<body>
-	<div class="navbar navbar-fixed-top">
-	      <div class="navbar-inner">
-	        <div class="container">
-	          <div class="nav-collapse collapse">
-
-				{% if user.is_authenticated %}
-					 <li class="user_nav">
-						<a class="mm_logout" style="float:right;" href="{% url user_logout %}">Logout</a>
-					 </li>
-					 <li class="user_nav" style="float:right;">
-						<a style="float:right;" href="{% url user_profile %}">{{ user.username }}</a>
-					</li>
-				{% else %}
-					 <li class="user_nav" style="float:right;">
-						<a class="mm_user" style="float:right;" href="{% url user_login %}">Login</a>
-					 </li>
-					 <li class="user_nav" style="float:right;">
-						<a style="float:right;" href="{% url user_registration %}"> Sign Up </a>
-					</li>
-				{% endif %}
-
-
-	            <ul class="nav">
-
-                    <li class="root{% if not list_address %} active{% endif %}">
-                        <a href="{% url root %}">{{ app_name|title }}</a>
-                    </li>
-
-				{% if list_address %}
-					<li id="list_name" class="active">
-						<a href="{% url list_overview mlist_fqdn=list_address %}">{{list_address}}</a>
-					</li>
-				{% endif %}
-
-
-		        </ul>
-	          </div>
-	        </div>
-	      </div>
-	</div>
-
+		<header>
+			<div class="navbar navbar-fixed-top">
+				  <div class="navbar-inner">
+					<div class="container">
+
+                        <ul class="nav auth">
+						{% if user.is_authenticated %}
+							 <li><a class="mm_logout" href="{% url user_logout %}">Logout</a></li>
+							 <li><a href="{% url user_profile %}">{{ user.username }}</a></li>
+						{% else %}
+							 <li><a class="mm_user" href="{% url user_login %}">Login</a></li>
+							 <li><a href="{% url user_registration %}"> Sign Up </a></li>
+						{% endif %}
+                        </ul>
+
+
+						<ul class="nav">
+
+							<li class="root{% if not list_address %} active{% endif %}">
+								<a href="{% url root %}">{{ app_name|title }}</a>
+							</li>
+
+						{% if list_address %}
+							<li id="list_name" class="active">
+								<a href="{% url list_overview mlist_fqdn=list_address %}">{{list_address}}</a>
+							</li>
+						{% endif %}
+
+
+						</ul>
+					</div>
+				  </div>
+			</div>
+		</header>
 
 		<div class="container">
 			{% block content %} {% endblock %}
diff --git a/hyperkitty/templates/message.html b/hyperkitty/templates/message.html
index 6c26c4f..5ae2fb1 100644
--- a/hyperkitty/templates/message.html
+++ b/hyperkitty/templates/message.html
@@ -3,18 +3,14 @@
 {% load hk_generic %}
 {% load storm %}
 
-{% block additional_stylesheets %}
-<link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/thread.css" />
-{% endblock %}
-
 {% block content %}
 
-<header>
+<div class="message-header">
     <a class="thread-back"
        href="{% url thread threadid=message.thread_id, mlist_fqdn=list_address %}">
     </a>
     <h1>{{ message.subject }}</h1>
-</header>
+</div>
 
 <section id="thread_content">
 	{% include 'messages/first_email.html' with first_mail=message %}
diff --git a/hyperkitty/templates/messages/message.html b/hyperkitty/templates/messages/message.html
index 6ff6c15..415bc58 100644
--- a/hyperkitty/templates/messages/message.html
+++ b/hyperkitty/templates/messages/message.html
@@ -12,19 +12,18 @@
 		</span>
 		{% endifchanged %}
 		<span class="time">{{email.date|date:"H:i:s e"}}</span>
-		<br />
 	</div>
-	{% gravatar_img_for_email email.email 40 %}
+    <div class="gravatar{% if use_mockups %} pull-left{% endif %}">
+        {% gravatar_img_for_email email.email 40 %}
+    </div>
 	<div class="email_author inline-block">
-		<span class="name"> <a href="{% url message_index mlist_fqdn=list_address, hashid=email.message_id_hash %}">{{email.sender_name}}</a> </span>
+		<span class="name"><a href="{% url message_index mlist_fqdn=list_address, hashid=email.message_id_hash %}">{{email.sender_name}}</a></span>
+        {% if use_mockups %}
 		<br />
 		<span class="rank">
-        {% if use_mockups %}
             Rank 8
-        {% else %}
-            &nbsp;
-        {% endif %}
 		</span>
+        {% endif %}
 	</div>
 </div>
 
diff --git a/hyperkitty/templates/month_view.html b/hyperkitty/templates/month_view.html
index 00b7a96..a6239fe 100644
--- a/hyperkitty/templates/month_view.html
+++ b/hyperkitty/templates/month_view.html
@@ -7,7 +7,7 @@
 
 <div id="month-view">
 
-    <header>
+    <div class="month-header">
         <div class="list-name">{{ mlist.display_name|default:mlist.name|escapeatsign }}</div>
         <div class="month-name">{{ month|date:"F Y"|capfirst }}</div>
         <ul class="month-info">
@@ -23,7 +23,7 @@
             <a href="mailto:{{ list_address|escapeatsign }}">{{ list_address|escapeatsign }}</a>
         </p>
         {% endif %}
-    </header>
+    </div>
 
 	{% for email in threads %}
 	<!-- New thread -->
@@ -95,7 +95,7 @@
 	</div>
 	<!-- End of thread -->
 	{% empty %}
-		Sorry no emails could be found for your search.
+		Sorry no emails could be found for this month.
 	{% endfor %}
 
 	{% include "paginator.html" %}
diff --git a/hyperkitty/templates/thread.html b/hyperkitty/templates/thread.html
index be2d875..c55d445 100644
--- a/hyperkitty/templates/thread.html
+++ b/hyperkitty/templates/thread.html
@@ -4,13 +4,9 @@
 {% load hk_generic %}
 {% load storm %}
 
-{% block additional_stylesheets %}
-<link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/thread.css" />
-{% endblock %}
-
 {% block content %}
 
-    <header>
+    <div class="thread-header">
         {% for thread in neighbors %}
             {% if thread %}
             <a class="thread-{% ifequal forloop.counter 1 %}older{% else %}newer{% endifequal %}"
@@ -19,7 +15,7 @@
             {% endif %}
         {% endfor %}
         <h1>{{ subject }}</h1>
-    </header>
+    </div>
 
 	{% include 'threads/right_col.html' %}
 
diff --git a/hyperkitty/templates/threads/month_list.html b/hyperkitty/templates/threads/month_list.html
index d642567..85af7b6 100644
--- a/hyperkitty/templates/threads/month_list.html
+++ b/hyperkitty/templates/threads/month_list.html
@@ -3,15 +3,13 @@
 <div id="archives">
 	{% for year, months in archives_length|sort %}
 	<h3>{{ year }}</h3>
-	<div>
-		<ul>
-			{% for ar_month in months %}
-			<li class="{% if year == month.year and ar_month == month.month %}current{% endif %}">
-				<a href="{% url archives_with_month year=year, mlist_fqdn=list_address, month=ar_month %}"
-                   >{{ ar_month|monthtodate:year|date:"F" }}</a>
-			</li>
-			{% endfor %}
-		</ul>
-	</div>
+    <ul>
+        {% for ar_month in months %}
+        <li class="{% if year == month.year and ar_month == month.month %}current{% endif %}">
+            <a href="{% url archives_with_month year=year, mlist_fqdn=list_address, month=ar_month %}"
+               >{{ ar_month|monthtodate:year|date:"F" }}</a>
+        </li>
+        {% endfor %}
+    </ul>
 	{% endfor %}
 </div>