Hy Everyone,
I set my bootstrap rules to change the basic colors (primray, secondary etc...)
Changes are OK for everything (buttons, hovers etc, tables etc) except border colors... and i don't understand why.
Here's some parts of my code.
My array in app.css
#import "~bootstrap/scss/bootstrap";
$primary : #009f93;
$secondary : #ff9914;
$success : #69dc9e;
$info : #90c290;
$light : #e4f0f5;
$dark : #0b2027;
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $secondary,
"danger": $danger,
"light": $light,
"dark": $dark
);
#import "~bootstrap/scss/bootstrap";
and an example of the border use. I've also tried with a full border and it doesn't work also. And any of the color i've changed are rendered.
<li class="nav-item border-bottom border-3 border-primary mb-2">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2">Rapports</span>
</a>
</li>
Many thanks for your help :)
You don't want to #import all of bootstrap before the changes. Instead, #import the required SASS source files and then set the changes.
#import "~bootstrap/scss/bootstrap/functions";
#import "~bootstrap/scss/bootstrap/variables";
/* Variable overrides */
$primary : #009f93;
$secondary : #ff9914;
$success : #69dc9e;
$info : #90c290;
$light : #e4f0f5;
$dark : #0b2027;
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $secondary,
"danger": $danger,
"light": $light,
"dark": $dark
);
#import "~bootstrap/scss/bootstrap/";
Demo
Related
I have a json object called blogData with json data. Inside the json obj the tags key may have multiple tag values. I would like to display the tags values separately in span tag while iterating using map function.
Now multiple tags are displaying in a single span tag ( please see below) How can I fix this ?
const blogData = [
{
"id" : 1,
"title":"Cypress tests",
"images":"/images/image1.jpg",
"description": "Add the E2E cypress UI tests",
"tags": "cypress"
},
{
"id" : 2,
"title":"Jmeter tests",
"images":"/images/image2.jpg",
"description": "Performance test using Jmeter tool",
"tags": ["jmeter", "performance"]
},
{
"id" : 3,
"title":"Basic Unix commands",
"images":"/images/image3.jpg",
"description": "Learn basic unix commands in git bash",
"tags": "unix"
},
{
"id" : 4,
"title":"Postman",
"images":"/images/image4.jpg",
"description": "Api testing using postman",
"tags": ["postman", "api"]
},
]
Home.js
const [searchResults, setSearchResults] = useState([]);
<div className="container">
{
searchResults.map(({ id, title, images, description, tags }) => (
<div key={id} className="column-center">
{/* <img className="blogImage" key={images} src={images} alt="image"></img> */}
<div className="blogtitle">
<span key={title}>{title}</span>
</div>
<section>
<p className="blogdescription" key={description}>{description}</p>
</section>
<section className="col1">
<span key={tags}>{tags}</span>
</section>
<section className="col2">
<a>Read more {'>'}{'>'}</a>
</section>
</div>
))
}
</div>
I think this what you are after.
Sandbox
<section className="col1">
{Array.isArray(tags) ? (
tags.map((tag) => (
<span style={{ marginRight: "10px" }}>{tag}</span>
))
) : (
<span>{tags}</span>
)}
</section>
You could make this code much simpler be having the tags field always be an array even if there is a single element.
I'm working on an angular 4 project calling a json through a service, everything works very well exept for a single thing, my json has the following simplified structure for understanding the problem:
{
"animals" [
{
"name" : "dog"
"subgroup": "vertebrate"
"class" : "mammal"
},
{
"name" : "pig"
"subgroup": "vertebrate"
"class" : "mammal"
},
{
"name" : "cat"
"subgroup": "vertebrate"
"class" : "mammal"
},
{
"name" : "snake"
"subgroup": "vertebrate"
"class" : "reptile"
},
{
"name" : "lizzard"
"subgroup": "vertebrate"
"class" : "reptile"
},
{
"name" : "crocodile"
"subgroup": "vertebrate"
"class" : "reptile"
},
]
}
and i want to iterate ONLY the objects with the "class" : "reptile"
i made this structure:
<div class="col-12 mb-3" *ngFor="let reptiles of animals">
<div *ngIf = "reptiles.class == reptile">
<div class="row">
<div class="col-12">
<h5 class="py-3 bg-dark text-white pl-3 mx-0 mb-3">{{reptiles.name}}</h5>
<p class="py-3 bg-dark text-white font-weight-light pl-3 m-0">{{reptiles.class}}</p>
</div>
</div>
</div>
</div>
but what happens is that it iterates three empty
<div class="col-12 mb-3" *ngFor="let reptiles of animals">
</div>
corresponding to the mammals, and i want that objects not to iterate at all, i want to iterate only the objects with the class "reptile".
how can i achieve that?
The easy fix is to use ng-container instead of a div to iterate:
<ng-container *ngFor="let reptiles of animals">
<div class="col-12 mb-3" *ngIf="reptiles.class == reptile">
<div>
<!-- ... -->
</div>
</div>
</ng-container>
Of course the template still iterates over these entries now, but it will not create any DOM node for it whatsoever (the magic of ng-container).
Possibly a better fix would be to instead filter in your component and only pass the data you want to display to the template:
// In your controller after receiving the animals data:
this.reptiles = this.animals.filter(a => a.class === "reptile");
// Template
<div *ngFor="let reptile of reptiles">...</div>
You can also write a filterBy pipe or take one from an existing library such as ngx-pipes. But beware that Angular discourages that as it easily becomes a performance pitfall.
I think that you can use this solution
Just filter by class property:
filterItemsOfType(type){
return this.items.filter(x => x.class == type);
}
Cheers,
#carlosrojas_o
you just need to filter your data in component like this:
this.filteredAnimals = this.animals.filter(animal => animal.class === "reptile"); // now use filteredAnimals in html template
Hope it will help
Working with Squarespace. At the bottom of each blog post I'm trying to get the authors name, bio, avatar, and applicable social media links to show.
I've solved with the exception of the Twitter and Facebook links.
Anyone know the variable to include these?
Here's my working code:
{.section author}
<span class="author-name">
{.if author.avatarId}
<div class="bespoke-avatar">
<a href="{collection.fullUrl}?author={author.id}">
<img src="/global/{author.avatarId}?format=36w" />
</a>
</div>
{.end}
<div class="bespoke-info">
<em class="bespoke-author-name">{displayName}</em>
<em>{author.bio}</em>
</div>
</span>
{.end}
There is a json object that is storing the social links.
authenticatedAccount -> socialOptions
"socialOptions" : [ {
"type" : "facebook",
"username" : "http://facebook.com"
}, {
"type" : "twitter",
"username" : "http://twitter.com"
}, {
"type" : "google",
"username" : "https://plus.google.com/"
} ],
Go to your main site add ?format=json-pretty and look for the above object.
I have a total of (3) templates in my page and this overlay template is the third and final one. The first two are basically written the same as this template and they work fine. BUT For some reason, console.log(html) on this one returns nothing :
<!-- JSON -->
{ "art" : [{
"title" : "2 Intro-B",
"img_small" : "2 Intro-C",
"description" : "8x10 archival print on Epson Fine Art Velvet Paper.",
"price" : "20"}, { "title" : "6 Bison-B",
"img_small" : "6 Bison-C",
"description" : "8x10 archival print on Epson Fine Art Velvet Paper.",
"price" : "20"}, { "title" : "7 Cars-B",
"img_small" : "7 Cars-C",
"description" : "8x10 archival print on Epson Fine Art Velvet Paper.",
"price" : "20"}]}
<!-- HTML -->
<div id="overlay"></div>
----------------------------------------------
<!-- SCRIPT -->
<script id="overlayTmpl" type="text/template">
{{#overlayTemplate}}
<div id="lightbox">
<div id="closeButton">X</div>
<img src="/images/{{title}}.jpg"/>
</div>
{{/overlayTemplate}}
</script>
<script type="text/javascript">
$(function(){
$.getJSON('/scripts/art.json', function(data) {
var overlaytmpl = $('#overlayTmpl').html();
var html = Mustache.to_html(overlaytmpl, data);
console.log(html);
$('#overlay').html(html);
});
});
</script>
** On the first two templates, the console.log(html) returns the html output just fine. I don't know why this one is hung up on something. JSON file has been validated...
Please help me from going insane. There must be a hex on this block of code. Anyone have a magic wand?
This may help you - Change your template like this:
<script id="overlayTmpl" type="text/template">
{{#art}}
<div id="lightbox">
<div id="closeButton">X</div>
<img src="/images/{{title}}.jpg"/>
</div>
{{/art}}
</script>
I am new in kendo ui. I have a shopping cart system like this http://demos.kendoui.com/sushi/. I want to show multiple images in a single line by creating image array. the code of this demo site at this address. https://github.com/telerik/kendo-mobile-sushi.
If you have modified menu.js and the entries look like:
{
"id" : 1,
"name" : "Sashimi salad",
"price" : 12.00,
"image" : "sashimi-salad.jpg",
"category" : "Cold starters",
"description": "Organic greens topped with market fresh sashimi, wasabi soy vinaigrette.",
"featured" : true
},
{
"id" : 2,
"name" : "Chirashi sushi",
"price" : 21.00,
"image" : [ "chirashi-sushi.jpg", "chirashi-sushi.jpg", "chirashi-sushi.jpg"],
"category" : "Cold starters",
"description": "Sushi bar variety with sushi rice.",
"featured" : false
},
Where you have entries as Sashimi salad that only have one image defined as a string and entries as Chirashi sushi where have multiple images defined in an array.
Then you should modify your templates for checking if image is a string and if not then iterate on the array elements. Something like:
<script id="menuTemplate" type="text/x-kendo-template">
<a data-role="button"
data-click="addToCartFromList"
data-item-id="#:id#"
href="\\#">#:kendo.toString(price, "c")#</a>
<a class="details-link" data-role="listview-link" href="\#details?id=#:id#">
# if (typeof image === 'string') { #
<img src="content/images/75/#= image #"/>
# } else { #
# for (var i = 0; i < image.length; i ++) { #
<img src="content/images/75/#= image[i] #"/>
# } #
# } #
<h2>#:name#</h2>
<span class="added"#= cartDataSource.get(id) ? "" : 'style="display: none"' #>Item added to cart</span>
</a>
</script>