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}}
Related
I created a SLDS custom toast in lwc. but it's not responsive. Does anybody has suggestion?
<template if:true={isSuceess}>
<div class="slds-notify_container slds-is-relative sucContainer">
<div class="slds-notify slds-notify_toast slds-theme_success" role="status">
<div class="slds-notify__content">
<h2 class="slds-text-heading_small ">{sucMessage}</h2>
</div>
</div>
</div>
</template>
<template if:true={isError}>
<div class="slds-notify_container slds-is-relative sucContainer">
<div class="slds-notify slds-notify_toast slds-theme_success" role="status">
<div class="slds-notify__content">
<h2 class="slds-text-heading_small ">{errorMessage}</h2>
</div>
</div>
</div>
</template>
I am trying to make it like an admin panel thingy. and for that, I am going for a pannel look and since I want it to be a little irregular I want the size of cards to vary. This is what I want to fix:
I don't want the space that I have crossed out with red and I want the thing on the right to extend beyond its row, and I don't know how to do that?
My code(I am using Django and Materialize and a custom styling sheet for colours):
<div class="container">
<div class="row">
<div class="col s3">
<div class="card">
<div class="card-content Vgrey white-text">
<span class="card-title">Networth</span>
<h3 class="center-align cardVtext">{{net_worth}}</h3>
</div>
</div>
</div>
<div class="col s3">
<div class="card">
<div class="card-content Vgrey white-text">
<span class="card-title">Balance</span>
<h3 class="center-align cardVtext">{{balance}}</h3>
</div>
</div>
</div>
<div class="col s2">
<div class="card">
<div class="card-content Vgrey white-text">
<span class="card-title">% Increase</span>
<h3 class="center-align cardVtext">{{percentage_increase}}</h3>
</div>
</div>
</div>
<div class="col s4">
<div class="card right ">
<div class="card-content Vgrey white-text">
<table class="highlight centered responsive-table">
<thead>
<tr>
<th>Company</th>
<th>Stocks Owned</th>
</tr>
</thead>
<tbody>
{% for stock in portfolio %}
<tr>
<td>{{stock.stock_ticker}}</td>
<td>{{stock.stocks_owned}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div> <!--First row ends here-->
<div class="row">
<div class="col s8">
<div class="card">
<div class="card-content Vgrey white-text">
<span class="card-title">Networth</span>
<canvas id="myChart"> </canvas>
</div>
</div>
</div>
</div> <!--second row ends here-->
</div><!--Container ends here-->
This was answered very well by a user on Reddit by the name of jonassalen.
You just need another column layout in this example.
First a row with 2 columns: In that first column you put the block
with the 3 columns and the bigger block beneath. In the second column,
you put the block on the right.
So I am working in Meteor JS for the first time.
I've set up my templates in a pretty basic fasion, and I have all of them wrapped up in a container div. My question is how to change the color of the rest of the screen, that is on the left and right side from that container. For styling I'm using materializecss. I have no idea how to approach this at the moment. The code I'm using is below.
<head>
<title>Waste manager</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.2.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.2.1/build/ol.js"></script>
</head>
<body>
<div class="cyan">
</div>
</body>
<template name='ApplicationLayout'>
{{> yield "navbar"}}
{{> yield "main"}}
{{> yield "addForm"}}
{{> yield "footer"}}
</template>
<!-- <template name="note">
<li class="collection-item">
{{text}}
<button class="brand-logo">delete</button>
</li>
</template>-->
<template name="navbar">
<div class="container">
<nav class="cyan">
<div class="container">
<div class="nav-wrapper">
Waste Manager
<ul id="nav-mobile" class="right">
<li class="nav-item">
<i class="material-icons left">map</i>
</li>
<li class="nav-item">
<i class="material-icons left">info</i>
</li>
<li class="nav-item">
{{> loginButtons}}
</li>
</ul>
</div>
</div>
</nav>
</div>
</template>
<template name="addForm">
<div class="container">
<form class="add-form">
<input type="text" name="text" placeholder="Input text">
</form>
</div>
</template>
<template name="maps">
<div class="container">
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([18.41, 43.85]),
zoom: 12
})
});
var vectorSource = new ol.source.Vector;
var marker = new ol.Feature({
geometry: new ol.geom.Point(
ol.proj.fromLonLat([18.4165, 43.8594])
),
});
vectorSource.addFeature (marker);
var marker2 = new ol.Feature({
geometry: new ol.geom.Point(
ol.proj.fromLonLat([18.4135, 43.8558])
),
});
vectorSource.addFeature (marker2);
var markerVectorLayer = new ol.layer.Vector({
source: vectorSource,
});
map.addLayer(markerVectorLayer);
</script>
</div>
</template>
<template name="cards">
<div class="container">
<p>cards work!</p>
<div class="container">
<div class="col s12 m7">
<div class="card small">
<div class="card-image">
<img src="images/sample-1.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<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 class="col s12 m7">
<div class="card small">
<div class="card-image">
<img src="images/sample-1.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<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 class="col s12 m7">
<div class="card small">
<div class="card-image">
<img src="images/sample-1.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<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>
</div>
</template>
<template name="display">
<div class="container">
{{#if currentUser}}
<h1>Smart Bins</h1>
<i class="material-icons left">add</i>
<ul class="collection">
{{#each notes}}
<li class="collection-item cyan">
{{text}}
<i class="material-icons left">delete</i>
</li>
{{/each}}
</ul>
{{else}}
<p>Please log in</p>
<!-- kartice iz cards -->
{{> cards}}
{{/if}}
</div>
</template>
<template name="displayWithoutAdd">
<div class="container">
<h1>Smart Bins</h1>
{{#if currentUser}}
<!-- <i class="material-icons left">add</i> -->
<ul class="collection">
{{#each notes}}
<li class="collection-item cyan">
{{text}}
<i class="material-icons left">delete</i>
</li>
{{/each}}
</ul>
{{else}}
<p>Please log in</p>
{{/if}}
</div>
</template>
<template name="testnavbar">
<div class="container">
<div class="topnav">
Waste Manager
<i class="material-icons left">map</i>
{{> loginButtons}}
</div>
</div>
</template>
<template name="footer">
<div class="container">
<div class="footerCustom">
<p>Zijah Mahmutbegovic, SSST 2020</p>
</div>
</div>
</template>
I am doing a Course on meteor from Coursera. The teacher uses a mac or a linux in the installation so its becoming difficult for me to follow up.
After running the server, the teacher changed a few HTML items in the code and it changed on the server but when I change anything after starting and running the server, the file does not get changed.
<head>
<title>image_share</title>
</head>
<body>
<h1>Welcome to Coursera!</h1>
<div class="container">
{{> images}}
</div>
</body>
<template name="images">
<div class="row">
{{#each images}}
<div class="col-xs-12 col-md-3">
<div class="thumbnail">
<img class="js-image" src="{{img_src}}"
alt="{{img_alt}}"/>
<div class="caption">
<h3>Thumbnail label</h3>
<p>description of the image</p>
</div>
</div>
</div> <!-- / col -->
{{/each}}
</div> <!-- / row -->
</template>
My edited code,
<head>
<title>image_share</title>
</head>
<body>
<h1>Welcome to My world!</h1>
<div class="container">
{{> images}}
</div>
</body>
<template name="images">
<div class="row">
{{#each images}}
<div class="col-xs-12 col-md-3">
<div class="thumbnail">
<img class="js-image" src="{{img_src}}"
alt="{{img_alt}}"/>
<div class="caption">
<h3>Thumbnail label</h3>
<p>description of the image</p>
</div>
</div>
</div> <!-- / col -->
{{/each}}
</div> <!-- / row -->
</template>
Notice I have changed the contents of <h1> tag but still nothing changes on the server.
Is there a good method to toggle template's reactivity on client-side by checkbox?
Client Main HTML
<section class="margin-bottom-10" id="trend">
<div class="headline">
<h4><i class="fa fa-th-large"></i> section1</h4>
<div class="checkbox auto-update-check">
<label><input type="checkbox" id="Trend" checked="checked">auto-update</label>
</div>
</div>
</section>
<div class="col-lg-4 col-md-4 col-sm-6">
<!--<div class="col-md-12 col-sm-12">-->
{{> list1}}
<!--</div>-->
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
{{> list2}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
{{> list3}}
</div>
Main has 3 sections and checkboxes.
and I want to toggle the reactivity(auto-update) each section on client-side.
pic