[3.1] Display fetched results in a HTML5 table

Discussion forum for Extension Writers regarding Extension Development.
Post Reply
User avatar
3Di
Registered User
Posts: 11714
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milano - Frankfurt
Name: Marco
Contact:

[3.1] Display fetched results in a HTML5 table

Post by 3Di » Fri May 19, 2017 6:48 am

I am fetching a DB table using a foreach loop and assigning to the template the results with template->assign->block_vars. So far so good. The issue lies where I would like to show the results in the HTML as a table content, 3 columns and rows defined just by the size (count)of the fetching results. Using CSS and HTML5 and TWIG.

I mean, each row must contain the next ID contents. Which I can see but as a list, like memberlist.

Imagine the memberlist divided in three rows (every row an user ID contents).
Does anybody have a good example to link me to? Using a template event here. FWIW.

The matter is clear, at least IMO. :? If more info are needed please tell me, though. :)

Edit: here's a mockup of what I would like to achieve, numbers are User_Id's content.
Perhaps I used the words "rows" instead of "columns", just to be clear.
.
table_1.png
.
I am using the TWIG syntax: {% for blah_group in loops.blah_group %}

Thx IA. Consider please I am kind of a noob about templating.
Want to compensate me for my interest? Donate
Please PM me only to request paid works. Thx.
Extensions, Scripts, MOD porting, Update/Upgrades

User avatar
kasimi
Extension Customisations
Extension Customisations
Posts: 2071
Joined: Sat Sep 10, 2011 7:12 pm
Location: Germany
Contact:

Re: [3.1] Display fetched results in a HTML5 table

Post by kasimi » Fri May 19, 2017 8:38 am

I think what you want is a CSS flex layout.

Code: Select all

.container {
	display: flex;
	flex-wrap: wrap;
}

.container .item {
	flex-grow: 1;
	width: 25%;
}
Also see the answer and the link to a JSFiddle example here: http://stackoverflow.com/questions/2419 ... ns-per-row

User avatar
3Di
Registered User
Posts: 11714
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milano - Frankfurt
Name: Marco
Contact:

Re: [3.1] Display fetched results in a HTML5 table

Post by 3Di » Fri May 19, 2017 9:30 am

Kasimi, thanks for your interest. Seems crystal clear to me,
I will just remove those child rules because I already have an own rule for that.
I haven't yet tested that, just at a first glance though it seems really what I am looking for.

More to follow. :)
Regards.
Want to compensate me for my interest? Donate
Please PM me only to request paid works. Thx.
Extensions, Scripts, MOD porting, Update/Upgrades

User avatar
3Di
Registered User
Posts: 11714
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milano - Frankfurt
Name: Marco
Contact:

Re: [3.1] Display fetched results in a HTML5 table

Post by 3Di » Fri May 19, 2017 9:28 pm

Wow, I didn't know the power of CSS Flexbox, amazing I can say.
I got my time and studied it before to try and use it, it was interesting and like all the stuffs you don't know, a bit hard to get in touch, also because of language, but hey.. definitely a must.

I sat up an external page to test the whole thing, used this basic code for the "loop to grid/table" stuff.

Code: Select all

<!-- INCLUDE overall_header.html -->

<style type="text/css">
.container {
	display: flex;
	flex-wrap: wrap;
}
.container .item {
	flex-grow: 1;
	width: 33%;
}
</style>

<div class="container">
	{% for group in loops.group %}
		<div class="item">
			<img src="{{ group.AVATAR }} alt="">&nbsp;<a href="{{ group.PROFILEURL }}" class="username">{{ group.PERSONANAME }}</a>
		</div>
	{% endfor %}
</div>

<!-- INCLUDE overall_footer.html -->
No more tables any more, uses Twig and the result is what I was looking for, ofcourse now I have to prettify the output using the already available CSS classes taken from the main site (Dev zone).

Here's a screenshot of the first rough page, no style applied yet.
Is pretty "adaptive", responsive will be after the fine-tuning.
.
group_page_alpha_1.png
.
Thanks Kasimi, once more. :)
Want to compensate me for my interest? Donate
Please PM me only to request paid works. Thx.
Extensions, Scripts, MOD porting, Update/Upgrades

User avatar
3Di
Registered User
Posts: 11714
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milano - Frankfurt
Name: Marco
Contact:

Re: [3.1] Display fetched results in a HTML5 table

Post by 3Di » Sat May 20, 2017 5:22 am

Now I have the urge to "span 3 rows in a cell", so to speak, using flexboxes.

I searched and read the "whole" internet I can say, no love. :?

The issue is:

in the image I above posted we have the AVATAR on the left side and the PERSONANAME on the right side aligned to left. OK. I need to put right down the "group.PERSONANAME ", on new lines, other 2 fetched fields, say "group.APPLES" and "group.BANANAS". Those vars have to be aligned to the first one, leaving the AVATAR standing alone.

Any thoughts?

This is the last piece of my puzzle, then a new cool extension will be ready to see the light of the sun.
Want to compensate me for my interest? Donate
Please PM me only to request paid works. Thx.
Extensions, Scripts, MOD porting, Update/Upgrades

User avatar
canonknipser
Registered User
Posts: 1131
Joined: Thu Sep 08, 2011 4:16 am
Location: Germany
Name: Frank Jakobs
Contact:

Re: [3.1] Display fetched results in a HTML5 table

Post by canonknipser » Sat May 20, 2017 9:46 am

Maybe it's worth a try to use css tables for the "inner part"?

See:
https://github.com/canonknipser/viewexi ... tml#L9-L18
and
https://github.com/canonknipser/viewexi ... ewexif.css
as an example
Greetings
Frank
phpbb.de support team member
English is not my native language
New arrival - Extensions and scripts for phpBB
no support via PM or mail

User avatar
javiexin
Code Contributor
Posts: 1157
Joined: Wed Oct 12, 2011 11:46 pm
Location: Madrid, Spain
Name: Javier
Contact:

Re: [3.1] Display fetched results in a HTML5 table

Post by javiexin » Sat May 20, 2017 1:32 pm

Maybe wrap the second group (the three spans) in a div, and you are done :).
Or use a single span with different paragraphs (p tags).

User avatar
3Di
Registered User
Posts: 11714
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milano - Frankfurt
Name: Marco
Contact:

Re: [3.1] Display fetched results in a HTML5 table

Post by 3Di » Sat May 20, 2017 8:10 pm

Thx guys, the nººb is at works. ;)
Want to compensate me for my interest? Donate
Please PM me only to request paid works. Thx.
Extensions, Scripts, MOD porting, Update/Upgrades

Post Reply

Return to “Extension Writers Discussion”

Who is online

Users browsing this forum: No registered users and 5 guests

cron