How to align cards in different rows - javascript

I'm trying to do something like this: https://nomadlist.com/
Rows of 3 elements (cards?) Going from top to bottom. Same size, perfectly aligned.
I'm using Handlebars and Bulma CSS, and the card components and doing this:
<div class="columns">
{{#each serverElements}}
<div class="column">
<div class="card">
<header class="card-header">
<p class="card-header-title">
{{this.title}}
</p>
<a class="card-header-icon">
<span class="icon">
<i class="fa fa-angle-down"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
{{this.body}}
<a>#bulmaio</a>. <a>#css</a> <a>#responsive</a>
<br>
<small>this.createdAt</small>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item">Save</a>
<a class="card-footer-item">Edit</a>
<a class="card-footer-item">Delete</a>
</footer>
</div>
</div>
{{/each}}
</div>
And it partially works. Each of the elements gets its own card. But this prints them all on the same row. And with different sizes.

If i understand you right, You sould use the is-multiline modifier with the right column, if you want 3 in a row, then use `column is-4'.

Related

Data-filter showing nothing by default

i have this code and i wanted him to not show anything unless clicking on the div.By default it shows everything listed but i need it to just show things filtered by click. Any ideas?
<section class="our_services_tow">
<div class="container">
<div class="architecture_area services_pages">
<div class="portfolio_filter portfolio_filter_2">
<ul>
<li data-filter=".enc"><i class="fa fa-archive" aria-hidden="true"></i>ENCOMENDAS</li>
<li data-filter=".format"><i class="fa fa-file" aria-hidden="true"></i>FORMATOS FICHEIRO</li>
<li data-filter=".prazos"><i class="fa fa-calendar" aria-hidden="true"></i>PRAZOS</li>
<li data-filter=".entreg"><i class="fa fa-truck" aria-hidden="true"></i>ENTREGAS</li>
<li data-filter=".pag"><i class="fa fa-credit-card" aria-hidden="true"></i>PAGAMENTOS</li>
</ul>
</div>
<div class="portfolio_item portfolio_2">
<div class="grid-sizer-2"></div>
<div class="single_facilities col-sm-7 enc">
<div class="who_we_area">
<div class="subtittle">
<h2>blablabla</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
<div class="single_facilities col-sm-7 format">
<div class="who_we_area">
<div class="subtittle">
<h2>Preferência de formatos de ficheiro.</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
make the div hidden using css so it would load up hidden, make another div to have onclick() event(why div? you can use a button) to call a JavaScript function and display the div that is hidden using that function

Transform tables when screen size changes

I have 3 columns of data, each with 2 rows inside. I would like to make to transform 3x2 table into 1x6 table, when the width of the screen is less than some value. Any idea how to achieve this?
My column has the following structure:
<div class="one-third animate_afl">
<div class="w-iconbox custom_img iconpos_left size_big type_default color_primary">
<div class="w-iconbox-link" >
<div class="w-iconbox-icon">
<i class="fa fa-"></i>
<img src="wp-content/uploads/2015/04/9-over.png" alt="">
</div>
<h4 class="w-iconbox-title">Title</h4>
</div>
<div class="w-iconbox-text">
<p>Paragraph text.</p>
</div>
</div>
<div class="g-hr type_invisible">
<span class="g-hr-h">
<i class="fa fa-star"></i>
</span>
</div>
<div class="w-iconbox custom_img iconpos_left size_big type_default color_primary">
<div class="w-iconbox-link">
<div class="w-iconbox-icon">
<i class="fa fa-"></i>
<img src="wp-content/uploads/2015/04/modul1-over.png" alt="">
</div>
<h4 class="w-iconbox-title">Title 2</h4>
</div>
<div class="w-iconbox-text">
<p>Paragraph text 2.</p>
</div>
</div>
<div class="w-iconbox custom_img iconpos_left size_big type_default color_primary">
<div class="w-iconbox-text"></div>
</div>
</div>
This would surely involve CSS media queries, which allow you to do this very thing. You can even set multiple break-widths where your css can change for each width you want, as many as you want.

Display card list horizontally, HTML/CSS with Angular and MaterializeCSS

I want to display a list of custom cards using ng-repeat directive, but it keeps displaying vertically.
<style>
li{
display: inline
}
</style>
<div ng-init="names=['Jani','Hege','Kai']">
<ul >
<li ng-repeat="x in names">
<div class="row">
<div class="col s12 m2 20 " >
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title" id="dani">{{x}}</span>
<p id="p">I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
What am I doing wrong?
UPDATE:
display: inline-flex;
fixes the problem, but puts the objects one after another on the same row. I want to go to a next row after lets say, 4 objects, so how can i set this up?
Update 2:
here's what i want to achieve:
so after 3 card displayed horizontally the line to increase :)
for li tag use floating to left
li {
float: left;
}
additionaly for ul add list-style-type:none;
The problem is that your repeat is on the line item. You are literally telling it that you want it vertically. Move your repeat to the span tag, you may also need to add display of inline-block and set a width on your span. Try this:
<div ng-init="names=['Jani','Hege','Kai']">
<ul >
<li>
<div ng-init="names=['Jani','Hege','Kai']">
<ul >
<li>
<div class="row">
<div class="col s12 m2 20 " >
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span style="display:inline-block; width:100px" ng-repeat="x in names" class="card-title" id="dani">{{x}}<br>
<span style="display:inline-block" id="p">I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</span></span>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Here is a Plunker. Let me know if this is not what you were trying to do.

Manage complex select/deselect artis/album/song

First of all sorry for the vague title, but i didn’t know how to explain my problem in a better way.
Anyway this is what i want. Let’s say we have three tabs: one showing artist list, one showing album list and one showing songs. All this three tabs has selectable lists and i would like to be able, for example, to select and artist, then going to albums (that now should be show all as selected because i checked the artis) and be able to deselect one album and then, for, example, be able to go to songs and manage the songs individually.
Of course then i should be able to retrive the list of all the songs selected by the user.
EDIT 1
added two images to explain better
EDIT 2
Added some code. At the moment i have only HTML and CSS, i'm waiting for your help for the JS code :)
that's the HTML structure
<div id="tabs" class="page-content tabs overflowTab">
<div id="tab1" class="tab active">
<div class="content-block-title" id="indexScrollOffset">Seleziona artisti</div>
<div class="list-block media-list">
<ul>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro1">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 1</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro2">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 2</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
<div id="tab2" class="tab">
<div class="content-block-title">Seleziona Album</div>
<div class="list-block media list">
<div class="list-group">
<ul>
<li class="list-group-title">Artist 1</li>
<li id="titoliLibro1">
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 1</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 2</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
</div>
<div id="tab3" class="tab">
<div class="content-block-title">Seleziona song</div>
<div class="list-block searchbar-not-found">
<ul>
<li class="item-content">
<div class="item-inner">
CONTENT HERE IS ADDED DYNAMICALLY FROM A WEBSQL DB
</div>
</li>
</ul>
</div>
</div>
Edit 3
It's a phonegap application and yes, already using jQuery (as less as possibile for performance) :)
Now my question: which is the best way to handle this? My only idea is to create an array and update it with all the elements selected and, in order to show an element as selected or not, checking it with indexOf to see if it exist… is this a good way? I’m a bit worried about performance.
Thanks

HTML mustache templates - how to get first item of collection

I'm using mustache templates to correctly generate bootstrap accordions. Now I need to pass a prefix to the top item id = 'accorElM' and thought I could do something like this.
 
<div class="accordion" id='{{#DataResult[0].prefixID}}_accorElM'>
IE, get the first item in the collection
Is this possible to do?
Code sample:
<div class="accordion" id='accorElM'>
{{#DataResult}}
<div class="accordion-group">
<div class="accordion-heading">
<a style="text-align: left; text-decoration: none" class="accordion-toggle btn" data-toggle="collapse" data-parent='#{{prefixID}}accorEl' href='#{{prefixID}}collapseEl_{{id}}'>
<i class="icon-globe"></i> {{tipo}}<i class="icon-chevron-down pull-right"></i>
</a>
</div>
<div id='collapseEl_{{id}}' class="accordion-body collapse">
<div class="accordion-inner">
<div class="row-fluid">
<div class="span9">
<address>
<br />
{{zona}}
<br />
{{cpostal}}
<br />
{{pais}}
</address>
</div>
<div class="span3">
<div class="pull-right">
.....
</div>
</div>
</div>
</div>
</div>
</div>
{{/DataResult}}
</div>
I'm guessing your data must be something like this:
{"DataResult":[
{"prefixID":"1","name":"first"},
{"prefixID":"2","name":"second"}
]
}
but in the mustache template file, I don't think you can index the object items. The approach that I would have taken would involve manipulating the Json object in javascript(or even in the backend when constructing the object) before rendering it.
In your case, if you need the prefixID of the first item in the DataResult. you could alter the object to make it look like this:
{"DataResult":[
{"prefixID":"1","name":"first"},
{"prefixID":"2","name":"second"}
],
"theIdIWant":"1"
}
and then in the template file:
<div class="accordion" id='{{theIdIWant}}_accorElM'>
{{#DataResult}}
<div class="accordion-group">
///////
</div>
{{/DataResult}}
</div>
Hope this helps.

Categories