From 95dfc730dc0649ee4368788fe3408bc4921b45a1 Mon Sep 17 00:00:00 2001
From: Tom Giannattasio <tom@mitx.mit.edu>
Date: Wed, 5 Dec 2012 12:05:14 -0500
Subject: [PATCH] new header styles; collapse all button added to courseware

---
 cms/static/img/collapse-all-icon.png | Bin 0 -> 1018 bytes
 cms/static/img/home-icon-blue.png    | Bin 0 -> 1106 bytes
 cms/static/img/log-out-icon.png      | Bin 0 -> 1073 bytes
 cms/static/img/small-home-icon.png   | Bin 0 -> 1064 bytes
 cms/static/js/base.js                |  13 ++++-
 cms/static/sass/_base.scss           |   6 +-
 cms/static/sass/_cms_mixins.scss     |  23 +++++++-
 cms/static/sass/_courseware.scss     |  13 ++++-
 cms/static/sass/_graphics.scss       |  21 +++++++
 cms/static/sass/_header.scss         |  83 ++++++++++++++-------------
 cms/static/sass/_variables.scss      |   7 ++-
 cms/templates/overview.html          |   6 +-
 cms/templates/widgets/header.html    |  36 +++++++-----
 13 files changed, 142 insertions(+), 66 deletions(-)
 create mode 100644 cms/static/img/collapse-all-icon.png
 create mode 100644 cms/static/img/home-icon-blue.png
 create mode 100644 cms/static/img/log-out-icon.png
 create mode 100644 cms/static/img/small-home-icon.png

