• Welcome to Simple Machines Community Forum. Please login or sign up.
December 08, 2021, 02:15:56 AM

News:

SMF 2.1 RC4 has been released! Try it out and help us test! :) Read more.


Responsive Curve

Started by SMF Customization Team, April 20, 2015, 06:33:49 AM

Previous topic - Next topic

Diego Andrés

v1.1 - Basic bug fixes and small improvements

SMF Tricks - Free & Premium Responsive Themes for SMF.

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
@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
<th scope="col" class="first_th hidden" width="8%" colspan="2">&nbsp;</th>replace
<th scope="col" class="first_th" width="8%" colspan="2">&nbsp;</th>
find
<th colspan="3" class="no_topics"><strong>', $txt['msg_alert_none'], '</strong></th>replace
<th colspan="3"><strong>', $txt['msg_alert_none'], '</strong></th>
find
<th scope="col" width="14%" class="hidden">replace
<th scope="col" width="14%">
find
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
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
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
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.
 :(


.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

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

nubieteky

September 02, 2021, 09:09:18 AM #545 Last Edit: September 02, 2021, 09:28:39 AM by 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:

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

Advertisement: