Homepage|Forums: Further improved layouts, fixed minor style issues

Also shortened some overly verbose text string constructions which seemingly can't be changed easily within a phpBB template or language pack (requiring the forum app code to be modified directly). When the time comes to upgrade the forums these modifications will need to be applied again.
skyjake · Apr 17, 2014 · 50e800d · 50e800d
1 parent c77db95
commit 50e800d
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 25 deletions.
diff --git a/web/forums/skin/template/index_body.html b/web/forums/skin/template/index_body.html
@@ -2,11 +2,17 @@
 <!-- INCLUDE overall_header.html -->
 <div class="block">
 <!-- IF S_DISPLAY_SEARCH or (S_USER_LOGGED_IN and not S_IS_BOT) -->
-<ul class="linklist">
+<ul class="linklist rightside">
+    <!-- IF not S_IS_BOT and U_MARK_FORUMS --><li class="rightside"><a href="{U_MARK_FORUMS}" accesskey="m">{L_MARK_FORUMS_READ}</a></li><!-- ENDIF -->
+</ul>
+<ul class="linklist leftside">
     <!-- IF S_DISPLAY_SEARCH -->
-        <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a><!-- IF S_LOAD_UNREADS --> &bull; <a href="{U_SEARCH_UNREAD}">{L_SEARCH_UNREAD}</a><!-- ENDIF --><!-- IF S_USER_LOGGED_IN --> &bull; <a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><!-- ENDIF --> &bull; <a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></li>
+        <!-- IF S_USER_LOGGED_IN and not S_IS_BOT --><li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li><!-- ENDIF -->
+        <!-- IF S_USER_LOGGED_IN --><li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li><!-- ENDIF -->
+        <!-- IF S_LOAD_UNREADS --><li><a href="{U_SEARCH_UNREAD}">{L_SEARCH_UNREAD}</a></li><!-- ENDIF -->
+        <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
+        <li><a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></li>
     <!-- ENDIF -->
-    <!-- IF not S_IS_BOT and U_MARK_FORUMS --><li class="rightside"><a href="{U_MARK_FORUMS}" accesskey="m">{L_MARK_FORUMS_READ}</a></li><!-- ENDIF -->
 </ul>
 <!-- ENDIF -->
 </div>
@@ -36,10 +42,10 @@ <h1><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a><!-- IF S_REGISTER_ENABLED --
 <div class="block">
 <!-- IF S_DISPLAY_ONLINE_LIST -->
     <section class="whoisonline">
-    <!-- IF U_VIEWONLINE --><h1><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h1><!-- ELSE --><h1>{L_WHO_IS_ONLINE}</h1><!-- ENDIF -->
-    <p>{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN}).</p>
+    <!-- IF U_VIEWONLINE --><h1><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a>({L_ONLINE_EXPLAIN})</h1><!-- ELSE --><h1>{L_WHO_IS_ONLINE}</h1><!-- ENDIF -->
     <p>{LOGGED_IN_USER_LIST}</p>
-    <!-- IF LEGEND --><p><em>{L_LEGEND}: {LEGEND}</em></p><!-- ENDIF -->
+    <!-- IF LEGEND --><p>{L_LEGEND}: {LEGEND}</p><!-- ENDIF -->
+    <p>Totals: {TOTAL_USERS_ONLINE})</p>
     </section>
 <!-- ENDIF -->
 

diff --git a/web/forums/skin/template/overall_footer.html b/web/forums/skin/template/overall_footer.html
@@ -1,12 +1,11 @@
     <div id="forum-footer" class="block nobackground">
         <section>
-            <ul class="linklist">
-                <li class="rightside"><!-- IF U_TEAM --><a href="{U_TEAM}">{L_THE_TEAM}</a> &bull; <!-- ENDIF --><!-- IF not S_IS_BOT --><a href="{U_DELETE_COOKIES}">{L_DELETE_COOKIES}</a> &bull; <!-- ENDIF -->{S_TIMEZONE}</li>
-            </ul>
-        </section>
-        <section class="copyright">Powered by <a href="http://www.phpbb.com/">phpBB</a>&reg; Forum Software &copy; phpBB Group
+            <ul class="linklist rightside">
+                <li><!-- IF U_TEAM --><a href="{U_TEAM}">{L_THE_TEAM}</a> &bull; <!-- ENDIF --><!-- IF not S_IS_BOT --><a href="{U_DELETE_COOKIES}">{L_DELETE_COOKIES}</a> &bull; <!-- ENDIF -->{S_TIMEZONE}</li>
+                <li>Powered by <a href="http://www.phpbb.com/">phpBB</a>&reg; Forum Software
             <!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
-            <!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
+            <!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF --></li>
+            </ul>
         </section>
     </div>
 </div>

diff --git a/web/forums/skin/template/overall_header.html b/web/forums/skin/template/overall_header.html
@@ -4,7 +4,7 @@
     <meta charset="{S_CONTENT_ENCODING}" />
     <meta http-equiv="cleartype" content="on">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, target-densityDpi=device-dpi">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="author" content="David Gardner" />
     <meta name="keywords" content="Doomsday,Doomsday Engine,Deng,Doom,Heretic,Hexen,jDoom,jHeretic,jHexen,sourceport,first person shooter,fps," />
     <meta name="description" content="Home of the Doomsday Engine, a modern engine for playing classic 2.5d first person shooters DOOM, Heretic and Hexen." />
@@ -118,6 +118,10 @@ <h1>Forums</h1>
     <div id="page-header" class="block" role="navigation">
         <section><h1><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a><!-- BEGIN navlinks --><span class="separator">&#47;</span><a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></h1></section>
 
+<!-- IF $SHOW_CURRENT_TIME -->
+        <!-- IF S_USER_LOGGED_IN --><div class="rightside">{LAST_VISIT_DATE}</div><!-- ENDIF --><div class="leftside">{CURRENT_TIME}</div>
+<!-- ENDIF -->
+
         <ul class="linklist rightside">
             <li><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
             <!-- IF not S_IS_BOT -->
@@ -126,23 +130,18 @@ <h1>Forums</h1>
                 <!-- IF U_ACP --><li><a href="{U_ACP}">{L_ACP}</a></li><!-- ENDIF -->
             <!-- ENDIF -->
         </ul>
-
         <!-- IF not S_IS_BOT -->
         <ul class="linklist leftside">
             <!-- IF S_USER_LOGGED_IN -->
             <li>
-                <a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{L_PROFILE}</a>
+                <a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{S_USER_NAME}</a>
                 <!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF -->
             </li>
-            <!-- IF S_DISPLAY_SEARCH --><li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li><!-- ENDIF -->
             <!-- IF U_RESTORE_PERMISSIONS --><li><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a></li><!-- ENDIF -->
             <!-- ENDIF -->
             <li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
         </ul>
         <!-- ENDIF -->
-<!-- IF $SHOW_CURRENT_TIME -->
-        <span>{CURRENT_TIME}</span><!-- IF S_USER_LOGGED_IN --><span class="rightside">{LAST_VISIT_DATE}</span><!-- ENDIF -->
-<!-- ENDIF -->
     </div>
 
     <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->

diff --git a/web/forums/skin/theme/stylesheet.css b/web/forums/skin/theme/stylesheet.css
@@ -48,7 +48,7 @@ ul.linklist li {
 ul.linklist li.rightside, p.rightside {
     float: right;
     margin-right: 0;
-    margin-left: 5px;
+    /*margin-left: 5px;*/
     text-align: right;
 }
 
@@ -77,7 +77,7 @@ ul.navlinks {
 .rightside {
     float: right;
     margin-left: 5px;
-    margin-right: -5px;
+    /*margin-right: -5px;*/
     text-align: right;
 }
 
@@ -555,7 +555,7 @@ ul.topiclist dd.searchextra {
 
 .post header .profile-icons {
     position: relative;
-    top: -15px;/*-1em; /*equal to post font size*/
+    top: -1.2em; /*block padding*/
     right: -1.3em;
     margin: 0;
 }
@@ -569,7 +569,7 @@ ul.topiclist dd.searchextra {
 
 .post header h1 {
     font-size: 10pt;
-    margin-top: 15px;
+    /*margin-top: 15px;*/
     margin-right: 0;
 }
 

diff --git a/web/style.css b/web/style.css
@@ -1,6 +1,8 @@
 
 @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300);
 
+.clearfix { height: 1%; overflow: hidden; }
+
 body {
     background: #282D2B url(panoramarotator) no-repeat fixed;
     background-position: center 100%;
@@ -28,7 +30,7 @@ body { margin: 1.2em; }
 
 h1, h2, h3, h4, h5, h6 {
     margin-bottom: 0;
-    margin-top: .6em;
+    margin-top: 0;/*.6em;*/
     font-weight: normal;
     font-variant: normal;
     font-weight: 300;
@@ -169,11 +171,20 @@ hr.dashed {
 .block {
     padding: 1.2em;
     margin: 1.2em .6em 0 .6em;
+    height: 1%; overflow: hidden;
+}
+
+.block article {
+    margin-top: 0;
+}
+
+.block section {
+    margin-top: 1.2em;
 }
 
 .block article:first-of-type,
 .block section:first-of-type {
-    margin-top: -1.2em;
+    margin-top: 0;
 }
 
 .block article header {
@@ -194,6 +205,7 @@ hr.dashed {
     right: -1.3em;
     float: right;
     font-size: 8pt;
+    height:0;
 }
 
 /*
@@ -239,6 +251,7 @@ hr.dashed {
 .nobackground {
     background:none;
     box-shadow:none;
+    padding: 0;
 }
 
 .rules h1, .rules h2, .rules h3, .rules h4, .rules h5, .rules h6 { color:#FFD9BB; }
@@ -790,6 +803,7 @@ div.clear {
     top: -150px; /* minus (image height - divider height) */
     font-size: xx-small;
     text-align: right;
+    height: auto;
 }
 
 @media only screen and (min-width: 767px) {