I have a Markup annotation on some of my sass source, like so:
// Headings
//
// Markup:
// <h1 class="{$modifiers}">H1 Heading</h1>
// <h2 class="{$modifiers}">H2 Heading</h2>
// <h3 class="{$modifiers}">H3 Heading</h3>
// <h4 class="{$modifiers}">H4 Heading</h4>
// <h5 class="{$modifiers}">H5 Heading</h5>
// <h6 class="{$modifiers}">H6 Heading</h6>
//
// .subheader - Subheader class
// .secondary-header - Secondary header class
//
// Styleguide 4.1
In the generated output, I get output for the default stle and both of my modifier classes. However, they look identical. Upon inspecting the elements, it becomes clear that the template is not dereferencing the {$modifiers}
<div class="kss-modifier__name kss-style"> .subheader </div>
<div class="kss-modifier__description kss-style"> Subheader class </div>
<div class="kss-modifier__example">
<h1 class="{$modifiers}">H1 Heading</h1>
<h2 class="{$modifiers}">H2 Heading</h2>
<h3 class="{$modifiers}">H3 Heading</h3>
<h4 class="{$modifiers}">H4 Heading</h4>
<h5 class="{$modifiers}">H5 Heading</h5>
<h6 class="{$modifiers}">H6 Heading</h6>
</div>
This is using kss-node 2.0.2
Any thoughts on what I might be doing wrong here? I've compared my template to a template on another project that works and I don't see any differences in the relevant section.
Since then I think kss has changed a bit or you've used a wrong modifier class ?
According to the specs:
If you include {{modifier_class}} in the markup, the generated style
guide will be able to use the correct CSS class when it displays the
sample for each of the modifiers.
https://github.com/kss-node/kss/blob/spec/SPEC.md
Related
Im using NodeJS with React and I have a problem. I didnt find a npm module or a code that allowed me to create a pagination for a list of results.
I have a variable called "jobs", that contains a list of job ads.
In my render function I call:
{this.state.jobs.map(this.renderClass)}
that map every job with a function.
This function is renderClass, that contains the render of:
<section key={c.id} className="panel panel-featured-left panel-featured-primary">
<Link to={'/job/'+c.id}>
<div className="panel-body">
<div className="widget-summary">
<div className="widget-summary-col widget-summary-col-icon">
<div className="summary-icon">
<img src={image} className="img-responsive" />
</div>
</div>
<div className="widget-summary-col">
<div className="summary">
<h4 className="title">{c.company}</h4>
<div className="info">
<strong className="amount"></strong><br/>
<p><i className="fa fa-map-marker"></i> {c.location}</p>
<p><i className="fa fa-suitcase"></i> {c.position}</p>
</div>
</div>
<div className="summary-footer">
<a className="text-muted text-uppercase"><i className="fa fa-calendar"></i> {day}/{month}/{year}</a>
</div>
</div>
</div>
</div>
</Link>
</section>
In this way I have a huge list of jobs, but I would a paging.
How can I do this?
Thanks
I would save the page in a state,
and do something like that (say each page has 10 jobs ) -
{this.state.jobs.slice(this.state.page * 10, this.state.page * 10 + 10)
.map(this.renderClass)}
I suggest your need to build a component for handling pagination. Some thing like that:
<Pagiantion
listLenght = {111}
selectedPage = {1}
itemPerPage = {10}
....
/>
I found the best component handling it, react-pagination-custom.
It allow you custom everything (number buttons, wrap container, spread,..). Its document is well, demo is also clear.
I'm using bootstrap and attempting to use the panel component for rendering lookup items. It renders perfectly fine, but this was all hand coded.
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
Item Number 1
</div>
<div class="panel-body">Image Carousel Goes Here</div>
<div class="panel-footer">
<table>
<tr>
<td>Field</td>
<td>Value</td>
</tr>
<!-- etc. -->
</table>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
Item Number 1
</div>
<div class="panel-body">Image Carousel Goes Here</div>
<div class="panel-footer">
<table>
<tr>
<td>Field</td>
<td>Value</td>
</tr>
<!-- etc. -->
</table>
</div>
</div>
</div>
</div>
A JSFiddle is here.
I'm wondering how it'd be possible to do something like:
<div class="row">
#(foreach Item item in items)
{
#RenderItemView(item);
}
</div>
where I could dump all of the "div.col-md-4 ... slash div" code into another cshtml file and use it as a component and just pass the model to it?
I know that I could do this, but would prefer to make this a reusable component.
<div class="row">
#foreach(Item item in items)
{
// instead of using a component, setting the panel-heading off item.Number,
// panel-body by a foreach on item.ImageUrls, etc.
}
</div>
Basically, the subcomponent will be a partial view, I think, but what is the normal way of passing a model to it and it rendering at that spot (basically, like #RenderBody works on layout)
You could create a partial view which holds this content:
#model IEnumerable<ItemType>
<div class="row">
#foreach(var item in Model)
{
// instead of using a component, setting the panel-heading off item.Number,
// panel-body by a foreach on item.ImageUrls, etc.
}
</div>
Save the partial view in the Views/Shared folder, so that it's available everywhere. Then to use it:
#{Html.RenderPartial("YourPartialView", Model.Items);}
How can I make a layout shown in this image
I could have done it easily with grid system but I want the first post's description off the grid system or below the both column. However, for mobile devices I want it to appear with the image or in the same grid like the image below
I don't expect you can do this with Bootstrap's CSS only cause the order of your elements change from desktop to mobile.
Try this html:
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-12" style="background-color:red;">1</div>
<div class="rightblock col-md-6 col-xs-12">
<div class="row">
<div class="col-xs-12" style="background-color:lightgreen;">3</div>
<div class="col-xs-12" style="background-color:lightyellow;">4</div>
</div>
</div>
<div class="clearfix visible-md visible-lg"></div>
<div class="col-md-12 col-xs-12 lefttext" style="background-color:lightblue;">2</div>
</div>
</div>
Where 2 = the caption of your first item (1) and 3 and 4 are your second and third item.
For the mobile version use javascript to swap 2 (.lefttext) and the 3/4 block (.rightblock):
$(window).resize(function () {
if ($(window).width() < 992) {
$(".rightblock").insertAfter($(".lefttext"));
}
});
Demo: http://bootply.com/94560
Note 1: $(window).resize only will called on a real resize (from big to small) and not when opening the small screen direct. See here for better solution to react on screen size changes: How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript?
Note 2: see http://getbootstrap.com/css/#grid-responsive-resets for explanation of the clearfix
I'm trying to preserve the full markup of a template, including the class on the root node when using a marionette region. I'm also trying to avoid creating an extra wrapping div. I've solved the problem, but in a way which I don't think is satisfactory.
I am creating and rendering a layout like this:
MyApp = new Backbone.Marionette.Application();
MyApp.addRegions({
mainRegion: "#main"
});
AppLayout = Backbone.Marionette.Layout.extend({
template: '
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
'
});
var layout = new AppLayout();
MyApp.mainRegion.show(layout);
layout.show(new MenuView());
And the result is that my template is rendered like this:
<div id="main">
<div>
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
</div>
Notice, the class="row" is missing from the root node of the template. It appears that marionette is removing the root div from my template, and then wrapping the contents in a new div.
I have managed to hack a solution to this like this
AppLayout = Backbone.Marionette.Layout.extend({
template: '
<div><!-- sacrificial div -->
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
</div>
',
onRender: function () {
// get rid of that pesky wrapping-div
// assumes 1 child element.
this.$el = this.$el.children();
this.setElement(this.$el);
}
});
I'm adding an extra root div (my sacrificial div) to my template which marionette removes, and then I'm telling marionette to use the first child as the layouts 'el' (as per Turning off div wrap for Backbone.Marionette.ItemView).
This seems crazy!
Can somebody suggest a better way?
EDIT: n.b. I'd like to keep all the template logic in the template, so don't want to have to use code in my view to specify the class on the root node - if I do this, I end up with a maintenance headache.
Try with
AppLayout = Backbone.Marionette.Layout.extend({
template: '
<div class="col-md-8"></div>
<div class="col-md-4"></div>
',
className: "row"
});
AppLayout is missing its region(s).
AppLayout = Backbone.Marionette.Layout.extend({
template: '
<div class="row">
<div id="region1" class="col-md-8"></div>
<div id="region2" class="col-md-4"></div>
</div>
',
regions: {
region1: '#region1',
region2: '#region2'
}
});
Then at your instantiated layout:
layout.region1.show(new MenuView());
layout.region2.show(new MenuView());
Instead of assigning the template to a string, compile the HTML into a template function with underscore. Something like this:
template: _.template(
'<div class="row">' +
'<div class="col-md-8"></div>' +
'<div class="col-md-4"></div>' +
'</div>'
)
I have a template like
script type: "text/template", id: "list-template", '''
<div class="display">
<div id="list-name"><%= name %></div>
<span class="list-destroy"></span>
</div>
<div>
<ul id="ul-cards">
</ul>
</div>
<div class="edit">
<input class="list-input" type="text" value="<%= name %>" />
<input id="btnEdit" type="button" value="Save" class="primary wide js-add-list" />
<input id="hdnListId" type="hidden" value="<%= listId%>" />
</div>
<form class="add-list-card js-add-list-card clearfix">
<textarea placeholder="Add card" class="new-card"></textarea>
<input type="button" value="Add" class="primary js-add-card">
<a class="app-icon close-icon dark-hover cancel js-cancel-add-card" href="#" id="closeCard"></a>
</form>
'''
in this template i have <ul id="ul-cards"> element in which i want to render another template which display list inside this ul.
this template is :
script type: "text/template", id: "card-template", '''
<div>
<span class="card-name"><%= name %></span>
</div>
'''
is it possible or i have to do it in another way?
please help me if anyone have idea.
thanks in advace.
it is worked but still i have one problem in data display in
<ul id="ul-cards"> there sholud be 2 as per records in my database but it will display only 1 . data fetch properly but display only last data.
There are two ways to do this: the DOM way and the template way.
The DOM way involves adding your views using DOM methods: you have your ListView and your CardView; the ListView invokes individual CardViews that fill in the ListView's element.
The template way requires that you remember this: backbone's views are policy frameworks, not policy templates. Render doesn't have to render into the DOM. You can use render() to return a string, for example. If your event manager is on the ListView object only (possible; I've done this), then you can have ListView invoke "the resulting array of an array of CardView renders" and insert that directly into ListView's template. This is actually faster, as you only require the browser to analyze the entire ListView HTML blob once, when it's inserted into the innerHTML of the parent DOM object.