[WIP][MOD] Responsive Theme Mod?!

[Hj Ahmad Rasyid Hj Ismail]

I am thinking of creating a simple "responsive theme" mod for SMF 2.0.x default theme based on the play around I did in here: http://www.simplemachines.org/community/index.php?topic=528295.0

That is basically, some idea that can be implemented in the display page and may be similar page like personal message page. I can already see many have the same ideas and were doing it part by part. It shouldn't be that difficult.

There are several guides that can search across the webs and one of them is this: http://css-tricks.com/css-media-queries/

I will start with display page and modify a bit of Display.template.php and its related css as I did earlier. Please feel free to fix any errors.

This part is for the css:

Code Select Expand

@media all and (max-width: 520px) {
.poster, .postarea .flow_hidden ul, .keyinfo, .modifybutton, #forumposts .reportlinks a, .signature {display:none;}
.postarea, .moderatorbar {margin: 0 0 0 1em;}
ul.quickbuttons {margin: 1em 0; float:left; text-align:left;}
ul.quickbuttons li {margin:0 0.5em 0 0;}
.keyinfo2 .avatar {float:left; margin-right: 5px; height:2em; width:2em;}
ul.quickbuttons li.approve_button, ul.quickbuttons li.quote_button, ul.quickbuttons li.modify_button, ul.quickbuttons li.remove_button, ul.quickbuttons li.split_button, ul.quickbuttons li.restore_button {background:none;}
ul.quickbuttons li a {padding:0 0.5em; border:1px solid lightblue; border-radius:5px;}
ul.quickbuttons li a:hover {background: #fff; border: 1px solid lime; border-radius:5px;}
}

@media all and (min-width: 521px) {
.keyinfo2, .bottom_buttons {display:none;}
}


I then add this top postbit code:

Code Select Expand

echo '
<div class="keyinfo2">
<div class="normaltext">', $message['member']['link'], ' ', $txt['on'], ' ', $message['time'], '';
// Show avatars, images, etc.?
if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
echo '
<div class="avatar">
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
', $message['member']['avatar']['image'], '
</a>
</div>
</div>
</div>';


Just before:

Code Select Expand

// If this is the first post, (#0) just say when it was posted - otherwise give the reply #.

In that post I put this button code above the custom signature:

Code Select Expand

echo '
<div class="bottom_buttons">';
// If this is the first post, (#0) just say when it was posted - otherwise give the reply #.
if ($message['can_approve'] || $context['can_reply'] || $message['can_modify'] || $message['can_remove'] || $context['can_split'] || $context['can_restore_msg'])
echo '
<ul class="reset smalltext quickbuttons">';

// Maybe we can approve it, maybe we should?
if ($message['can_approve'])
echo '
<li class="approve_button"><a href="', $scripturl, '?action=moderate;area=postmod;sa=approve;topic=', $context['current_topic'], '.', $context['start'], ';msg=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '">', $txt['approve'], '</a></li>';

// Can they reply? Have they turned on quick reply?
if ($context['can_quote'] && !empty($options['display_quick_reply']))
echo '
<li class="quote_button"><a href="', $scripturl, '?action=post;quote=', $message['id'], ';topic=', $context['current_topic'], '.', $context['start'], ';last_msg=', $context['topic_last_message'], '" onclick="return oQuickReply.quote(', $message['id'], ');">', $txt['quote'], '</a></li>';

// So... quick reply is off, but they *can* reply?
elseif ($context['can_quote'])
echo '
<li class="quote_button"><a href="', $scripturl, '?action=post;quote=', $message['id'], ';topic=', $context['current_topic'], '.', $context['start'], ';last_msg=', $context['topic_last_message'], '">', $txt['quote'], '</a></li>';


// Can the user modify the contents of this post?  Show the modify inline image.
if ($message['can_modify'])
echo '
<li class="quick_edit_button"><a id="modify_button_', $message['id'], '" onclick="oQuickModify.modifyMsg(\'', $message['id'], '\')" class="modify_button">Quick Edit</a></li>';

// Can the user modify the contents of this post?
if ($message['can_modify'])
echo '
<li class="modify_button"><a href="', $scripturl, '?action=post;msg=', $message['id'], ';topic=', $context['current_topic'], '.', $context['start'], '">', $txt['modify'], '</a></li>';

// How about... even... remove it entirely?!
if ($message['can_remove'])
echo '
<li class="remove_button"><a href="', $scripturl, '?action=deletemsg;topic=', $context['current_topic'], '.', $context['start'], ';msg=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '" onclick="return confirm(\'', $txt['remove_message'], '?\');">', $txt['remove'], '</a></li>';

// What about splitting it off the rest of the topic?
if ($context['can_split'] && !empty($context['real_num_replies']))
echo '
<li class="split_button"><a href="', $scripturl, '?action=splittopics;topic=', $context['current_topic'], '.0;at=', $message['id'], '">', $txt['split'], '</a></li>';

// Can we restore topics?
if ($context['can_restore_msg'])
echo '
<li class="restore_button"><a href="', $scripturl, '?action=restoretopic;msgs=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '">', $txt['restore_message'], '</a></li>';

// Maybe they want to report this post to the moderator(s)?
if ($context['can_report_moderator'])
echo '
<li class="report_button"><a href="', $scripturl, '?action=reporttm;topic=', $context['current_topic'], '.', $message['counter'], ';msg=', $message['id'], '">Report</a></li>';

// Can we issue a warning because of this post?  Remember, we can't give guests warnings.
if ($context['can_issue_warning'] && !$message['is_message_author'] && !$message['member']['is_guest'])
echo '
<li class="warning_button"><a href="', $scripturl, '?action=profile;area=issuewarning;u=', $message['member']['id'], ';msg=', $message['id'], '">Warn</a></li>';

// Show a checkbox for quick moderation?
if (!empty($options['display_quick_mod']) && $options['display_quick_mod'] == 1 && $message['can_remove'])
echo '
<li class="inline_mod_check" style="display: none;" id="in_topic_mod_check_', $message['id'], '"></li>';

if ($message['can_approve'] || $context['can_reply'] || $message['can_modify'] || $message['can_remove'] || $context['can_split'] || $context['can_restore_msg'])
echo '
</ul>';
echo '
</div>';

I have tested the mod I made earlier but not this one but I think it should work. I will keep updating this.

Feel free to contribute.