Mercurial > hg > MPIWGWeb

changeset 26:8a99ad8713d6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
new common template for fragments. new styles for servicebox.
author casties
date Thu, 18 Apr 2013 20:39:01 +0200
parents 5a4b22fa726c
children 9a75eb1b31b3
files MPIWGRoot.py css/mpiwg.css zpt/www/common_template.zpt
diffstat 3 files changed, 397 insertions(+), 235 deletions(-) [+]
line wrap: on
line diff
--- a/MPIWGRoot.py	Wed Apr 10 17:56:29 2013 +0200
+++ b/MPIWGRoot.py	Thu Apr 18 20:39:01 2013 +0200
@@ -83,6 +83,7 @@
     # templates
     #
     main_template = PageTemplateFile('zpt/www/main_template', globals())
+    common_template = PageTemplateFile('zpt/www/common_template', globals())
     mpiwg_css = ImageFile('css/mpiwg.css', globals())
     # make docuviewer_css refreshable for development
     mpiwg_css.index_html = refreshingImageFileIndexHtml
--- a/css/mpiwg.css	Wed Apr 10 17:56:29 2013 +0200
+++ b/css/mpiwg.css	Thu Apr 18 20:39:01 2013 +0200
@@ -3,12 +3,9 @@
  * (c) 2013 MPIWG Berlin
  * Author: Robert Casties
  */
-
-
-
 body {
     margin: 0;
-    font-family: Verdana, Arial, sans-serif; 
+    font-family: Verdana, Arial, sans-serif;
     background-color: #fdf8ef;
     font-size: 12px;
 }
@@ -16,7 +13,6 @@
 /* 
  * global styles
  */
-
 img {
     border: none;
 }
@@ -31,40 +27,39 @@
 }
 
 /*  link-classes (with icons)  */
-
 a.internal {
-    background: url(../images/internal.png) center left no-repeat;    
+    background: url(../images/internal.png) center left no-repeat;
     padding-left: 10px;
 }
 
 a.download {
-    background: url(../images/download.png) center left no-repeat;    
+    background: url(../images/download.png) center left no-repeat;
     padding-left: 15px;
 }
 
 a.external {
-    background: url(../images/external.png) center left no-repeat;    
+    background: url(../images/external.png) center left no-repeat;
     padding-left: 15px;
 }
 
 a.pdf {
-    background: url(../images/pdf.gif) no-repeat;    
+    background: url(../images/pdf.gif) no-repeat;
     padding-left: 15px;
-/* padding-top:1px; */
+    /* padding-top:1px; */
 }
 
 a.audio {
-    background: url(../images/audio.png) center left no-repeat;    
+    background: url(../images/audio.png) center left no-repeat;
     padding-left: 15px;
 }
 
 a.down {
-    background: url(../images/down.png) center left no-repeat;    
+    background: url(../images/down.png) center left no-repeat;
     padding-left: 15px;
 }
 
 a.book {
-    background: url(../images/book.gif) no-repeat;    
+    background: url(../images/book.gif) no-repeat;
     padding-left: 20px;
     margin-left: -5px;
     margin-top: -1px;
@@ -80,9 +75,10 @@
     font-weight: normal;
     margin: 0.5em 0;
 }
+
 h1:first-child {
-	/* does this work correctly? */
-	margin-top: 0;
+    /* does this work correctly? */
+    margin-top: 0;
 }
 
 h2 {
@@ -107,53 +103,40 @@
 }
 
 p {
-	margin: 0.5em 0;
-	line-height: 1.5;
+    margin: 0.5em 0;
+    line-height: 1.5;
 }
 
 ul.inline {
-	padding: 0;
-	margin: 0;
+    padding: 0;
+    margin: 0;
 }
+
 ul.inline li {
-	display: inline;
+    display: inline;
 }
 
 div.rows {
-	display: table;
+    display: table;
 }
 
 div.row {
-	display: table-row;
-}
-
-div.row div.col {
-	display: table-cell;
-	vertical-align: top;
-}
-div.row div.col:first-child {
-	/* first block has no left margin */
-	padding-left: 0 !important;
+    display: table-row;
 }
 
-div.box h2 {
-    margin-top: 35px;
-	padding-bottom: 5px;
-    border-bottom: 3px solid #dccbae;
-    margin-bottom: 0;
+div.row>div.col {
+    display: table-cell;
+    vertical-align: top;
 }
 
-div.item {
-	padding-top: 5px;
-	padding-bottom: 5px;
-	border-bottom: 1px solid #dccbae;
-	line-height: 1.5;
+div.row>div.col:first-child {
+    /* first block has no left margin */
+    padding-left: 0 !important;
 }
 
 /* 
  * page wrapper and header
  */
-
 #wrapper {
     width: 900px;
     margin: 0 auto;
@@ -163,28 +146,31 @@
 }
 
 #header {
-	display: block;
-	position: relative;
+    display: block;
+    position: relative;
     height: 95px;
     margin: 0 0 10px 0;
 }
 
 #header div.title {
-	position: absolute;
-	left: 0;
-	top: 25px;
+    position: absolute;
+    left: 0;
+    top: 25px;
 }
+
 #header div.title img {
-	width: 661px;
-	height: 40px;
+    width: 661px;
+    height: 40px;
 }
+
 #header div.logo {
-	position: absolute;
-	right: 0;
+    position: absolute;
+    right: 0;
 }
+
 #header div.logo img {
-	width: 87px;
-	height: 88px;
+    width: 87px;
+    height: 88px;
 }
 
 /* 
@@ -193,22 +179,22 @@
 #mainnav {
     display: block;
     position: relative;
-    font-family: Verdana, Arial, sans-serif; 
-	font-size: 12px;
-	border-top: 8px solid #fab775;
+    font-family: Verdana, Arial, sans-serif;
+    font-size: 12px;
+    border-top: 8px solid #fab775;
     padding-top: 5px;
     margin-bottom: 15px;
-    /* make iPhone-Safari not botch text size */ 
+    /* make iPhone-Safari not botch text size */
     -webkit-text-size-adjust: 100%;
 }
 
 #mainnav ul {
-	padding: 0;
-	margin: 0;
+    padding: 0;
+    margin: 0;
 }
 
 #mainnav li.sec {
-	display: inline;
+    display: inline;
     border-top: 8px solid #fab775;
     margin: 0 35px 0 0;
     padding-top: 5px;
@@ -217,7 +203,7 @@
 #mainnav li.sec:hover {
     border-top: 8px solid #d45a00;
 }
-	
+
 #mainnav a {
     color: #696968;
     outline: none;
@@ -229,7 +215,7 @@
 }
 
 #mainnav li.sec.on {
-	border-top: 8px solid #d45a00;
+    border-top: 8px solid #d45a00;
 }
 
 #mainnav li.sec.on a {
@@ -240,7 +226,7 @@
 
 #mainnav li.sec.lang {
     position: absolute;
-    right: 0; 
+    right: 0;
     top: -8px;
     margin-right: 0;
 }
@@ -266,14 +252,12 @@
  * main section wrapper
  */
 #mainrow {
-	display: table-row;
+    display: table-row;
 }
 
-  
 /*
  * subnavigation
  */
-
 div.leftbox {
     display: table-cell;
     vertical-align: top;
@@ -286,18 +270,18 @@
 }
 
 div.subnav ul {
-	margin: 0;
-	padding: 0;
+    margin: 0;
+    padding: 0;
 }
 
 div.subnav li {
-	list-style-type: none;
+    list-style-type: none;
     border-bottom: 1px solid #dccbae;
     padding: 3px 6px 6px 3px;
 }
 
 div.subnav .sn_on {
-	padding-left: 6px;
+    padding-left: 6px;
     background: #d45a00;
 }
 
@@ -317,10 +301,10 @@
 }
 
 div.subnav li.dept {
-	padding-left: 18px;
-	list-style-position: inside;
-	list-style-image: url(../images/internal.png);
-	text-indent: -14px;
+    padding-left: 18px;
+    list-style-position: inside;
+    list-style-image: url(../images/internal.png);
+    text-indent: -14px;
 }
 
 div.subnav li.dept .type {
@@ -333,7 +317,7 @@
 }
 
 div.subnavbox {
-    /* navigation below e.g. research projects */ 
+    /* navigation below e.g. research projects */
     font-size: 11px;
     margin-top: 30px;
 }
