Skip to content

Commit

Permalink
Homepage|Forums: Layout and style improvements for small windows
Browse files Browse the repository at this point in the history
  • Loading branch information
danij-deng committed Apr 18, 2014
1 parent 7a392a0 commit b821984
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 39 deletions.
19 changes: 10 additions & 9 deletions web/forums/skin/template/forumlist_body.html
@@ -1,30 +1,30 @@

<!-- BEGIN forumrow -->
<!-- IF (forumrow.S_IS_CAT and not forumrow.S_FIRST_ROW) or forumrow.S_NO_CAT -->
</ul>

</div>
</section>
<!-- ENDIF -->

<!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW or forumrow.S_NO_CAT -->
<section>
<h1><!-- IF forumrow.S_IS_CAT --><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a><!-- ELSE -->Subforums<!-- ENDIF --></h1>
<ul class="topiclist">
<ul class="block nobackground topiclist">
<li class="header">
<dl class="icon">
<dt></dt>
<dl>
<dt><!-- IF forumrow.S_IS_CAT --><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a><!-- ELSE -->Subforums<!-- ENDIF --></dt>
<dd class="lastpost"><span>{L_LAST_POST}</span></dd>
<dd class="topics">{L_TOPICS}</dd>
<dd class="posts">{L_POSTS}</dd>
<dd class="lastpost"><span>{L_LAST_POST}</span></dd>
</dl>
</li>
</ul>
<div class="block">
<ul class="topiclist forums">
<!-- ENDIF -->

<!-- IF not forumrow.S_IS_CAT -->
<li class="row" id="forum_{forumrow.FORUM_NAME}">
<dl class="icon" style="background-image: url({forumrow.FORUM_FOLDER_IMG_SRC}); background-repeat: no-repeat;">
<dl class="icon" style="background-image: url({forumrow.FORUM_FOLDER_IMG_SRC}); background-repeat: no-repeat; background-position-x: 2px;">
<dt title="{forumrow.FORUM_FOLDER_IMG_ALT}">
<!-- IF S_ENABLE_FEEDS and forumrow.S_FEED_ENABLED --><!-- <a class="feed-icon-forum" title="{L_FEED} - {forumrow.FORUM_NAME}" href="{U_FEED}?f={forumrow.FORUM_ID}"><img src="{T_THEME_PATH}/images/feed.gif" alt="{L_FEED} - {forumrow.FORUM_NAME}" /></a> --><!-- ENDIF -->

Expand All @@ -39,12 +39,12 @@ <h1><!-- IF forumrow.S_IS_CAT --><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORU
<!-- IF forumrow.CLICKS -->
<dd class="redirect"><span>{L_REDIRECTS}: {forumrow.CLICKS}</span></dd>
<!-- ELSEIF not forumrow.S_IS_LINK -->
<dd class="topics">{forumrow.TOPICS} <dfn>{L_TOPICS}</dfn></dd>
<dd class="posts">{forumrow.POSTS} <dfn>{L_POSTS}</dfn></dd>
<dd class="lastpost"><span>
<!-- IF forumrow.U_UNAPPROVED_TOPICS --><a href="{forumrow.U_UNAPPROVED_TOPICS}">{UNAPPROVED_IMG}</a><!-- ENDIF -->
<!-- IF forumrow.LAST_POST_TIME --><dfn>{L_LAST_POST}</dfn><!-- IF not S_IS_BOT --><a href="{forumrow.U_LAST_POST}">{LAST_POST_IMG}</a> <!-- ENDIF -->{forumrow.LAST_POST_TIME}<br />{L_POST_BY_AUTHOR} {forumrow.LAST_POSTER_FULL}<!-- ELSE -->{L_NO_POSTS}<br />&nbsp;<!-- ENDIF --></span>
</dd>
<dd class="topics">{forumrow.TOPICS} <dfn>{L_TOPICS}</dfn></dd>
<dd class="posts">{forumrow.POSTS} <dfn>{L_POSTS}</dfn></dd>
<!-- ENDIF -->
</dl>
</li>
Expand All @@ -53,6 +53,7 @@ <h1><!-- IF forumrow.S_IS_CAT --><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORU
<!-- IF forumrow.S_LAST_ROW -->
</ul>

