From 0ec477c849953d7872ae5cb834610dea74e2cc66 Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Thu, 28 Nov 2013 00:21:45 +0100
Subject: [PATCH 01/20] [responsive/portal] Hide parts of portal on small
 screens

---
 .../template/event/overall_header_head_append.html   |  5 ++++-
 .../template/portal/modules/news_compact_center.html | 10 +++++-----
 styles/prosilver/template/portal/portal_body.html    | 10 +++++-----
 styles/prosilver/theme/responsive.css                | 12 ++++++++++++
 4 files changed, 26 insertions(+), 11 deletions(-)
 create mode 100644 styles/prosilver/theme/responsive.css

diff --git a/styles/prosilver/template/event/overall_header_head_append.html b/styles/prosilver/template/event/overall_header_head_append.html
index 86922c9a..5d1e7fe1 100755
--- a/styles/prosilver/template/event/overall_header_head_append.html
+++ b/styles/prosilver/template/event/overall_header_head_append.html
@@ -1 +1,4 @@
-<!-- IF T_EXT_THEME_PATH --><link href="{T_EXT_THEME_PATH}portal.css" rel="stylesheet" type="text/css" /><!-- ENDIF -->
+<!-- IF T_EXT_THEME_PATH -->
+<link href="{T_EXT_THEME_PATH}portal.css" rel="stylesheet" type="text/css" />
+<link href="{T_EXT_THEME_PATH}responsive.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 1500px), only screen and (max-device-width: 1500px)" />
+<!-- ENDIF -->
diff --git a/styles/prosilver/template/portal/modules/news_compact_center.html b/styles/prosilver/template/portal/modules/news_compact_center.html
index 752e259c..a6f85bb0 100644
--- a/styles/prosilver/template/portal/modules/news_compact_center.html
+++ b/styles/prosilver/template/portal/modules/news_compact_center.html
@@ -12,12 +12,12 @@
 {$CC_BLOCK_H_L}
 	<dt id="n">{$TITLE}</dt>
 	<!-- IF S_DISPLAY_NEWS_RVS -->
-		<dd class="posts">{L_REPLIES}</dd>
-		<dd class="views">{L_VIEWS}</dd>
+		<dd class="posts responsive-portal-news" data-skip-responsive="true">{L_REPLIES}</dd>
+		<dd class="views responsive-portal-news" data-skip-responsive="true">{L_VIEWS}</dd>
 	<!-- ENDIF -->
 	<dd class="lastpost"><span>{L_LAST_POST}</span></dd>
 {$CC_BLOCK_H_R}
-<ul class="topiclist topics">
+<ul class="topiclist topics responsive-portal-news">
 <!-- ENDIF -->
 	<li class="row<!-- IF news_row.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">
 		<dl class="icon {news_row.TOPIC_IMG_STYLE}">
@@ -49,8 +49,8 @@
 				</div> <!-- \END <div class="list-inner"> -->
 			</dt>
 			<!-- IF S_DISPLAY_NEWS_RVS -->
-				<dd class="posts">{news_row.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
-				<dd class="views">{news_row.TOPIC_VIEWS} <dfn>{L_VIEWS}</dfn></dd>
+				<dd class="posts" data-skip-responsive="true">{news_row.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
+				<dd class="views" data-skip-responsive="true">{news_row.TOPIC_VIEWS} <dfn>{L_VIEWS}</dfn></dd>
 			<!-- ENDIF -->
 			<dd class="lastpost"><span><dfn>{L_LAST_POST}</dfn>{L_POST_BY_AUTHOR} {news_row.USERNAME_FULL_LAST} <!-- IF news_row.S_UNREAD_INFO --><a href="{news_row.U_VIEW_UNREAD}">{NEWEST_POST_IMG}</a><!-- ELSE --><a href="{news_row.U_LAST_COMMENTS}">{READ_POST_IMG}</a><!-- ENDIF --><br />
 				{news_row.LAST_POST_TIME}</span>
diff --git a/styles/prosilver/template/portal/portal_body.html b/styles/prosilver/template/portal/portal_body.html
index c22e3d96..688386e6 100644
--- a/styles/prosilver/template/portal/portal_body.html
+++ b/styles/prosilver/template/portal/portal_body.html
@@ -12,7 +12,7 @@
 
 <table id="portal-body">
 	<!-- IF S_TOP_COLUMN -->	
-	<tr>
+	<tr id="portal-top">
 	<!-- [+] top module area -->
 		<td colspan="3">
 			<!-- BEGIN modules_top -->
@@ -32,7 +32,7 @@
 	<tr>
 	<!-- [+] left module area -->
 		<!-- IF S_LEFT_COLUMN -->
-		<td style="width: {S_PORTAL_LEFT_COLUMN}px; padding-<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->left<!-- ELSE -->right<!-- ENDIF -->: {$BLOCK_DISTANCE};">
+		<td id="portal-left" style="width: {S_PORTAL_LEFT_COLUMN}px; padding-<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->left<!-- ELSE -->right<!-- ENDIF -->: {$BLOCK_DISTANCE};">
 			<!-- BEGIN modules_left -->
 				<!-- DEFINE $TEMPLATE_FILE = '{modules_left.TEMPLATE_FILE}' -->
 				<!-- DEFINE $IMAGE_SRC = '{modules_left.IMAGE_SRC}' -->
@@ -49,7 +49,7 @@
 
 	<!-- [+] center module area -->
 		<!-- IF S_CENTER_COLUMN -->
-		<td>
+		<td id="portal-center">
 			<!-- BEGIN modules_center -->
 				<!-- DEFINE $TEMPLATE_FILE = '{modules_center.TEMPLATE_FILE}' -->
 				<!-- DEFINE $IMAGE_SRC = '{modules_center.IMAGE_SRC}' -->
@@ -70,7 +70,7 @@
 
 	<!-- [+] right module area -->
 		<!-- IF S_RIGHT_COLUMN -->
-		<td style="width: {S_PORTAL_RIGHT_COLUMN}px; padding-<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->right<!-- ELSE -->left<!-- ENDIF -->: {$BLOCK_DISTANCE};">
+		<td id="portal-right" style="width: {S_PORTAL_RIGHT_COLUMN}px; padding-<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->right<!-- ELSE -->left<!-- ENDIF -->: {$BLOCK_DISTANCE};">
 			<!-- BEGIN modules_right -->
 				<!-- DEFINE $TEMPLATE_FILE = '{modules_right.TEMPLATE_FILE}' -->
 				<!-- DEFINE $IMAGE_SRC = '{modules_right.IMAGE_SRC}' -->
@@ -86,7 +86,7 @@
 	<!-- [-] right module area -->
 	</tr>
 	<!-- IF S_BOTTOM_COLUMN -->
-	<tr>
+	<tr id="portal-bottom">
 	<!-- [+] bottom module area -->
 			<td colspan="3">
 			<!-- BEGIN modules_bottom -->
diff --git a/styles/prosilver/theme/responsive.css b/styles/prosilver/theme/responsive.css
new file mode 100644
index 00000000..9e7a00a4
--- /dev/null
+++ b/styles/prosilver/theme/responsive.css
@@ -0,0 +1,12 @@
+@media only screen and (max-width: 900px), only screen and (max-device-width: 900px)
+{
+	#portal-body #portal-right { display: none !important; }
+}
+
+@media only screen and (max-width: 950px), only screen and (max-device-width: 950px)
+{
+	dd.responsive-portal-news { display: none !important; }
+	.responsive-portal-news dd.posts, .responsive-portal-news dd.views { display: none !important; }
+	.responsive-portal-news dt { width: 125% !important; }
+	dt#n { width: 125% !important; }
+}

From 614e4170f4e1ec9377706655a9c6626dc6c0d521 Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Thu, 28 Nov 2013 00:30:27 +0100
Subject: [PATCH 02/20] [responsive/portal] Improve look of compact news on
 lower widths

---
 .../template/event/overall_header_head_append.html         | 2 +-
 .../template/portal/modules/news_compact_center.html       | 2 +-
 styles/prosilver/theme/responsive.css                      | 7 ++++++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/styles/prosilver/template/event/overall_header_head_append.html b/styles/prosilver/template/event/overall_header_head_append.html
index 5d1e7fe1..9ba56982 100755
--- a/styles/prosilver/template/event/overall_header_head_append.html
+++ b/styles/prosilver/template/event/overall_header_head_append.html
@@ -1,4 +1,4 @@
 <!-- IF T_EXT_THEME_PATH -->
 <link href="{T_EXT_THEME_PATH}portal.css" rel="stylesheet" type="text/css" />
-<link href="{T_EXT_THEME_PATH}responsive.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 1500px), only screen and (max-device-width: 1500px)" />
+<link href="{T_EXT_THEME_PATH}responsive.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 950px), only screen and (max-device-width: 950px)" />
 <!-- ENDIF -->
diff --git a/styles/prosilver/template/portal/modules/news_compact_center.html b/styles/prosilver/template/portal/modules/news_compact_center.html
index a6f85bb0..d743e876 100644
--- a/styles/prosilver/template/portal/modules/news_compact_center.html
+++ b/styles/prosilver/template/portal/modules/news_compact_center.html
@@ -15,7 +15,7 @@
 		<dd class="posts responsive-portal-news" data-skip-responsive="true">{L_REPLIES}</dd>
 		<dd class="views responsive-portal-news" data-skip-responsive="true">{L_VIEWS}</dd>
 	<!-- ENDIF -->
-	<dd class="lastpost"><span>{L_LAST_POST}</span></dd>
+	<dd class="lastpost responsive-portal-news"><span>{L_LAST_POST}</span></dd>
 {$CC_BLOCK_H_R}
 <ul class="topiclist topics responsive-portal-news">
 <!-- ENDIF -->
diff --git a/styles/prosilver/theme/responsive.css b/styles/prosilver/theme/responsive.css
index 9e7a00a4..fdb720f3 100644
--- a/styles/prosilver/theme/responsive.css
+++ b/styles/prosilver/theme/responsive.css
@@ -1,4 +1,4 @@
-@media only screen and (max-width: 900px), only screen and (max-device-width: 900px)
+@media only screen and (max-width: 895px), only screen and (max-device-width: 895px)
 {
 	#portal-body #portal-right { display: none !important; }
 }
@@ -10,3 +10,8 @@
 	.responsive-portal-news dt { width: 125% !important; }
 	dt#n { width: 125% !important; }
 }
+
+@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
+{
+	.responsive-portal-news dd.lastpost { display: none !important; }
+}

From c4224fef73b418396c7b41735ed3c8732b478d3d Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Thu, 28 Nov 2013 02:41:47 +0100
Subject: [PATCH 03/20] [responsive/portal] Show content of left column in
 responsive layout

---
 styles/prosilver/theme/responsive.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/styles/prosilver/theme/responsive.css b/styles/prosilver/theme/responsive.css
index fdb720f3..66a2b480 100644
--- a/styles/prosilver/theme/responsive.css
+++ b/styles/prosilver/theme/responsive.css
@@ -15,3 +15,8 @@
 {
 	.responsive-portal-news dd.lastpost { display: none !important; }
 }
+
+@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
+{
+	#portal-left ul.topiclist dd { display: block !important; }
+}

From f00c59b9085b5da4989e4d279c700824743ecffa Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Thu, 28 Nov 2013 03:14:29 +0100
Subject: [PATCH 04/20] [responsive/portal] Make poll and whois online module
 responsive

---
 .../template/portal/modules/poll_center.html        |  4 ++--
 .../portal/modules/whois_online_center.html         |  2 +-
 styles/prosilver/theme/portal.css                   |  4 ++++
 styles/prosilver/theme/responsive.css               | 13 +++++++++++++
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/styles/prosilver/template/portal/modules/poll_center.html b/styles/prosilver/template/portal/modules/poll_center.html
index 7fa8771d..6f169458 100644
--- a/styles/prosilver/template/portal/modules/poll_center.html
+++ b/styles/prosilver/template/portal/modules/poll_center.html
@@ -11,7 +11,7 @@
 					<fieldset class="polls">
 					<!-- IF poll.S_POLL_HAS_OPTIONS -->
 					<!-- BEGIN poll_option -->
-						<dl class="<!-- IF poll.poll_option.POLL_OPTION_VOTED -->voted<!-- ENDIF -->"<!-- IF poll.poll_option.POLL_OPTION_VOTED --> title="{L_POLL_VOTED_OPTION}"<!-- ENDIF -->>
+						<dl class="<!-- IF poll.poll_option.POLL_OPTION_VOTED -->voted<!-- ENDIF --> portal-responsive-poll"<!-- IF poll.poll_option.POLL_OPTION_VOTED --> title="{L_POLL_VOTED_OPTION}"<!-- ENDIF -->>
 							<dt><!-- IF poll.S_CAN_VOTE --><label for="poll_{poll.TOPIC_ID}_vote_{poll.poll_option.POLL_OPTION_ID}">{poll.poll_option.POLL_OPTION_CAPTION}</label><!-- ELSE -->{poll.poll_option.POLL_OPTION_CAPTION}<!-- ENDIF --></dt>
 							<!-- IF poll.S_CAN_VOTE --><dd style="width: auto;"><!-- IF poll.S_IS_MULTI_CHOICE --><input type="checkbox" name="vote_id[]" id="poll_{poll.TOPIC_ID}_vote_{poll.poll_option.POLL_OPTION_ID}" value="{poll.poll_option.POLL_OPTION_ID}"<!-- IF poll.poll_option.POLL_OPTION_VOTED --> checked="checked"<!-- ENDIF --> /><!-- ELSE --><input type="radio" name="vote_id[]" id="poll_{poll.TOPIC_ID}_vote_{poll.poll_option.POLL_OPTION_ID}" value="{poll.poll_option.POLL_OPTION_ID}"<!-- IF poll.poll_option.POLL_OPTION_VOTED --> checked="checked"<!-- ENDIF --> /><!-- ENDIF --></dd><!-- ENDIF -->
 							<!-- IF poll.S_DISPLAY_RESULTS --><dd class="resultbar"><div class="<!-- IF poll.poll_option.POLL_OPTION_PCT < 20 -->pollbar1<!-- ELSEIF poll.poll_option.POLL_OPTION_PCT < 40 -->pollbar2<!-- ELSEIF poll.poll_option.POLL_OPTION_PCT < 60 -->pollbar3<!-- ELSEIF poll.poll_option.POLL_OPTION_PCT < 80 -->pollbar4<!-- ELSE -->pollbar5<!-- ENDIF -->" style="width:{poll.poll_option.POLL_OPTION_PERCENT};">{poll.poll_option.POLL_OPTION_RESULT}</div></dd>
@@ -25,7 +25,7 @@
 					<!-- IF poll.S_DISPLAY_RESULTS -->
 						<dl>
 							<dt>&nbsp;</dt>
-							<dd class="resultbar"><p style="font-size:1.0em;">{L_TOTAL_VOTES} : {poll.TOTAL_VOTES}</p></dd>
+							<dd class="resultbar"><p style="font-size:1.0em; width: 10em;">{L_TOTAL_VOTES} : {poll.TOTAL_VOTES}</p></dd>
 						</dl>
 					<!-- ENDIF -->
 
diff --git a/styles/prosilver/template/portal/modules/whois_online_center.html b/styles/prosilver/template/portal/modules/whois_online_center.html
index e58e2e0e..ef5ed7a8 100644
--- a/styles/prosilver/template/portal/modules/whois_online_center.html
+++ b/styles/prosilver/template/portal/modules/whois_online_center.html
@@ -1,7 +1,7 @@
 {$C_BLOCK_H_L}<!-- IF U_VIEWONLINE --><a href="{U_VIEWONLINE}">{$TITLE}</a><!-- ELSE -->{$TITLE}<!-- ENDIF -->{$C_BLOCK_H_R}
 	<ul class="topiclist bg1">
 		<li><dl><dt></dt>
-			<dd style="border-left:0px">
+			<dd class="portal-responsive-show" style="border-left:0px">
 				<p style="margin: 0 5px 0 5px;">{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> <br />{LOGGED_IN_USER_LIST}
 				<!-- IF PORTAL_LEGEND --><br /><em>{L_LEGEND}: {PORTAL_LEGEND}</em><!-- ENDIF --></p>
 			</dd>
diff --git a/styles/prosilver/theme/portal.css b/styles/prosilver/theme/portal.css
index acb502d1..4f298879 100644
--- a/styles/prosilver/theme/portal.css
+++ b/styles/prosilver/theme/portal.css
@@ -92,6 +92,10 @@ span.portal-corners-top-inner, span.portal-corners-bottom-inner{
 	padding: 1px 0 1px 12px;
 }
 
+#portal-body #viewpoll {
+	margin-left: 0px;
+}
+
 /**
 * margin spacing as in default prosilver for the forumlist
 */
diff --git a/styles/prosilver/theme/responsive.css b/styles/prosilver/theme/responsive.css
index 66a2b480..43d8d0d9 100644
--- a/styles/prosilver/theme/responsive.css
+++ b/styles/prosilver/theme/responsive.css
@@ -14,9 +14,22 @@
 @media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
 {
 	.responsive-portal-news dd.lastpost { display: none !important; }
+	.responsive-portal-news dt .list-inner { margin-right: 0px !important; }
+	.responsive-portal-news dt { width: 100% !important; }
+	dt#n { width: 100% !important; }
+
+	.portal-responsive-poll .resultbar {
+		display: none !important;
+	}
+	.portal-responsive-poll dt { width: 45% !important; }
+	.portal-responsive-poll dd {
+		width: 45% !important;
+		float: right !important;
+	}
 }
 
 @media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
 {
 	#portal-left ul.topiclist dd { display: block !important; }
+	.portal-responsive-show { display: block !important; }
 }

From a9d3d84b36a883cf49b57ff880ee7b5b3f4d4887 Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Thu, 28 Nov 2013 03:22:43 +0100
Subject: [PATCH 05/20] [responsive/portal] Make recent module responsive

---
 .../template/portal/modules/recent_center.html         | 10 +++++-----
 styles/prosilver/theme/responsive.css                  |  1 +
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/styles/prosilver/template/portal/modules/recent_center.html b/styles/prosilver/template/portal/modules/recent_center.html
index 2f470b4e..703232f7 100644
--- a/styles/prosilver/template/portal/modules/recent_center.html
+++ b/styles/prosilver/template/portal/modules/recent_center.html
@@ -5,16 +5,16 @@
 	<div class="portal-navigation">
 	<ul class="topiclist bg1">
 		<li><dl><dt></dt>
-			<dd style="border-left:0px; width:100%">
+			<dd class="portal-responsive-show" style="border-left:0px; width:100%">
 			<table style="width: 100%;">
 			<tr class="menutitle">
-				<!-- IF .latest_announcements --><td><strong>{L_PORTAL_RECENT_ANN}</strong></td><!-- ENDIF -->
-				<!-- IF .latest_hot_topics --><td><strong>{L_PORTAL_RECENT_HOT_TOPIC}</strong></td><!-- ENDIF -->
+				<!-- IF .latest_announcements --><td class="portal-responsive-hide"><strong>{L_PORTAL_RECENT_ANN}</strong></td><!-- ENDIF -->
+				<!-- IF .latest_hot_topics --><td class="portal-responsive-hide"><strong>{L_PORTAL_RECENT_HOT_TOPIC}</strong></td><!-- ENDIF -->
 				<!-- IF .latest_topics --><td><strong>{L_PORTAL_RECENT_TOPIC}</strong></td><!-- ENDIF -->
 			</tr>
 			<tr>
 				<!-- IF .latest_announcements -->
-				<td class="row1" style="width: 33%; vertical-align: top;">
+				<td class="row1 portal-responsive-hide" style="width: 33%; vertical-align: top;">
 					<span class="gensmall">
 					<!-- BEGIN latest_announcements -->
 								<a href="{latest_announcements.U_VIEW_TOPIC}" title="{latest_announcements.FULL_TITLE}">{latest_announcements.TITLE}</a>
@@ -23,7 +23,7 @@
 				</td>
 				<!-- ENDIF -->
 				<!-- IF .latest_hot_topics -->
-				<td class="row1" style="width: 33%; vertical-align: top;">
+				<td class="row1 portal-responsive-hide" style="width: 33%; vertical-align: top;">
 					<span class="gensmall">
 					<!-- BEGIN latest_hot_topics -->
 						<a href="{latest_hot_topics.U_VIEW_TOPIC}" title="{latest_hot_topics.FULL_TITLE}">{latest_hot_topics.TITLE}</a>
diff --git a/styles/prosilver/theme/responsive.css b/styles/prosilver/theme/responsive.css
index 43d8d0d9..4a87ea12 100644
--- a/styles/prosilver/theme/responsive.css
+++ b/styles/prosilver/theme/responsive.css
@@ -32,4 +32,5 @@
 {
 	#portal-left ul.topiclist dd { display: block !important; }
 	.portal-responsive-show { display: block !important; }
+	.portal-responsive-hide { display: none !important; }
 }

From 51e6bc742f543e5900b7b1511e331b4aac3c2e41 Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Thu, 28 Nov 2013 11:41:37 +0100
Subject: [PATCH 06/20] [responsive/portal] Make forumlist responsive

---
 styles/prosilver/theme/responsive.css | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/styles/prosilver/theme/responsive.css b/styles/prosilver/theme/responsive.css
index 4a87ea12..4a2abd8a 100644
--- a/styles/prosilver/theme/responsive.css
+++ b/styles/prosilver/theme/responsive.css
@@ -3,12 +3,15 @@
 	#portal-body #portal-right { display: none !important; }
 }
 
-@media only screen and (max-width: 950px), only screen and (max-device-width: 950px)
+dd.responsive-portal-news { display: none !important; }
+.responsive-portal-news dd.posts, .responsive-portal-news dd.views { display: none !important; }
+.responsive-portal-news dt { width: 125% !important; }
+dt#n { width: 125% !important; }
+
+@media only screen and (max-width: 800px), only screen and (max-device-width: 800px)
 {
-	dd.responsive-portal-news { display: none !important; }
-	.responsive-portal-news dd.posts, .responsive-portal-news dd.views { display: none !important; }
-	.responsive-portal-news dt { width: 125% !important; }
-	dt#n { width: 125% !important; }
+	.topiclist .topics, .topiclist .posts { display: none !important; }
+	#portal-forumlist dl.icon dt { width: 125% !important; }
 }
 
 @media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
@@ -26,6 +29,7 @@
 		width: 45% !important;
 		float: right !important;
 	}
+	#portal-forumlist dl.icon dt { width: 100% !important; }
 }
 
 @media only screen and (max-width: 700px), only screen and (max-device-width: 700px)

From f52d111d48350b57ddb309f091bf0f70699eb16c Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Thu, 28 Nov 2013 11:48:49 +0100
Subject: [PATCH 07/20] [responsive/portal] Make donations module responsive

---
 styles/prosilver/template/portal/modules/donation_center.html | 4 ++--
 styles/prosilver/theme/responsive.css                         | 4 ----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/styles/prosilver/template/portal/modules/donation_center.html b/styles/prosilver/template/portal/modules/donation_center.html
index 4544503d..9c5363c7 100644
--- a/styles/prosilver/template/portal/modules/donation_center.html
+++ b/styles/prosilver/template/portal/modules/donation_center.html
@@ -1,11 +1,11 @@
 {$C_BLOCK_H_L}{$TITLE}{$C_BLOCK_H_R}
 	<ul class="topiclist bg1">
 		<li><dl>
-			<dd style="border-left: 0px">
+			<dd class="portal-responsive-show" style="border-left: 0px">
 				<div style="text-align: left; margin: 5px 5px 5px 5px">
 			<strong>{SITENAME}</strong> {L_DONATION_TEXT}
 			<br />
-			<div style="float: left; padding: 5px 5px 5px 5px"><img src="{T_THEME_PATH}/images/portal/paypal.gif" alt="" /></div>
+			<div style="float: left; padding: 5px 5px 5px 5px"><img src="{T_EXT_THEME_PATH}/images/portal/paypal.gif" alt="" /></div>
 		<form action="https://www.paypal.com/cgi-bin/webscr" method="post" style="padding-top:15px">
 		<div>
 			<input type="hidden" name="cmd" value="_xclick" />
diff --git a/styles/prosilver/theme/responsive.css b/styles/prosilver/theme/responsive.css
index 4a2abd8a..3cd78347 100644
--- a/styles/prosilver/theme/responsive.css
+++ b/styles/prosilver/theme/responsive.css
@@ -30,10 +30,6 @@ dt#n { width: 125% !important; }
 		float: right !important;
 	}
 	#portal-forumlist dl.icon dt { width: 100% !important; }