@@ -341,7 +325,7 @@
 div.subnavbox h2 {
     font-size: 11px;
     color: #b69f7b;
-	padding-bottom: 3px;
+    padding-bottom: 3px;
     border-bottom: 1px solid #dccbae;
     margin-top: 20px;
 }
@@ -349,73 +333,76 @@
 /*
  *  main section 
  */
-
 div.main {
-	display: table-cell;
+    display: table-cell;
     vertical-align: top;
-	background-color: white;
+    background-color: white;
     border-top: 3px solid #dccbae;
-	padding: 20px;
+    padding: 20px;
 }
 
-div.main div.center {
-	/* display: table; */
-}
-
-div.main div.row div.col {
-	padding-left: 20px;
+div.main div.row>div.col {
+    /* col default padding */
+    padding-left: 20px;
 }
 
 /* 
  * frontpage
  */
+div.main.home {
+    background-color: transparent;
+    border-top: 0;
+    padding: 0;
+}
 
-div.main.home {
-	background-color: transparent;
-	border-top: 0;
-	padding: 0;
+div.main.home b {
+    /* bold is blue */
+    color: #3b4186;
 }
 
-div.main.home div.row div.col {
-	width: 286px;
-	padding-left: 21px;
-}
-div.main.home div.row div.col b {
-	/* bold is blue */
-	color: #3b4186;
+div.main.home div.row.triple>div.col {
+    /* frontpage col width */
+    width: 286px;
+    padding-left: 21px;
 }
-div.main.home div.row div.col h2 {
-	/* more-links in title are right */
-	position: relative;
+
+div.main.home div.box h2 {
+    /* more-links in title are right */
+    position: relative;
 }
-div.main.home div.row div.col h2 a:link {
-	/* more-links in title are right */
-	position: absolute;
-	right: 0;
-	top: 3px;
-	/* more-links in title are small */
-	font-size: 12px;
+
+div.main.home div.box h2 a:link {
+    /* more-links in title are right */
+    position: absolute;
+    right: 0;
+    top: 3px;
+    /* more-links in title are small */
+    font-size: 12px;
 }
 
 /*
- * front page feature 
+ * front page feature teaser
  */
+div.main.home div.teaser {
+    background-color: #f4e0c7;
+}
 
-div.row.feature {
-	background-color: #f4e0c7;
+div.main.home div.teaser div.box {
+    /* teaser box needs no margins */
+    margin: 0;
 }
 
 div.teaser_image {
-	position: relative;
-	width: 593px;
+    position: relative;
+    width: 593px;
     height: 351px;
 }
 
 div.teaser_image div.caption {
-	/* caption inside image */
-	position: absolute;
-	bottom: 0;
-	padding: 3px;
+    /* caption inside image */
+    position: absolute;
+    bottom: 0;
+    padding: 3px;
     text-align: right;
     color: white;
     font-size: 10px;
@@ -425,130 +412,128 @@
 }
 
 div.teaser_text {
-	position: relative;
-	padding-right: 21px;
+    padding-right: 21px;
 }
 /* feature number */
 div.teaser_text div.feature_number {
-	position: absolute;
-	right: 14px;
-	top: 5px;
-	font-family: Georgia, Times, serif;
-	font-size: 26px;
-	color: #887163;
+    position: absolute;
+    right: 14px;
+    top: 5px;
+    font-family: Georgia, Times, serif;
+    font-size: 26px;
+    color: #887163;
 }
 /* feature title */
 div.teaser_text h1 {
-	font-size: 16px;
+    font-size: 16px;
     font-weight: normal;
     margin-top: 0;
 }
 /* current research topic */
-div.teaser_text h2 {
-	font-size: 14px;
+div.teaser_text h3 {
     color: #887163;
-    margin-bottom: 0;
+    margin-bottom: 3px;
     margin-top: 15px;
-    border-bottom: 0 !important;
 }
 /* feature date */
-div.teaser_text h3 {
-    margin-top: 20px;
+div.teaser_text div.date {
+    color: #3b4186;
+    padding-top: 20px;
     margin-bottom: 20px;
-    font-size: 12px;
 }
 
-/* teaser switcher */
-div.feature div.switcher {
-	position: absolute;
-	top: 150px;
-	width: 16px;
-	height: 24px;
-	/* TODO: needs icon */
-	padding-top: 8px;
-	background-color: silver;
+/* teaser slider */
+div.teaser div.box div.slider {
+    top: 150px;
+    width: 18px;
+    height: 24px;
+    padding-top: 11px;
 }
-div.feature div.switcher.prev {
-	left: 0;
+
+div.teaser div.box div.slider.prev {
+    background-image: url(../images/slider_prev_bg.png);
 }
-div.feature div.switcher.next {
-	right: 0;
-	text-align: right;
+
+div.teaser div.box div.slider.next {
+    background-image: url(../images/slider_next_bg.png);
 }
 
 /* 
  * toolboxes 
  */
 div.tool.box {
-	background-color: #efeeec;
-	color: black;
-	padding: 20px;
+    background-color: #efeeec;
+    color: black;
+    padding: 20px;
     box-shadow: 0 0 1px 1px #e0e0e0;
 }
 
 div.tool.box a {
-	color: #3b4186;
+    color: #3b4186;
 }
 
 div.tool.box div.searchbox {
-	/* only to make it shrink-wrap */ 
-	display: table-cell;
+    /* only to make it shrink-wrap */
+    display: table-cell;
 }
+
 div.tool.box div.searchbox input.text {
-	height: 20px;
-	width: 380px;
-	background-color: #9fa0a7;
-	color: white;
-	font-size: 14px;
-	font-style: italic;
-	border: 0;
-	padding: 3px;
+    height: 20px;
+    width: 380px;
+    background-color: #9fa0a7;
+    color: white;
+    font-size: 14px;
+    font-style: italic;
+    border: 0;
+    padding: 3px;
 }
+
 div.tool.box div.searchbox input.submit {
-	/* submit uses border-box. don't ask */
-	height: 26px;
-	width: 26px;
-	border: 0;
-	padding: 2px 3px 4px 3px; 
-	/* TODO: this should be an image */
-	background-color: #ee7f2d;
-	color: white;
-	font-size: 14px;
+    /* submit uses border-box. don't ask */
+    height: 26px;
+    width: 26px;
+    border: 0;
+    padding: 2px 3px 4px 3px;
+    /* TODO: this should be an image */
+    background-color: #ee7f2d;
+    color: white;
+    font-size: 14px;
 }
 
 div.tool.box div.searchbox div.extended {
-	text-align: right;
-	padding: 5px 30px 5px 3px;
+    text-align: right;
+    padding: 5px 30px 5px 3px;
 }
 
 div.tool.box h3 {
-	font-family: Georgia, Times, serif;
-	font-style: italic;
-	font-size: 16px;
+    font-family: Georgia, Times, serif;
+    font-style: italic;
+    font-size: 16px;
     color: #887163;
     margin: 0.5em 0;
 }
+
 div.tool.box h3:first-child {
-	/* does this work correctly? */
-	margin-top: 0;
+    /* does this work correctly? */
+    margin-top: 0;
 }
 
 div.tool.box ul {
-	margin: 0;
-	padding: 0;
+    margin: 0;
+    padding: 0;
 }
 
 div.tool.box div.options li {
-	font-family: Georgia, Times, serif;
-	font-style: italic;
-	font-size: 16px;
+    font-family: Georgia, Times, serif;
+    font-style: italic;
+    font-size: 16px;
     color: #887163;
-	list-style-type: none;
+    list-style-type: none;
     margin: 0.5em 0;
 }
 
 div.tool.box div.options {
-	margin-top: 20px;
+    margin-top: 20px;
 }
 
 div.tool.box div.atoz {
@@ -558,95 +543,212 @@
 
 div.tool.box input.checkbox,
 div.tool.box input.radio {
-	/* checkbox uses border-box. don't ask */
-	width: 20px;
-	height: 20px;
-	margin: 0;
-	/* TODO: this should be an image */
-	background-color: white;
+    /* checkbox uses border-box. don't ask */
+    width: 20px;
+    height: 20px;
+    margin: 0;
+    /* TODO: this should be an image */
+    background-color: white;
+}
+
+/* 
+ * service box on frontpage 
+ */
+div.box h2.service {
+    /* title has no line */
+    border: 0;
+}
+
+div.tool.box.service {
+    margin-top: 0;
+    padding: 0;
 }
 
+div.tool.box.service div.row > div.col {
+    padding: 0;
+}
+div.tool.box.service div.search {
+    width: 200px;
+    height: 20px;
+    padding: 26px 0 26px 16px;
+    border-bottom: 1px solid #9fa0a7;
+}
+div.tool.box.service div.search.both {
+    height: 44px;
+    padding: 14px 0 14px 16px;
+}
+div.tool.box.service div.searchicon {
+    width: 38px;
+    height: 40px;
+    text-align: center;
+    padding: 16px;
+    border-bottom: 1px solid #9fa0a7;
+}
+div.tool.box.service div.icon {
+    width: 71px;
+    height: 70px;
+    text-align: center;
+    line-height: 2.5;
+    padding: 1px 0;
+    border-left: 1px solid #9fa0a7;
+}
+div.tool.box.service div.icon.first {
+    border-left: 0;
+    width: 70px;
+}
+div.tool.box.service div.searchbox {
+    display: block;
+}
+div.tool.box.service div.searchbox input.text {
+    width: 170px;
+    height: 17px;
+    font-size: 12px;
+    padding: 1px 3px;
+}
+div.tool.box.service div.searchbox input.submit {
+    height: 19px;
+    width: 19px;
+    padding: 0;
+    margin: 0;
+    vertical-align: bottom;
+}
+div.tool.box.service select.quickfinder {
+    width: 200px;
+    height: 19px;
+    font-size: 12px;
+    background-color: white;
+    margin-bottom: 5px;
+    border: 0;
+}
 /*
- * sources and websites
+ * sonstige boxen
  */
-div.box div.source,
-div.box div.website {
-	padding: 10px 0;
+div.box {
+    margin: 20px 0;
+    position: relative;
 }
 
-div.box div.source div.thumb,
-div.box div.website div.thumb {
-	background-color: #f8f8f8;
-	text-align: center;
+div.box h2 {
+    /* h2 is title with line */
+    padding-bottom: 5px;
+    border-bottom: 3px solid #dccbae;
+    margin-bottom: 5px;
+}
+
+div.box.line {
+    border-bottom: 1px solid #dccbae;
+}
+
+div.box h3 {
+    /* h3 is subtitle/type */
+    font-size: 12px;
+    color: #6a4d3c;
 }
 
-div.box div.source div.caption,
-div.box div.website div.caption {
-	font-size: 11px;
-	color: #9f917a;
+div.box h3+h2 {
+    /* directly over h2 */
+    margin-top: 0;
+}
+
+div.mini {
+    padding: 10px 0;
 }
 
-div.box div.source div.author,
-div.box div.website div.title {
+div.mini div.thumb {
+    background-color: #f8f8f8;
+    text-align: center;
+}
+
+div.mini div.type {
+    font-size: 11px;
+    color: #9f917a;
+}
+
+div.box div.source div.author,div.box div.website div.title {
     color: #3b4186;
 }
 
 div.box div.website div.description {
-	/* initially hidden */
-	display: none;	
+    /* initially hidden */
+    display: none;
 }
 
 div.box div.website.item {
-	min-height: 180px;
-	position: relative;
-	margin: 10px 0 0 0;
+    min-height: 180px;
+    position: relative;
+    margin: 10px 0 0 0;
 }
 
 div.box div.website.item div.fold {
-	position: absolute;
-	bottom: 0;
-	right: 0;
-	/* TODO: this should be an image */
-	background-color: #ee7f2d;
-	color: white;
-	font-size: 14px;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    /* TODO: this should be an image */
+    background-color: #ee7f2d;
+    color: white;
+    font-size: 14px;
+}
+
+/* paragraph with line */
+div.item {
+    padding-top: 5px;
+    padding-bottom: 5px;
+    border-bottom: 1px solid #dccbae;
+    line-height: 1.5;
+}
+
+/* slider buttons */
+div.box div.slider {
+    position: absolute;
+    top: 110px;
+    width: 16px;
+    height: 18px;
+}
+
+div.box div.slider.prev {
+    left: 0;
+}
+
+div.box div.slider.next {
+    right: 0;
+    text-align: right;
 }
 
 /* 
  * sidebar 
  */
 div.sidebar {
-	display: table-cell;
-	width: 220px;
+    display: table-cell;
+    width: 220px;
     border-top: 3px solid #dccbae;
-	background-color: white;
-	padding: 20px 8px 20px 0;
+    background-color: white;
+    padding: 20px 8px 20px 0;
 }
 
 div.sideblock h2 {
     font-size: 12px;
     margin-top: 20px;
     padding-bottom: 5px;
-	border-bottom: 3px solid #dccbae;
-	margin-bottom: 0;
+    border-bottom: 3px solid #dccbae;
+    margin-bottom: 0;
 }
+
 div.sideblock:first-child h2 {
-	margin-top: 0;
+    margin-top: 0;
 }
 
 div.sideblock h3 {
     font-size: 12px;
     margin-top: 5px;
     padding-bottom: 5px;
-	border-bottom: 1px solid #dccbae;
+    border-bottom: 1px solid #dccbae;
 }
 
 /*
  * footer
  */
-
 #footer {
-	position: relative;
+    position: relative;
     height: 50px;
     border-top: 1px solid #dccbae;
     padding-top: 8px;
@@ -654,18 +756,18 @@
 }
 
 #footer div.text {
-	display: inline-block;
-	color: #d45a00;
-	font-size: 11px;
+    display: inline-block;
+    color: #d45a00;
+    font-size: 11px;
 }
 
 #footer div.logo {
-	display: inline-block;
-	position: absolute;
-	right: 0;
+    display: inline-block;
+    position: absolute;
+    right: 0;
 }
 
 #footer div.logo img {
-	width: 204px;
-	height: 41px;
-}
+    width: 204px;
+    height: 41px;
+}
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/zpt/www/common_template.zpt	Thu Apr 18 20:39:01 2013 +0200
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
+    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+</head>
+<body>
+  <!-- common template snippets as METAL macros -->
+
+  <!-- full-row feature block -->
+  <div class="row teaser" metal:define-macro="feature_teaser"
+    tal:define="features python:here.getFeatures(); 
+                feature_num python:int(request.get('ff',len(features)-1)); 
+                feature python:features[feature_num];
+                feature_url python:feature.getUrl('%s/%s/features'%(root,secmap['news']));
+                teaser_path string:here/features/${feature/getTeaserPath};">
+    <!-- feature image and intro -->
+    <div class="col">
+      <div class="box teaser_image">
+        <div class="slider prev" tal:condition="python:feature_num>1">
+          <a tal:attributes="href python:'?ff=%s'%(feature_num-1)"><img tal:attributes="src string:$root/images/slider_prev.png"
+            alt="previous" /></a>
+        </div>
+        <a tal:attributes="href feature_url"> <img tal:attributes="src feature/getFrontpageImgUrl" width="593" height="351" />
+        </a>
+        <tal:block tal:condition="exists:python:path(teaser_path+'/macros/caption')">
+          <tal:block metal:use-macro="python:path(teaser_path+'/macros/caption')" />
+        </tal:block>
+      </div>
+    </div>
+    <div class="col">
+      <div class="box teaser_text">
+        <div class="feature_number" tal:content="feature_num|nothing" />
+        <div class="date" tal:content="feature/getDateString" />
+        <h3>
+          <metal:block metal:define-slot="topic_title">Current Research Topic</metal:block>
+        </h3>
+        <tal:block tal:condition="exists:python:path(teaser_path+'/macros/text')">
+          <tal:block tal:condition="exists:python:path(teaser_path+'/macros/text')"
+            metal:use-macro="python:path(teaser_path+'/macros/text')" />
+        </tal:block>
+        <p>
+          <a class="internal" tal:attributes="href feature_url"><metal:block metal:define-slot="topic_link">Current Research Topic</metal:block></a>
+        </p>
+        <p>
+          <a class="internal" tal:attributes="href string:$root/${secmap/news}/featurearchive.html"><metal:block
+              metal:define-slot="topic_archive">Research Topic Archive</metal:block></a>
+        </p>
+        <div class="slider next" tal:condition="python:feature_num<len(features)-1">
+          <a tal:attributes="href python:'?ff=%s'%(feature_num+1)"><img tal:attributes="src string:$root/images/slider_next.png"
+            alt="next" /></a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- feature -->
+
+</body>
+</html>