I am trying to create foundation top bar using dust+json.
Here is my json data:
{
"label": "More Information",
"links": [{
"href": "/Link1",
"name": "Link 1"
},
{
"href": "/Link2",
"name": "Link 2"
},
{
"href": "",
"name": "Link 3",
"links": [{
"href": "/Link31",
"name": "Link 3-1"
},
{
"href": "/Link32",
"name": "Link 3-2"
},
{
"href": "/Link33",
"name": "Link 3-3"
},
{
"href": "/Link34",
"name": "Link 3-4"
}]
},
{
"href": "/Link4",
"name": "Link 4"
},
{
"href": "/Link5",
"name": "Link 5"
},
{
"href": "/Link6",
"name": "Link 6"
},
{
"href": "/Link7",
"name": "Link 7"
}]
}
This is the html result
<ul class="right">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li class="has-dropdown">
Link 3
<ul class="dropdown">
<li>
Link 3-1
</li>
<li>
Link 3-2
</li>
<li>
Link 3-3
</li>
<li>
Link 3-4
</li>
</ul>
</li>
<li>
Link 4
</li>
<li>
Link 5
</li>
<li>
Link 6
</li>
<li>
Link 7
</li>
</ul>
I have looked at following thread, however, I am not able to figure out how to implement that.
How do I implement recursion in dust template?
Okay, i found answer on following link Recursive dust template
This template
{<create_nav}
{^.links}
<li><a href='{href}'>{name}</a></li>
{:else}
<li class='has-dropdown'>
<a href='{href}' >{title}</a>
<ul class='dropdown'>
{#links}{+create_nav/}{/links}
</ul>
</li>
{/links}
{/create_nav}
<ul class="right">
{#links}
{+create_nav/}
{/links}
</ul>
Thanks
Related
I'd like to be able to use Bootstrap 4's sticky menu in conjunction with Full Calendar 5's sticky resource headers. When scrolling down, I'd like the bootstrap menu to remain at the very top, followed by the resource headings (i.e. "Room A", "Room B", etc.) from Full Calendar directly underneath. It looks like Full Calendar does have a sticky resource headings feature, but the feature only sticks to the very top of the page and is not visible because of the Bootstrap menu.
Here's a what I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://getbootstrap.com/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://getbootstrap.com/docs/4.6/examples/navbar-fixed/navbar-top-fixed.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.5.1/main.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div id='calendar'></div>
</main>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" type="text/javascript"></script>
<script src="https://getbootstrap.com/docs/4.6/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.5.1/main.min.js" type="text/javascript"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
var calendarEl = document.getElementById("calendar");
var calendar = new FullCalendar.Calendar(calendarEl, {
themeSystem: "bootstrap",
initialView: "resourceTimeGridDay",
dayMinWidth: 200,
height: "auto",
resources: [
{ id: "a", title: "Room A" },
{ id: "b", title: "Room B" },
{ id: "c", title: "Room C" },
{ id: "d", title: "Room D" },
{ id: "e", title: "Room E" },
{ id: "f", title: "Room F" },
{ id: "g", title: "Room G" },
{ id: "h", title: "Room H" },
{ id: "i", title: "Room I" },
{ id: "j", title: "Room J" },
{ id: "k", title: "Room K" },
{ id: "l", title: "Room L" }
]
});
calendar.render();
});
</script>
</body>
</html>
Here's a simple CodePen to show you: https://codepen.io/bakerstreetsystems/pen/VwmoyJb
What I'd like it to look like is something like this after scrolling all the way to the bottom:
See how the Bootstrap menu is at the very top and then the resource titles ("Room A", "Room B", etc.) come right after?
Any help would be appreciated!
Change the top offset of your sticky table-header to match the height of the nav-bar.
document.addEventListener("DOMContentLoaded", function() {
var calendarEl = document.getElementById("calendar");
var calendar = new FullCalendar.Calendar(calendarEl, {
themeSystem: "bootstrap",
initialView: "resourceTimeGridDay",
dayMinWidth: 200,
height: "auto",
resources: [{
id: "a",
title: "Room A"
},
{
id: "b",
title: "Room B"
},
{
id: "c",
title: "Room C"
},
{
id: "d",
title: "Room D"
},
{
id: "e",
title: "Room E"
},
{
id: "f",
title: "Room F"
},
{
id: "g",
title: "Room G"
},
{
id: "h",
title: "Room H"
},
{
id: "i",
title: "Room I"
},
{
id: "j",
title: "Room J"
},
{
id: "k",
title: "Room K"
},
{
id: "l",
title: "Room L"
}
]
});
calendar.render();
});
.fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky>* {
top: 56px !important;
z-index: 100;
}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://getbootstrap.com/docs/4.6/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.5.1/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.5.1/main.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<link href="https://getbootstrap.com/docs/4.6/examples/navbar-fixed/navbar-top-fixed.css" rel="stylesheet" />
<link href="https://getbootstrap.com/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div id="calendar"></div>
</main>
I am trying to use a variable in my Shopify code to declare the background and font color...
Please can someone direct me as to where I am going wrong?
Massive thanks, here is my code:
<div class="section contacts-section" style="background-color: {{ block.settings.contacts-background-color }}; color: {{ block.settings.contacts-color }};">
<div class="section-inner">
{% for block in section.blocks %}
{% if block.type == 'chemical-contact' %}
<div class="a-contact">
<a class="contact-link box-link" href="{{ block.settings.contact-link }}"></a>
<div class="a-contact-icon">
<img class="contact-icon" alt="Contact Icon" src="{{ block.settings.contact-icon | img_url: 'master' }}">
</div>
<div class="a-contact-content">
{{ block.settings.contact-text }}
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "Chemical Contacts",
"id": "contacts-section",
"max_blocks": 2,
"settings": [
{
"type": "color",
"id": "contacts-background-color",
"label": "Contacts Background Color",
"default": "#EEEDF0"
},
{
"type": "color",
"id": "contacts-color",
"label": "Contact Color",
"default": "#E20437"
}
],
"blocks": [
{
"name": "Chemical Contact",
"type": "chemical-contact",
"settings": [
{
"id": "contact-icon",
"type": "image",
"label": "Contact Icon",
"type": "image_picker"
},
{
"id": "contact-text",
"type": "text",
"label": "Contact Text",
"default": "info#example.com"
},
{
"id": "contact-link",
"type": "url",
"label": "Contact Link"
}
]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
Note this is my attempt, I have also tried putting it in the style section underneath:
<div class="section contacts-section" style="background-color: {{ block.settings.contacts-background-color }}; color: {{ block.settings.contacts-color }};">
Any pointers you can give would be really appreciated, thanks.
Solution: Make sure you're not trying to use block settings if you are only using the section settings...
You have misunderstood the sections and blocks. You have defined the color settings inside section but you are trying to access it via blocks. I have updated the code and there is also no id attribute that you used in section.
Shopify Docs for Section
<div class="section contacts-section" style="background-color: {{ section.settings.contacts-background-color }}; color: {{ section.settings.contacts-color }};">
<div class="section-inner">
{% for block in section.blocks %}
{% if block.type == 'chemical-contact' %}
<div class="a-contact">
<a class="contact-link box-link" href="{{ block.settings.contact-link }}"></a>
<div class="a-contact-icon">
<img class="contact-icon" alt="Contact Icon" src="{{ block.settings.contact-icon | img_url: 'master' }}">
</div>
<div class="a-contact-content">
{{ block.settings.contact-text }}
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "Chemical Contacts",
"max_blocks": 2,
"settings": [
{
"type": "color",
"id": "contacts-background-color",
"label": "Contacts Background Color",
"default": "#EEEDF0"
},
{
"type": "color",
"id": "contacts-color",
"label": "Contact Color",
"default": "#E20437"
}
],
"blocks": [
{
"name": "Chemical Contact",
"type": "chemical-contact",
"settings": [
{
"id": "contact-icon",
"type": "image",
"label": "Contact Icon",
"type": "image_picker"
},
{
"id": "contact-text",
"type": "text",
"label": "Contact Text",
"default": "info#delta-sci.com"
},
{
"id": "contact-link",
"type": "url",
"label": "Contact Link"
}
]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
So I am able to have four columns in single item at a time , but when I implement 'carousel' class (4th div in html file) then the first two item displays fine. But in the last item as it should only have 2 columns with task name 9 and 10, instead task name 1 and 5 are also displayed there.
if I don't implement carousel class then data displays fine but carousel buttons stops working.
' I've already tried different solutions provided on stack overflow. '
here is my HTML file
<!-- my tasks -->
<div class="row mt-3 mb-3">
<div class="col-md-12">
<!-- carousel -->
<div class="row mx-auto my-auto">
<div id="myTaskDiv" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100">
<!-- carousel item -->
<div class="carousel-item {{ i == 0 ? 'active' : '' }}" *ngFor="let chunkMyTask of productData ;let i =index;">
<!--widget-->
<div class="col-sm-6 col-md-4 col-lg-3" *ngFor="let myTask of chunkMyTask">
<div class="widget border">
<div class="widget-body">
{{myTask.name}}
</div>
</div>
<!--widget end-->
</div>
<!-- carousel item end-->
</div>
</div>
<!-- carousel controls -->
<a class="carousel-control-prev" role="button" href="#myTaskDiv" data-slide="prev">
<i class="fa fa-angle-left fa-3x" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" role="button" href="#myTaskDiv" data-slide="next">
<i class="fa fa-angle-right fa-3x" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
<!-- carousel controls end-->
</div>
<!-- carousel end -->
</div>
</div>
<!-- my tasks end-->
then this below is my .ts file
import { Component, OnInit } from '#angular/core';
import { task } from '../task';
import { TasksService } from '../tasks.service';
import { MyTaskServiceService } from 'src/app/dashboard/my-tasks/my-task-service.service';
#Component({
selector: 'app-my-tasks',
templateUrl: './my-tasks.component.html',
styleUrls: ['./my-tasks.component.css']
export class MyTasksComponent {
title = 'Carousel';
productData: any;
private myTasks: any;
private myTaskArray: any;
constructor(private myTaskService: MyTaskServiceService) { }
chunks(array, size) {
let results :any;
results = [];
while (array.length) {
results.push(array.splice(0, size));
this.num=this.num+1;
}
return results;
}
ngOnInit() {
this.myTaskService.get_New_Products().subscribe(
data => {
this.productData = this.chunks(data.json(), 4);
console.log(this.productData);
});
}
}
And at last this below is my json file:
[
{
"taskType": "myTask",
"name": "Task 1"
},
{
"taskType": "myTask",
"name": "Task 2"
},
{
"taskType": "myTask",
"name": "Task 3"
},
{
"taskType": "myTask",
"name": "Task 4"
},
{
"taskType": "myTask",
"name": "Task 5"
},
{
"taskType": "myTask",
"name": "Task 6"
},
{
"taskType": "myTask",
"name": "Task 7"
},
{
"taskType": "myTask",
"name": "Task 8"
},
{
"taskType": "myTask",
"name": "Task 9"
},
{
"taskType": "myTask",
"name": "Task 10"
}
]
I am using angularjs and bootstrap3. I have array of array of objects and I need to display it in the UI like below,
sample = [
{
"id": 12,
"title": "title2",
"description": "description2_for the second"
},
{
"id": 13,
"title": "title3",
"description": "description3"
},
{
"id": 17,
"title": "title4",
"description": "description4"
},
{
"id": 18,
"title": "title5",
"description": "description5"
},
{
"id": 19,
"title": "title6",
"description": "description6"
},
{
"id": 20,
"title": "title7",
"description": "description7"
},
{
"id": 21,
"title": "title8",
"description": "description8"
},
{
"id": 22,
"title": "title9",
"description": "description9"
}
]
my code ng-repeat look like,
<div class="editor-preview">
<div class="row" >
<div class="col-md-4 " ng-repeat-start="i in sample track by $index">
<div class="tooltip"><button type="button" class="btn btn-primary btn-round-lg btn-lg">{{i.title}}</button>
<span class="tooltiptext">{{i.description}}</span>
</div>
</div>
<div class="clearfix" ng-if="($index+1)%3==0"></div>
<div ng-repeat-end=""></div>
</div>
</div>
From the above code, UI is looking like below image.
But, I want to show the UI like the below image and 3 buttons per row
How to show the UI like above image in bootstrap css dynamically for alternative rows too
You can use list-inline for this layout:
http://jsfiddle.net/hstppbj8/804/
HTML:
<div ng-controller="sample">
<div class="editor-preview-testimonials">
<div class="row">
<div class="col-xs-10">
<ul class="list-inline text-center">
<li ng-repeat="i in sample track by $index"><button class="btn btn-sm btn-primary">
{{i.title}}<span class="tooltiptext"> {{i.description}}</span>
</button></li>
</ul>
</div>
<div class="clearfix" ng-if="($index+1)%3==0"></div>
<div ng-repeat-end=""></div>
</div>
</div>
</div>
CSS:
ul li {
margin: 4px 0; /*For spacing between li*/
}
Resize the jsfiddle window to see the layout properly.
try to have the text for the content to be different ( some are longer, some are much longer ) for each of the button. It should be prolonged as the class ".btn" css has {display: inline-block} in them. Then make sure there is a wrapper around these buttons and make them { text-align: center }
In angular 1 ng-repeat has been used. But in ng-5 this syntax has been changed with ng-for. I would suggest you to please use the ng-for to use the angular loop. in that case Your code will be like the following.
<div ng-controller="sample">
<div class="editor-preview-testimonials">
<div class="row">
<div class="col-xs-10">
<ul class="list-inline text-center">
<li *ngFor="let item of items; let i = index""><button class="btn btn-sm btn-primary">
<span class="tooltiptext"> {{i}} {{description}}</span>
</button></li>
</ul>
</div>
<div class="clearfix" ng-if="($index+1)%3==0"></div>
</div>
</div>
</div>
There is a site that I want to convert to an API with Kimono and it has the following structure (I mean visually, not markup-vise):
CATEGORY 1:
Product 1: PRICE
Product 2: PRICE
Product 3: PRICE
...
CATEGORY 2:
Product 1: PRICE
Product 2: PRICE
Product 3: PRICE
...
etc...
And I want the API to reflect that hierarchy, so it would be something like this:
{
"CATEGORY 1": {
"Product 1": {
"price": "$"
},
"Product 2": {
"price": "$"
},
"Product 3": {
"price": "$"
}
},
"CATEGORY 2": {
"Product 1": {
"price": "$"
},
"Product 2": {
"price": "$"
},
"Product 3": {
"price": "$"
}
}
}
The problem is that the site's markup doesn't show this hierarchy (Products aren't nested inside the Categories):
<h3>CATEGORY 1</h3>
<div class="product">
<div>
<div>
<h4>
<div>Product 1</div>
</h4>
<p>Price</p>
</div>
<div class="product">
<div>
<div>
<h4>
<div>Product 2</div>
</h4>
<p>Price</p>
</div>
<h3>CATEGORY 2</h3>
<div>
<div>
<div>
<h4>
<div>Product 1</div>
</h4>
<p>Price</p>
</div>
<div class="product">
<div>
<div>
<h4>
<div>Product 2</div>
</h4>
<p>Price</p>
</div>
No matter what I do, I always get something like this:
{
"collection1": [
{
"property1": "Category 1",
"property4": "Product 1",
"property5": "price"
},
{
"property1": "Category 2",
"property4": "Product 1",
"property5": "price"
}
]
}
Is it possible to achieve this?
If CSS selectors won't work probably it's possible if you will try regexp for CATEGORY 1, CATEGORY 2 - can't help more without knowing page url for testing
Also You can try to put Cat1, Cat2 data in different Collections, separated with
CSS:
...> h3
and regexp for middle part:
CATEGORY 1