If equal to a value handlebar helper - handlebars.js

I want to write something like this:
{{#each singleChannel.Messages}}
{{#if User.id == userid }}
<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">{{User.username}}</div>
<div class="card-body">
<h5 class="card-title">{{body}}</h5>
</div>
</div>
{{else}}
<div class="card text-bg-Success mb-3" style="max-width: 18rem;">
<div class="card-header">{{User.username}}</div>
<div class="card-body">
<h5 class="card-title">{{body}}</h5>
</div>
</div>
{{/if}}
{{/each}}
if the User.id == userid, it will display in this format, else will be displayed in another format, how is it going to work? thank you!

Related

Why are some of my grid columns stacking?

I'd like to order my bootstrap cards thus:
My code is this:
<div class="row ">
<div class="col-12 col-md-6 mb-1" style="height: 75vh;">
<div class="map svelte-xu5vn1" id="map">
...
</div>
<div class="col-12 col-md-6">
<div class="col-6">
<a rel="prefetch" href="communes/xxx/objects/Cykelhus">
<div class="card mr-1 mb-1">
<div class="card-body text-center">
<img class="card-img-top" src="img/300x300/cykelhus.thumb.jpg" alt="(image)">
<p class="card-text">Cykelhus</p>
</div>
</div>
</a>
</div>
<div class="col-6">
<a rel="prefetch" href="communes/brf_masthugget/objects/Sedumtak">
<div class="card mr-1 mb-1">
... as per the above
But I get this result:
What do I need to change?

Fixed it, I needed to add a <div class="row"> before the first of the cards:
<div class="row">
<div class="col-6">
<a rel="prefetch" href="communes/xxx/objects/Cykelhus">
...
And close it of course.
hmm, sure I'd already tried that ...

Bootstrap 4 row not expanding to 100% width

I'm attempting to make a row that will contain 3 columns. One for the pagination count, one to filter a table, and another to hold a button.
Everything looks great in small, medium and large viewports, but when I maximize my window, there is a huge gap on the right above my table. See image below (bottom) for reference.
I'm not sure where I'm going wrong. I've tried every variation of flex-fill, w-100, etc. that I can think of to get it to expand to 100% width on xl viewports, but I can't figure it out.
Here's the relevant code for that section that sits above the table:
<div class="col">
<div class="container no-padding">
<div class="row mt-1">
<div class="col d-none d-md-block no-padding">
<p>Showing {{ $assets->firstItem() }}-{{ $assets->lastItem() }} of {{ $assets->total() }} total</p>
</div>
<div class="col-auto flex-fill flex-md-grow-0 no-padding mb-3">
<div class="container">
<div class="row">
<div class="col m-0 p-0 mr-2">
<form class="form-inline">
<div class="input-group">
<input style="font-size:80%;" class="form-control" type="text" name="filter" value="" placeholder="Filter results">
</div>
</form>
</div>
<div class="no-padding">
<a class="btn btn-dark btn-sm mr-1" href="{{ action('AddAssetController#index') }}" role="button"><i style="font-size:80%;" class="fas fa-plus"></i> New Asset</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Edit:
Here's the code from my template. Code above is part of #section('content') which gets output to and parsed by #yield('content') below.
<div class="row">
<div class="col-12 no-padding">
#include('layout.includes.header')
</div>
</div>
<div class="row h-100">
<div class="col-12">
<!-- Begin nav/content row -->
<div class="row h-100">
<div id="sidebar-wrapper" class="visible">
#include('layout.includes.nav')
</div>
<!-- Begin main column -->
<div class="col content" style="overflow-x:auto;">
<div class="row no-padding">
<div class="col d-none d-sm-block">
<h4>#yield('content-heading')</h4>
</div>
<div class="col flex-grow-1">
#include('layout.includes.searchform')
</div>
</div>
<div class="row no-padding inner-box shadow p-3 mb-5 bg-white rounded">
#yield('content') <!--this is where the original code appears-->
</div>
</div>
<!-- END main column-->
</div>
<!-- END nav/content row-->
</div>
</div>

not sure if this is what you want achieve but, i tried my best to make it look like what you desire, let me know if is really this: https://jsfiddle.net/leandrorr/t4rbfdv3/6/
html:
<div class="result-count p-4 border">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6">
Showing 1-20 of 32 total
</div>
<div class="col-lg-6">
<form action="" class="form-inline float-right">
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
</div>
</div>
</div>
</div>

CSS Bootstrap 4 - making multiple line row with equal columns

I am trying to make a multiple line row with equal width columns with Bootstrap 4. This is the loop where I am creating this columns:
<div class="row video-section">
<div class="col-md-12">
#if(!(count($videos) > 0))
<p>{{ $player->first_name }} {{ $player->last_name }} has no videos yet.</p>
#else
#foreach($videos as $video)
<div class="col-md-3 profile-video-box">
<a href="/player/video/{{ $video->uid }}/{{ $video->player->fullName }}">
<div class="card bg-dark text-white">
<img src="{{ $video->getThumbnail() }}" class="card-img"/>
<div class="card-img-overlay">
<div class="play-icon-wrapper">
<i class="ion-ios-play"></i>
</div>
<div class="card-content">
<h5 class="card-title">{{ $video->title != '' ? $video->title : 'Untitled' }}
</h5>
<p class="card-text">{{ $video->created_at->diffForHumans() }}
</p>
</div>
</div>
</div>
</a>
</div>
#endforeach
</div>
</div>
But, then the each column takes up the whole row, since it gets the margin right to take up the rest of the space in the row. How can I fix that and create multiple line row?
Update
Here is the fiddle.

Try with this code and fiddle
<div class="row video-section ">
<div class="container">
<div class="row">
<div class="col-md-3 profile-video-box">
123
</div>
<div class="col-md-3 profile-video-box">
456
</div>
<div class="col-md-3 profile-video-box">
759
</div>
</div>
</div>
</div>

Don't use <div class="col-md-12"> inside your <div class="row video-section"> element. Instead confine <div class="col-md-12"> to only your <p> tag, like:
<div class="row video-section">
#if(!(count($videos) > 0))
<div class="col-md-12">
<p>{{ $player->first_name }} {{ $player->last_name }} has no videos yet.</p>
</div>
#else
#foreach($videos as $video)
<div class="col-md-3 profile-video-box">
<a href="/player/video/{{ $video->uid }}/{{ $video->player->fullName }}">
<div class="card bg-dark text-white">
<img src="{{ $video->getThumbnail() }}" class="card-img"/>
<div class="card-img-overlay">
<div class="play-icon-wrapper">
<i class="ion-ios-play"></i>
</div>
<div class="card-content">
<h5 class="card-title">{{ $video->title != '' ? $video->title : 'Untitled' }}
</h5>
<p class="card-text">{{ $video->created_at->diffForHumans() }}
</p>
</div>
</div>
</div>
</a>
</div>
#endforeach
</div>
Hope this helps!

Meteor data context with collectionFS

I want to get the fave.title within the collectionFS each block where I have "TITLE HERE", any ideas?
<template name="myFaves">
<div class="container">
<div class="page-header">
<h2>Your Favourites</h2>
</div>
<div class="row">
<div class="col-md-12">
{{#each faves}}
{{> singleFave }}
{{/each}}
</div>
</div>
</div>
</template>
<template name="singleFave">
<div class="row">
<div class="col-md-12">
<div id="freewall" class="freewall">
{{#each getMedia this.fileId}}
{{#if isImage store='thumb'}}
<div class="brick">
<img src="{{this.url store='thumb'}}" width="100%">
<div class="info">
TITLE HERE
</div>
</div>
{{/if}}
{{/each}}
</div>
</div>
</div>
</template>

I guess you need to access the parent context. Try it with {{../fave.title}} or {{fave.title ..}}.
Note that grand-parent context could also be reached using {{../.. fave.title}}

How to align multiple items below each other in Bootstrap 3?

I'm creating an app with Meteor using alethes:pages package for the pagination and Bootstrap 3 for the styles.
In the main page I'm displaying multiple items (3 per row) using infinite scroll.
The problem comes when an item is higher than his neighbour items, making the next row to have a free space and floating one item to the right, instead of appearing below the higher one. Here you can see the problem:
I made an HTML template for the item to be used by the pagination package.
So, for the example shown in the image, the generated code will be this one:
<div class="col-md-10 col-lg-10 col-md-offset-2 col-lg-offset-2">
<div class="pagesCont">
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 1
</h4>
<a href="#">
<img src="/cfs/files/images_publications/jvtQWo4KSziMXCryh/300x340.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 1 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 2
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 2 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 3
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 3 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 4
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 4 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 5
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 5 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 6
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 6 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 7
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 7 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 8
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 8 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 9
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 9 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
</div>
</div>
I could make the items to have the same hight but I want to have different image sizes and multiline text without leaving free space inside the item.
I want something like the items list shown in this web: http://es.wallapop.com/
But the problem with that list is that uses absolute positions in order to display an item below each other. I would like to avoid absolute positions since I think it wouldn't be so easy to integrate with the package mentioned before.
I don't know if something like this is possible in Bootstrap 3 without using absolute positions.

This has little to do with meteor or pagination I believe.
What you are looking for is to probably implement masonyjs with bootstrap. Layouts like these can get really interesting and tricky. I would definitely look into that combo.

Following the conversation in the comments:
After a lot of research and testing I finally got Masonry to work perfectly with the alethes:pages package. I know, in my last comment I said that I gave up on this, but after some time with my homemade infinite scroll I realized that it wasn't reacting to the mongodb changes, it was static. I didn't want to spend more time on that...
Before showing you the code that makes the magic you have to have some things in mind:
The best way to use Masonry is by using Isotope, at least for me that was the case. I recommend you to install this meteor package: isotope:isotope
You will also need the ImagesLoadead library: iamkevingreen:imagesloaded
The alethes:pages package uses the document.body.offsetHeight DOM property as the total page height, in order to load new items when scrolling. If you are using Bootstrap that property may not represent the total page height, so every scroll made can add new items no matter what you set in the infiniteTrigger option. The way to fix this is by adding a clearfix before closing the body:
<template name="MasterLayout">
...
{{> yield}}
<div class="clearfix"></div>
</template>
The items container used by Masonry must have padding: 0 (at least left and right) in order to be displayed correctly using Bootstrap.
Now, let's see the code.
This is the server code:
Items = new Meteor.Collection('items');
ItemsPagination = new Meteor.Pagination(Items, {
templateName: "ItemsList",
itemTemplate: "Item",
divWrapper: 'container',
infinite: true,
infiniteTrigger: 0.8,
pageSizeLimit: 1512,
dataMargin: 0,
perPage: 21
});
These are the templates used by the pagination object:
<template name="ItemsList">
{{> pages}}
</template>
<template name="Item">
<div class="ms-item col-md-4 col-lg-4">
<div class="well clearfix">
<h4>{{name}}</h4>
<!-- Using CFS package in a global helper to retrieve the item image -->
{{#with getPhoto photo}}
<a href="#">
<img src="{{url store='images_items'}}" alt="No photo" class="img-responsive img-thumbnail" />
</a>
{{/with}}
<!-- Using a global helper to get the item category -->
{{#with getCategory category}}
<h5 class="col-md-8 col-lg-8"> {{name}} </h5>
{{/with}}
<h4 class="col-md-4 col-lg-4 text-right"> {{price}} €</h4>
<div>
<div class="col-md-12 col-lg-12">
<!-- Using a global helper to get the item owner -->
{{#with getUser owner}}
{{#with profile}}
<a href="#" class="break-word">
{{ [first-name] }} {{ [last-name] }}
</a>
{{/with}}
{{/with}}
</div>
</div>
</div>
</div>
</template>
These is the code used by the ItemList template:
var observer, container;
Template.ItemList.onRendered(function() {
container = $('#container');
//Load Isotope with Masonry
container.imagesLoaded(function() {
container.isotope({
layoutMode: 'masonry',
itemSelector: '.ms-item',
transitionDuration: '0.1s'
});
container.isotope('layout');
});
//Using a MutationObserver to readapt the layout when a new item is added
observer = new MutationObserver(function(mutations) {
container.imagesLoaded(function() {
container.isotope('reloadItems').isotope('layout').isotope();
});
});
//Adding the MutationObserver to the items container
observer.observe(container.get(0), {
attributes: false,
childList: true,
characterData: false
});
});
And finally, this is the usage of the template:
<template name="myTemplate">
<div class="col-md-12 col-lg-12">
{{> ItemsList}}
</div>
</template>
That's how I made it. Hope this helps someone ;)
EDIT
I have found a better way to do all this (without a MutationObserver I mean). Instead, I'm using the _uihooks object provided by Meteor:
Template.ItemList.onRendered(function() {
var container = $('#container');
//Load Isotope with Masonry
container.imagesLoaded(function() {
container.isotope({
layoutMode: 'masonry',
itemSelector: '.ms-item',
transitionDuration: '0.1s'
}).isotope('layout').isotope();
});
//Using uihooks instead of MutationObserver
container[0]._uihooks = {
insertElement: function(node, next) {
$(node).insertBefore(next);
container.imagesLoaded(function() {
container.isotope('reloadItems').isotope('layout').isotope();
});
},
removeElement: function(node, next) {
$(node).remove();
container.imagesLoaded(function() {
container.isotope('reloadItems').isotope('layout').isotope();
});
}
};
});

Resources