Responsive Curve

[Diego Andrés]

v1.1 - Basic bug fixes and small improvements

[nubieteky]

I want the "Views/Replies" viewable when in responsive mode in Topics

Im using SMF Curve theme
and have Responsive Curve installed.



Thank you for the Help

[shadav]

in your responsive.css
find and remove

Code Select Expand

@media screen and (max-width: 720px)
table.table_list tbody.content td.stats, .lastpost {
    display: none;
}
should do what you want, though that might show it in other places that you didn't want

or you can reverse the edits in MessageIndex.template.php in the parse
basically find all instances of the word hidden and delete it

find

Code Select Expand

<th scope="col" class="first_th hidden" width="8%" colspan="2">&nbsp;</th>replace

Code Select Expand

<th scope="col" class="first_th" width="8%" colspan="2">&nbsp;</th>
find

Code Select Expand

<th colspan="3" class="no_topics"><strong>', $txt['msg_alert_none'], '</strong></th>replace

Code Select Expand

<th colspan="3"><strong>', $txt['msg_alert_none'], '</strong></th>
find

Code Select Expand

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

Code Select Expand

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

Code Select Expand

if (empty($context['can_quick_mod']))
echo '
<th scope="col" class="lefttext hidden last_th" width="22%"><a href="', $scripturl, '?board=', $context['current_board'], '.', $context['start'], ';sort=last_post', $context['sort_by'] == 'last_post' && $context['sort_direction'] == 'up' ? ';desc' : '', '">', $txt['last_post'], $context['sort_by'] == 'last_post' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a></th>';replace

Code Select Expand

if (empty($context['can_quick_mod']))
echo '
<th scope="col" class="lefttext last_th" width="22%"><a href="', $scripturl, '?board=', $context['current_board'], '.', $context['start'], ';sort=last_post', $context['sort_by'] == 'last_post' && $context['sort_direction'] == 'up' ? ';desc' : '', '">', $txt['last_post'], $context['sort_by'] == 'last_post' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a></th>';
find

Code Select Expand

else
echo '
<th scope="col" class="lefttext hidden" width="22%"><a href="', $scripturl, '?board=', $context['current_board'], '.', $context['start'], ';sort=last_post', $context['sort_by'] == 'last_post' && $context['sort_direction'] == 'up' ? ';desc' : '', '">', $txt['last_post'], $context['sort_by'] == 'last_post' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a></th>';replace

Code Select Expand

else
echo '
<th scope="col" class="lefttext" width="22%"><a href="', $scripturl, '?board=', $context['current_board'], '.', $context['start'], ';sort=last_post', $context['sort_by'] == 'last_post' && $context['sort_direction'] == 'up' ? ';desc' : '', '">', $txt['last_post'], $context['sort_by'] == 'last_post' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a></th>';

[nubieteky]

Not sure but its not working here for this first option you have mentioned.
 

Code Select Expand

.mobile_on
{
   visibility: hidden;
}
.responsive_menu.login
{
   min-width: 16px;
   width: auto;
}

@media screen and (min-width: 240px) and (max-width: 640px) {
   /* Considering something trying to be bad boy and editing body (especially portals!) */
   body {
      min-width: 240px !important;
   }
   
   /* Calendar Time */
   #month_grid, #month_grid table,
   #main_grid
   {
      float: none;
      width: 100%;
   }
   #main_grid {
      margin-left: 0 !important;
   }
   
   /* Load menu icons */
   .responsive_menu {
      background: url(../images/responsive_menu.png) no-repeat -5px -5px;
      height: 16px;
      width: 16px;
      display: inline-block;
   }
   .responsive_menu.admin {
      background-position: -31px -5px;
   }
   .responsive_menu.calendar {
      background-position: -57px -5px;
   }
   .responsive_menu.forum {
      background-position: -5px -31px;
   }
   .responsive_menu.help {
      background-position: -31px -31px;
   }
   .responsive_menu.home {
      background-position: -57px -31px;
   }
   .responsive_menu.login {
      background-position: -5px -57px;
   }
   .responsive_menu.logout {
      background-position: -31px -57px;
   }
   .responsive_menu.mlist {
      background-position: -57px -57px;
   }
   .responsive_menu.moderate {
      background-position: -83px -5px;
   }
   .responsive_menu.pm {
      background-position: -83px -31px;
   }
   .responsive_menu.profile {
      background-position: -83px -57px;
   }
   .responsive_menu.register {
      background-position: -5px -83px;
   }
   .responsive_menu.search {
      background-position: -31px -83px;
   }

   /* If it has more items, make some margin */
   #main_menu {
      margin: -15px 0 0 0;
   }
   .dropmenu li {
      margin: 0 0 5px 0;
   }
   /* Do not hover or show them... */
   #menu_nav .dropmenu li a.active, #menu_nav .dropmenu li a.active:hover,
   #menu_nav .dropmenu li:hover, #menu_nav .dropmenu li a:hover,
   #menu_nav .dropmenu li a.firstlevel:hover, #menu_nav li:hover,
   #menu_nav .dropmenu li:hover, #menu_nav .dropmenu li:hover a.firstlevel,
   #main_menu .dropmenu li a.active, #main_menu .dropmenu li a:hover,
   #main_menu .dropmenu li:hover ul, #main_menu .dropmenu li ul {
      background: none !important;
   }
   .keyinfo h5, .keyinfo .messageicon, #messageindex .last_th {
      display: none;
   }

   .bbc_img {
      max-width: 100%;
      max-height: 100%;
   }
}

@media screen and (max-width: 480px) {
   table.table_list tbody.content td.icon, table.table_list a.unreadlink, table.table_list a.collapse,
   #index_common_stats
   {
      display: none;
   }
   .mobile_on
   {
      visibility: visible;
   }
   .poster li.avatar
   {
      display: none;
   }
   #manage_boards .cat_bar
   {
       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;
   }
}

@media screen and (max-width: 640px) {
   .nav_bar_inner, .top_bar_inner, .headerm_inner
   {
      width: 100%;
   }
   .headerm, .headerm_inner
   {
      height: auto;
   }
   .logo_banner
   {
      text-align: center;
      max-width: 640px;
   }
   .logo_banner a > img
   {
      max-width: 90%;
   }
   .quick_search_holder, #search_form
   {
      text-align: center;
      margin: 0 auto;
      float: none;
   }
   .dropmenu li
   {
      width: 51%;
   }
   .dropmenu li li, .dropmenu li li li
   {
      width: 100%;
      text-align: left;
   }
   .dropmenu li ul
   {
      width: 100%;
   }
   #quick_tasks li
   {
      height: auto !important;
      padding: 0;
      width: 100% !important;
      float: none !important;
   }
   .home_image
   {
      clear: both;
   }
   .poster li.avatar img
   {
      width: 50px !important;
      height: 50px !important;
   }
   #siteslogan, img#smflogo, .contact_info
   {
      display: none;
   }
   .hidden, .icon, .stats, #posting_icons, #mlist th, .icon1, .icon2
   {
      display: none;
   }
   #statistics .stats
   {
      display: block;
   }
   #stats_left, #top_posters, #top_topics_replies, #top_topics_starter,
   #stats_right, #top_boards, #top_topics_views, #most_online,
   #popularposts, #popularactivity
   {
      width: 100%;
      float: none;
   }
   #report_post input {
      width: 95%;
      min-height: 50px;
   }
   .tborder .topic_table th.first_th
   {
      display: none;
   }
   #topic_icons p
   {
      display: block;
      width: 100%;
   }
   #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;
   }
   h3.catbg #quick_search form .button_submit
   {
      margin: 0 3px;
   }
   #credits_page
   {
      padding-top: 35px;
   }
   .features_image
   {
      display: none;
   }
   .features_switch
   {
      margin: -20px 0 0 5px !important;
   }
   .features h4
   {
      margin: -10px 0 0 0 !important;
      padding: 0 0 10px 0;
   }
   .features p
   {
      margin: 0;
      padding: 0;
      min-height: 0;
      max-height: 5.2em;
      overflow: auto;
   }
   .mark_read .buttonlist
   {
      float: none;
      margin: 0 auto;
   }
   .mark_read .buttonlist li
   {
      width: auto;
   }
   #advanced_search
   {
      text-align: left !important;
   }
   em.smalltext
   {
      display: none;
   }
   #advanced_search dt, #advanced_search dd
   {
      width: 100%;
      float: none;
      text-align: left;
      margin: 0;
   }
   .login dt, .login dd
   {
      float: none;
      text-align: left;
      width: 90%;
   }
   input.enhanced
   {
      display: block;
   }
   .enhanced select
   {
      display: block;
   }
   #advanced_search dl#search_options
   {
      width: 100%;
   }
   #searchform .input_text, select
   {
      width: 95%;
      padding: 5px 0;
   }
   .ignoreboards
   {
      width: 100% !important;
      float: none !important;
   }
   #searchBoardsExpand
   {
      overflow: hidden;
   }
   /* Since you asked nicely */
   #main_menu .dropmenu li {
      width: auto !important;
   }
   #main_menu .dropmenu span.firstlevel {
      display: none;
   }
   #main_menu .dropmenu li:hover ul {
      display: none;
   }
}

