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>
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 showing my div in column. Issue is i need to center my text
MY code
<div class="card mb-4">
<div class="card-header">
<div class="card-title-wrap bar-info">
<div class="card-title">Personal Information</div>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="align-self-center halfway-fab text-center">
<a class="profile-image">
<img src="assets/img/portrait/medium/avatar-m-9.jpg"
class="rounded-circle img-border gradient-summer width-100" alt="Card image">
</a>
</div>
<div class="text-center">
<span class="font-medium-2 text-uppercase">{{selectedPatient?.patientName}}</span>
<p class="grey font-small-2"></p>
</div>
<div class="row align-self-center">
<div class="col-12 col-sm-6">
<ul class="no-list-style pl-0 text-center">
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
ID: </a></span>
</div>
<div class="d-inline-block">
<span class="">
<span class="display-block overflow-hidden">
{{selectedPatient?.mrn}}</span>
</span>
</div>
</div>
</li>
</ul>
</div>
<div class="col-12 col-sm-6">
<ul class="no-list-style pl-0 text-center">
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
Age:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span
class="display-block overflow-hidden"> {{selectedPatient?.age}}</span>
</span>
</div>
</div>
</li>
<li class="mb-2">
</ul>
</div>
</div>
</div>
</div>
</div>
Its look like this right now
I need to center the ID and AGE Text in center of my card. They are showing on left right now i need to show them in middle to the center. I try to give the text-align center but its not come in a center
.centered {
width: 100%;
display: flex;
justify-content: center;
}
place your items within that div containg that class.
Try this one. I removed some extra html code which making no sense.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="card mb-4">
<div class="card-header">
<div class="card-title-wrap bar-info">
<div class="card-title">Personal Information</div>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="align-self-center halfway-fab text-center">
<a class="profile-image">
<img src="assets/img/portrait/medium/avatar-m-9.jpg"
class="rounded-circle img-border gradient-summer width-100" alt="Card image">
</a>
</div>
<div class="text-center">
<span class="font-medium-2 text-uppercase">{{selectedPatient?.patientName}}</span>
</div>
<div class="row align-self-center justify-content-center">
<div class="p-2 ">
<span class="text-primary font-weight-bold">ID:</span>
<span>{{selectedPatient?.mrn}}</span>
</div>
<div class="p-2 ">
<span class="text-primary font-weight-bold">Age:</span>
<span>{{selectedPatient?.age}}</span>
</div>
</div>
</div>
</div>
</div>
I've hard time installing RTL with Semantic UI, I used npm to insall semantic then edited the semantic.json file "rtl": false, to true
then followed this question (Existing Installation) but neved worked does semantic ui framework support rtl languages?
I also tried this with CDN https://rtlcss.com/cdn/css-frameworks/semantic-ui/index.html didn't work either!
What is the problem ?
semantic.json
permission": false,
"autoInstall": false,
"rtl": true,
"version": "2.3.3"
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Homepage</title>
<!-- Semanti UI -->
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.rtl.css">
<!-- Semanti UI -->
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- nav -->
<div class="ui stackable menu">
<div class="item">
<img src="https://en.facebookbrand.com/wp-content/uploads/2016/05/flogo_rgb_hex-brc-site-250.png">
</div>
<a class="item">Features</a>
<a class="item">Testimonials</a>
<div class="right menu">
<a class="item ">Sign-in</a>
<a class="item ">Sign-up</a>
</div>
</div>
<!-- nav -->
<div class="commentsContainer">
<h2 class="ui center aligned icon header">
SMLE
</h2>
<div class="ui stacked segment">
<p> بسم الله الرحمن الرحيم
</p>
</div>
<div class="bu">
<div class="RorL">
<button class="ui blue right labeled icon button">
<i class="right arrow icon"></i>
التالي
</button>
</div>
<button class="ui blue left labeled icon button">
<i class="left arrow icon"></i>
السابق
</button>
</div>
<div class="ui small comments">
<h3 class="ui dividing header">Comments</h3>
<div class="comment">
<a class="avatar">
<img src="https://semantic-ui.com/images/avatar2/large/molly.png">
</a>
<div class="content">
<a class="author">Matt</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="text">
How artistic!
</div>
<div class="actions">
<a class="reply"><span> 22</span> UpVote</a>
<a class="reply">DownVote</a>
<a class="reply">Reply</a>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="https://semantic-ui.com/images/avatar2/large/matthew.png">
</a>
<div class="content">
<a class="author">Elliot Fu</a>
<div class="metadata">
<span class="date">Yesterday at 12:30AM</span>
</div>
<div class="text">
<p>This has been very useful for my research. Thanks as well!</p>
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
<div class="comments">
<div class="comment">
<a class="avatar">
<img src="https://semantic-ui.com/images/avatar2/large/kristy.png">
</a>
<div class="content">
<a class="author">Jenny Hess</a>
<div class="metadata">
<span class="date">Just now</span>
</div>
<div class="text">
Elliot you are always so right :)
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="https://semantic-ui.com/images/avatar2/large/kristy.png">
</a>
<div class="content">
<a class="author">Joe Henderson</a>
<div class="metadata">
<span class="date">5 days ago</span>
</div>
<div class="text">
Dude, this is awesome. Thanks so much
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
<form class="ui reply form">
<div class="field">
<textarea></textarea>
</div>
<div class="ui blue labeled submit icon button">
<i class="icon edit"></i> Add Reply
</div>
</form>
</div>
<!-- Comments -->
</div>
<!-- Semanti UI -->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>
<!-- Semanti UI -->
</body>
</html>
Fixed it , It's a simple mistake.
The code was missing this.
<html dir="rtl" lang="ar">
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.
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}}