Attempting to show All Categories view on 2 columns without success, am I doing it wrong?

Fraktar

Notes:
1. Using v2.3.
2. Working inside an IDE, Cloud9 to be more specific.
3. PHP noob, lurking around, read the docs, willing to learn.

Most themes are built on a 2 column layout (content & panel). I would like to display the /categories view in both columns and remove the right panel, something similar to Blizzard's SC2 forum.

Tried both a new theme cloned from the default one and the Gopi theme.

Copied default.master.tpl from /dashboard/views into my-theme/views and also /vanilla/views/categories/all.php into my-theme/views/categories/all.php as I suspected that's where I should edit things.

In my default.master.tpl we have..

        <div class="Row">
            <div class="col-9" id="Content">
                <div class="ContentColumn">
                    {asset name="Content"}
                </div>
            </div>
            {if !InSection(array("Entry", "PostDiscussion"))}
            <div class="col-3 PanelColumn" id="Panel">
                {asset name="Panel"}
            </div>
            {/if}
        </div>

Basically, the {asset name="Content"} spits out the HTML with the unordered list, as far as I understand it.

In all.php (line 59~):

$CatList .= '<li id="Category_'.$CategoryID.'" class="'.$CssClass.'">
               <div class="ItemContent Category">'
                .'<div class="Options">'
                .getOptions($Category, $this)
                .'</div>'
                .CategoryPhoto($Category)
                .'<div class="TitleWrap">'
                .anchor(Gdn_Format::text($Category->Name), CategoryUrl($Category), 'Title')
                .'</div>
                  <div class="CategoryDescription">'
                .$Category->Description
                .'</div>
               </div>
            </li>';

I'm thinking we can remove the Panel asset and create two col-6 divs and then mess with the PHP code in all.php, but I'm not sure what's the right way to tell PHP to spit out the categories in two different columns.

Am I looking where I should be? Stop me if I'm not on the right track, please.

Any help would be greatly appreciated.

x00

adding classes to views is the wrong way to go about styling. Use the vanilla selectors.

It is not a good idea to use view overrides, as it makes updating problematic. You should be able to achieve this through css without changign markup.

Blizzard is using

margin: 1.25rem 0.625rem 0;
width: calc(100% / 2 - 1.25rem);

however I would do something simpler and more standard like

.CategoryList .Item {
    float: left;
    margin: 0;
    padding: 0;
    width: 50%;
    height: 98px;
}

.CategoryList .Item .Category {
    margin: 6px;
}

.CategoryList .MItem {
    white-space: normal;
}

Fraktar

@x00 thanks a lot, that worked as expected. I'm glad not touching the php is the vanilla way of doing things right

One thing I don't quite get is how we can wrap an anchor around the whole <li> element (each category). Currently only the Category Name & Picture are links and I need the users to be able to click anywhere and go to that category page (similar to Blizzard forum).

Which file should I be looking at?

Also is it good practice to remove the Meta (comment count / discussion count) directly from the all.php file (in my theme's view directory) or should I instead use display: none in my custom.css?

Sorry for all these questions, I'm really trying to design everything correctly from the get-go.

Fraktar

@x00 said:
adding classes to views is the wrong way to go about styling. Use the vanilla selectors.

Can I insert titles between categories in order to separate them, without touching the php files? Similar to Blizzard's "Gameplay", "Regional Discussions", etc.

I know I can use vanilla selectors like:

li#Category_3 {
    margin-top: 100px;
}

But how do I insert some text (a title) say before #Category_3 and #Category_4?

x00

what you can do is got to /vanilla/settings/managecategories and check display root categories as headings, then style these differently.

x00

I would handle the anchor with some jquery, put in themes js/custom.js

jQuery(document).ready(function($){
    $('.CategoryList .Item').on('click', function(){
        $(this).find('.Title').click();
    });
    // any other code...
}

They you can css to change the cursor to pointer

x00

I would also hide the meta with css if you don't need it.

Fraktar

@x00 said:
what you can do is got to /vanilla/settings/managecategories and check display root categories as headings, then style these differently.

I guess you're referring to vanilla/VIEWS/settings/managecategories.php file.

EDIT: Working on it, thanks!

R_J

No, it was meant as yourforum.com/vanilla/settings/managecategories

Fraktar

@x00 said:
I would handle the anchor with some jquery, put in themes js/custom.js

jQuery(document).ready(function($){
    $('.CategoryList .Item').on('click', function(){
        $(this).find('.Title').click();
    });
    // any other code...
}

They you can css to change the cursor to pointer

@x00 For some reason including the code inside /js/custom.js did not work.

That being said, inserting this into default.master.tpl just before the ending </body> tag did the trick:

 {literal}
 <script>
    $(document).ready(function() {
    $(".CategoryList .Item").click(function(){
    window.location=$(this).find("a").attr("href");
    return false;
    });
});
 </script>
 {/literal}

If that's not the right way to accomplish this just let me know. Thanks again for your help!

@R_J said:
No, it was meant as yourforum.com/vanilla/settings/managecategories

@R_J Thanks, figured it out in the end and it worked perfectly!

x00

you should put it custom.js Also using ready after embedding at the end of the body is a bit pointless it would be by then. You need to debug your code. I gave you an untested example. Also use this form jQuery(document).ready(function($){

You are passing the jQuery object as the parameter $. You should not assume that $ is global or the it is jQuery

x00

The location method is fine. You need to be more specific than just finding anchors, there could be muliple anchors.

Fraktar

@x00 if I include that into custom.js I get an error in the console whenever I trigger it (ie. click on the list item):

jquery.min.js?v=2.3:5 Uncaught RangeError: Maximum call stack size exceeded

Fraktar

I've managed to resolve that issue and include the following code in my custom.js file:

$(".CategoryList .Item").click(function(){
    window.location=$(this).find("a").attr("href");
    return false;

$(".ItemContent").click(function(){
window.location = $(this).find(".Title a").attr("href");
});
});

Is that better?