[WIP] Basic Responsive Support for Curve

[Antes]

So I'm bored officially :/ and took some time to do this, which was in my mind quite time... This is very basic responsive support for curve. This will enable only basic navigation & posting pages look nice on small screens. Don't expect miracle, its done in Curve2

Index.template

Code (Find) Select Expand

<title>', $context['page_title_html_safe'], '</title>

Code (Add After) Select Expand

<meta name="viewport" content="width=device-width, initial-scale=1">

Code (Find) Select Expand

<a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>

Code (Replace) Select Expand

<a class="', $button['active_button'] ? 'active ' : '', 'firstlevel ', $act, '" title="', $act, '" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>

Memberlist.tempate

Code (Find) Select Expand

                    <td class="windowbg2">', $member['show_email'] == 'no' ? '' : '<a href="' . $scripturl . '?action=emailuser;sa=email;uid=' . $member['id'] . '" rel="nofollow"><img src="' . $settings['images_url'] . '/email_sm.gif" alt="' . $txt['email'] . '" title="' . $txt['email'] . ' ' . $member['name'] . '" /></a>', '</td>';

        if (!isset($context['disabled_fields']['website']))
            echo '
                    <td class="windowbg">', $member['website']['url'] != '' ? '<a href="' . $member['website']['url'] . '" target="_blank" class="new_win"><img src="' . $settings['images_url'] . '/www.gif" alt="' . $member['website']['title'] . '" title="' . $member['website']['title'] . '" /></a>' : '', '</td>';

        // ICQ?
        if (!isset($context['disabled_fields']['icq']))
            echo '
                    <td class="windowbg2">', $member['icq']['link'], '</td>';

        // AIM?
        if (!isset($context['disabled_fields']['aim']))
            echo '
                    <td class="windowbg2">', $member['aim']['link'], '</td>';

        // YIM?
        if (!isset($context['disabled_fields']['yim']))
            echo '
                    <td class="windowbg2">', $member['yim']['link'], '</td>';

        // MSN?
        if (!isset($context['disabled_fields']['msn']))
            echo '
                    <td class="windowbg2">', $member['msn']['link'], '</td>';

        // Group and date.
        echo '
                    <td class="windowbg lefttext">', empty($member['group']) ? $member['post_group'] : $member['group'], '</td>
                    <td class="windowbg lefttext">', $member['registered_date'], '</td>';

        if (!isset($context['disabled_fields']['posts']))
        {
            echo '
                    <td class="windowbg2" style="white-space: nowrap" width="15">', $member['posts'], '</td>
                    <td class="windowbg statsbar" width="120">';

Code (Replace) Select Expand

                    <td class="windowbg2 hidden">', $member['show_email'] == 'no' ? '' : '<a href="' . $scripturl . '?action=emailuser;sa=email;uid=' . $member['id'] . '" rel="nofollow"><img src="' . $settings['images_url'] . '/email_sm.gif" alt="' . $txt['email'] . '" title="' . $txt['email'] . ' ' . $member['name'] . '" /></a>', '</td>';

        if (!isset($context['disabled_fields']['website']))
            echo '
                    <td class="windowbg hidden">', $member['website']['url'] != '' ? '<a href="' . $member['website']['url'] . '" target="_blank" class="new_win"><img src="' . $settings['images_url'] . '/www.gif" alt="' . $member['website']['title'] . '" title="' . $member['website']['title'] . '" /></a>' : '', '</td>';

        // ICQ?
        if (!isset($context['disabled_fields']['icq']))
            echo '
                    <td class="windowbg2 hidden">', $member['icq']['link'], '</td>';

        // AIM?
        if (!isset($context['disabled_fields']['aim']))
            echo '
                    <td class="windowbg2 hidden">', $member['aim']['link'], '</td>';

        // YIM?
        if (!isset($context['disabled_fields']['yim']))
            echo '
                    <td class="windowbg2 hidden">', $member['yim']['link'], '</td>';

        // MSN?
        if (!isset($context['disabled_fields']['msn']))
            echo '
                    <td class="windowbg2 hidden">', $member['msn']['link'], '</td>';

        // Group and date.
        echo '
                    <td class="windowbg lefttext">', empty($member['group']) ? $member['post_group'] : $member['group'], '</td>
                    <td class="windowbg lefttext hidden">', $member['registered_date'], '</td>';

        if (!isset($context['disabled_fields']['posts']))
        {
            echo '
                    <td class="windowbg2" style="white-space: nowrap" width="15">', $member['posts'], '</td>
                    <td class="windowbg statsbar hidden" width="120">';

MessageIndex.template

Code (Find) Select Expand

<th scope="col" width="14%">

Code (Replace) Select Expand

<th scope="col" width="14%" class="hidden">

Who.tempate

Code (Find) Select Expand

<td nowrap="nowrap">', $member['time'], '</td>

Code (Replace) Select Expand

<td nowrap="nowrap" class="hidden">', $member['time'], '</td>

Index.css

Code (Add to End) Select Expand

@media screen and (max-width: 720px) {
    #wrapper {
        width: 100% !important;
        min-width: 100px !important;
    }
    #header {
        background: #FEFEFE;
    }
    #header div.frame {
        background: none;
    }
    td.info, td.subject {
        line-height: 1.5em;
    }
    td.subject div {
        padding: 3px;
    }
    .hidden,
    .icon, .lastpost, .stats, #posting_icons, #mlist th,
    th.first_th, th.last_th, .icon1, .icon2, .repview {
        display: none;
    }
    img.icon {
        display: inline-block;
    }
    #topic_icons p {
        display: block;
        width: 100%;
    }
    .poster, .postarea, .moderatorbar {
        margin: 0;
        float: none;
        width: 100%;
    }
    .poster, .postarea, .post {
        padding: 5px;
    }
    .buttonlist li {
        width: 50%;
    }
    .buttonlist li a {
        margin: 3px;
    }
    .mark_read .buttonlist {
        float: none;
        margin: 0 auto;
    }
    .mark_read .buttonlist li {
        width: 80%;
    }
    ul.post_options li {
        width: 100%;
    }
    #post_header dt, #post_header dd, #post_header input {
        width: 90%;
    }
    div#upper_section div.user, .keyinfo {
        width: 100%;
    }
    #upper_section div.news {
        width: 100%;
        float: none;
    }
    .login {
        width: 100%;
    }
    .login dt, .login dd {
        float: none;
        text-align: left;
        width: 90%;
    }
    #basicinfo, #detailedinfo {
        width: 100%;
    }
    #advanced_search dt, #advanced_search dd {
        width: 100%;
        float: none;
        text-align: left;
    }
    em.smalltext {
        display: none;
    }
    #advanced_search {
        text-align: left !important;
    }
    input.enhanced {
        display: block;
    }
    .enhanced select {
        display: block;
    }
    #advanced_search dl#search_options {
        width: 100%;
    }
    #searchform .input_text {
        width: 75%;
    }
    /* Since you asked nicely */
    #main_menu .dropmenu span {
        display: none;
    }
    #main_menu .dropmenu li a {
        display: inline-block;
        height: 16px;
        width: 16px;
        float: left;
    }
    .dropmenu li a.home {
        background: url(../images/evil_black_cat/home.png) no-repeat !important;
    }
    .dropmenu li a.help {
        background: url(../images/evil_black_cat/help.png) no-repeat !important;
    }
    .dropmenu li a.search {
        background: url(../images/evil_black_cat/search.png) no-repeat !important;
    }
    .dropmenu li a.admin {
        background: url(../images/evil_black_cat/admin.png) no-repeat !important;
    }
    .dropmenu li a.moderate {
        background: url(../images/evil_black_cat/moderate.png) no-repeat !important;
    }
    .dropmenu li a.profile {
        background: url(../images/evil_black_cat/profile.png) no-repeat !important;
    }
    .dropmenu li a.pm {
        background: url(../images/evil_black_cat/pm.png) no-repeat !important;
    }
    .dropmenu li a.mlist {
        background: url(../images/evil_black_cat/mlist.png) no-repeat !important;
    }
    .dropmenu li a.logout {
        background: url(../images/evil_black_cat/logout.png) no-repeat !important;
    }
    .dropmenu li a.login {
        background: url(../images/evil_black_cat/login.png) no-repeat !important;
    }
    .dropmenu li a.register {
        background: url(../images/evil_black_cat/register.png) no-repeat !important;
    }
    .dropmenu li a.calendar {
        background: url(../images/evil_black_cat/calendar.png) no-repeat !important;
    }
    #main_menu .dropmenu li:hover ul {
        display: none;
    }
    /* Admin Stuff */
    #menu_toggle {
        display: none;
    }
    h3.catbg #quick_search form {
        margin: 0 0 8px 0;
        padding: 0;
    }
    h3.catbg #quick_search form input {
        margin: 0 0 12px 0;
    }
    h3.catbg #quick_search form select option {
        padding: 4px 4px;
    }
    h3.catbg #quick_search form .button_submit {
        margin: 0 3px 0 3px;
    }
    #live_news, #supportVersionsTable {
        width: 100% !important;
    }
    #live_news {
        margin: 0 0 6px 0;
    }
    #supportVersionsTable {
        padding: 0;
    }
    #quick_tasks li {
        display: block;
        width: 100% !important;
        clear: both;
        height: 6em !important;
    }
    #credits_page {
        padding-top: 35px;
    }
    #credits_page img {
        right: 6px;
    }
    #core_features .features_image {
        display: none;
    }
    #core_features .features_switch {
        margin: -24px 0 0 5px;
    }
    #core_features .features h4 {
        padding: 0 0 10px 0;
    }
    #core_features .features p {
        margin: 0;
        padding: 0;
        min-height: 0;
        max-height: 5em;
        overflow: auto;
    }
    #manage_boards .catbg {
        margin-top: 10px;
    }
    #manage_boards .windowbg {
        line-height: 3.2em;
    }
    #manage_boards ul {
        max-height: 120em;
        padding: 0 0 10px 0;
    }
    #manage_boards dd, #manage_boards dt {
        width: 100%;
    }
    #manage_boards dt {
        line-height: 1.6em;
    }
    #admincenter dt, #admincenter dd {
        width: 100%;
    }
    #admin_menu li {
        width: 55%;
    }
    #admin_menu li ul li {
        width: 100%;
    }
    #admin_menu li ul ul {
        right: -1px;
    }
}

Upload the folder (inside zip) to images folder.

Code snip licensed under MIT.
Icons: Fugue Icons | © 2012 Yusuke Kamiyamane | These icons are licensed under a Creative Commons Attribution 3.0 License
Special Thanks to Antechinus

[margarett]

Now use the menu with font awesome (there was a MOD for it, didn't make it )and it's an excellent first approach

[Antes]

If I'm not mistaken you mean something like this ?

Edit: Updated first post.

[Antechinus]

That mod was approved alright. It's down in the mod board.

Nice basic approach anyway. If you check in Look and Feel I think there's basic code for admin responsive, which should work with 2.0.x default markup. If the actual code isn't there (I know shots are) then I probably still have it somewhere on desktop.

[Antechinus]

Oh and you don't really need the edit to the buttons PHP, since the li's have the right id anyway and you can just use those. #button_register a etc will do your icons just fine.

[Antes]

I don't want to disrespect the mod author but I find loading whole FA into SMF just for main_menu overkill. I'm not gonna touch admin side, probably fix some actions and jump to some popular mods then be done with it

Oh and you don't really need the edit to the buttons PHP, since the li's have the right id anyway and you can just use those. #button_register a etc will do your icons just fine.

but isn't it gonna disable "a" sub element? I'm giving icons to "a" element, but giving it to li make "a" element empty?

[Antechinus]

Yeah fair enough on both counts. I was just thinking that since I probably have the admin code stashed anyway, it could easily be added to this thread. I did find the shots* but there's no code in Look & Feel.

*Dev board link, not visible to most people.

ETA: Come to think of it, that code should be in admin.css in any old 2.1 build.

[Antechinus]

Here, I'm pretty sure this is it:

Code Select Expand

@media screen and (max-width: 490px),(max-width: 32em) {
body {
padding: 0;
}
#wrapper, #footer_section .frame {
min-width: 100%;
}
#main_content_section {
padding: 0 10px;
}
/* Level 1 button background. */
.dropmenu li {
line-height: 3.2em;
}
.dropmenu li ul {
top: 3.45em;
}
.dropmenu li li a {
line-height: 3.2em;
}
#menu_toggle {
display: none;
}
h3.catbg #quick_search form {
margin: 0 0 8px 0;
padding: 0;
}
h3.catbg #quick_search form input {
margin: 0 0 12px 0;
}
h3.catbg #quick_search form select option {
padding: 4px 4px;
}
h3.catbg #quick_search form .button_submit {
margin: 0 3px 0 3px;
}
#live_news, #supportVersionsTable {
width: 100%;
}
#live_news {
margin: 0 0 6px 0;
}
#supportVersionsTable {
padding: 0;
}
#quick_tasks ul li span {
display: block;
margin: 0 0 0 50px;
}
#credits_page {
padding-top: 35px;
}
#credits_page img {
right: 6px;
}
#core_features .features_image {
display: none;
}
#core_features .features_switch {
margin: -24px 0 0 5px;
}
#core_features .features h4 {
padding: 0 0 10px 0;
}
#core_features .features p {
margin: 0;
padding: 0;
min-height: 0;
max-height: 5em;
overflow: auto;
}
#manage_boards .catbg {
margin-top: 10px;
}
#manage_boards .windowbg {
line-height: 3.2em;
}
#manage_boards ul {
max-height: 120em;
padding: 0 0 10px 0;
}
#manage_boards dd, #manage_boards dt {
width: 100%;
}
#manage_boards dt {
line-height: 1.6em;
}
}


[Antes]

Thanks a lot I'll look into this tomorrow and use the parts

[Antechinus]

I just tried it on local on vanilla 2.0.x. It's not complete, but it's got some of the basics. Should play fairly well with what you already have. Doesn't like the default 2.0.x drop menus though. I think we were running Superfish already when I coded that, but it would only need a bit of tweaking for submenu positioning, which you probably have covered anyway.

[Antes]

Did you tried to update Superfish inside SMF 2.0.x ? Latest version is fixed for most of the mobile devices (one tap open menu, second tap follow the link).

[Antechinus]

You mean the old Tips and Tricks thread? Haven't looked at it for ages. I assume anyone wanting SF would get the latest, but I suppose I could update the thread.

On Apocalypse I have SF/hoverIntent/theme.js all rolled into one and minified, with Superclick as a profile option that is called the same way. I could add that to the old thread, but really people are better off looking at Apocalypse and pulling that to pieces for ideas.

[Antes]

Added some more stuff, and thanks to Antechinus, added some basic admin side responsive stuff as well

maybe I should pack this and make mod... no?

[Antechinus]

Wouldn't hurt. It's easy to manually add this stuff to the end of the css files, but more people would probably see it on the mod site.

[Arantor]

Until people ask for help with their random custom theme that doesn't work with this.

[Antechinus]

It'll probably do fairly well with most custom themes. It's mainly just spacings and display, not colours and stuff, and the average themer is not at all adventurous with template edits.

[Antes]

Theme authors can take the codes and apply to their themes. I can say generic stuff applies to all themes.

[Hj Ahmad Rasyid Hj Ismail]

I don't want to disrespect the mod author but I find loading whole FA into SMF just for main_menu overkill.

Yes. You are right. I added them inside so that it will not be dependant on outside source or site. But if you want it to be lighter, simply use <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet"> and remove its css files.

Note: some host may not allow cross domain by default. So if you are attempting this, you may need to edit your htaccess file accordingly.

[Biology Forums]

I say that if you want to use the font awesome mod, it will only be beneficial in the long run if you replace most image icons that come preinstalled with smf with font awesome icons. Loading images can take as much time as loading the font awesome script

[Hj Ahmad Rasyid Hj Ismail]

Precisely. That why it was 74k in that 101 package compared to the latest 4k in 101 light package. 70k is a compressed zip file. Otherwise it will be like 125k for both css (24k) and font (101k). I removed both and use css import in the light version and expect cross browser /  domain problem for some sites. I hope there will not be any problem though.