How to make the Angular youtube-player responsive with multiple videos? - html

This is the html and tailwind I'm using in Angular 12.
<div class="grid gap-5 grid-cols-1 lg:grid-cols-3 justify-items-center">
<div
*ngFor="let v of featuredVideos"
class="rounded-2xl overflow-hidden"
style="height: 220px"
>
<youtube-player
[videoId]="v.videoId"
suggestedQuality="highres"
[height]="220"
[width]="350"
></youtube-player>
</div>
</div>
And I have this in the Typescript file:
featuredVideos = [
{
name: 'rxjsVideo',
videoId: 'DAGrVyKR_P4'
},
{
name: 'tipsVideo',
videoId: 'JINJQk7ggoo'
},
{
name: 'angMaterialVideo',
videoId: 'gSvxYv2VgHc'
}
];
The videos are responsive when small, but in medium they overlap each other. Is there a way to condense their ratios when the screen gets slightly smaller so they stay in their own cell?

Related

Bootstrap - Margins causing columns to wrap to next line when using canvas

I am trying to place two charts next to each other with some padding or margins between the columns. I have no issues if the columns contain text but not working with the canvas tag. If I place them side-by-side with no margin it works okay, but adding a margin causes the chart to wrap to the next line.
I've tried adding gutters, padding, container vs container-fluid. Adding mx-# will sometimes work but snap to the next line on resize.
var data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
datasets: [{
label: "Dataset #1",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 20, 81, 56, 55, 40],
}]
};
var options = {
maintainAspectRatio: true,
scales: {
y: {
stacked: true,
grid: {
display: true,
color: "rgba(255,99,132,0.2)"
}
},
x: {
grid: {
display: false
}
}
}
};
new Chart('bar-chart', {
type: 'bar',
options: options,
data: data
});
new Chart('bar-chart2', {
type: 'bar',
options: options,
data: data
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<div class="container-fluid">
<div class="row p-2 bg-dark ">
<div class="col-6 bg-white shadow rounded">
<h3>Col1</h3>
<canvas id="bar-chart"></canvas>
</div>
<div class="col-6 bg-white shadow rounded">
<h3>Col2</h3>
<canvas id="bar-chart2"></canvas>
</div>
</div>
</div>
Since you're using two col-6, they take up the whole space (12 cols) so adding a margin forces the second to go the next line, i suggest putting your content inside another div inside col-6 with some padding:
.mycanvas {
padding: 10px;
}
<div class="col-6">
<div class="mycanvas bg-white shadow rounded">
<h3>Col1</h3>
<canvas id="bar-chart"></canvas>
</div>
</div>
<div class="col-6">
<div class="mycanvas bg-white shadow rounded">
<h3>Col2</h3>
<canvas id="bar-chart2"></canvas>
</div>
</div>

Vue.js dynamic images not working in v-for

im trying to display some images inside a v-for putting the results in the img src=""
<div v-for="piatto in portata" class="card mb-3">
<div class="row">
<div class="col-lg-4">
<img src="'/img/food/' + piatto.img_id + '.jpg'" alt="" style="height:;" class="img-fluid rounded-start img-thumbnail" >
</div>
<div class="col-lg-8">
<div class="card-body mt-3">
<h3 class="card-title">{{piatto.food_name}}</h3>
<h4 class="card-text text-primary">{{piatto.price}}€</h4>
<button type="button" #click="sendOrder(piatto.food_name)" class="btn btn-dark">Aggiungi</button>
</div>
</div>
</div>
</div>
The <img src="'/img/food/' + piatto.img_id + '.jpg'" syntax doesnt seem to work. I dunno if im doing some error in the syntax, or maybe this way of solving the problem is just not viable.
Im pretty new to vue. Thanks in advance
If you are using Webpack
If the images are hosted somewhere on the Internet, you can do that
<template>
<section style="display: flex">
<div v-for="element in elements" :key="element.id" class="">
<img :src="`${imageInitialUrl}${element.imageId}`" />
<p>{{ element.name }}</p>
</div>
</section>
</template>
<script>
export default {
data() {
return {
imageInitialUrl: 'https://source.unsplash.com/random/200x200?sig=',
elements: [
{
id: 1,
name: 'bob',
imageId: '1',
},
{
id: 2,
name: 'patrick',
imageId: '2',
},
{
id: 3,
name: 'sarah',
imageId: '3',
},
],
}
},
}
</script>
This is how it will look.
This is how its written if the images are local
<img :src="require(`#/assets/images/${element.imageId}.jpg`)" />
With this kind of structure

Vue3 transition-group not working as expected

I am new to Vue in general and working on a project with a carousel that will show the different images fine, but the transition is not working as expected. Each time a new image shows, the transition has some style that has it go from the bottom left corner to the center. Any suggestions on how to make it slide like a carousel similar to https://www.jssor.com/demos/full-width-slider.slider without the buttons on the sides?
I know that when my images change that the .fade-move css class gets applied, but I can't find the right combo to make the current slide go out left and bring the next slide in from the right. If I add the styling to all div's div {transition: all 2s ease);}, then it will "transition", but I can't figure out why it's starting from the bottom right corner.
<script setup lang="ts">
let slides = ref(
[
{
url: x.svg,
title: "test 1",
id: 0,
},
{
url: y.svg,
title: "test 2",
id: 1,
},
{
url: z.svg,
title: "test 3",
id: 2,
},
]
);
let GREENCIRCLE = green.svg;
let WHITECIRCLE = white.svg;
let active = ref(0);
function next () {
active.value = (active.value + 1) % slides.value.length
}
onMounted(() => {
window.setInterval(next,4000);
})
</script>
<template>
<div class='carousel-view'>
<transition-group
class='carousel'
tag="div"
name="fade">
<div class="slide-container"
v-for="slide, idx in slides"
:key="slide.id"
>
<div
class='slide'
v-if="idx===active">
<img :src="slide.url" />
<h3> {{ slide.title }} </h3>
</div>
</div>
</transition-group>
<div class="links-container">
<a class="carousel-links"
#click="active=idx"
v-for="slide, idx in slides"
:key="slide.id">
<img
class="carousel-controls"
:src="idx === active ? GREENCIRCLE : WHITECIRCLE"
/>
</a>
</div>
</div>
</template>
<style scoped>
/* carousel effect */
div {
transition: all 2s ease;
}
.fade-move {
transform: translateX(100%);
transition: transform 3s ease-in-out;
}
</style>

Why chartjs is not drawing in interior of a div?

I have a problem with ChartJs, because I try to put in interior of a div with class="col-6", it's only working if that class="row" and don't understand why.
pie-chart.components.ts:
ngOnInit() {
this.labels = ["ONE", "TWO", "THREE"];
this.chartInit();
}
chartInit() {
let chartElement = this.elementRef.nativeElement.querySelector("#myChart");
chartElement.width = 750;
chartElement.height = 750;
this.pieChart = new Chart(chartElement, {
type: "outlabeledPie",
data: {
labels: this.labels,
datasets: [
{
backgroundColor: [
"#FF3784",
"#36A2EB",
"#4BC0C0",
"#F77825",
"#9966FF",
"#00A8C6",
"#379F7A",
"#CC2738",
"#8B628A",
"#8FBE00"
],
data: [1, 2, 3]
}
]
},
options: {
plugins: {
legend: false,
outlabels: {
text: "%l %p",
color: "white",
stretch: 20,
font: {
resizable: true,
minSize: 12,
maxSize: 25
}
}
},
responsive: true
}
});
}
pie-chart.components.html:
<canvas id="myChart" height="750" width="750"></canvas>
home.components.html:
<div class="row">
<div class="col-6 text-center">
Available books
<app-pie-chart></app-pie-chart>
</div>
<div class="col-6 text-center">
Lended books
<app-pie-chart></app-pie-chart>
</div>
</div>
The code that is working (but I don't want this version):
<div class="row">
<div class="row text-center">
Available books
<app-pie-chart></app-pie-chart>
</div>
<div class="row text-center">
Lended books
<app-pie-chart></app-pie-chart>
</div>
</div>
So how can I display that two pie charts in interior of that two divs? And the second question is: why is only working in a div with class="row", and in a div without class or with other class it doesn't display anything?
Thank you!

Tried to apply css to a component conditionally using prop but its not working

.storyMobile{
color:green;
}
.storyWeb{
color:red;
}
<div class="storyMobile">
hii
</div>
<div class="storyWeb">
hii
</div>
//main view
<div>
<story :story="stories[0]"/>
</div>
//here it prints stories in red colour but I want it to be displayed in green colour - how can I do this?
This is my component where I have 2 divs with 2 different classes one will be active for mobile and one will be active for web.
<div class="storyMobile">
//code
</div>
<div class="storyWeb">
//code
</div>
//this is my main view where I am importing this component
<div class="body-frame">
<Header></Header>
<section class="content-section-bar" v-if="stories && stories.length">
<div>
<story :story="stories[0]"/>
</div>
</section>
</div>
By default the story component is in web so "storyweb" class is getting applied to it but I want the "storyweb" class to get applied on it.
How should I do it in vue.js I tried using the props but didn't get the desired output.
Is it what you want?
your component:
<div :class="className"></div>
script:
export default {
props: {
className: {
default: 'storyWeb'
}
}
}
usage:
<story :story="stories[0]"/>
<story :story="stories[0]" class-name="storyMobile"/>
Vue.component('story',{
template: `<div :class="className">test</div>`,
props: {
className: {
type: String,
default: 'storyWeb'
},
story: {
type: Object,
required: true
}
}
})
var app = new Vue({
el: '#app',
data () {
return {
stories: [
{content: 'sotry1 content'},
{content: 'story2 content'}
]
}
}
})
.storyMobile{
color:green;
}
.storyWeb{
color:red;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<story :story="stories[0]" class-name="storyMobile"></story>
<story :story="stories[1]"></story>
</div>