News:

Wondering if this will always be free?  See why free is better.

Main Menu

[Preview] Envy 2.1 theme

Started by Mick., October 07, 2021, 06:53:04 PM

Previous topic - Next topic

Mick.

Just saw it without all options turned off. Not bad looking.

You cannot view this attachment.

Antechinus

Ok, how does it look if a board description is written by an admin who has delusions of being Tolstoy? :D And what about child boards? :P

Mick.

Quote from: Antechinus on October 09, 2021, 10:39:00 PMOk, how does it look if a board description is written by an admin who has delusions of being Tolstoy? :D And what about child boards? :P

yea....it will expand.

You cannot view this attachment.

Mick.

I think the best course of action is to make it Masonry to avoid such gaps on big forums.

Mick.

Here's one with a masonry grid. It does fill the void when large childboards are present but last board does not go 100% like Flexbox. I'mma try flexbox masonry and see if it even works. I'm liking this Masonry tho'.

You cannot view this attachment.

Diego Andrés

Lately I have a flexbox mood personally, might even use flexbox to fold my clothes honestly  :laugh:

SMF Tricks - Free & Premium Responsive Themes for SMF.

Mick.

Quote from: Diego Andrés on October 10, 2021, 12:30:05 AMLately I have a flexbox mood personally, might even use flexbox to fold my clothes honestly  :laugh:
lol

Mick.

So we already know what the board looks like without .board_stats and .lastpost

The first pic illustrates a real world scenario. It shows lots of text in the board description and it shows the .board_stats and .lastpost; busy as hell.

You cannot view this attachment.

This second pic, I added a text limit to the board desc with an ellipsis.
overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 1; /* number of lines to show */
   -webkit-box-orient: vertical;


...and it cut the desc as expected to 1 line with the trailing dots.

You cannot view this attachment.

So now i'm thinking....what if, I add a drawer to the childboards with a call to action button or some sort of hover and a pulldown drawer appears and there's your childboards. Even a tooltip could work! Hmmm...I'mma study this some more lol

Remember, this is not Flexbox. It's masonry Grid. If I can crack the chilboard theory, Ill dump masonry and use flexbox.

Mick.

I did it. Just for testing purposes and it's not stylized. I used a toggle to open the childboard drawer with a hamburger icon. In General Category the first board you'll see the hamburger.

https://www.idesignsmf.com/dev-site2/index.php

    <script>
        $("document").ready(function () {
        $("#browse").click(function(){
        $(".categories").toggle();
           });
       });
    </script>

I think the problem is solved. Hehehe  8)

gecitli

Quote from: Mick. on October 09, 2021, 03:52:36 PM
Quote from: Antechinus on October 09, 2021, 03:29:13 PMYep, better without if you are going with the two column look.
Yas! I thought so  8)  ....but then again, you have users that have the avatar on boards and last post and everywhere else they can think of. So I'mma submit it without the board stats, last posts and if anyone asks for it, just remove the "display: none;" from the element in CSS. But yes, I agree with you. I'm into removing unnecessary stuff that SMF provides so an illusion is made to make the forum 'look' like it fits such website if I'm going to cater to those that use some sort of front page ( Wordpress) framework.

ie., Why do SMF has (3) GO UP link/buttons on display? That's an example, but it supposed to have them. It's a Forum after all.  I remove all those things where I can. My point is to make your SMF installation to not look like a forum but rather like part of your website.

There are many ways to do this, small touches

Check here

https://tailwindcss.com/

example

https://smf.webtiryaki.com/index.php?action=forum

It is possible to further develop

You cannot view this attachment.
http://www.webtiryaki.com
webmaster forumu
Free & Premium Responsive Themes for SMF.

Mick.


Mick.

#31
I'm seeking community help.

So I'm attempting to open a box to show children when clicked.

Boardindex:
echo '
            <div class="open_child"><i class="fas fa-plus-circle"></i></div> 
    <div id="board_', $board['id'], '_children" class="children child_box">
<p><strong id="child_list_', $board['id'], '">', $txt['sub_boards'], '</strong>', implode(' ', $children), '</p>
   </div>';
}
}

/**
 * The lower part of the outer layer of the board index

CSS:
.open_child {
   cursor: pointer;
   margin: 10px 0 10px 5px;
   font-size: 16px;
   display: block;
   position: absolute;
   z-index: 1;
}
.child_box {
   display: none;
   padding: 0 0 0 10px;
}

Script:
    <script>
        $("document").ready(function () {
        $(".open_child").click(function(){
        $(".child_box").toggle();
           });
       });
    </script>

Demo: https://www.idesignsmf.com/dev-site2/index.php

Issue here, when clicked on such board, all childboards open. I currently have 2 boards with children. Notice the "Plus" icons.

We need to display the children box of such board only. My guess is child_box is not respecting $board['id'].

Antechinus

Your javascript is calling by class, so it hitting all examples of that class. If you change it to hit board_', $board['id'], '_children instead it should work.

Mick.

Quote from: Antechinus on October 10, 2021, 04:12:05 PMYour javascript is calling by class, so it hitting all examples of that class. If you change it to hit board_', $board['id'], '_children instead it should work.
Thanx cuz but no go.  :-\

Mick.

I tried these...
    <script>
            $("document").ready(function () {
                $(".open_child").click(function(z){
                $("board_', $board['id'], '_children").toggle(z);
                        });
            });
    </script>

    <script>
            $("document").ready(function () {
                $(".open_child").click(function(z){
                $("board_', $board['id'], '_children" class="child_box").toggle(z);
                        });
            });
    </script>

Antechinus

What about...
    <script>
            $("document").ready(function () {
                $(".open_child").click(function(){
                $("#board_', $board['id'], '_children").toggle();
                        });
            });
    </script>
You need the # to tell it it's looking for an id, just like you need the . to tell it it's looking for a class.

Mick.


Diego Andrés

You could either call the javascript directly in the template or turn it into a function and send the id as a parameter.

SMF Tricks - Free & Premium Responsive Themes for SMF.

Mick.

No go. I wonder if something is preventing it.

Antechinus


Advertisement: