Meet Envy.
envy.jpg
envy1.jpg
envy2.jpg
envy3.jpg
Yeah, that works too. :)
It looks good on mobile too..
envy4.jpg
I'm attempting to flex-box the boardindex atm :o
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?
2 columns.
Been playing around based on this https://codepen.io/idesignsmf/pen/BaZedVL
Flexbox boardindex. I left the categories alone. Just flexed the boards within.
envy5.jpg
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
Nice work.
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!
@Mick. beautiful theme, congratulations!
Only to me the text of the messages seems huge?
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.
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.
envy6.jpg
It looks neater without post count and last post. https://www.idesignsmf.com/demo2/index.php
Yep, better without if you are going with the two column look.
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.
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.
envy7.jpg
Well that blows lol. Couldnt upload the theme. There's another theme called envy for 1.0 series. ::sigh::
Who cares about names :P
Mick is envious that someone else nabbed the name first. :D ;D :D
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'
Just saw it without all options turned off. Not bad looking.
envy9.jpg
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
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.
flexb.jpg
I think the best course of action is to make it Masonry to avoid such gaps on big forums.
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'.
envy11.jpg
Lately I have a flexbox mood personally, might even use flexbox to fold my clothes honestly :laugh:
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
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.
envy12.jpg
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.
envy13.jpg
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.
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)
Quote from: Mick. on October 09, 2021, 03:52:36 PMQuote 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/ (https://tailwindcss.com/)
example
https://smf.webtiryaki.com/index.php?action=forum
It is possible to further develop
pe.png
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'].
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.
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. :-\
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>
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.
Oh Ffs. ;D ;D
You could either call the javascript directly in the template or turn it into a function and send the id as a parameter.
No go. I wonder if something is preventing it.
What is it doing now?
Quote from: Antechinus on October 10, 2021, 04:50:10 PMWhat is it doing now?
Nothing.
Imma try Diego's suggestion if all fails.
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
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.
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.
Oh I like it :)
Redesigned the Member list :P https://www.idesignsmf.com/dev-site2/index.php?action=mlist
envy14.jpg