</div>
</section>
<!-- ENDIF -->

Expand Down
2 changes: 0 additions & 2 deletions web/forums/skin/template/index_body.html
Expand Up @@ -17,9 +17,7 @@
<!-- ENDIF -->
</div>

<div class="block">
<!-- INCLUDE forumlist_body.html -->
</div>

<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
<form method="post" action="{S_LOGIN_ACTION}" class="headerspace">
Expand Down
4 changes: 2 additions & 2 deletions web/forums/skin/template/viewforum_body.html
Expand Up @@ -134,9 +134,9 @@ <h1><!-- IF S_DISPLAY_ACTIVE -->{L_ACTIVE_TOPICS}<!-- ELSEIF topicrow.S_TOPIC_TY
<li class="header">
<dl class="icon">
<dt></dt>
<dd class="lastpost"><span>{L_LAST_POST}</span></dd>
<dd class="posts">{L_REPLIES}</dd>
<dd class="views">{L_VIEWS}</dd>
<dd class="lastpost"><span>{L_LAST_POST}</span></dd>
</dl>
</li>
</ul>
Expand All @@ -152,9 +152,9 @@ <h1><!-- IF S_DISPLAY_ACTIVE -->{L_ACTIVE_TOPICS}<!-- ELSEIF topicrow.S_TOPIC_TY
<!-- IF topicrow.PAGINATION --><strong class="pagination"><span>{topicrow.PAGINATION}</span></strong><!-- ENDIF -->
{topicrow.FIRST_POST_TIME} {L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL}
</dt>
<dd class="lastpost"><span><dfn>{L_LAST_POST}</dfn><!-- IF not S_IS_BOT --><a href="{topicrow.U_LAST_POST}">{LAST_POST_IMG}</a> <!-- ENDIF -->{topicrow.LAST_POST_TIME}<br />{L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL}</span>
<dd class="posts">{topicrow.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
<dd class="views">{topicrow.VIEWS} <dfn>{L_VIEWS}</dfn></dd>
<dd class="lastpost"><span><dfn>{L_LAST_POST}</dfn><!-- IF not S_IS_BOT --><a href="{topicrow.U_LAST_POST}">{LAST_POST_IMG}</a> <!-- ENDIF -->{topicrow.LAST_POST_TIME}<br />{L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL}</span>
</dd>
</dl>
</li>
Expand Down
38 changes: 22 additions & 16 deletions web/forums/skin/theme/stylesheet.css
Expand Up @@ -39,16 +39,17 @@ ul.linklist {
ul.linklist li {
display: block;
list-style-type: none;
float: left;
width: auto;
}

ul.linklist.leftside li {
float: left;
margin-right: .5ex;
line-height: 2.2em;
}

ul.linklist li.rightside, p.rightside {
ul.linklist.rightside li {
float: right;
margin-right: 0;
/*margin-left: 5px;*/
margin-left: .5ex;
text-align: right;
}

Expand All @@ -64,7 +65,7 @@ ul.navlinks {
content: '\2022\a0';
}

.linklist.rightside li:not(:last-of-type):after {
.linklist.rightside li:not(:first-of-type):after {
content: '\a0\2022';
}

Expand All @@ -77,7 +78,7 @@ ul.navlinks {
.rightside {
float: right;
margin-left: 5px;
/*margin-right: -5px;*/
margin-right: 0;
text-align: right;
}

Expand Down Expand Up @@ -454,14 +455,14 @@ dl.imagelist dt {
margin-right: 5px;
}

li.header dt, li.header dd {
/*li.header dt, li.header dd {
margin: 0px 0px 5px 0px;
padding: 5px 5px 0px 5px;
}
}*/

li.header dt {
/*li.header dt {
font-weight: bold;
}
}*/

li.header dl.icon {
min-height: 0;
Expand All @@ -479,12 +480,16 @@ dl.icon dt {
}

dd.posts, dd.topics, dd.views {
width: 6%;
width: 12%;
text-align: center;
}

dd.posts, dd.topics, dd.views {
width: 10%;
}

dd.lastpost {
width: 24%;
width: 19%;
}

ul.topiclist dd.searchby span, ul.topiclist dd.info span,
Expand Down Expand Up @@ -555,8 +560,8 @@ ul.topiclist dd.searchextra {

.post header .profile-icons {
position: relative;
top: -1.2em; /*block padding*/
right: -1.3em;
top: -22px; /*block padding*/
right: -22px;
margin: 0;
}

Expand All @@ -568,7 +573,8 @@ ul.topiclist dd.searchextra {
}

.post header h1 {
font-size: 10pt;
/*font-size: 10pt;*/
font-size: .92em;
/*margin-top: 15px;*/
margin-right: 0;
}
Expand Down
49 changes: 39 additions & 10 deletions web/style.css
Expand Up @@ -3,6 +3,11 @@

.clearfix { height: 1%; overflow: hidden; }

ul, ol {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
}

body {
background: #282D2B url(panoramarotator) no-repeat fixed;
background-position: center 100%;
Expand Down Expand Up @@ -168,9 +173,13 @@ hr.dashed {
.collapsible:nth-child(n+1) { clear: left; }
}

/*.block.nobackground {
margin-top: .6em;
}*/

.block {
padding: 1.2em;
margin: 1.2em .6em 0 .6em;
padding: 22px;/*1.2em;*/
margin: 0 .6em 1.2em .6em;
height: 1%; overflow: hidden;
}

Expand Down Expand Up @@ -224,7 +233,7 @@ hr.dashed {
.block {
background-color: rgba(0, 0, 0, 0.7);
box-shadow: 1px 2px 3px 0px rgba(20, 20, 20, 0.4);
box-shadow: 0 0 28px -8px rgb(110, 110, 110);/**/
box-shadow: 0 0 24px -8px rgb(110, 110, 110);/**/
}

.rules {
Expand Down Expand Up @@ -252,6 +261,8 @@ hr.dashed {
background:none;
box-shadow:none;
padding: 0;
margin-bottom: 0.6em;
margin-top: -.6em;
}

.rules h1, .rules h2, .rules h3, .rules h4, .rules h5, .rules h6 { color:#FFD9BB; }
Expand Down Expand Up @@ -300,33 +311,50 @@ table.table1 tbody td {
border-color: #333;
border-style: solid;
border-width: 2px;
border-radius: 4px;
}

ul.topiclist dd {
margin: 0;
margin: 0 .2em;
}

ul.topiclist {
list-style-type: none;
margin: -6px;
padding: 0;
/*margin-bottom:0;
margin-top:0;*/
}

.block ul.topiclist {
margin: -22px;/*-18px -22px -18px -22px;*/
font-size: .8em;
}

ul.topiclist li {
display: block;
margin: 6px;
}

.block ul.topiclist li {
margin: 3px;/*3px 6px;*/
padding: .8em;/*.6em;*/
}

ul.topiclist li.header {
border-width: 0;
/*margin-bottom: 15px;*/
color: white;
margin-right: .6em;
font-size: 1.4em;
font-weight: 300;
text-shadow: 0px 1px 1px #666;
white-space: nowrap;
}

ul.topiclist li:not(.header):hover,
table.directory tbody tr:hover,
table.table1 tbody tr:hover,
table.table1 tbody tr.hover {
border-color: #535353;
border-color: #666;
}

ul.topiclist dl {
Expand All @@ -335,12 +363,13 @@ ul.topiclist dl {

ul.topiclist dt, ul.topiclist dd {
display: block;
float: left;
padding: 5px;
float: right;
/*padding: 0px 5px;*/
}

ul.topiclist dt {
width: 48%;
float: left;
width: 42%;/*36%;*/
}

ul.topiclist dfn {
Expand Down

0 comments on commit b821984

Please sign in to comment.