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.
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 learn Bulma and I want to show a simple page with this layout:
<header>
<hero>
<section>
<footer>
I don't understand why they overlap with each other instead of being clearly one below the other.
There is a dummy container that is obviously misplaced and hidden by the header.
The overlapping is also obvious by the search bar that is both over part of the footer and the hero.
https://codepen.io/anon/pen/bLgOWb
<nav class="navbar is-primary is-fixed-top has-text-white">
<div class="container">
<div class="navbar-brand">
<img id="logo" alt="DUB Logo" src="http://code.dlang.org/images/dub-header.png"/>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<div id="navItem" class="navbar-item">Primo</div>
</div>
</div>
</div>
</nav>
<section class="section">
<div class="container dummy">
</div>
</section>
<div class="hero ">
<div class="container has-text-centered is-size-1">
<h1 class="title"> Explore and use libraries and software</h1>
</div>
</div>
<div id="search" class="container">
<div class="columns searchBlock ">
<div class="column is-paddingless">
<form>
<input class="input searchInput" type="text" placeholder="Search">
</form>
</div>
<div class='column is-3 is-paddingless'>
</div>
<div class='column is-2 is-paddingless'>
<a class='button is-primary searchButton'>Search</a>
</div>
</div>
</div>
<footer class="footer">
<div class="container is-text-centered">
<p> Footer </p>
</div>
</footer>
<script src="old.js"></script>
.hero-body is missing
<div class="hero">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title"> Explore and use libraries and software </h1>
</div>
</div>
</div>
Bulma - Hero
I think problem with column . change column margin follow this
.columns {
marign:0;
}
There is a panel:
I am working for an hour to get this panel done, can someone please help me or guide me how can I do this? I am using template to modify it, but not sure how to do it.
Here is the code until now:
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
/*#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');*/
body {
margin: 10px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary event-primary">
<div class="panel-heading"><h2>Title</h2></div>
<div class="panel-body nopadding">
<img src="https://placehold.it/400x150" alt="event image" class="img-responsive"/>
<div class="row nopadding">
<div class="col-sm-6 nopadding">
<time class="start pink">
Start <span class="day">20</span>
<span class="month">Apr</span>
<span class="year">2016</span>
</time>
</div>
<div class="col-sm-6 nopadding">
<time class="end purple">
End <span class="day">20</span>
<span class ="month">Apr</span>
<span class="year">2016</span>
</time>
</div>
</div>
</div>
<div class="panel-footer panel-primary">
<p>Short description of event would go here.
</p>
Invest
</div>
</div>
</div>
</div>
</div>
JSFiddle: https://jsfiddle.net/edmbz4L2/
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}}
I'm having trouble working with dynamic content which need to get span4 classes. Because a row can be max 12 columns so next 'article' need to jump to the next row.
Please check out this preview what I mean: http://www.dreamix-studio.com/bootstrap/bootstrap_q_2.jpg
<div class="row-fluid">
<div class="span12">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
</div>
</div>
<div class="row-fluid">
<!-- what should be dynamic -->
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<!-- END dynamic -->
</div>
Does anyone know how I can solve this problem?
try This
<div class="row-fluid">
<div class="span12">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
</div>
</div>
<div class="row">
<!-- what should be dynamic -->
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<!-- END dynamic -->
</div>