@media screen and (max-width: 720px) {
   body
   {
      padding: 0 !important;
      min-width: 200px !important;
      max-width: 720px;
   }
   #wrapper, div#wrapper
   {
      width: 100% !important;
      min-width: 240px !important;
      max-width: 720px !important;
   }
   div#upper_section div.user
   {
      text-align: center;
      float: none !important;
      width: 100%;
      box-sizing: border-box;
   }
   div#upper_section div.user p, div#upper_section div.user p > .avatar
   {
      max-width: 100px;
      max-height: 100px;
      float:  none !important;
      margin: 0 auto;
      text-align: center !important;
   }
   #upper_section div.news
   {
      width: 100%;
      float: none;
      text-align: center;
      margin: 0 auto;
   }
   table.table_list tbody.content td.stats, .lastpost
   {
      display: none;
   }
   img.icon
   {
      display: inline-block;
   }
   #basicinfo, #detailedinfo, .modblock_left, .modblock_right, #live_news, #supportVersionsTable
   {
      width: 100% !important;
      float: none;
      margin: 0 0 3px;
      box-sizing: border-box;
      overflow: hidden;
   }
   .postarea, .moderatorbar
   {
      width: 100%;
      margin: 0;
   }
   .poster
   {
      float: none;
      width: 100%;
      height: auto;
   }
   .poster li.avatar img
   {
      width: 100px !important;
      height: 100px !important;
   }
   .poster li.stars, .poster li.blurb, li.postcount,
   li.im_icons, li.title, li.postgroup, li.karma,
   li.karma_allow, li.gender, li.custom, li.email, li.warning
   {
      display: none;
   }
   .login
   {
      width: auto !important;
   }
   dl
   {
      overflow: hidden !important;
   }
/*   dd, dt
   {
      float: none !important;
      width: 100% !important;
      overflow: hidden;
      text-align: left !important;
   }*/
   .inner
   {
      padding: 1em .5em 2px .5em;
      margin: 0;
   }
   .signature, .attachments
   {
      width: 100%;
      margin: 1em 0 0;
      padding: 1em 1em 3px;
      box-sizing: border-box;
   }
   .keyinfo
   {
      background: none;
      text-align: center;
      width: 100% !important;
   }
   .buttonlist ul li
   {
      margin: 2px 0;
   }
   .buttonlist ul li a span
   {
      height: auto;
   }
   #quick_tasks li
   {
      height: 5em !important;
      padding: 0;
   }
   #main_admsection #basicinfo h4
   {
      width: 100% !important;
   }
   #left_admsection
   {
      margin: 0 0 8px;
      padding: 0 0 5px;
      border-bottom: 3px solid #dbe4ef;
      float: none;
      width: 100%;
   }

   /* some dirty fix for SP :)*/
   #sp_left, #sp_right, #sp_center
   {
      width: 100%;
      display: block;
   }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
   table.table_list tbody.content td.stats
   {
      display: none;
   }
   table.table_list tbody.content td.lastpost, .topic_table table tbody tr td.lastpost
   {
      width: 35% !important;
   }
}

[shadav]

Code Select Expand

   table.table_list tbody.content td.stats, .lastpost
   {
      display: none;
   }

[nubieteky]

Nice Thanks Shadav,

Looks Awsome I love it! My responsive curve has more volume and feel!
Main page looks a bit strange though but i can live with that. Thank you :*

[Antechinus]

You could easily adjust the main page too. Just switch the td's to display: block; in that same resolution range. Try this:

Code Select Expand

@media screen and (max-width: 720px) {
.table_list, .table_list tbody, .table_list tr, .table_list td {
display: block;
width: auto !important;
}
See how that looks. More tweaks are easy if you want them.

[dan4ever]

Hi

Looks like SMF 2.0.19 update change Memberlist.template.php
It will not install

/Dan

[Diego Andrés]

Will check on it later, thanks for reporting!

[Diego Andrés]

@dan4ever I just attempted to install and had no issues:

You cannot view this attachment.

[dan4ever]

OK, yes I found it...

Another Mod had changed it...

A Big Sorry from me...