News:

SMF 2.1.3 has been released! Take it for a spin! Read more.

Main Menu

[Preview] Envy 2.1 theme

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

Previous topic - Next topic

Mick.

Meet Envy.

You cannot view this attachment.

You cannot view this attachment.

You cannot view this attachment.

You cannot view this attachment.

Antechinus


Mick.

It looks good on mobile too..

You cannot view this attachment.

Mick.

I'm attempting to flex-box the boardindex atm  :o

Antechinus

Isn't the 2.1 board index flex by default?
(Have not looked at the code for a couple of weeks)

ETA: Just looked at the code. Yep, it is. Wotcha trying to do then?

Mick.


Mick.

Flexbox boardindex. I left the categories alone. Just flexed the boards within.

You cannot view this attachment.

Dzonny

I love 2 columns boardIndexes, as I have bunch of boards this is ideal for me. I'm actually already using such theme for 2.0, but this one looks quite like my next default for 2.1  :P

ARG01

No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

Mick.

#9


Demo https://www.idesignsmf.com/demo.html still looking for bugs

I think I'm done messing with the board index before I break it buahahahaha!

Massl

@Mick. beautiful theme, congratulations!
Only to me the text of the messages seems huge?

Mick.

Quote from: Massl on October 09, 2021, 05:12:43 AM@Mick. beautiful theme, congratulations!
Only to me the text of the messages seems huge?

Easily modified in css file.

Mick.

#12
Current state with Last Post and Board Stats. Not so sure I dig it. Seems busy. I kinda like it without the post count and last post.

You cannot view this attachment.

It looks neater without post count and last post. https://www.idesignsmf.com/demo2/index.php

Antechinus

Yep, better without if you are going with the two column look.

Mick.

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

Mick.

This is it. Time to pack this thing and submit. I don't approve my own themes, Having a second set of eyes, best invention ever. @Diego Andrés  is awesome at finding Oopsies.

You cannot view this attachment.

Mick.

Well that blows lol. Couldnt upload the theme. There's another theme called envy for 1.0 series. ::sigh::

Diego Andrés


SMF Tricks - Free & Premium Responsive Themes for SMF.

Antechinus

Mick is envious that someone else nabbed the name first. :D ;D :D

Mick.

Quote from: Diego Andrés on October 09, 2021, 07:05:15 PMWho cares about names  :P
Quote from: Antechinus on October 09, 2021, 07:19:05 PMMick is envious that someone else nabbed the name first. :D ;D :D
hahahaha nah, I'm good. ...But i truly thought i had a chance babahaha..
I changed the theme info to envy2.1 no biggie. Submitted tho'

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


Mick.

Quote from: Antechinus on October 10, 2021, 04:50:10 PMWhat is it doing now?
Nothing.

Imma try Diego's suggestion if all fails.

Mick.

So I opted for a main toggle for all child boards, board stats and last post.  The idea is to keep the landing nice and tidy. Toggle the icon found on the the top right of the boards... (Plus sign).

Currently looking into adding cookies? It does not save and it changes to closed state once you leave the current page.

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

Antechinus

Browser local storage is worth looking at as an alternative to cookies. Code is much simpler. Possible drawback is if someone already has their entire browser stash chockers with other variables it won't work. But that's not a common thing to run up against, since the limits are pretty high.

Mick.

Quote from: Antechinus on October 10, 2021, 10:02:17 PMBrowser local storage is worth looking at as an alternative to cookies. Code is much simpler. Possible drawback is if someone already has their entire browser stash chockers with other variables it won't work. But that's not a common thing to run up against, since the limits are pretty high.
Ya that's what I meant lol   I've never done it but I'mma try to find something today.

landyvlad

"Put as much effort into your question as you'd expect someone to give in an answer"

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.

Be the person your dog thinks you are.

Mick.

#45
Redesigned the Member list  :P  https://www.idesignsmf.com/dev-site2/index.php?action=mlist

You cannot view this attachment.

Advertisement: