How to do dynamic pseudo class width calculation inside methods? - vue.js

I want to build a stepper component (trying to avoid using packages as less as possible). I have created it using plain HTML template and CSS and I want to size the ::before element according to the x number.
Something like this width: ${100% / 4}. I tried this method using methods and got a rendering error. Is it possible to do this? Or there is another way to achieve this?
Please have a look at my script:
<template>
<div class="c-stepper">
<div class="step-item" :style="drawLinePrecision(4)" v-for="item in 4" :key="item">
<div class="step-marker">
<i class="icon icon-duotones-check"></i>
</div>
<div class="step-info">
<p class="step-title">Step 1</p>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
drawLinePrecision(length) {
return `.step-item:not(:last-child)::before {
content: "";
height: 3px;
width: ${(100% / length)};
position: absolute;
top: 25%;
background-color: $primary;
}`
}
}
}
</script>
<style lang="scss" scoped>
#import "../../sass/variables";
.c-stepper {
display: flex;
justify-content: space-around;
align-items: center;
margin: 5rem 0rem;
position: relative;
.step-item {
&:not(:last-child)::before {
content: "";
height: 3px;
width: calc(100% / 4);
position: absolute;
top: 25%;
background-color: $primary;
}
.step-marker {
position: relative;
width: 50px;
height: 50px;
background-color: white;
border: 3px solid $primary;
border-radius: 50%;
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
}
</style>

I just found a solution after some workaround. Instead of doing it like that, I had to make the width of the .step-item to be fixed by 100% except the last child and move the position: relative; from the parent down to the step-item itself.
Now, All I need is to set the padding from the parent component which display the c-stepper component.
Here is my script:
<template>
<div class="c-stepper">
<div class="step-item" v-for="item in 11" :key="item">
<div class="step-marker">
<i class="icon icon-duotones-check"></i>
</div>
<div class="step-info">
<p class="step-title">Step 1</p>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
#import "../../sass/variables";
.c-stepper {
display: flex;
justify-content: space-around;
align-items: center;
margin: 5rem 0rem;
.step-item {
margin: 0px auto;
position: relative; // step item must be relative
&:not(:last-child) {
width: 100%; // make it fixed
}
&:not(:last-child)::before {
content: "";
height: 3px;
width: 100%; // make it 100% width so that it won't let any gap to be rendered in the ui
position: absolute;
top: 25%;
background-color: $primary;
}
.step-marker {
position: relative;
width: 50px;
height: 50px;
background-color: white;
border: 3px solid $primary;
border-radius: 50%;
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
}
</style>

Related

How to show vue component on only certain routes

I want to show my Navbar in every page except the login and register page of my Vue app. How can I do that?
App.vue code:
<template>
<div id="app">
<NavBar v-if="this.$route!= '/' || this.$route!='/register' " />
<main class="form-signin">
<router-view/>
</main>
</div>
</template>
<script>
import NavBar from './components/NavBar.vue'
export default {
components: {NavBar}
}
</script>
<style>
nav{
}
#app{
width: 100%;
height: 100%;
}
html,
body {
height: 100%;
min-height: 75rem;
}
body {
justify-content: center;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
body,html{
padding: 0;
margin: 0;
min-height: 100vh;
width: 100%;
}
html{
background-color: white;
}
</style>
I tried using this.$route and v-if , but it wasn't working. The end result still looked like this:
Register page:
Login page:
I just need to exclude the navbar from both of these pages. How can I do that?

Safari linear gradient

I have a trouble using linear-gradient in Safari 15.2.
I wanna to create a block with fade effect at the end if children do not fit.
I have created an example: https://codepen.io/serejich/pen/xxXLvEG.
Code:
<div class="gradient-container">
<div class="elements">
<p>Element 1</p>
<p>Element 2</p>
<p>Element 3</p>
</div>
<div class="gradient"></div>
</div>
* {
margin: 0;
}
.gradient-container {
background-color: coral;
width: 200px;
height: 30px;
position: relative;
display: flex;
align-items: center;
}
.elements {
padding: 0 10px;
display: flex;
column-gap: 10px;
overflow-x: hidden;
}
.elements p {
color: #fff;
white-space: nowrap;
}
.gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) calc(100% - 50px), coral);
}
If you will open this in Safari, there would be something like a white area at the right of block.
What causes this and are there any ways to fix it?
This is a bug in safari that has to do with the way browsers interpolate between gradients.
A common answer is to do what you did, using rgba(255, 255, 255, 0), however, Safari still interprets this as white and leads to that unwanted additional of white to the gradient. A fix is to use the same color you are transitioning from (coral in this case) and set it to transparent, which for coral would be rgba(255, 127, 80, 0). The example below uses the code from your pen with the fix applied for safari.
See this stack for more
* {
margin: 0;
}
.gradient-container {
background-color: coral;
width: 200px;
height: 30px;
position: relative;
display: flex;
align-items: center;
}
.elements {
padding: 0 10px;
display: flex;
column-gap: 10px;
overflow-x: hidden;
}
.elements p {
color: #fff;
white-space: nowrap;
}
.gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*RGBA equivalent to coral html color with alpha set to 0 - fixes safari interpolation bug*/
background: linear-gradient(to right, rgba(255, 127, 80, 0) calc(100% - 50px), coral);
}
<div class="gradient-container">
<div class="elements">
<p>Element 1</p>
<p>Element 2</p>
<p>Element 3</p>
</div>
<div class="gradient"></div>
</div>

how to add a shape divider in vuetify.js

I am using vuetify and I'm trying to add a shape divider like what I've shown in the picture, but I'm unable to do it.
You need to do that with HTML and CSS.
There is some ways.
It would be done with a background image
Another way is a svg file and css
Do it with css transform
You can check this codepen
header {
position: relative;
height: 300px;
background-image: linear-gradient(#ff9d2f, #ff6126);
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: center;
}
header h1 {
color: white;
}
.divider {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100px;
/* drop the height to have a constant angle for all screen widths */
}
<header>
<h1>Header Content</h1>
<img src="https://assets.codepen.io/t-517/divider-triangle.png" class="divider" />
</header>
<section>
<h1>Section Content</h1>
</section>
to get Idea how to make it as 2nd way .
and this one codepen for make it with css transform(third way).
header {
position: relative;
height: 300px;
overflow: hidden;
}
.header__bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(#ff9d2f, #ff6126);
transform: skewY(-6deg);
transform-origin: top left;
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: center;
}
header h1 {
position: relative;
color: white;
}
<header>
<div class="header__bg"></div>
<h1>Header Content</h1>
</header>
<section>
<h1>Section Content</h1>
</section>

Overlay on hover in vue.js

Im trying to implement displaying text when hovering over an image in vue.js but I am a bit stuck. Im trying to implement this example on an array with multiple images:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
I got a pretty big vue file but here is the essential:
template:
</template>
[...]
<div v-for="item in filteredPeople" v-bind:key="item.id" class="list-complete-item">
<router-link #mouseover.native="hovertext" :to="'/'+item.link">
<img class="list-complete-img" :src="'http://placehold.it/400x300?text='+item.id" alt>
</router-link>
</div>
[...]
</template>
script
<script>
export default {
data() {
return {
info: [
{
id: 1,
title: "Title one",
link: "project1",
hovertext: "project1 hover text lorem lorem lorem",
category_data: {
"1": "Category 1"
}
},
[...]
methods: {
hovertext() {
console.log("");
},
I had some idea to try to use a method to put the text in a div under the image but then I cannot get the text to get above the image on hover. And I cannot get the method right ... Not really sure this is a good way doing it,
I also found this codepen example:
https://codepen.io/oliviaisarobot/pen/xzPGvY
This is pretty close to what I want to do but I cannot get the text to display here either.
I am a bit lost. Any help how to do this in vue?
---------- UPDATE ----------
I want the image boxes to stretch so they always fits the window but I seems to get a gap between my flexbox rows which I cannot seem to get rid of. You can see the white space. I attach my stylesheet.
.list-complete {
display: flex;
height: auto;
flex-direction: row;
flex-flow: row wrap;
}
.list-complete-item {
flex: 0 1 50%;
display: inline-block;
}
.list-complete-item a {
display: inline-block;
position: relative;
width: 100%;
height: auto;
outline: 1px solid #fff;
}
.list-complete-img {
width: 100%;
}
.text {
color: rgb(186, 74, 74);
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.list-complete-item a:hover .overlay {
opacity: 1;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
height: 60%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #008cba;
}
You don't need to use js(vue) events. Do it with plain css, like in example you linked to.
Go with this template:
<div v-for="item in filteredPeople" v-bind:key="item.id" class="list-complete-item">
<router-link :to="'/'+item.link">
<img class="list-complete-img" :src="'http://placehold.it/400x300?text='+item.id" alt>
<div class="overlay">
<div class="text">{{ item.hovertext }}</div>
</div>
</router-link>
</div>
And style it up:
.list-complete-item {
width: 400px;
height: 300px;
display: inline-block;
}
.list-complete-item a {
display: inline-block;
position: relative;
width: 400px;
height: 300px;
}
.list-complete-item a .image {
display: block;
width: 100%;
height: auto;
}
.list-complete-item a .overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.list-complete-item a:hover .overlay {
opacity: 1;
}
.list-complete-item a .text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
And the final result:

How to disable v-tooltip when user click outside

I use v-tooltip to show tooltip on every cell of table
<td v-tooltip="{content: 'some content', trigger: 'click'}"></td>
But I want when user click another cell, current tooltip will disapear, I have tried "autoHide" property, but it not working.
Thanks
v-tooltip repository:
https://github.com/Akryum/v-tooltip
It's a late answer but maybe it can help someone else:
you can add the tooltip component as a ref and call the hide method:
this.$refs.popover.hide()
I think you will have to use the more customizable v-popover component. The v-tooltip directive doesn't seem to handle manual triggering, and you need manual triggering.
console.clear();
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
selectedCell: null
}
})
body {
font-family: sans-serif;
margin: 42px;
}
.tooltip {
display: block !important;
z-index: 10000;
}
.tooltip .tooltip-inner {
background: black;
color: white;
border-radius: 16px;
padding: 5px 10px 4px;
}
.tooltip .tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: black;
}
.tooltip[x-placement^="top"] {
margin-bottom: 5px;
}
.tooltip[x-placement^="top"] .tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="bottom"] {
margin-top: 5px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="right"] {
margin-left: 5px;
}
.tooltip[x-placement^="right"] .tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[x-placement^="left"] {
margin-right: 5px;
}
.tooltip[x-placement^="left"] .tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
}
.tooltip[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
}
<script src="//unpkg.com/popper.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/v-tooltip"></script>
<div id="app">
<table border="1">
<tr v-for="i in 3">
<td #click="selectedCell = i">
<p><span>This is cell {{ i }}</span></p>
<v-popover trigger="manual" :open="selectedCell === i">
<template slot="popover">
<p>
{{ message }}
</p>
</template>
</v-popover>
</td>
</tr>
</table>
</div>