Advertisement:

Author Topic: SMF 2.1 RC3 - Change your board index to be tabbed categories  (Read 729 times)

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 60,090
  • Gender: Male
    • Kindred-999 on GitHub
SMF 2.1 RC3 - Change your board index to be tabbed categories
« on: December 08, 2020, 05:45:00 PM »
Code: (In BoardIndex.template.php find this code) [Select]
/* Each category in categories is made up of:
id, href, link, name, is_collapsed (is it collapsed?), can_collapse (is it okay if it is?),
new (is it new?), collapse_href (href to collapse/expand), collapse_image (up/down image),
and boards. (see below.) */

foreach ($context['categories'] as $category)
{
// If theres no parent boards we can see, avoid showing an empty category (unless its collapsed)
if (empty($category['boards']) && !$category['is_collapsed'])
continue;

echo '
<div class="main_container">
<div class="cat_bar ', $category['is_collapsed'] ? 'collapsed' : '', '" id="category_', $category['id'], '">
<h3 class="catbg">';

// If this category even can collapse, show a link to collapse it.
if ($category['can_collapse'])
echo '
<span id="category_', $category['id'], '_upshrink" class="', $category['is_collapsed'] ? 'toggle_down' : 'toggle_up', ' floatright" data-collapsed="', (int) $category['is_collapsed'], '" title="', !$category['is_collapsed'] ? $txt['hide_category'] : $txt['show_category'], '" style="display: none;"></span>';

echo '
', $category['link'], '
</h3>', !empty($category['description']) ? '
<div class="desc">' . $category['description'] . '</div>' : '', '
</div>
<div id="category_', $category['id'], '_boards" ', (!empty($category['css_class']) ? ('class="' . $category['css_class'] . '"') : ''), '>';

Either comment it out or delete it

Then
Code: (replace with this code) [Select]
// tabbed categories -- start
foreach ($context['categories'] as $category_tab)
{
// If theres no parent boards we can see, avoid showing an empty category
if (empty($category_tab['boards']))
continue;

echo '
<input class="cat_tab" id="category_', $category_tab['id'], '" type="radio" name="cattabs" ', $category_tab['id']==1 ? 'checked' : '' , '>
<label for="category_', $category_tab['id'], '" class="cat_tab"><h3 class="catbg">', $category_tab['name'], '</h3></label>';
}

foreach ($context['categories'] as $category)
{

echo'
<div class="cat_board_content">
<div id="category_', $category['id'], '_boards">
', !empty($category['description']) ? '
<div class="cat_bar"><div class="desc">' . $category['description'] . '</div></div>' : '', '';
// tabbed categories -- end

Code: (in index.css add this to the end of the file) [Select]
/* tabbed categories */
.cat_board_content > div {
display: none;
padding: 20px 25px 5px;
}
input.cat_tab {display: none;}
label.cat_tab {
background: #557ea0;
border-bottom: 1px solid #777;
padding: 5px 15px;
border-radius: 6px 6px 0 0;
box-shadow: 0 16px 20px rgba(255, 255, 255, 0.15) inset;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
display: inline-block;
}
label.cat_tab:hover {
color: #222;
background: orange;
cursor: pointer;
}
input.cat_tab:checked + label .cat_tab  {
background: orange;
color: #222;
}

/* there are 11 categories defined here, if you have more than 11, add more lines in the same pattern */
#category_1:checked ~ .cat_board_content #category_1_boards,
#category_2:checked ~ .cat_board_content #category_2_boards,
#category_3:checked ~ .cat_board_content #category_3_boards,
#category_4:checked ~ .cat_board_content #category_4_boards,
#category_5:checked ~ .cat_board_content #category_5_boards,
#category_6:checked ~ .cat_board_content #category_6_boards,
#category_7:checked ~ .cat_board_content #category_7_boards,
#category_8:checked ~ .cat_board_content #category_8_boards,
#category_9:checked ~ .cat_board_content #category_9_boards,
#category_10:checked ~ .cat_board_content #category_10_boards,
#category_11:checked ~ .cat_board_content #category_11_boards {
display: block;
}


Added before and after in the curve2 theme
(WithTabs1 shows a category with no description, WithTabs2 shows a category with a description)
« Last Edit: December 10, 2020, 01:07:40 PM by Kindred »
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Offline landyvlad

  • Sr. Member
  • ****
  • Posts: 965
  • Gender: Male
    • Michael Reed on Facebook
    • GSX1400 Owners ORG
Re: SMF 2.1 RC3 - Change your board index to be tabbed categories
« Reply #1 on: December 09, 2020, 07:51:46 PM »
Hey mate do you have before and after screenshots by any chance?
Please do not PM, IM or Email me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

To paraphrase Kindred: "There are no technical solutions to social problems."

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 60,090
  • Gender: Male
    • Kindred-999 on GitHub
Re: SMF 2.1 RC3 - Change your board index to be tabbed categories
« Reply #2 on: December 09, 2020, 08:37:04 PM »
Well, I have the after shown  on my test site...

test2.turtleshellprod.com

The before was just the standard display.
(That test site has only changes to css to have the green look, so it's core code, except the css and these changes)
:)

I'll see what I can put together.
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 60,090
  • Gender: Male
    • Kindred-999 on GitHub
Re: SMF 2.1 RC3 - Change your board index to be tabbed categories
« Reply #3 on: December 10, 2020, 12:47:43 PM »
added before and after screen shots to the OP
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Online shadav

  • Support Specialist
  • Sophist Member
  • *
  • Posts: 1,078
  • Gender: Female
    • shadav on Facebook
    • leashadav on GitHub
    • Ask The Muslims: A Place To Ask Honest Questions and Receive Respectful Answers
Re: SMF 2.1 RC3 - Change your board index to be tabbed categories
« Reply #4 on: January 01, 2021, 05:26:10 PM »
hm...slight snag...
when loading the page the category doesn't show....if I click on the category tab it does pop up

is there a default tab that should be set somewhere?

[edit]while typing this out figured out the issue...I deleted the default category created so I didn't have a id_cat 1

i tried to remove
Code: [Select]
#category_1:checked ~ .cat_board_content #category_1_boards,from the css but that didn't do anything

since it's a test board i went in to the db and changed the category id from 2 to 1 and 3 to 2 and then the boards id_cat to reflect the change and now it works as it's supposed to....

so that may be an issue with others that deleted the default category instead of editing it

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 60,090
  • Gender: Male
    • Kindred-999 on GitHub
Re: SMF 2.1 RC3 - Change your board index to be tabbed categories
« Reply #5 on: January 02, 2021, 08:11:17 AM »
Ah, yeah... didn't think about that...   but yes,  the CSS depends on the category ID
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."