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...

[Sir Osis of Liver]

Has anyone noticed Responsive Curve 1.1 doesn't work in 2.0.19?  Had to reinstall 1.0.0.

[Diego Andrés]

Has anyone noticed Responsive Curve 1.1 doesn't work in 2.0.19?  Had to reinstall 1.0.0.

Details?

[Sir Osis of Liver]

It doesn't work at all.  Cleaned up a 2.0.19 forum, php 8.0, updated mods including Responsive Curve 1.0 -> 1.1, got complaints right away.  Most pages are offscren right, have to scroll way over to read them.  Had to revert to 1.0.

[shawnb61]

Hmmm...

I'm not seeing any issues with 2.0.19 & RC 1.1.

Default theme or other theme?
Have you tried default theme?
Screenshot?
Is it possible your language has rtl specified somehow?

You know the drill, more info helps.

[Sir Osis of Liver]

Don't want to reinstall it on client forum, will see if I can replicate on test install.

[Sir Osis of Liver]

Uninstalled 1.0, reinstalled 1.1, manual edit in Memberlist.php for both.  Seemed to work at first, loaded a few pages and it screwed up.  Screenshots attached.

Installed mods:
    Responsive Curve 1.0.0
    Image for Anti-Spam Verification Questions 1.6
    Stop Forum Spam 1.4
    Automatic Attachment Rotation (and Resize) 6.16
    The Rules 1.3
    SimplePortal 2.3.7

Version Information:
   Forum version: SMF 2.0.19 (more detailed)
   Current SMF version: SMF 2.0.19
   GD version: 2.3.3
   Database Server: MariaDB
   MySQL version: 10.3.38-MariaDB-cll-lve
   PHP: 8.0.28
   Server version: LiteSpeed

Works ok in clean 2.0 install.  Could be one of the mods.

  You cannot view this attachment.    You cannot view this attachment.

[Diego Andrés]

Probably simple portal?
I'll test with that later.

[Diego Andrés]

Works ok in clean 2.0 install.  Could be one of the mods.

It's an issue with simple portal.
Check this post: https://www.simplemachines.org/community/index.php?topic=525855.msg3727272#msg3727272

[Sir Osis of Liver]

That's over nine years ago, would have thought they'd fixed it by now.  Doesn't happen in SP 1.0, just in 1.1.  Can try the code edit, but I believe device-width is deprecated.