-}
-
-@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
-{
 	#portal-left ul.topiclist dd { display: block !important; }
 	.portal-responsive-show { display: block !important; }
 	.portal-responsive-hide { display: none !important; }

From 19a9630b2bc5ef83cc4470a1bfa80604ba49f8cf Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Sun, 1 Dec 2013 22:10:19 +0100
Subject: [PATCH 08/20] [responsive/portal] Center clock in module block

---
 styles/prosilver/template/portal/modules/clock_side.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/prosilver/template/portal/modules/clock_side.html b/styles/prosilver/template/portal/modules/clock_side.html
index 0f0e9478..602d8caf 100644
--- a/styles/prosilver/template/portal/modules/clock_side.html
+++ b/styles/prosilver/template/portal/modules/clock_side.html
@@ -1,5 +1,5 @@
 {$LR_BLOCK_H_L}<!-- IF $S_BLOCK_ICON --><img src="{$IMAGE_SRC}" width="{$IMAGE_WIDTH}" height="{$IMAGE_HEIGHT}" alt="" />&nbsp;<!-- ENDIF -->{$TITLE}{$LR_BLOCK_H_R}
-			<div style="text-align: center; min-height: 5em; margin: 0 auto;">
+			<div style="text-align: center; min-height: 5em; margin: 0 10%;">
 			<div id="portal-clock" style="margin-top: 10px; margin-bottom: 10px;">
 				<div id="portal-clock-back">
 					<div id="portal-clock-back-upper">

From 963c5d60b883ec6f04ae8ff193e6b09405d36383 Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Sun, 1 Dec 2013 22:38:43 +0100
Subject: [PATCH 09/20] [responsive/portal] Use CSS classes for portal-clock

This will get rid of some inline CSS and enable multiple clocks on the portal.
Multiple clocks don't necessarily make sense though.
---
 .../template/portal/modules/clock_side.html   | 42 +++++-----
 .../template/portal/modules/portal_clock.js   | 10 +--
 styles/prosilver/theme/portal.css             | 80 +++++++++++--------
 3 files changed, 72 insertions(+), 60 deletions(-)

diff --git a/styles/prosilver/template/portal/modules/clock_side.html b/styles/prosilver/template/portal/modules/clock_side.html
index 602d8caf..e7adb227 100644
--- a/styles/prosilver/template/portal/modules/clock_side.html
+++ b/styles/prosilver/template/portal/modules/clock_side.html
@@ -1,32 +1,32 @@
 {$LR_BLOCK_H_L}<!-- IF $S_BLOCK_ICON --><img src="{$IMAGE_SRC}" width="{$IMAGE_WIDTH}" height="{$IMAGE_HEIGHT}" alt="" />&nbsp;<!-- ENDIF -->{$TITLE}{$LR_BLOCK_H_R}
-			<div style="text-align: center; min-height: 5em; margin: 0 10%;">
-			<div id="portal-clock" style="margin-top: 10px; margin-bottom: 10px;">
-				<div id="portal-clock-back">
-					<div id="portal-clock-back-upper">
-						<img src="{T_EXT_THEME_PATH}/images/portal/spacer_up.png" alt="" style="float: left;" /><div id="portal-clock-back-hours-up"></div>
-						<div id="portal-clock-back-minutes-up-left" ></div><div id="portal-clock-back-minutes-up-right"></div>
-						<div id="portal-clock-back-seconds-up-left"></div><div id="portal-clock-back-seconds-up-right"></div>
+		<div class="portal-clock-wrapper">
+			<div class="portal-clock">
+				<div class="portal-clock-back">
+					<div class="portal-clock-back-upper">
+						<img src="{T_EXT_THEME_PATH}/images/portal/spacer_up.png" alt="" /><div class="portal-clock-back-hours-up"></div>
+						<div class="portal-clock-back-minutes-up-left" ></div><div class="portal-clock-back-minutes-up-right"></div>
+						<div class="portal-clock-back-seconds-up-left"></div><div class="portal-clock-back-seconds-up-right"></div>
 					</div>
-					<div id="portal-clock-back-lower">
-						<img src="{T_EXT_THEME_PATH}/images/portal/spacer_down.png" alt="" style="float: left;" /><div id="portal-clock-back-hours-down"></div>
-						<div id="portal-clock-back-minutes-down-left"></div><div id="portal-clock-back-minutes-down-right"></div>
-						<div id="portal-clock-back-seconds-down-left"></div><div id="portal-clock-back-seconds-down-right"></div>
+					<div class="portal-clock-back-lower">
+						<img src="{T_EXT_THEME_PATH}/images/portal/spacer_down.png" alt="" /><div class="portal-clock-back-hours-down"></div>
+						<div class="portal-clock-back-minutes-down-left"></div><div class="portal-clock-back-minutes-down-right"></div>
+						<div class="portal-clock-back-seconds-down-left"></div><div class="portal-clock-back-seconds-down-right"></div>
 					</div>
 				</div>
-				<div id="portal-clock-front">
-					<div id="portal-clock-front-upper">
-						<img src="{T_EXT_THEME_PATH}/images/portal/spacer_up.png" alt="" style="float: left;" /><div id="portal-clock-front-hours-up"></div>
-						<div id="portal-clock-front-minutes-up-left"></div><div id="portal-clock-front-minutes-up-right"></div>
-						<div id="portal-clock-front-seconds-up-left"></div><div id="portal-clock-front-seconds-up-right"></div>
+				<div class="portal-clock-front">
+					<div class="portal-clock-front-upper">
+						<img src="{T_EXT_THEME_PATH}/images/portal/spacer_up.png" alt="" /><div class="portal-clock-front-hours-up"></div>
+						<div class="portal-clock-front-minutes-up-left"></div><div class="portal-clock-front-minutes-up-right"></div>
+						<div class="portal-clock-front-seconds-up-left"></div><div class="portal-clock-front-seconds-up-right"></div>
 					</div>
-					<div id="portal-clock-front-lower">
-						<img src="{T_EXT_THEME_PATH}/images/portal/spacer_down.png" alt="" style="float: left;" /><div id="portal-clock-front-hours-down"></div>
-						<div id="portal-clock-front-minutes-down-left"></div><div id="portal-clock-front-minutes-down-right"></div>
-						<div id="portal-clock-front-seconds-down-left"></div><div id="portal-clock-front-seconds-down-right"></div>
+					<div class="portal-clock-front-lower">
+						<img src="{T_EXT_THEME_PATH}/images/portal/spacer_down.png" alt="" /><div class="portal-clock-front-hours-down"></div>
+						<div class="portal-clock-front-minutes-down-left"></div><div class="portal-clock-front-minutes-down-right"></div>
+						<div class="portal-clock-front-seconds-down-left"></div><div class="portal-clock-front-seconds-down-right"></div>
 					</div>
 				</div>
 			</div>
-			</div>
+		</div>
 <!-- INCLUDEJS portal/modules/jquery.easing.1.3.js -->
 <!-- INCLUDEJS portal/modules/portal_clock.js -->
 {$LR_BLOCK_F_L}{$LR_BLOCK_F_R}
diff --git a/styles/prosilver/template/portal/modules/portal_clock.js b/styles/prosilver/template/portal/modules/portal_clock.js
index a5279c65..7ca0b85d 100644
--- a/styles/prosilver/template/portal/modules/portal_clock.js
+++ b/styles/prosilver/template/portal/modules/portal_clock.js
@@ -127,27 +127,27 @@ phpbb.b3pClock = function() {
 	var secR = now.getSeconds() % 10;
 
 	if (hour !== hour_cur) {
-		phpbb.b3pFlipClock('#portal-clock-front-hours-up', '#portal-clock-front-hours-down', hour, 'double');
+		phpbb.b3pFlipClock('.portal-clock-front-hours-up', '.portal-clock-front-hours-down', hour, 'double');
 		hour_cur = hour;
 	}
 
 	if (minR !== minR_cur) {
-		phpbb.b3pFlipClock('#portal-clock-front-minutes-up-right', '#portal-clock-front-minutes-down-right', minR, 'single');
+		phpbb.b3pFlipClock('.portal-clock-front-minutes-up-right', '.portal-clock-front-minutes-down-right', minR, 'single');
 		minR_cur = minR;
 	}
 
 	if (minL !== minL_cur) {
-		phpbb.b3pFlipClock('#portal-clock-front-minutes-up-left', '#portal-clock-front-minutes-down-left', minL, 'single');
+		phpbb.b3pFlipClock('.portal-clock-front-minutes-up-left', '.portal-clock-front-minutes-down-left', minL, 'single');
 		minL_cur = minL;
 	}
 
 	if (secR !== secR_cur) {
-		phpbb.b3pFlipClock('#portal-clock-front-seconds-up-right', '#portal-clock-front-seconds-down-right', secR, 'single');
+		phpbb.b3pFlipClock('.portal-clock-front-seconds-up-right', '.portal-clock-front-seconds-down-right', secR, 'single');
 		secR_cur = secR;
 	}
 
 	if (secL !== secL_cur) {
-		phpbb.b3pFlipClock('#portal-clock-front-seconds-up-left', '#portal-clock-front-seconds-down-left', secL, 'single');
+		phpbb.b3pFlipClock('.portal-clock-front-seconds-up-left', '.portal-clock-front-seconds-down-left', secL, 'single');
 		secL_cur = secL;
 	}
 };
diff --git a/styles/prosilver/theme/portal.css b/styles/prosilver/theme/portal.css
index 4f298879..c5215593 100644
--- a/styles/prosilver/theme/portal.css
+++ b/styles/prosilver/theme/portal.css
@@ -112,48 +112,60 @@ span.portal-corners-top-inner, span.portal-corners-bottom-inner{
 
 /* Portal clock
 -------------------------------------- */
-#portal-clock {
-	position: relative;
-	width: 100%;
+.portal-clock-wrapper {
+	text-align: center;
+	min-height: 5em;
+	margin: 0 10%;
 }
 
-#portal-clock-front, #portal-clock-back {
+.portal-clock {
+	position: relative;
+	width: 100%;
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
+
+.portal-clock * img {
+	float: left;
+}
+
+.portal-clock-front, .portal-clock-back {
 	position: absolute;
 	top: 0px;
 }
 
-#portal-clock-front-upper div {
+.portal-clock-front-upper div {
 	height: 21px;
 	position: absolute;
 	vertical-align: bottom;
 	visibility: hidden;
 }
 
-#portal-clock-front-lower div {
+.portal-clock-front-lower div {
 	height: 20px;
 	position: absolute;
 	vertical-align: top;
 	visibility: hidden;
 }
 
-#portal-clock-back-upper div {
+.portal-clock-back-upper div {
 	position: absolute;
 	vertical-align: bottom;
 }
 
-#portal-clock-back-lower div {
+.portal-clock-back-lower div {
 	position: absolute;
 	vertical-align: top;
 }
 
-#portal-clock-back-seconds-up-left, #portal-clock-back-seconds-up-right,
-#portal-clock-front-minutes-up-left, #portal-clock-front-minutes-up-right,
-#portal-clock-back-minutes-up-left, #portal-clock-back-minutes-up-right,
-#portal-clock-front-seconds-up-left, #portal-clock-front-seconds-up-right,
-#portal-clock-back-minutes-down-left, #portal-clock-back-minutes-down-right,
-#portal-clock-back-seconds-down-left, #portal-clock-back-seconds-down-right,
-#portal-clock-front-minutes-down-left, #portal-clock-front-minutes-down-right,
-#portal-clock-front-seconds-down-left, #portal-clock-front-seconds-down-right {
+.portal-clock-back-seconds-up-left, .portal-clock-back-seconds-up-right,
+.portal-clock-front-minutes-up-left, .portal-clock-front-minutes-up-right,
+.portal-clock-back-minutes-up-left, .portal-clock-back-minutes-up-right,
+.portal-clock-front-seconds-up-left, .portal-clock-front-seconds-up-right,
+.portal-clock-back-minutes-down-left, .portal-clock-back-minutes-down-right,
+.portal-clock-back-seconds-down-left, .portal-clock-back-seconds-down-right,
+.portal-clock-front-minutes-down-left, .portal-clock-front-minutes-down-right,
+.portal-clock-front-seconds-down-left, .portal-clock-front-seconds-down-right {
 	width: 21px;
 	height: 21px;
 	background-position: 0 0;
@@ -162,91 +174,91 @@ span.portal-corners-top-inner, span.portal-corners-bottom-inner{
 
 /* Minutes start
 -------------------------------------- */
-#portal-clock-back-minutes-up-left{
+.portal-clock-back-minutes-up-left{
 	background-position: 0 0;
 	margin: 0 0 0 43px;
 }
 
-#portal-clock-back-minutes-up-right {
+.portal-clock-back-minutes-up-right {
 	background-position: 0 -43px;
 	margin: 0 0 0 64px;
 }
 
-#portal-clock-front-minutes-up-left {
+.portal-clock-front-minutes-up-left {
 	background-position: 0 0;
 	margin: 0 0 0 43px;
 }
 
-#portal-clock-front-minutes-up-right {
+.portal-clock-front-minutes-up-right {
 	background-position: 0 -43px;
 	margin: 0 0 0 63px;
 }
 
-#portal-clock-back-minutes-down-left{
+.portal-clock-back-minutes-down-left{
 	background-position: 0 -22px;
 	margin: 21px 0 0 43px;
 }
 
-#portal-clock-back-minutes-down-right {
+.portal-clock-back-minutes-down-right {
 	background-position: 0 -65px;
 	margin: 21px 0 0 64px;
 }
 
-#portal-clock-front-minutes-down-left {
+.portal-clock-front-minutes-down-left {
 	background-position: 0 -22px;
 	margin: 21px 0 0 42px;
 }
 
-#portal-clock-front-minutes-down-right {
+.portal-clock-front-minutes-down-right {
 	background-position: 0 -65px;
 	margin: 21px 0 0 63px;
 }
 
 /* Seconds start
 ---------------------------------------- */
-#portal-clock-back-seconds-up-left{
+.portal-clock-back-seconds-up-left{
 	background-position: 0 0;
 	margin: 0 0 0 85px;
 }
 
-#portal-clock-back-seconds-up-right {
+.portal-clock-back-seconds-up-right {
 	background-position: 0 -43px;
 	margin: 0 0 0 106px;
 }
 
-#portal-clock-front-seconds-up-left {
+.portal-clock-front-seconds-up-left {
 	background-position: 0 0;
 	margin: 0 0 0 84px;
 }
 
-#portal-clock-front-seconds-up-right {
+.portal-clock-front-seconds-up-right {
 	background-position: 0 -43px;
 	margin: 0 0 0 105px;
 }
 
-#portal-clock-back-seconds-down-left{
+.portal-clock-back-seconds-down-left{
 	background-position: 0 -22px;
 	margin: 21px 0 0 85px;
 }
 
-#portal-clock-back-seconds-down-right {
+.portal-clock-back-seconds-down-right {
 	background-position: 0 -65px;
 	margin: 21px 0 0 106px;
 }
 
-#portal-clock-front-seconds-down-left {
+.portal-clock-front-seconds-down-left {
 	background-position: 0 -22px;
 	margin: 21px 0 0 84px;
 }
 
-#portal-clock-front-seconds-down-right {
+.portal-clock-front-seconds-down-right {
 	background-position: 0 -65px;
 	margin: 21px 0 0 105px;
 }
 
 /* Hours start
 ---------------------------------------- */
-#portal-clock-back-hours-up, #portal-clock-front-hours-up {
+.portal-clock-back-hours-up, .portal-clock-front-hours-up {
 	width: 42px;
 	height: 21px;
 	background: url(./images/portal/portal_clock_double.png) no-repeat;
@@ -256,7 +268,7 @@ span.portal-corners-top-inner, span.portal-corners-bottom-inner{
 	margin: 0 0 0 0;
 }
 
-#portal-clock-back-hours-down, #portal-clock-front-hours-down {
+.portal-clock-back-hours-down, .portal-clock-front-hours-down {
 	width: 42px;
 	height: 20px;
 	background: url(./images/portal/portal_clock_double.png) no-repeat;

From 48f6d9b8e1855629a4f651ffbe11112b9e200e22 Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Sun, 1 Dec 2013 22:54:57 +0100
Subject: [PATCH 10/20] [responsive/portal] Fix validation issues in donation
 center

---
 styles/prosilver/template/portal/modules/donation_center.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/styles/prosilver/template/portal/modules/donation_center.html b/styles/prosilver/template/portal/modules/donation_center.html
index 9c5363c7..d0396fd3 100644
--- a/styles/prosilver/template/portal/modules/donation_center.html
+++ b/styles/prosilver/template/portal/modules/donation_center.html
@@ -1,6 +1,6 @@
 {$C_BLOCK_H_L}{$TITLE}{$C_BLOCK_H_R}
 	<ul class="topiclist bg1">
-		<li><dl>
+		<li><dl><dt></dt>
 			<dd class="portal-responsive-show" style="border-left: 0px">
 				<div style="text-align: left; margin: 5px 5px 5px 5px">
 			<strong>{SITENAME}</strong> {L_DONATION_TEXT}
@@ -16,7 +16,7 @@
 			<input type="hidden" name="bn" value="PP-DonationsBF" />
 			<input type="hidden" name="tax" value="0" />
 			<!-- IF PAY_CUSTOM_CENTER -->
-			<input type="hidden" name="custom" value="{PAY_CUSTOM_CENTER}">
+			<input type="hidden" name="custom" value="{PAY_CUSTOM_CENTER}" />
 			<!-- ENDIF -->
 			<input type="text" tabindex="11" name="amount" size="10" maxlength="6" value="" class="inputbox autowidth" title="{L_PAY_MSG}" />
 			<select name="currency_code" class="autowidth">

From 61af6d6569407c088ed668ee2ef3216d2ea9f8a3 Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Sun, 1 Dec 2013 22:55:25 +0100
Subject: [PATCH 11/20] [responsive/portal] Include missing functions for
 forumlist module

---
 modules/forumlist.php | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/modules/forumlist.php b/modules/forumlist.php
index ae050dd7..5f7d5aaa 100644
--- a/modules/forumlist.php
+++ b/modules/forumlist.php
@@ -90,7 +90,11 @@ class forumlist extends module_base
 	*/
 	public function get_template_center($module_id)
 	{
-		display_forums('', $this->config['load_moderators'], false);
+		if (!function_exists('display_forums'))
+		{
+			include($this->phpbb_root_path . 'includes/functions_display.' . $this->php_ext);
+		}
+		\display_forums('', $this->config['load_moderators'], false);
 
 		$this->template->assign_vars(array(
 			'FORUM_IMG'			=> $this->user->img('forum_read', 'NO_NEW_POSTS'),

From 161cc6c20946c6098aa9302f52b1c6582b7a93dd Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Sun, 1 Dec 2013 22:56:18 +0100
Subject: [PATCH 12/20] [responsive/portal] Get rid of <table> in
 portal_body.html

---
 .../template/portal/portal_body.html          | 74 ++++++++++---------
 styles/prosilver/theme/portal.css             | 23 ++++++
 2 files changed, 62 insertions(+), 35 deletions(-)

diff --git a/styles/prosilver/template/portal/portal_body.html b/styles/prosilver/template/portal/portal_body.html
index 688386e6..67bfb358 100644
--- a/styles/prosilver/template/portal/portal_body.html
+++ b/styles/prosilver/template/portal/portal_body.html
@@ -10,11 +10,12 @@
 	</div>
 <!-- ENDIF -->
 
-<table id="portal-body">
+<div id="portal-body">
 	<!-- IF S_TOP_COLUMN -->	
-	<tr id="portal-top">
+	<div id="portal-top">
 	<!-- [+] top module area -->
-		<td colspan="3">
+		<ul>
+			<li>
 			<!-- BEGIN modules_top -->
 				<!-- DEFINE $TEMPLATE_FILE = '{modules_top.TEMPLATE_FILE}' -->
 				<!-- DEFINE $IMAGE_SRC = '{modules_top.IMAGE_SRC}' -->
@@ -25,31 +26,15 @@
 				<!-- DEFINE $MODULE_ID = '{modules_top.MODULE_ID}' -->
 				<!-- INCLUDE {$TEMPLATE_FILE} -->
 			<!-- END modules_top -->
-		</td>
+			</li>
+		</ul>
 	<!-- [-] top module area -->
-	</tr>
+	</div>
 	<!-- ENDIF -->
-	<tr>
-	<!-- [+] left module area -->
-		<!-- IF S_LEFT_COLUMN -->
-		<td id="portal-left" style="width: {S_PORTAL_LEFT_COLUMN}px; padding-<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->left<!-- ELSE -->right<!-- ENDIF -->: {$BLOCK_DISTANCE};">
-			<!-- BEGIN modules_left -->
-				<!-- DEFINE $TEMPLATE_FILE = '{modules_left.TEMPLATE_FILE}' -->
-				<!-- DEFINE $IMAGE_SRC = '{modules_left.IMAGE_SRC}' -->
-				<!-- DEFINE $IMAGE_WIDTH = '{modules_left.IMAGE_WIDTH}' -->
-				<!-- DEFINE $IMAGE_HEIGHT = '{modules_left.IMAGE_HEIGHT}' -->
-				<!-- DEFINE $CUSTOM_CODE = '{modules_left.CODE}' -->
-				<!-- DEFINE $TITLE = '{modules_left.TITLE}' -->
-				<!-- DEFINE $MODULE_ID = '{modules_left.MODULE_ID}' -->
-				<!-- INCLUDE {$TEMPLATE_FILE} -->
-			<!-- END modules_left -->
-		</td>
-		<!-- ENDIF -->
-	<!-- [-] left module area -->
-
 	<!-- [+] center module area -->
-		<!-- IF S_CENTER_COLUMN -->
-		<td id="portal-center">
+	<!-- IF S_CENTER_COLUMN -->
+	<div id="portal-center-wrapper">
+		<div id="portal-center" style="margin: 0 {S_PORTAL_LEFT_COLUMN}px 0 {S_PORTAL_RIGHT_COLUMN}px; padding: 0 {$BLOCK_DISTANCE};">
 			<!-- BEGIN modules_center -->
 				<!-- DEFINE $TEMPLATE_FILE = '{modules_center.TEMPLATE_FILE}' -->
 				<!-- DEFINE $IMAGE_SRC = '{modules_center.IMAGE_SRC}' -->
@@ -64,13 +49,30 @@
 				<br />
 				<!-- INCLUDE portal/modules/jumpbox.html -->
 			<!-- ENDIF -->
-		</td>
-		<!-- ENDIF -->
+		</div>
+	</div>
+	<!-- ENDIF -->
 	<!-- [-] center module area -->
+	<!-- [+] left module area -->
+		<!-- IF S_LEFT_COLUMN -->
+		<div id="portal-left" style="width: {S_PORTAL_LEFT_COLUMN}px;">
+			<!-- BEGIN modules_left -->
+				<!-- DEFINE $TEMPLATE_FILE = '{modules_left.TEMPLATE_FILE}' -->
+				<!-- DEFINE $IMAGE_SRC = '{modules_left.IMAGE_SRC}' -->
+				<!-- DEFINE $IMAGE_WIDTH = '{modules_left.IMAGE_WIDTH}' -->
+				<!-- DEFINE $IMAGE_HEIGHT = '{modules_left.IMAGE_HEIGHT}' -->
+				<!-- DEFINE $CUSTOM_CODE = '{modules_left.CODE}' -->
+				<!-- DEFINE $TITLE = '{modules_left.TITLE}' -->
+				<!-- DEFINE $MODULE_ID = '{modules_left.MODULE_ID}' -->
+				<!-- INCLUDE {$TEMPLATE_FILE} -->
+			<!-- END modules_left -->
+		</div>
+		<!-- ENDIF -->
+	<!-- [-] left module area -->
 
 	<!-- [+] right module area -->
 		<!-- IF S_RIGHT_COLUMN -->
-		<td id="portal-right" style="width: {S_PORTAL_RIGHT_COLUMN}px; padding-<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->right<!-- ELSE -->left<!-- ENDIF -->: {$BLOCK_DISTANCE};">
+		<div id="portal-right" style="width: {S_PORTAL_RIGHT_COLUMN}px; margin-left: -{S_PORTAL_RIGHT_COLUMN}px;">
 			<!-- BEGIN modules_right -->
 				<!-- DEFINE $TEMPLATE_FILE = '{modules_right.TEMPLATE_FILE}' -->
 				<!-- DEFINE $IMAGE_SRC = '{modules_right.IMAGE_SRC}' -->
@@ -81,14 +83,15 @@
 				<!-- DEFINE $MODULE_ID = '{modules_right.MODULE_ID}' -->
 				<!-- INCLUDE {$TEMPLATE_FILE} -->
 			<!-- END modules_right -->
-		</td>
+		</div>
 		<!-- ENDIF -->
 	<!-- [-] right module area -->
-	</tr>
+	<br style="clear: both" />
 	<!-- IF S_BOTTOM_COLUMN -->
-	<tr id="portal-bottom">
+	<div id="portal-bottom">
 	<!-- [+] bottom module area -->
-			<td colspan="3">
+		<ul>
+			<li>
 			<!-- BEGIN modules_bottom -->
 				<!-- DEFINE $TEMPLATE_FILE = '{modules_bottom.TEMPLATE_FILE}' -->
 				<!-- DEFINE $IMAGE_SRC = '{modules_bottom.IMAGE_SRC}' -->
@@ -99,11 +102,12 @@
 				<!-- DEFINE $MODULE_ID = '{modules_bottom.MODULE_ID}' -->
 				<!-- INCLUDE {$TEMPLATE_FILE} -->
 			<!-- END modules_bottom -->
-		</td>
+			</li>
+		</ul>
 	<!-- [-] bottom module area -->
-	</tr>
+	</div>
 	<!-- ENDIF -->
-</table>
+</div>
 
 <!--// board3 Portal by www.board3.de //-->
 <div class="copyright">Powered by <a href="http://www.board3.de/">Board3 Portal</a> &copy; 2009 - 2013 Board3 Group</div>
diff --git a/styles/prosilver/theme/portal.css b/styles/prosilver/theme/portal.css
index c5215593..5049beba 100644
--- a/styles/prosilver/theme/portal.css
+++ b/styles/prosilver/theme/portal.css
@@ -68,6 +68,29 @@ span.portal-corners-top-inner, span.portal-corners-bottom-inner{
 	list-style-type: none;
 }
 
+/**
+* Replacement for table layout
+*/
+#portal-left, #portal-right {
+	position: relative;
+	float: left;
+}
+
+#portal-center-wrapper {
+	width: 100%;
+	float: left;
+	display: block;
+}
+
+#portal-column-area {
+	width: 100%;
+	margin: 0 auto;
+}
+
+#portal-left {
+	margin-left: -100%;
+}
+
 /*
 * top spacing between portal body table and headerbar spacing is usually 10px
 */

From ac91c097780976929b104a323d1480035acf1bbb Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Sun, 1 Dec 2013 22:56:46 +0100
Subject: [PATCH 13/20] [responsive/portal] Make new tableless layout more or
 less responsive

Right column is moved down below other columns if width is not sufficient.
---
 styles/prosilver/theme/responsive.css | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/styles/prosilver/theme/responsive.css b/styles/prosilver/theme/responsive.css
index 3cd78347..0c1bb518 100644
--- a/styles/prosilver/theme/responsive.css
+++ b/styles/prosilver/theme/responsive.css
@@ -1,18 +1,18 @@
 @media only screen and (max-width: 895px), only screen and (max-device-width: 895px)
 {
-	#portal-body #portal-right { display: none !important; }
+	#portal-right { margin-left: 0 !important; }
+	#portal-center {
+		margin-right: 0 !important;
+		padding-right: 0 !important;
+	}
 }
 
 dd.responsive-portal-news { display: none !important; }
 .responsive-portal-news dd.posts, .responsive-portal-news dd.views { display: none !important; }
 .responsive-portal-news dt { width: 125% !important; }
 dt#n { width: 125% !important; }
-
-@media only screen and (max-width: 800px), only screen and (max-device-width: 800px)
-{
-	.topiclist .topics, .topiclist .posts { display: none !important; }
-	#portal-forumlist dl.icon dt { width: 125% !important; }
-}
+.topiclist .topics, .topiclist .posts { display: none !important; }
+#portal-forumlist dl.icon dt { width: 125% !important; }
 
 @media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
 {
@@ -30,7 +30,7 @@ dt#n { width: 125% !important; }
 		float: right !important;
 	}
 	#portal-forumlist dl.icon dt { width: 100% !important; }
-	#portal-left ul.topiclist dd { display: block !important; }
+	#portal-left ul.topiclist dd, #portal-right ul.topiclist dd { display: block !important; }
 	.portal-responsive-show { display: block !important; }
 	.portal-responsive-hide { display: none !important; }
 }

From 80da7081f906d3c7822504b334dca35ab65b1330 Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Mon, 2 Dec 2013 13:41:59 +0100
Subject: [PATCH 14/20] [responsive/portal] Use INCLUDECSS to include
 portal.css

---
 styles/prosilver/template/event/overall_header_head_append.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/prosilver/template/event/overall_header_head_append.html b/styles/prosilver/template/event/overall_header_head_append.html
index 9ba56982..4a1e5a90 100755
--- a/styles/prosilver/template/event/overall_header_head_append.html
+++ b/styles/prosilver/template/event/overall_header_head_append.html
@@ -1,4 +1,4 @@
 <!-- IF T_EXT_THEME_PATH -->
-<link href="{T_EXT_THEME_PATH}portal.css" rel="stylesheet" type="text/css" />
+<!-- INCLUDECSS ../theme/portal.css -->
 <link href="{T_EXT_THEME_PATH}responsive.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 950px), only screen and (max-device-width: 950px)" />
 <!-- ENDIF -->

From 8c031b6c0d40ef34f1a4eb4cecf17a27b467b3d7 Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Mon, 2 Dec 2013 13:45:05 +0100
Subject: [PATCH 15/20] [responsive/portal] Remove duplicate ID

---
 styles/prosilver/template/portal/modules/user_menu_side.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/prosilver/template/portal/modules/user_menu_side.html b/styles/prosilver/template/portal/modules/user_menu_side.html
index d3a92fa7..6ba1bf8f 100644
--- a/styles/prosilver/template/portal/modules/user_menu_side.html
+++ b/styles/prosilver/template/portal/modules/user_menu_side.html
@@ -26,7 +26,7 @@
 				<!-- ENDIF -->
 				<!-- IF S_NOTIFICATIONS_DISPLAY -->
 				<li data-skip-responsive="true">
-					<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button"><span>{L_NOTIFICATIONS} [</span><strong>{NOTIFICATIONS_COUNT}</strong><span>]</span></a>
+					<a href="{U_VIEW_ALL_NOTIFICATIONS}"><span>{L_NOTIFICATIONS} [</span><strong>{NOTIFICATIONS_COUNT}</strong><span>]</span></a>
 				</li>
 				<!-- ENDIF -->
 				<!-- IF S_DISPLAY_PM -->

From e4ae9cf436cd30b0f515e6009d61f17da13b9a6c Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Mon, 2 Dec 2013 14:12:15 +0100
Subject: [PATCH 16/20] [responsive/portal] Fix incorrect margins in center
 column

---
 .../template/portal/modules/announcements_center.html         | 2 +-
 .../prosilver/template/portal/modules/attachments_center.html | 2 +-
 styles/prosilver/template/portal/modules/recent_center.html   | 2 +-
 styles/prosilver/template/portal/modules/welcome_center.html  | 2 +-
 styles/prosilver/theme/portal.css                             | 4 ++++
 5 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/styles/prosilver/template/portal/modules/announcements_center.html b/styles/prosilver/template/portal/modules/announcements_center.html
index f3cd3902..9fa8fee8 100644
--- a/styles/prosilver/template/portal/modules/announcements_center.html
+++ b/styles/prosilver/template/portal/modules/announcements_center.html
@@ -8,7 +8,7 @@
 		<div class="inner"><span class="portal-corners-top-inner"></span>
 			<span style="text-align: center;"><strong>{L_NO_ANNOUNCEMENTS}</strong></span>
 	<!-- ELSE -->
-	<div style="margin-bottom: <!-- IF announcements_center_row.S_LAST_ROW -->0px<!-- ELSE -->1px<!-- ENDIF -->" class="post <!-- IF announcements_center_row.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF -->">
+	<div style="margin-bottom: <!-- IF announcements_center_row.S_LAST_ROW -->0px<!-- ELSE -->1px<!-- ENDIF -->;" class="post <!-- IF announcements_center_row.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF --> portal-no-margin">
 		<div class="inner"><span class="portal-corners-top-inner"></span>
 			<h4 class="first"><a <!-- IF announcements_center_row.S_FIRST_ROW -->id="a" <!-- ENDIF -->name="a{announcements_center_row.A_ID}"></a><!-- IF announcements_center_row.S_UNREAD_INFO --><a href="{announcements_center_row.U_VIEW_UNREAD}">{NEWEST_POST_IMG}</a><!-- ELSE --><a href="{announcements_center_row.U_LAST_COMMENTS}">{READ_POST_IMG}</a><!-- ENDIF --> {announcements_center_row.ATTACH_ICON_IMG} <!-- IF announcements_center_row.S_POLL --> <strong>{L_VIEW_TOPIC_POLL}: </strong><!-- ENDIF --><!-- IF announcements_center_row.TOPIC_ICON_IMG --><img src="{T_ICONS_PATH}{announcements_center_row.TOPIC_ICON_IMG}" width="{announcements_center_row.TOPIC_ICON_IMG_WIDTH}" height="{announcements_center_row.TOPIC_ICON_IMG_HEIGHT}" alt="" /> <!-- ENDIF --><a href="{announcements_center_row.U_VIEW_COMMENTS}"><strong>{announcements_center_row.TITLE}</strong></a></h4>
 			<!-- IF announcements_center_row.PAGINATION --><strong class="pagination"><span>{announcements_center_row.PAGINATION}</span></strong><!-- ENDIF -->
diff --git a/styles/prosilver/template/portal/modules/attachments_center.html b/styles/prosilver/template/portal/modules/attachments_center.html
index bc1a7462..25ccda7b 100644
--- a/styles/prosilver/template/portal/modules/attachments_center.html
+++ b/styles/prosilver/template/portal/modules/attachments_center.html
@@ -1,5 +1,5 @@
 {$C_BLOCK_H_L}{$TITLE}{$C_BLOCK_H_R}
-<div class="panel bg1" style="margin-bottom: 0px">
+<div class="panel bg1 portal-no-margin">
 	<div class="inner"><span class="portal-corners-top-inner"></span>
 	<!-- IF .attach_center -->
 		<span style="float:<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->right<!-- ELSE -->left<!-- ENDIF -->;"><strong>{L_FILENAME}</strong></span><br />
diff --git a/styles/prosilver/template/portal/modules/recent_center.html b/styles/prosilver/template/portal/modules/recent_center.html
index 703232f7..29264983 100644
--- a/styles/prosilver/template/portal/modules/recent_center.html
+++ b/styles/prosilver/template/portal/modules/recent_center.html
@@ -1,6 +1,6 @@
 <!-- IF .latest_announcements or .latest_hot_topics or .latest_topics -->
 {$C_BLOCK_H_L}{$TITLE}{$C_BLOCK_H_R}
-<div class="panel bg1" style="margin-bottom: 0px">
+<div class="panel bg1 portal-no-margin">
 	<div class="inner"><span class="portal-corners-top-inner"></span>
 	<div class="portal-navigation">
 	<ul class="topiclist bg1">
diff --git a/styles/prosilver/template/portal/modules/welcome_center.html b/styles/prosilver/template/portal/modules/welcome_center.html
index 4ca1d6b9..059f3fba 100644
--- a/styles/prosilver/template/portal/modules/welcome_center.html
+++ b/styles/prosilver/template/portal/modules/welcome_center.html
@@ -1,5 +1,5 @@
 {$C_BLOCK_H_L}{$TITLE}{$C_BLOCK_H_R}
-	<div class="panel bg1" style="margin-bottom: 0px">
+	<div class="panel bg1 portal-no-margin">
 		<div class="inner"><span class="portal-corners-top-inner"></span>
 			<div class="postbody" style="width: 100%">
 				<div class="content" style="min-height: 1em;">{PORTAL_WELCOME_MSG}</div>
diff --git a/styles/prosilver/theme/portal.css b/styles/prosilver/theme/portal.css
index 5049beba..ff8f1f51 100644
--- a/styles/prosilver/theme/portal.css
+++ b/styles/prosilver/theme/portal.css
@@ -126,6 +126,10 @@ span.portal-corners-top-inner, span.portal-corners-bottom-inner{
 	margin-bottom: 4px;
 }
 
+.portal-no-margin {
+	margin: 0;
+}
+
 /* RTL language fixes */
 .rtl .portal-navigation ul li a{
 	background-image: url("./images/portal/arrowbullet_rtl.gif");

From f164d2e901115cd34bd40eae2d74418c502717a3 Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Mon, 2 Dec 2013 14:12:42 +0100
Subject: [PATCH 17/20] [responsive/portal] Use correct folder img in
 announcements

---
 modules/announcements.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/modules/announcements.php b/modules/announcements.php
index 0e524bd0..9872539d 100644
--- a/modules/announcements.php
+++ b/modules/announcements.php
@@ -280,6 +280,7 @@ class announcements extends module_base
 						'REPLIES'				=> $fetch_news[$i]['topic_replies'],
 						'TOPIC_VIEWS'			=> $fetch_news[$i]['topic_views'],
 						'A_ID'					=> $i,
+						'TOPIC_IMG_STYLE'		=> $folder_img,
 						'TOPIC_FOLDER_IMG'		=> $this->user->img($folder_img, $folder_alt),
 						'TOPIC_FOLDER_IMG_SRC'	=> $this->user->img($folder_img, $folder_alt, false, '', 'src'),
 						'TOPIC_FOLDER_IMG_ALT'	=> $this->user->lang[$folder_alt],

From 3dc7e79cfd63955779d7fae31b7baee8ea3aa8c8 Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Mon, 2 Dec 2013 14:13:11 +0100
Subject: [PATCH 18/20] [responsive/portal] Make compact announcements module
 block responsive

---
 .../event/overall_header_head_append.html     |  2 +-
 .../modules/announcements_center_compact.html | 43 +++++++++++--------
 .../portal/modules/news_compact_center.html   |  6 +--
 styles/prosilver/theme/responsive.css         | 39 ++++++++++++-----
 4 files changed, 59 insertions(+), 31 deletions(-)

diff --git a/styles/prosilver/template/event/overall_header_head_append.html b/styles/prosilver/template/event/overall_header_head_append.html
index 4a1e5a90..37158abc 100755
--- a/styles/prosilver/template/event/overall_header_head_append.html
+++ b/styles/prosilver/template/event/overall_header_head_append.html
@@ -1,4 +1,4 @@
 <!-- IF T_EXT_THEME_PATH -->
 <!-- INCLUDECSS ../theme/portal.css -->
-<link href="{T_EXT_THEME_PATH}responsive.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 950px), only screen and (max-device-width: 950px)" />
+<link href="{T_EXT_THEME_PATH}responsive.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 980px), only screen and (max-device-width: 980px)" />
 <!-- ENDIF -->
diff --git a/styles/prosilver/template/portal/modules/announcements_center_compact.html b/styles/prosilver/template/portal/modules/announcements_center_compact.html
index 1bb70070..7e5bcdd6 100644
--- a/styles/prosilver/template/portal/modules/announcements_center_compact.html
+++ b/styles/prosilver/template/portal/modules/announcements_center_compact.html
@@ -10,32 +10,41 @@
 <!-- ELSE -->
 <!-- IF announcements_center_row.S_FIRST_ROW -->
 {$CC_BLOCK_H_L}
-	<dt id="a" <!-- IF S_DISPLAY_ANNOUNCEMENTS_RVS -->style="width: 44%"<!-- ELSE -->style="width: 60%"<!-- ENDIF -->>{$TITLE}</dt>
+	<dt id="a">{$TITLE}</dt>
 	<!-- IF S_DISPLAY_ANNOUNCEMENTS_RVS -->
-		<dd class="posts" style="width: 11%">{L_REPLIES}</dd>
-		<dd class="views" style="width: 11%">{L_VIEWS}</dd>
+		<dd class="posts responsive-portal-announcements">{L_REPLIES}</dd>
+		<dd class="views responsive-portal-announcements">{L_VIEWS}</dd>
 	<!-- ENDIF -->
-	<dd class="lastpost" style="width: 25%"><span>{L_LAST_POST}</span></dd>
+	<dd class="lastpost responsive-portal-announcements"><span>{L_LAST_POST}</span></dd>
 {$CC_BLOCK_H_R}
-<ul class="topiclist topics">
+<ul class="topiclist topics responsive-portal-announcements">
 <!-- ENDIF -->
 	<li class="row<!-- IF announcements_center_row.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">
-		<dl class="icon" style="background-image: url({announcements_center_row.TOPIC_FOLDER_IMG_SRC}); background-repeat: no-repeat;">
-			<dt style="<!-- IF S_DISPLAY_ANNOUNCEMENTS_RVS -->width: 44%;<!-- ELSE -->width: 60%;<!-- ENDIF --> <!-- IF announcements_center_row.TOPIC_ICON_IMG -->background-image: url({T_ICONS_PATH}{announcements_center_row.TOPIC_ICON_IMG}); background-repeat: no-repeat;<!-- ENDIF -->" title="{announcements_center_row.TOPIC_FOLDER_IMG_ALT}"><!-- IF announcements_center_row.S_UNREAD_TOPIC --><a href="{announcements_center_row.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF --><!-- IF announcements_center_row.ATTACH_ICON_IMG -->{announcements_center_row.ATTACH_ICON_IMG} <!-- ENDIF --><!-- IF announcements_center_row.S_POLL --><strong>{L_VIEW_TOPIC_POLL}</strong><!-- ENDIF --><a href="{announcements_center_row.U_VIEW_COMMENTS}" title="{announcements_center_row.TITLE}" class="topictitle">{announcements_center_row.TITLE}</a><!-- IF U_VIEW_UNREAD_POST and not S_IS_BOT --> &bull; <a href="{U_VIEW_UNREAD_POST}">{L_VIEW_UNREAD_POST}</a> &bull; <!-- ENDIF -->
-				<!-- IF announcements_center_row.PAGINATION --><strong class="pagination"><span>{announcements_center_row.PAGINATION}</span></strong><!-- ENDIF -->
-					<br />{L_POSTED} {L_POST_BY_AUTHOR} {announcements_center_row.POSTER_FULL} &raquo; {announcements_center_row.TIME}
-				<!-- IF announcements_center_row.FORUM_NAME -->
-					<br />{L_FORUM}: <a href="{announcements_center_row.U_VIEWFORUM}" style="font-weight: bold;">{announcements_center_row.FORUM_NAME}</a>
-				<!-- ELSE -->
-					<br />{L_GLOBAL_ANNOUNCEMENT}
+		<dl class="icon {announcements_center_row.TOPIC_IMG_STYLE}">
+			<dt style="<!-- IF announcements_center_row.TOPIC_ICON_IMG -->background-image: url({T_ICONS_PATH}{announcements_center_row.TOPIC_ICON_IMG}); background-repeat: no-repeat;<!-- ENDIF -->" title="{announcements_center_row.TOPIC_FOLDER_IMG_ALT}">
+				<!-- IF announcements_center_row.S_UNREAD_TOPIC -->
+				<a href="{announcements_center_row.U_NEWEST_POST}">{NEWEST_POST_IMG}</a>
 				<!-- ENDIF -->
-				<!-- IF not S_DISPLAY_ANNOUNCEMENTS_RVS --><!-- IF announcements_center_row.FORUM_NAME -->&bull; <!-- ENDIF -->{L_REPLIES}: <strong>{announcements_center_row.REPLIES}</strong>  &bull; {L_VIEWS}: <strong>{announcements_center_row.TOPIC_VIEWS}</strong><!-- ENDIF -->
+				<div class="list-inner">
+					<!-- IF announcements_center_row.ATTACH_ICON_IMG -->{announcements_center_row.ATTACH_ICON_IMG} <!-- ENDIF -->
+					<!-- IF announcements_center_row.S_POLL --><strong>{L_VIEW_TOPIC_POLL}</strong><!-- ENDIF -->
+					<a href="{announcements_center_row.U_VIEW_COMMENTS}" title="{announcements_center_row.TITLE}" class="topictitle">{announcements_center_row.TITLE}</a>
+					<!-- IF U_VIEW_UNREAD_POST and not S_IS_BOT --> &bull; <a href="{U_VIEW_UNREAD_POST}">{L_VIEW_UNREAD_POST}</a> &bull; <!-- ENDIF -->
+					<!-- IF announcements_center_row.PAGINATION --><strong class="pagination"><span>{announcements_center_row.PAGINATION}</span></strong><!-- ENDIF -->
+						<br />{L_POSTED} {L_POST_BY_AUTHOR} {announcements_center_row.POSTER_FULL} &raquo; {announcements_center_row.TIME}
+					<!-- IF announcements_center_row.FORUM_NAME -->
+						<br />{L_FORUM}: <a href="{announcements_center_row.U_VIEWFORUM}" style="font-weight: bold;">{announcements_center_row.FORUM_NAME}</a>
+					<!-- ELSE -->
+						<br />{L_GLOBAL_ANNOUNCEMENT}
+					<!-- ENDIF -->
+					<!-- IF not S_DISPLAY_ANNOUNCEMENTS_RVS --><!-- IF announcements_center_row.FORUM_NAME -->&bull; <!-- ENDIF -->{L_REPLIES}: <strong>{announcements_center_row.REPLIES}</strong>  &bull; {L_VIEWS}: <strong>{announcements_center_row.TOPIC_VIEWS}</strong><!-- ENDIF -->
+				</div>
 			</dt>
 			<!-- IF S_DISPLAY_ANNOUNCEMENTS_RVS -->
-				<dd class="posts" style="width: 11%">{announcements_center_row.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
-				<dd class="views" style="width: 11%">{announcements_center_row.TOPIC_VIEWS} <dfn>{L_VIEWS}</dfn></dd>
+				<dd class="posts">{announcements_center_row.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
+				<dd class="views">{announcements_center_row.TOPIC_VIEWS} <dfn>{L_VIEWS}</dfn></dd>
 			<!-- ENDIF -->
-			<dd class="lastpost" style="width: 25%"><span><dfn>{L_LAST_POST}</dfn>{L_POST_BY_AUTHOR} {announcements_center_row.USERNAME_FULL_LAST} <!-- IF announcements_center_row.S_UNREAD_INFO --><a href="{announcements_center_row.U_VIEW_UNREAD}">{NEWEST_POST_IMG}</a><!-- ELSE --><a href="{announcements_center_row.U_LAST_COMMENTS}">{READ_POST_IMG}</a><!-- ENDIF --><br />
+			<dd class="lastpost"><span><dfn>{L_LAST_POST}</dfn>{L_POST_BY_AUTHOR} {announcements_center_row.USERNAME_FULL_LAST} <!-- IF announcements_center_row.S_UNREAD_INFO --><a href="{announcements_center_row.U_VIEW_UNREAD}">{NEWEST_POST_IMG}</a><!-- ELSE --><a href="{announcements_center_row.U_LAST_COMMENTS}">{READ_POST_IMG}</a><!-- ENDIF --><br />
 				{announcements_center_row.LAST_POST_TIME}</span>
 			</dd>
 		</dl>
diff --git a/styles/prosilver/template/portal/modules/news_compact_center.html b/styles/prosilver/template/portal/modules/news_compact_center.html
index d743e876..4488006f 100644
--- a/styles/prosilver/template/portal/modules/news_compact_center.html
+++ b/styles/prosilver/template/portal/modules/news_compact_center.html
@@ -12,8 +12,8 @@
 {$CC_BLOCK_H_L}
 	<dt id="n">{$TITLE}</dt>
 	<!-- IF S_DISPLAY_NEWS_RVS -->
-		<dd class="posts responsive-portal-news" data-skip-responsive="true">{L_REPLIES}</dd>
-		<dd class="views responsive-portal-news" data-skip-responsive="true">{L_VIEWS}</dd>
+		<dd class="posts responsive-portal-news">{L_REPLIES}</dd>
+		<dd class="views responsive-portal-news">{L_VIEWS}</dd>
 	<!-- ENDIF -->
 	<dd class="lastpost responsive-portal-news"><span>{L_LAST_POST}</span></dd>
 {$CC_BLOCK_H_R}
@@ -25,8 +25,8 @@
 				<!-- IF news_row.S_UNREAD_TOPIC -->
 				<a href="{news_row.U_NEWEST_POST}">{NEWEST_POST_IMG}</a>
 				<!-- ENDIF -->
-				<!-- IF news_row.ATTACH_ICON_IMG -->{news_row.ATTACH_ICON_IMG} <!-- ENDIF -->
 				<div class="list-inner">
+					<!-- IF news_row.ATTACH_ICON_IMG -->{news_row.ATTACH_ICON_IMG} <!-- ENDIF -->
 					<a href="{news_row.U_VIEW_COMMENTS}" title="{news_row.TITLE}" class="topictitle">{news_row.TITLE}</a><!-- IF U_VIEW_UNREAD_POST and not S_IS_BOT --> &bull; <a href="{U_VIEW_UNREAD_POST}">{L_VIEW_UNREAD_POST}</a> &bull; <!-- ENDIF -->
 					<!-- IF news_row.PAGINATION -->
 					<div class="pagination">
diff --git a/styles/prosilver/theme/responsive.css b/styles/prosilver/theme/responsive.css
index 0c1bb518..8edfb950 100644
--- a/styles/prosilver/theme/responsive.css
+++ b/styles/prosilver/theme/responsive.css
@@ -7,28 +7,47 @@
 	}
 }
 
-dd.responsive-portal-news { display: none !important; }
-.responsive-portal-news dd.posts, .responsive-portal-news dd.views { display: none !important; }
-.responsive-portal-news dt { width: 125% !important; }
-dt#n { width: 125% !important; }
-.topiclist .topics, .topiclist .posts { display: none !important; }
-#portal-forumlist dl.icon dt { width: 125% !important; }
+.responsive-portal-announcements dd.views { display: none !important; }
+dd.responsive-portal-announcements { display: none !important; }
+
+.responsive-portal-announcements dd.posts, .responsive-portal-announcements dd.views {
+	display: none !important;
+}
+
+dt#a { width: 125% !important; }
+.responsive-portal-announcements dt { width: 125% !important; }
+
+@media only screen and (max-width: 950px), only screen and (max-device-width: 950px)
+{
+	dd.responsive-portal-news { display: none !important; }
+
+	.responsive-portal-news dd.posts, .responsive-portal-news dd.views {
+		display: none !important;
+	}
+
+	.responsive-portal-news dt { width: 125% !important; }
+	dt#n { width: 125% !important; }
+	.topiclist .topics, .topiclist .posts { display: none !important; }
+	#portal-forumlist dl.icon dt { width: 125% !important; }
+}
 
 @media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
 {
-	.responsive-portal-news dd.lastpost { display: none !important; }
-	.responsive-portal-news dt .list-inner { margin-right: 0px !important; }
-	.responsive-portal-news dt { width: 100% !important; }
-	dt#n { width: 100% !important; }
+	.responsive-portal-news dd.lastpost, .responsive-portal-announcements dd.lastpost { display: none !important; }
+	.responsive-portal-news dt .list-inner, .responsive-portal-announcements dt .list-inner { margin-right: 0px !important; }
+	.responsive-portal-news dt, .responsive-portal-announcements dt { width: 100% !important; }
+	dt#n, dt#a { width: 100% !important; }
 
 	.portal-responsive-poll .resultbar {
 		display: none !important;
 	}
+
 	.portal-responsive-poll dt { width: 45% !important; }
 	.portal-responsive-poll dd {
 		width: 45% !important;
 		float: right !important;
 	}
+
 	#portal-forumlist dl.icon dt { width: 100% !important; }
 	#portal-left ul.topiclist dd, #portal-right ul.topiclist dd { display: block !important; }
 	.portal-responsive-show { display: block !important; }

From 6e2b9e3a13c1caa305d1713b7b699eef3e2500f1 Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Sun, 29 Dec 2013 00:04:37 +0100
Subject: [PATCH 19/20] [responsive/portal] Add new pagination to portal

---
 config/modules.yml |  1 +
 modules/news.php   | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/config/modules.yml b/config/modules.yml
index fef05082..d3a99a13 100644
--- a/config/modules.yml
+++ b/config/modules.yml
@@ -177,6 +177,7 @@ services:
             - @cache
             - @config
             - @dbal.conn
+            - @pagination
             - @request
             - @template
             - %core.root_path%
diff --git a/modules/news.php b/modules/news.php
index 1a559e36..0aeeeee4 100644
--- a/modules/news.php
+++ b/modules/news.php
@@ -53,6 +53,9 @@ class news extends module_base
 	/** @var \phpbb\db\driver */
 	protected $db;
 
+	/** @var \phpbb\pagination */
+	protected $pagination;
+
 	/** @var \phpbb\request\request */
 	protected $request;
 
@@ -75,18 +78,20 @@ class news extends module_base
 	* @param \phpbb\cache $cache phpBB cache system
 	* @param \phpbb\config\config $config phpBB config
 	* @param \phpbb\db\driver $db phpBB db driver
+	* @param \phpbb\pagination $pagination phpBB pagination
 	* @param \phpbb\request\request $request phpBB request
 	* @param \phpbb\template $template phpBB template
 	* @param string $phpbb_root_path phpBB root path
 	* @param string $phpEx php file extension
 	* @param \phpbb\user $user phpBB user object
 	*/
-	public function __construct($auth, $cache, $config, $db, $request, $template, $phpbb_root_path, $phpEx, $user)
+	public function __construct($auth, $cache, $config, $db, $pagination, $request, $template, $phpbb_root_path, $phpEx, $user)
 	{
 		$this->auth = $auth;
 		$this->cache = $cache;
 		$this->config = $config;
 		$this->db = $db;
+		$this->pagination = $pagination;
 		$this->request = $request;
 		$this->template = $template;
 		$this->phpbb_root_path = $phpbb_root_path;
@@ -255,7 +260,7 @@ class news extends module_base
 					// Grab icons
 					$icons = $this->cache->obtain_icons();
 
-					phpbb_generate_template_pagination($this->template, $view_topic_url, 'pagination', 'np', $fetch_news[$i]['topic_replies'], $this->config['board3_number_of_news_' . $module_id], $start);
+					$this->pagination->generate_template_pagination($view_topic_url, 'pagination', 'np', $fetch_news[$i]['topic_replies'], $this->config['board3_number_of_news_' . $module_id], $start);
 
 					$this->template->assign_block_vars('news_row', array(
 						'ATTACH_ICON_IMG'		=> ($fetch_news[$i]['attachment'] && $this->config['allow_attachments']) ? $this->user->img('icon_topic_attach', $this->user->lang['TOTAL_ATTACHMENTS']) : '',
@@ -309,7 +314,7 @@ class news extends module_base
 						$this->template->assign_vars(array(
 							'NP_PAGINATION'		=> $pagination,
 							'TOTAL_NEWS'		=> ($total_news == 1) ? sprintf($this->user->lang['VIEW_FORUM_TOPICS'][1], $total_news) : sprintf($this->user->lang['VIEW_FORUM_TOPICS'][2], $total_news),
-							'NP_PAGE_NUMBER'	=> phpbb_on_page($this->template, $this->user, $view_topic_url, $total_news, $this->config['board3_number_of_news_' . $module_id], $start))
+							'NP_PAGE_NUMBER'	=> $this->pagination->on_page($view_topic_url, $total_news, $this->config['board3_number_of_news_' . $module_id], $start))
 						);
 					}
 				}
@@ -356,7 +361,7 @@ class news extends module_base
 					'S_HAS_ATTACHMENTS'	=> (!empty($fetch_news[$i]['attachments'])) ? true : false,
 				));
 
-				phpbb_generate_template_pagination($this->template, $view_topic_url, 'news_row.pagination', 'start', $fetch_news[$i]['topic_replies'] + 1, $this->config['posts_per_page'], 1, true, true);
+				$this->pagination->generate_template_pagination($view_topic_url, 'news_row.pagination', 'start', $fetch_news[$i]['topic_replies'] + 1, $this->config['posts_per_page'], 1, true, true);
 
 				if(!empty($fetch_news[$i]['attachments']))
 				{
@@ -373,7 +378,7 @@ class news extends module_base
 					$this->template->assign_vars(array(
 						'NP_PAGINATION'		=> $pagination,
 						'TOTAL_NEWS'		=> ($total_news == 1) ? $this->user->lang['VIEW_FORUM_TOPIC'] : $this->user->lang('VIEW_FORUM_TOPICS', $total_news),
-						'NP_PAGE_NUMBER'	=> phpbb_on_page($this->template, $this->user, '', $total_news, $this->config['board3_number_of_news_' . $module_id], $start))
+						'NP_PAGE_NUMBER'	=> $this->pagination->on_page('', $total_news, $this->config['board3_number_of_news_' . $module_id], $start))
 					);
 				}
 			}

From ecdaf2acdb74ff48363ecb29dfc4a3504a9cac4c Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Sun, 29 Dec 2013 00:10:52 +0100
Subject: [PATCH 20/20] [responsive/portal] Add new pagination to announcements
 module

---
 config/modules.yml        |  1 +
 modules/announcements.php | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/config/modules.yml b/config/modules.yml
index d3a99a13..5346884d 100644
--- a/config/modules.yml
+++ b/config/modules.yml
@@ -7,6 +7,7 @@ services:
             - @config
             - @template
             - @dbal.conn
+            - @pagination
             - @request
             - %core.php_ext%
             - %core.root_path%
diff --git a/modules/announcements.php b/modules/announcements.php
index 9872539d..6ecd405c 100644
--- a/modules/announcements.php
+++ b/modules/announcements.php
@@ -56,6 +56,9 @@ class announcements extends module_base
 	/** @var \phpbb\db\driver */
 	protected $db;
 
+	/** @var \phpbb\pagination */
+	protected $pagination;
+
 	/** @var \phpbb\request\request */
 	protected $request;
 
@@ -76,18 +79,20 @@ class announcements extends module_base
 	* @param \phpbb\config\config $config phpBB config
 	* @param \phpbb\template $template phpBB template
 	* @param \phpbb\db\driver $db Database driver
+	* @param \phpbb\pagination $pagination phpBB pagination
 	* @param \phpbb\request\request $request phpBB request
 	* @param string $phpEx php file extension
 	* @param string $phpbb_root_path phpBB root path
 	* @param \phpbb\user $user phpBB user object
 	*/
-	public function __construct($auth, $cache, $config, $template, $db, $request, $phpEx, $phpbb_root_path, $user)
+	public function __construct($auth, $cache, $config, $template, $db, $pagination, $request, $phpEx, $phpbb_root_path, $user)
 	{
 		$this->auth = $auth;
 		$this->cache = $cache;
 		$this->config = $config;
 		$this->template = $template;
 		$this->db = $db;
+		$this->pagination = $pagination;
 		$this->request = $request;
 		$this->php_ext = $phpEx;
 		$this->phpbb_root_path = $phpbb_root_path;
@@ -303,7 +308,7 @@ class announcements extends module_base
 						'S_HAS_ATTACHMENTS'		=> (!empty($fetch_news[$i]['attachments'])) ? true : false,
 					));
 
-					phpbb_generate_template_pagination($this->template, $view_topic_url, 'announcements_center_row.pagination', 'start', $fetch_news[$i]['topic_replies'] + 1, $this->config['posts_per_page'], 1, true, true);
+					$this->pagination->generate_template_pagination($view_topic_url, 'announcements_center_row.pagination', 'start', $fetch_news[$i]['topic_replies'] + 1, $this->config['posts_per_page'], 1, true, true);
 
 
 					if(!empty($fetch_news[$i]['attachments']))
@@ -320,7 +325,7 @@ class announcements extends module_base
 						$this->template->assign_vars(array(
 							'AP_PAGINATION'			=> $pagination,
 							'TOTAL_ANNOUNCEMENTS'	=> ($total_announcements == 1) ? $this->user->lang['VIEW_LATEST_ANNOUNCEMENT'] : sprintf($this->user->lang['VIEW_LATEST_ANNOUNCEMENTS'], $total_announcements),
-							'AP_PAGE_NUMBER'		=> phpbb_on_page($this->template, $this->user, '', $total_announcements, $this->config['board3_number_of_announcements_' . $module_id], $start))
+							'AP_PAGE_NUMBER'		=> $this->pagination->on_page('', $total_announcements, $this->config['board3_number_of_announcements_' . $module_id], $start))
 						);
 					}
 				}
@@ -379,7 +384,7 @@ class announcements extends module_base
 					'S_HAS_ATTACHMENTS'		=> (!empty($fetch_news[$i]['attachments'])) ? true : false,
 				));
 
-				phpbb_generate_template_pagination($this->template, $view_topic_url, 'announcements_center_row.pagination', 'start', $fetch_news[$i]['topic_replies'] + 1, $this->config['posts_per_page'], 1, true, true);
+				$this->pagination->generate_template_pagination($view_topic_url, 'announcements_center_row.pagination', 'start', $fetch_news[$i]['topic_replies'] + 1, $this->config['posts_per_page'], 1, true, true);
 
 				if(!empty($fetch_news[$i]['attachments']))
 				{
@@ -396,7 +401,7 @@ class announcements extends module_base
 					$this->template->assign_vars(array(
 						'AP_PAGINATION'			=> $pagination,
 						'TOTAL_ANNOUNCEMENTS'	=> ($total_announcements == 1) ? $this->user->lang['VIEW_LATEST_ANNOUNCEMENT'] : sprintf($this->user->lang['VIEW_LATEST_ANNOUNCEMENTS'], $total_announcements),
-						'AP_PAGE_NUMBER'		=> phpbb_on_page($this->template, $this->user, '', $total_announcements, $this->config['board3_number_of_announcements_' . $module_id], $start))
+						'AP_PAGE_NUMBER'		=> $this->pagination->on_page('', $total_announcements, $this->config['board3_number_of_announcements_' . $module_id], $start))
 					);
 				}
 			}