diff --git a/cms/static/img/collapse-all-icon.png b/cms/static/img/collapse-all-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..c468778b0254d6c98568edbce409ebef38c3af8c
GIT binary patch
literal 1018
zcmaJ=PfXKL7%ze-Bnu>{5fAz-9yDS7x3$t{lZ|!A5{qP8!cNAneXzpXSK9|GoWP41
z4|r3f#&{=QypVYC;4UPXcp>rMiGwjw<H>}BiM|dtJb+Ex_uiN9_xpa|pLcg+{A#58
zOgBYQk=&S?Cu<M+x{h~}|Bu!ANwW0gYzY_86t3wWq|zoTLy)ueX_$w)xo~R(CMc@?
zf>kWxl6Flokj?0!4-?ofK~q#>IB<1i7Gh9_)0UH@f4+K61ItX(lcL6HZU$DYu|*FS
z7RQUm;;bQ?^zaps2oyqKL#%_qt~$OFB<TjPLiVAVr9s05&nD?zQ6+5xWRM4e$i$)s
z$MZmv7(Oma5<dt8ju%*tyi$~pE25+bm%-jclW3kfrR3Goy;$Uwq$?P^3d`1NHKrD0
zkT=cpvMh%jf)FJhQGda~dJuK|fhL0reZ#X{Y#|4PjCvW(;UrCz?xtY7En3IlD-$Ug
z8|W^}GhCQb(^1p@?`qpEZy)F3zTN|g{o;ZP**x^ooM({6O$~&hTqWZ{9V4%ZP_<db
zi3-BVuOJs>3KF=e>4xQmhD!~ErYSkc$GT&{oSLKw2V+^L!euj}lpazAH7)UcR*+*O
zayBcev3Q&(9pIW+6&Z6jbZ`@E?qjouV#8suT@qP^o;456Q4iUmk+fnRpd~Jfqv8-R
z2&zniAEad$YaXs8bEp=Uh+)Il{?qEFiOf&9Z4E9tv_>B~WZpe8*ym@g0=X2`oSH5M
zAIsk#u74eFf3$RTrGH~<vz}_BJ|uRYyggR`wp8kP_T|smPDiib#>aZu&g~Sq(N(Xe
zHhbz1?r+7?Pa|(mrG7_NJ}tlRnOW}Zz23IHnp(TFcJ}ehzUB23+Th8Rd+$yj={QZD
WTkCuNIpX~aZ(}YyuD%$#dHXK|UqU+o

literal 0
HcmV?d00001

diff --git a/cms/static/img/home-icon-blue.png b/cms/static/img/home-icon-blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..45b4971a2a2a8ca2a195623fe8847e5ac5587852
GIT binary patch
literal 1106
zcmaJ=O-K|`93NX<R#CKsXeH`3iY2r=JF~jFgOjd1YrD{FvM#ts=i})PIv>tF+f~Tg
z^srG-f*>8DYfwlZhYmqWY+_JRbjwSZpi3V_P?xYb>S~9!VP@WYe}2E;|MOiQN}g`0
zYpEj$q9GCIQ+RF0Uz5j;|36B+gcmQ0WzeuOhH|0>iHKrI5F|8l9HyYC%uKz2y#(QE
zQ_~rg5zer(q4`Az<Iig*W)nnjU)~hu35b9M$5ovpzdn9S0#)J2kuD)1m{FKj<FghV
zo=v9Z*$FwUkbS2>Z=S^h8bl(<Ym>Uo<~edpm&JR>Op#y<f+jd}JE)8>1fqroL6<-1
zlLIsjLLooh*%b=WCjk?n87hF^kdN+UyFx6}4R#(9d$W`=HpLI__`)ZS%pzp66qU>6
z{JEgtu*NAm91c4g4CBKHpFN`^G4Ipu*0KT*ZP`*yq#8PK6h+CHMjVMF-A+L>cV%^Z
zr%bqDR9-YG+8=OIDgy=K|4>caMcXI^_u~Dhu$`VUA(eu*F>T4XabvBHE0c{{P(+56
zHjK$~6^F70GVH8jg6MDvoDf7=)g42}7DEu&gl;2ImtlhENUY&kRfUaq4@A3T!7vjI
z4A69p2?qzlu~>)?c6QRZ1A#J^H{@vz>Zr_B_PCLXTxS?G6MN>NrJjSzpk-)aD`{4(
z97}gay&bMnIhLM^TnYz6Ij#Mx)nyZ&A7{HexcIO;`cTL7ZsEb+xcktBFGVTAN7DKC
zQvJ=j<$`CmzI36sLn5DnR`A4Knq6vfGug(bI}w$$8s@!io{v`!Fip$iTHMX;lPEAZ
zxZdA>*!_8sS>IoL<htK{%ypv}_;e)wrG4qzyZ-iGcNlo9U5~zb*B71x_wC5fsfFV&
z`>)2Uylb9PaIs!mm75+E>f`Q}YU$v0akJ3lDK>t1^Xq7>>{>4L)D<`H_1BCRe%~sf
xQKGb2e3e{S?Mr=ce|xd!Y|kQ@JilC3eTbMJVH#InZ<L%{o`@y+m4VSqe*oMHU{3%5

literal 0
HcmV?d00001

diff --git a/cms/static/img/log-out-icon.png b/cms/static/img/log-out-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..c89373619acdede7526d0a0b42497319349c5198
GIT binary patch
literal 1073
zcmaJ=O-K|`93L~RwYGvj&^{kyM3%er;qKH9yXm&G)}kY_F0>cHaptLm&b)Ev>8?iM
zM;{v<g6JR-1a*iyL}iDdLmfQW!H5bHFM%EM5J(=vF4ddWT|2Z5k9q(9pa1Xo|9scl
zTF-bZ_f}FA<xQNGlH}g*%9|_5f9PN!O0H@gPvdsfjWdc3si=m!AV?TW4@^Qu8y<KA
z!xUA1SWl&KT5b_lWcU@=$DcJUf~Kf&L)KE%K8QgV?9t5#z4Y=G4RkF+p9{*YY{g)&
zes;u$?IW!zb)-)XX>`LW5YCE(z<^i*S)<={#B7Al^NK`v%?u6lF1Rm3uO^k2+dvH2
z5Cr}8K9%J-AP9ag5EKNi4)83;Gb}lRj|+%FLF7+>wT~vzY^_^NN=<9Ah!&xHF}6g8
z$z(GAOuZl3Jq#BLg<KAv_Yn`DGi+id>oc920)qq{)z&SnBNMocN*5Z$5t?MWT7qE}
zX-#LXO{8H=R<Rh)&$=ZQ9A)|cu7*+cc5o7|=lf4$CpBzACJ7xhXscv!-8F6~ON`l2
z!N^V_)L-agTQ9=M=|vWZwF}^=tf;!_8fx<hSr!wfgB4SS2`NGo4!^EzVjvi73ZCRx
zUJ3;`F3yMQPlw`hL8=cBH4tPASP7|v1~hR2tF2?Xl2~^c42wjTpsf!<t;t3P$QLc@
zC39ipCHdB{TFG44rjl5OB*VC){cF?(6WJeEEG{llimMMzvhOxo?5XkVZ^@&$pOB)d
z?0na^$rp<a<riP)n#VoYE^Nw8jZW@+RMxTc_^H`rjbU%@(87~Nu%r3Q`>o~l$vgd?
z>91pRp1a*uD>tr08+YY0WdplsI*(K=Q*-gU!<YD(AD<fcd#2BO^eg&kwY@(V8(XPu
zxp{fxgZc9BNGsbD7Vb@ao?H0o-S(SbXzpNVm*3qQy!sJr(tlM<e;7+2$W4r`R6V_2
bwqYx^CAIJ2((}b<?jugbTcyXRJIDV3?3h~=

literal 0
HcmV?d00001

diff --git a/cms/static/img/small-home-icon.png b/cms/static/img/small-home-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb6adcd7cd273a2f23751b69091dd1344cf9fa02
GIT binary patch
literal 1064
zcmaJ=U1-x#6wW#vV|1>vp*R(<sT9REY5M0HR=2k4*1|GMSFrdXrpa9!w&cd-&UQnj
zs0=4Q3=|zh^vx&nS^Qz(d{CSy4qtrmL3|X)#0LdIZ@RVf!5Wg>dk)|CopaAQcRn*V
z(%I45K~Yp^IwfSu>LTCH_BQhOu(z+0WiL+V@i>~mWyyq8OhE+*(wbC+StuzpXJ5hr
zifTQq=JGf%j`A|n7|F&k70n=QiW(TK7?L~*F(|;Isz>Sd$ICQOl_-5OB>F@n0ZVFX
z)`a7;V>x+tQjRF};0Z8L;fa6-u>>mGly32rC|%R#$=-IeG^j!FWR%`aDlcY00+|qm
zn1EOIaU2MT87>$Khq*rB_i=vKN8YfP3-X~b?>`Q<9-2fml?gs83~$9ER+KJbZ15~w
zE|-~dfI()F<sy-Yt>O233Bqg5=vb<Fb<15>5TGTSs)1Fc16xrlplKYXNv4}e(2Rzx
zZf%u`6pXD%2Fo!%`$%=5DE=R+X$`c6vv51#e+pZ<83VFeXrXCSCXJhL+o23TVL}Nb
zGl$Sry^5I<!pJHi10=@7;D{*6s%|@u))=D5r*#WUx(w4olqMRCsw#Xi6dDfo`x1U3
z66Cm~KN5&XlF6_T2of_G^3}NllBYGO<2qN_<_b-@_AqD$i7Y@<JqMLx6KSA!XkKle
zORTBh7FTJWOS~zUCCRXMYyWC>-9_fd-Zlo87>&_~I+=Hq4EE)xuNZPEmeN8jSNTx*
zviNYJr7P3+X?^II^OnQoSn8rSE`Xc#dny7x?s)DWx<B{E<=MX!>%CF^;c^{ZDYkdF
zygr?|w&o(>Wyi+I`8nUNx6ao7PAR^&T1^HX9df4TQkR^i<h#}Cy`O_U?tRayN~-lm
z)d{}J;6U~J=Ri#B^Q=${chIP_$FaMw@O!?;y}0L!gKBA`zCAg1{nXujw|#fh$uZ$U
H{LIBa72Hi*

literal 0
HcmV?d00001

diff --git a/cms/static/js/base.js b/cms/static/js/base.js
index 328c118405..8f2b822ece 100644
--- a/cms/static/js/base.js
+++ b/cms/static/js/base.js
@@ -43,6 +43,8 @@ $(document).ready(function() {
     $('.unit .item-actions .delete-button').bind('click', deleteUnit);
     $('.new-unit-item').bind('click', createNewUnit);
 
+    $('.collapse-all-button').bind('click', collapseAll);
+
     // autosave when a field is updated on the subsection page
     $body.on('keyup', '.subsection-display-name-input, .unit-subtitle, .policy-list-value', checkForNewValue);
     $('.subsection-display-name-input, .unit-subtitle, .policy-list-name, .policy-list-value').each(function(i) {
@@ -128,6 +130,11 @@ $(document).ready(function() {
     });
 });
 
+function collapseAll(e) {
+    $('.branch').addClass('collapsed');
+    $('.expand-collapse-icon').removeClass('collapse').addClass('expand');
+}
+
 function editSectionPublishDate(e) {
     e.preventDefault();
     $modal = $('.edit-subsection-publish-settings').show();
@@ -597,11 +604,11 @@ function hideToastMessage(e) {
 function addNewSection(e, isTemplate) {
     e.preventDefault();
 
-    $(e.target).hide();
+    $(e.target).addClass('disabled');
 
     var $newSection = $($('#new-section-template').html());
     var $cancelButton = $newSection.find('.new-section-name-cancel');
-    $('.new-courseware-section-button').after($newSection);
+    $('.courseware-overview').prepend($newSection);
     $newSection.find('.new-section-name').focus().select();
     $newSection.find('.section-name-form').bind('submit', saveNewSection);
     $cancelButton.bind('click', cancelNewSection);
@@ -638,7 +645,7 @@ function saveNewSection(e) {
 
 function cancelNewSection(e) {
     e.preventDefault();
-    $('.new-courseware-section-button').show();
+    $('.new-courseware-section-button').removeClass('disabled');
     $(this).parents('section.new-section').remove();
 }
 
diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index 07ff92251d..a1bd203624 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -28,6 +28,7 @@ a {
 }
 
 h1 {
+    display: none;
     float: left;
     font-size: 28px;
     font-weight: 300;
@@ -39,8 +40,7 @@ h1 {
 }
 
 .page-actions {
-    float: right;
-    margin-top: 42px;
+    margin-bottom: 25px;
 }
 
 .main-wrapper {
@@ -349,7 +349,7 @@ body.show-wip {
 }
 
 .new-button {
-    @include blue-button;
+    @include green-button;
     font-size: 13px;
     padding: 8px 20px 10px;
     text-align: center;
diff --git a/cms/static/sass/_cms_mixins.scss b/cms/static/sass/_cms_mixins.scss
index 637f4b48f9..5f2a0aadb8 100644
--- a/cms/static/sass/_cms_mixins.scss
+++ b/cms/static/sass/_cms_mixins.scss
@@ -88,7 +88,28 @@
 
 	&:hover {
 		background-color: #d9e3ee;
-		color: #6d788b;
+	}
+}
+
+@mixin green-button {
+	@include button;
+	border: 1px solid $darkGreen;
+	border-radius: 3px;
+	@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+	background-color: $green;
+	@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
+	color: #fff;
+
+	&:hover {
+		background-color: $brightGreen;
+		color: #fff;
+	}
+
+	&.disabled {
+		border: 1px solid $disabledGreen !important;
+		background: $disabledGreen !important;
+		color: #fff !important;
+		@include box-shadow(none);
 	}
 }
 
diff --git a/cms/static/sass/_courseware.scss b/cms/static/sass/_courseware.scss
index a48105eb59..05ddcefb48 100644
--- a/cms/static/sass/_courseware.scss
+++ b/cms/static/sass/_courseware.scss
@@ -9,7 +9,7 @@ input.courseware-unit-search-input {
 	position: relative;
 	background: #fff;
 	border-radius: 3px;
-	margin: 15px 0;
+	margin-top: 15px;
 	padding-bottom: 12px;
 	@include box-shadow(0 1px 1px rgba(0,0,0,0.2), 0 0 0 1px rgba(0, 0, 0, 0.1));
 
@@ -192,6 +192,17 @@ input.courseware-unit-search-input {
 	}
 }
 
+.collapse-all-button {
+	float: right;
+	margin-top: 10px;
+	font-size: 13px;
+	color: $darkGrey;
+
+	.collapse-all-icon {
+		margin-right: 6px;
+	}
+}
+
 .new-section-name,
 .new-subsection-name-input {
 	width: 515px;
diff --git a/cms/static/sass/_graphics.scss b/cms/static/sass/_graphics.scss
index 4a63a8a885..80599f7bc4 100644
--- a/cms/static/sass/_graphics.scss
+++ b/cms/static/sass/_graphics.scss
@@ -56,6 +56,27 @@
 	background: url(../img/home-icon.png) no-repeat;
 }
 
+.small-home-icon {
+	display: inline-block;
+	width: 16px;
+	height: 14px;
+	background: url(../img/small-home-icon.png) no-repeat;
+}
+
+.log-out-icon {
+	display: inline-block;
+	width: 15px;
+	height: 13px;
+	background: url(../img/log-out-icon.png) no-repeat;
+}
+
+.collapse-all-icon {
+	display: inline-block;
+	width: 15px;
+	height: 9px;
+	background: url(../img/collapse-all-icon.png) no-repeat;
+}
+
 .calendar-icon {
 	display: inline-block;
 	width: 12px;
diff --git a/cms/static/sass/_header.scss b/cms/static/sass/_header.scss
index cb9a7ed121..039ac69898 100644
--- a/cms/static/sass/_header.scss
+++ b/cms/static/sass/_header.scss
@@ -5,18 +5,16 @@ body.no-header {
 }
 
 @mixin active {
-	@include linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
-	@include box-shadow(0 2px 8px rgba(0, 0, 0, .7) inset);
+	color: #3c3c3c;
+	border-bottom: 3px solid $mediumGrey;
 }
 
 .primary-header {
 	width: 100%;
-	height: 36px;
-	border-bottom: 1px solid #2c2e33;
-	@include linear-gradient(top, #686b76, #54565e);
-	font-size: 13px;
-	color: #fff;
-	@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset);
+	margin-bottom: 25px;
+	border-top: 6px solid $blue;
+	border-bottom: 1px solid $mediumGrey;
+	background: #fff;
 
 	&.active-tab-courseware #courseware-tab {
 		@include active;
@@ -38,23 +36,6 @@ body.no-header {
 		@include active;
 	}
 
-	#import-tab {
-		@include box-shadow(1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44);
-	}
-
-	.left {
-		position: absolute;
-		left: 0;
-		width: 100%;
-	}
-
-	.class-name {
-		max-width: 350px;
-		text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-	}
-
 	.drop-icon {
 		margin-left: 5px;
 		font-size: 11px;
@@ -65,26 +46,46 @@ body.no-header {
 		line-height: 18px;
 	}
 
-	a,
-	.username {
-		float: left;
-		display: inline-block;
-		height: 29px;
-		padding: 7px 15px 0;
-		color: #e4e6ee;
+	.class-nav-bar {
+		clear: both;
 	}
 
-	.class-nav,
-	.class-nav li {
-		float: left;
-	}
+	.class-nav {
+		@include clearfix;
+		border-top: 1px solid $mediumGrey;
 
-	a {
-		@include box-shadow(1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44);
-
-		&:hover {
-			background: rgba(255, 255, 255, .1);
+		a {
+			float: left;
+			display: inline-block;
+			padding: 20px 25px 22px;
+			font-size: 15px;
 		}
 
+		li {
+			float: left;
+		}
+	}
+
+	.class {
+		@include clearfix;
+		font-size: 12px;
+		color: $darkGrey;
+
+		a {
+			display: inline-block;
+			height: 20px;
+			padding: 5px 10px 6px;
+			color: $darkGrey;
+		}
+
+		.home {
+			position: relative;
+			top: 1px;
+		}
+
+		.log-out {
+			position: relative;
+			top: 3px;
+		}
 	}
 }
\ No newline at end of file
diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss
index 8666dc192c..81bf252a34 100644
--- a/cms/static/sass/_variables.scss
+++ b/cms/static/sass/_variables.scss
@@ -22,4 +22,9 @@ $lightGrey: #edf1f5;
 $mediumGrey: #ced2db;
 $darkGrey: #8891a1;
 $extraDarkGrey: #3d4043;
-$paleYellow: #fffcf1;
\ No newline at end of file
+$paleYellow: #fffcf1;
+
+$green: rgb(37, 184, 90);
+$brightGreen: rgb(22, 202, 87);
+$disabledGreen: rgb(124, 206, 153);
+$darkGreen: rgb(52, 133, 76);
diff --git a/cms/templates/overview.html b/cms/templates/overview.html
index c1f99a2e30..f1a527bb38 100644
--- a/cms/templates/overview.html
+++ b/cms/templates/overview.html
@@ -99,9 +99,11 @@
   <div class="main-wrapper">
     <div class="inner-wrapper">
       <h1>Courseware</h1>
-      <div class="page-actions"></div>
-      <article class="courseware-overview" data-course-id="${context_course.location.url()}">
+      <div class="page-actions">
         <a href="#" class="new-button new-courseware-section-button"><span class="plus-icon white"></span> New Section</a>
+        <a href="#" class="collapse-all-button"><span class="collapse-all-icon"></span>Collapse All</a>
+      </div>
+      <article class="courseware-overview" data-course-id="${context_course.location.url()}">        
         % for section in sections:
         <section class="courseware-section branch" data-id="${section.location}">
           <header>
diff --git a/cms/templates/widgets/header.html b/cms/templates/widgets/header.html
index f65becb9c7..7f27dd378b 100644
--- a/cms/templates/widgets/header.html
+++ b/cms/templates/widgets/header.html
@@ -2,12 +2,28 @@
 
 <% active_tab_class = 'active-tab-' + active_tab if active_tab else '' %>
 <header class="primary-header ${active_tab_class}">
-  <nav class="inner-wrapper">
-    <div class="left">
-      <a href="/"><span class="home-icon"></span></a>
+  <div class="inner-wrapper">
+    <div class="class">
+      <div class="left">        
+        % if context_course:
+          <% ctx_loc = context_course.location %>
+          <a href="/" class="home"><span class="small-home-icon"></span></a> › 
+          <a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" class="class-name">${context_course.display_name}</a> ›
+        % endif
+      </div>
+
+      <div class="right">
+        <span class="username">${ user.username }</span>
+        % if user.is_authenticated():
+           <a href="${reverse('logout')}" class="log-out"><span class="log-out-icon"></span></a>
+        % else:
+           <a href="${reverse('login')}">Log in</a>
+        % endif
+      </div>
+    </div>
+    <nav class="class-nav-bar">
       % if context_course:
       <% ctx_loc = context_course.location %>
-      <a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" class="class-name">${context_course.display_name}</a>
       <ul class="class-nav">
         <li><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='courseware-tab'>Courseware</a></li>
         <li><a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='courseinfo-tab'>Course Info</a></li>
@@ -18,14 +34,6 @@
         <li><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='import-tab'>Import</a></li>
       </ul>
       % endif
-    </div>
-    <div class="right">
-      <span class="username">${ user.username }</span>
-      % if user.is_authenticated():
-         <a href="${reverse('logout')}">Log out</a>
-      % else:
-         <a href="${reverse('login')}">Log in</a>
-      % endif
-    </div>
-  </nav>
+    </nav>
+  </div>
 </header>