White line in div hides text (custom component)

White line in div hides text (custom component) - javascript

I am currently working in ReactJS together with some SCSS / CSS stylings.
However, I made a component, that lists number codecs on hover.
In normal state it's a div, that indicates a small or big damage size.
When you hover on it, it opens the listed mentioned above.
For some reason, I always have this white line, ditching my number coded so I can't be read. What did I miss? My code is below.
Livedemo: https://stackblitz.com/edit/react-ts-cun89d?file=App.js
DAMAGE_SIZE_STATUSES = {
GREEN: 'green',
YELLOW: 'yellow',
RED: 'red',
};
'index.js'
...
const criticality =
// eslint-disable-next-line no-nested-ternary
critical && criticalConditions.some((condition) => condition.fulfilled)
? DAMAGE_SIZE_STATUSES.RED
: critical
? DAMAGE_SIZE_STATUSES.YELLOW
: DAMAGE_SIZE_STATUSES.GREEN;
const criticalityTextKey = getIndicatorStatusTextKey(criticality);
const criticalityIcon = getIndicatorStatusIcon(criticality);
return
<div className={classNames('DamageSizeIndicator', criticality)}>
<div className="content">
<div className="title">
<div className="criticality">
{criticalityIcon && <Icon type={criticalityIcon} theme="filled" />}
{t(criticalityTextKey)}
</div>
<div className="condition" />
</div>
{critical ? (
<ul className="critical-icds">
{criticalConditions.map((icd) => (
<li
key={`critical-icd_${icd.code}`}
className={classNames({
'icd-fulfilled': icd.fulfilled,
'icd-unfulfilled': !icd.fulfilled,
})}
>
<div className="icd-description">
<span>ICD {icd.code}</span>
<Tooltip title={icd.description}>{icd.description}</Tooltip>
</div>
<div className="icd-condition">
<span>
<Icon
type={
icd.fulfilled ? 'check-circle' : 'exclamation-circle'
}
/>
{t(getConditionFulfilledTextKey(icd.fulfilled))}
</span>
{icd.condition}
</div>
</li>
))}
</ul>
) : null}
styling.scss
#import 'src/app/variables.scss';
.DamageSizeIndicator {
display: flex;
flex-direction: column;
height: 72px;
justify-content: flex-start;
font-family: Arial, Helvetica, sans-serif;
font-weight: 450;
white-space: nowrap;
margin-left: 25px;
position: relative;
z-index: 2;
.content {
display: flex;
flex-direction: column;
box-shadow: $overlay-shadow;
border-radius: $overlay-radius;
position: absolute;
.title,
.critical-icds {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex: 1;
border-radius: $overlay-radius;
padding: 10px;
transition: 0.2s linear all;
i {
margin-right: 0.5em;
}
}
.title {
background: $colorSubtleWhite;
font-size: $titleFontSize;
.condition {
display: none;
white-space: nowrap;
padding-left: 0.5em;
}
}
.critical-icds {
background: $colorSubtleGray;
font-size: $subTitleFontSize;
display: none;
list-style: none;
margin: 0;
flex-direction: column;
li {
width: 100%;
margin: 0;
display: flex;
flex-direction: column;
span {
color: $colorGray;
white-space: nowrap;
padding-right: 0.5em;
}
.icd-description,
.icd-condition {
color: $colorLightBlack;
position: relative;
max-width: 350px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&.icd-unfulfilled {
.icd-condition span {
color: $colorIndicatorYellow;
}
}
&.icd-fulfilled {
.icd-condition span {
color: $colorIndicatorGreen;
}
}
}
}
}
&:hover {
/* cursor: pointer; */
.content {
.title {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
.condition {
display: block;
}
}
.critical-icds {
border-top-left-radius: 0;
border-top-right-radius: 0;
display: flex;
line-height: inherit;
li:not(:last-child) {
margin-bottom: 1rem;
}
}
}
}
&.green {
.content {
box-shadow: none;
.title .criticality {
color: $colorIndicatorGray;
}
}
pointer-events: none;
}
&.yellow {
.content .title .criticality {
color: $colorIndicatorYellow;
}
}
&.red {
.content .title .criticality {
color: $colorIndicatorRed;
}
}
}

Related

Why does pressing the button only work 2 times? when the screen is narrowed to less than 768px

why does pressing the button only work 2 times? when the screen is narrowed to less than 768px
I need to make it infinite
CODEPEN - https://codepen.io/dxxxxxxfly/pen/LYmgwGo
let overleft = 0;
const burger = document.querySelector('.burger');
const overlay = document.querySelector('.overlay');
const nav = document.querySelector('.main_nav > ul').cloneNode(1);
burger.addEventListener('click', function(e) {
e.preventDefault();
if (overlay.style.left < 500) {
overlay.style.left = overleft + 'px';
render();
} else {
overlay.style.left = -500 + 'px';
}
function render() {
overlay.appendChild(nav);
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
p {
font-family: 'Inter';
}
.content {
width: 100vw;
margin: 0 auto;
}
.learn_more {
background-color: #111131;
}
.learn_more>p {
text-align: center;
color: #ABABFA;
padding: 8px 0px;
font-size: 0.8125em;
}
nav {
justify-content: space-between;
display: flex;
}
.nav {
padding: 22px 36px;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
}
.main_nav {
display: flex;
}
ul {
flex-wrap: wrap;
padding-left: 36px;
display: flex;
align-items: center;
}
li {
list-style-type: none;
}
ul>li {
padding-left: 24px;
}
ul>li>a {
font-family: 'Inter';
font-weight: 400;
text-decoration: none;
font-size: 0.875em;
color: #413E52;
}
.other_nav {
display: flex;
}
.burger {
cursor: pointer;
width: 50px;
height: 50px;
background: #5b64fb;
display: none;
border-radius: 50px;
}
.overlay {
height: 50vh;
width: 50vw;
background: #a1a1cb;
display: none;
left: -500px;
position: relative;
transition: 0.9s;
}
#media (max-width: 768px) {
.other_nav,
.main_nav>ul {
display: none;
}
.burger {
display: block;
}
.overlay {
display: flex;
/*left: 0px;*/
transition: 0.9s;
}
.main_nav {
display: none;
}
.nav {
padding-left: 0px;
}
}
<header class="header">
<div class="content">
<div class="learn_more">
<p>Слушайте музыку в высоком качестве и без рекламы</p>
</div>
<nav class="nav">
<div class="main_nav">
<div class="logo"><img src="assets/img/logosvg.svg" alt="Logo"></div>
<ul>
<li>Главная</li>
<li>Дискография</li>
<li>Альбомы</li>
</ul>
</div>
<div class="other_nav">
<div class="searth">
<img src="assets/img/search.svg" alt="">
<button class="subscribe">Поиск</button>
</div>
</div>
<div class="overlay"></div>
<div class="burger">
</div>
</nav>
</div>
</header>

You are using overlay.style.left that return a string, at first there is no style for left so it will return null. but next times it has value that its make the if always false. So you better to use overlay.offsetLeft instead of overlay.style.left for the if.
The code:
if (overlay.offsetLeft < 0) {
overlay.style.left = overleft + 'px';
render();
} else {
overlay.style.left = -500 + 'px';
}

It works only two times because overlay.style.left returns string like that -500px and it's not < 500. You have to cut out px and convert it to number. It also doesn't work on first click because overlay.style.left for first time returns empty string (use getComputedStyle). Change burger function onclick to it.
burger.addEventListener('click', function(e) {
const cssObj = window.getComputedStyle(overlay, null);
let left = cssObj.getPropertyValue("left");
left = Number(left.slice(0,-2));
if (left !== 0) {
overlay.style.left = "0px";
render();
} else {
overlay.style.left = "-500px";
}
function render() {
overlay.appendChild(nav);
}
});
let overleft = 0;
const burger = document.querySelector('.burger');
const overlay = document.querySelector('.overlay');
const nav = document.querySelector('.main_nav > ul').cloneNode(1);
burger.addEventListener('click', function(e) {
const cssObj = window.getComputedStyle(overlay, null);
let left = cssObj.getPropertyValue("left");
left = Number(left.slice(0,-2));
if (left !== 0) {
overlay.style.left = "0px";
render();
} else {
overlay.style.left = "-500px";
}
function render() {
overlay.appendChild(nav);
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
p {
font-family: 'Inter';
}
.content {
width: 100vw;
margin: 0 auto;
}
.learn_more {
background-color: #111131;
}
.learn_more > p {
text-align: center;
color: #ABABFA;
padding: 8px 0px;
font-size: 0.8125em;
}
nav {
justify-content: space-between;
display: flex;
}
.nav {
padding: 22px 36px;
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
}
.main_nav {
display: flex;
}
ul {
flex-wrap: wrap;
padding-left: 36px;
display: flex;
align-items: center;
}
li {
list-style-type: none;
}
ul > li {
padding-left: 24px;
}
ul>li>a {
font-family: 'Inter';
font-weight: 400;
text-decoration: none;
font-size: 0.875em;
color: #413E52;
}
.other_nav {
display: flex;
}
.burger {
cursor: pointer;
width: 50px;
height: 50px;
background: #5b64fb;
display: none;
border-radius: 50px;
}
.overlay {
height: 50vh;
width: 50vw;
background: #a1a1cb;
display: none;
left: -500px;
position: relative;
transition: 0.9s;
}
#media (max-width: 768px) {
.other_nav, .main_nav > ul {
display: none;
}
.burger {
display: block;
}
.overlay {
display: flex;
/*left: 0px;*/
transition: 0.9s;
}
.main_nav {
display: none;
}
.nav {
padding-left: 0px;
}
}
<header class="header">
<div class="content">
<div class="learn_more">
<p>Слушайте музыку в высоком качестве и без рекламы</p>
</div>
<nav class="nav">
<div class="main_nav">
<div class="logo"><img src="assets/img/logosvg.svg" alt="Logo"></div>
<ul>
<li>Главная</li>
<li>Дискография</li>
<li>Альбомы</li>
</ul>
</div>
<div class="other_nav">
<div class="searth">
<img src="assets/img/search.svg" alt="">
<button class="subscribe">Поиск</button>
</div>
</div>
<div class="overlay"></div>
<div class="burger">
</div>
</nav>
</div>
</header>

How to make content editable?

I have a todo list and I want to have editable task so I gave contenteditable = "true" attribute to p tag which contains the task content but when I left click on it, it does not work but when I right click it works! I gave this attribute to heading and it works just fine but its not working on tasks( p tag).
so my question is how can I make tasks editable when I click on them?(not by right click I want left click)
here is my code, please first make a task buy clicking on + button
const taskInput = $(".main__input");
const taskRow = $(".task-row");
const task = $("li");
let id = 0;
// adding task
const addTask = function() {
const markup = `
<li data-id=${id}>
<div class="main">
<div class="task__checkbox">
<input type="checkbox" class="checkbox">
</div>
<p class="task" contenteditable="true">${taskInput.val()}</p>
</div>
<div class="btn-task btn-delete icon" data-id=${id}>
<i class="fa-sharp fa-solid fa-trash"></i>
</div>
</li>
`;
taskRow.append(markup);
id++;
taskInput.val("");
};
$(".btn-plus").on("click", function() {
if (taskInput.val() !== "") addTask();
});
// remove element first solution
taskRow.on("click", ".btn-delete", function(e) {
$(this).parent().remove();
});
taskRow.on("change", ".task__checkbox", function() {
$(this).siblings(".task").toggleClass("checked");
});
$(window).on("keypress", function(e) {
if (e.which === 13 && taskInput.val() !== "") addTask();
});
taskRow.sortable();
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
list-style: none;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.todo {
width: 40rem;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 0 10px rgb(122, 122, 122);
}
h1 {
background-color: rgb(46, 89, 89);
font-size: 3rem;
font-weight: bold;
color: #fff;
padding: 2rem 1rem;
text-align: center;
}
.row {
display: flex;
}
.main__input {
padding: 1.4rem;
border: none;
/* border-bottom: 1px solid rgb(116, 116, 116);
border-left: 1px solid rgb(116, 116, 116); */
width: 100%;
}
.main__input:focus {
outline: none;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(37, 115, 115);
color: #fff;
width: 20%;
font-size: 2rem;
transition: all 0.3s;
}
.icon:hover {
cursor: pointer;
background-color: rgb(52, 81, 81);
}
.icon:active {
background-color: rgb(37, 115, 115);
}
.task-row {
display: flex;
}
.task-block {
width: 80%;
display: flex;
}
.task__checkbox {
width: 10%;
}
.main {
display: flex;
width: 80%;
}
.task__checkbox {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(37, 115, 115);
padding: 1rem;
}
.checkbox {
width: 1.8rem;
height: 1.8rem;
}
.task {
font-size: 1.8rem;
font-weight: bold;
padding: 1.4rem 1rem;
border: 0.01px solid #999;
width: 100%;
}
.task-row {
flex-direction: column;
}
li {
width: 100%;
display: flex;
}
.checked {
text-decoration: line-through;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<div class="todo">
<h1 class="heading" contenteditable="true">To-do list</h1>
<div class="todo-body">
<div class="row add-block">
<div class="main">
<input type="text" class="main__input" placeholder="A task you want to compelete">
</div>
<div class="btn-plus icon">
<i class="fa-solid fa-plus"></i>
</div>
</div>
<ul class="row task-row"></ul>
</div>
</div>

As #cbroe and I have mentioned in the comments, the behavior is caused by jQuery UI Sortable Plugin.
The fix is fairly easy, we'll simply use the cancel option of the sortable method to prevent sorting if you start on elements matching the selector. Source: Sortable Widget - jQuery UI
We will pass the p[conteneditable] selector (or any other selector you see fit) to prevent dragging from the p tag that contains the todo text.
Here's a live demo:
const taskInput = $(".main__input");
const taskRow = $(".task-row");
const task = $("li");
let id = 0;
// adding task
const addTask = function() {
const markup = `
<li data-id=${id}>
<div class="main">
<div class="task__checkbox">
<input type="checkbox" class="checkbox">
</div>
<p class="task" contenteditable="true">${taskInput.val()}</p>
</div>
<div class="btn-task btn-delete icon" data-id=${id}>
<i class="fa-sharp fa-solid fa-trash"></i>
</div>
</li>
`;
taskRow.append(markup);
id++;
taskInput.val("");
};
$(".btn-plus").on("click", function() {
if (taskInput.val() !== "") addTask();
});
// remove element first solution
taskRow.on("click", ".btn-delete", function(e) {
$(this).parent().remove();
});
taskRow.on("change", ".task__checkbox", function() {
$(this).siblings(".task").toggleClass("checked");
});
$(window).on("keypress", function(e) {
if (e.which === 13 && taskInput.val() !== "") addTask();
});
/** drag & drop is disabled on p tags having content attribute set. You still able to move the item around by dragging from elsewhere (from the delete button for example) */
taskRow.sortable({
cancel: 'p[contenteditable=true]'
});
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
list-style: none;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.todo {
width: 40rem;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 0 10px rgb(122, 122, 122);
}
h1 {
background-color: rgb(46, 89, 89);
font-size: 3rem;
font-weight: bold;
color: #fff;
padding: 2rem 1rem;
text-align: center;
}
.row {
display: flex;
}
.main__input {
padding: 1.4rem;
border: none;
/* border-bottom: 1px solid rgb(116, 116, 116);
border-left: 1px solid rgb(116, 116, 116); */
width: 100%;
}
.main__input:focus {
outline: none;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(37, 115, 115);
color: #fff;
width: 20%;
font-size: 2rem;
transition: all 0.3s;
}
.icon:hover {
cursor: pointer;
background-color: rgb(52, 81, 81);
}
.icon:active {
background-color: rgb(37, 115, 115);
}
.task-row {
display: flex;
}
.task-block {
width: 80%;
display: flex;
}
.task__checkbox {
width: 10%;
}
.main {
display: flex;
width: 80%;
}
.task__checkbox {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(37, 115, 115);
padding: 1rem;
}
.checkbox {
width: 1.8rem;
height: 1.8rem;
}
.task {
font-size: 1.8rem;
font-weight: bold;
padding: 1.4rem 1rem;
border: 0.01px solid #999;
width: 100%;
}
.task-row {
flex-direction: column;
}
li {
width: 100%;
display: flex;
}
.checked {
text-decoration: line-through;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<div class="todo">
<h1 class="heading" contenteditable="true">To-do list</h1>
<div class="todo-body">
<div class="row add-block">
<div class="main">
<input type="text" class="main__input" placeholder="A task you want to compelete">
</div>
<div class="btn-plus icon">
<i class="fa-solid fa-plus"></i>
</div>
</div>
<ul class="row task-row"></ul>
</div>
</div>
I also recommend looking at portlets as they provide a better way (in my opinion) to introduce drag & drop into your elements.

visibility style does not change second time click in javascript and css

I'm trying to create a responsive navbar.
When screen size is reduced I'm using media query to style visibility of #nav-items to hidden and display a menu icon.
I have written a javascript code to handle on click on menu icon style #nav-itmes to visible and hidden (trying to toggle by if condition to check style value)
Problem: on first click result is ok. #nav-items are visible but again when i click #nav-items style does not change to hidden (while i can console click event is there on every click)
Can anyone guide me ?
There are several approach to have this result to toggle an element but I want to only know what is issue in below code. (only javascript please).
let nav_icon = document.getElementById("nav-icon");
nav_icon.addEventListener("click", () => {
console.log('clicked');
let nav_items = document.getElementById("nav-items");
nav_items.style.visibility = nav_items.style.visibility = "hidden" ? "visible" : "hidden";
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
a,
ul,
h3 {
text-decoration: none;
color: white;
list-style-type: none;
font-weight: bold;
}
body {
background-image: url("/img/bg.jpg");
}
img {
display: none;
height: 30px;
width: 30px;
margin-right: 10px;
position: fixed;
top: .4em;
right: .2em;
}
.navbar {
display: flex;
height: 40px;
width: 100%;
align-items: center;
justify-content: space-between;
background-color: #ABA9A966;
gap: 10px;
}
nav a,
header h3 {
margin: 0px 10px 0px 10px;
}
nav a:hover {
background-color: grey;
}
#media screen and (max-width: 800px) {
nav a,
header h3 {
margin: 0px 5px 0px 5px;
font-size: 15px;
}
}
#media screen and (max-width: 600px) {
.navbar {
flex-flow: column;
}
header {
display: none;
}
nav {
width: auto;
text-align: center;
background-color: #ABA9A966;
position: fixed;
visibility: hidden;
top: 2.5em;
right: 0;
}
nav a {
margin: 0;
height: 22px;
padding-top: 3px;
display: block;
width: 8rem;
font-size: 14px;
}
img {
display: block;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="navbar">
<header>
<h3>Hello Guest</h3>
</header>
<nav id="nav-items">
Home
Dispatch
Account
Report
Control
</nav>
</div>
<img src="/img/menu.png" id="nav-icon">

Often you cannot see the style of an element in JS if the style was applied in a stylesheet
You can toggle a class instead
For example
nav { visibility: hidden; }
nav.show { visibility: visible; }
and js
const nav_icon = document.getElementById("nav-icon");
const nav_items = document.getElementById("nav-items");
nav_icon.addEventListener("click", () => {
console.log('clicked');
nav_items.classList.toggle("show")
});
const nav_icon = document.getElementById("nav-icon");
const nav_items = document.getElementById("nav-items");
nav_icon.addEventListener("click", () => {
console.log('clicked');
nav_items.classList.toggle("show")
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
a,
ul,
h3 {
text-decoration: none;
color: white;
list-style-type: none;
font-weight: bold;
}
body {
background-image: url("/img/bg.jpg");
}
img {
height: 30px;
width: 30px;
margin-right: 10px;
position: fixed;
top: .4em;
right: .2em;
}
.navbar {
display: flex;
height: 40px;
width: 100%;
align-items: center;
justify-content: space-between;
background-color: #ABA9A966;
gap: 10px;
}
nav { visibility: hidden; }
nav a,
header h3 {
margin: 0px 10px 0px 10px;
}
nav a:hover {
background-color: grey;
}
#media screen and (max-width: 800px) {
nav a,
header h3 {
margin: 0px 5px 0px 5px;
font-size: 15px;
}
}
#media screen and (max-width: 600px) {
.navbar {
flex-flow: column;
}
header {
display: none;
}
nav {
width: auto;
text-align: center;
background-color: #ABA9A966;
position: fixed;
visibility: hidden;
top: 2.5em;
right: 0;
}
nav a {
margin: 0;
height: 22px;
padding-top: 3px;
display: block;
width: 8rem;
font-size: 14px;
}
img {
display: block;
}
}
nav.show {
visibility: visible;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="navbar">
<header>
<h3>Hello Guest</h3>
</header>
<nav id="nav-items">
Home
Dispatch
Account
Report
Control
</nav>
</div>
<img src="/img/menu.png" id="nav-icon" title="ICON" alt="ICON">

Think this line is incorrect:
nav_items.style.visibility = nav_items.style.visibility = "hidden" ? "visible" : "hidden";
The equality check should be:
nav_items.style.visibility === "hidden"
so this may work:
nav_items.style.visibility = (nav_items.style.visibility === "hidden" ? "visible" : "hidden");

Try the css property for media-query: display:none !important;

How to make hover effect work for an icon in a css grid?

I'm new to coding and was trying to make a component to preview/display a project I've been working on. I'm trying to make my links like the GitHubIcon and LaunchIcon have a :hover effect but it's not working when I try something like .linkItems:hover{background-color: red} or even when I try something completely different like .title:hover{background-color: red}. When I use the chrome dev tool, the hover doesn't work either unless I force it and when I don't force it, it just automatically grays out. It works when it's not in a css grid.
Component
<li className={`${styles.gridContainer} ${props.className}`}>
<div className={styles.imageWrapper}>
<Image className={styles.image} src={props.imgSrc} alt="alt-picture" />
</div>
<div className={styles.projectContent}>
<div className={styles.title}>
<h2>{props.heading}</h2>
<h1>{props.titleProject}</h1>
</div>
<div className={styles.projectDescription}>
<SecondaryCard className={styles.descriptionCard}>
{props.description}
</SecondaryCard>
</div>
<ul className={styles.techStack}>
{props.techStack.map((el) => {
return (
<li className={styles.techs} key={uuidv4()}>
{el}
</li>
);
})}
</ul>
<div className={styles.links}>
<Link href={props.githubUrl}>
<GitHubIcon className={styles.linkItems} />
</Link>
<Link href={props.deployUrl}>
<LaunchIcon className={styles.linkItems} />
</Link>
</div>
</div>
</li>
CSS
.gridContainer {
display: grid;
grid-template-columns: repeat(16, 1fr);
list-style: none;
}
.gridContainer > div {
position: relative;
}
.imageWrapper {
grid-area: 1/3/-1/13;
align-self: center;
z-index: -1;
}
.projectContent {
grid-area: 1/6/-1/15;
align-self: center;
text-align: right;
}
.title {
color: var(--second-bg-heading);
}
.projectDescription {
margin-top: 1rem;
}
.techStack {
margin-top: 2rem;
display: flex;
justify-content: flex-end;
color: var(--second-sub-headline);
}
.links {
margin-top: 2rem;
}
.linkItems {
margin-left: 5rem;
transform: scale(2);
color: var(--second-sub-headline);
margin-right: 1rem;
}
.techs {
list-style: none;
margin-left: 1rem;
}
#media (max-width: 1200px) {
.imageWrapper {
opacity: 0.9;
grid-column: 1/14;
}
.projectContent {
transform: scale(0.9);
grid-column: 7/17;
}
}
#media (max-width: 768px) {
.imageWrapper {
opacity: 0.25;
grid-column: 1/-1;
}
.image {
border-radius: 10px;
}
.projectContent {
grid-column: 1/-1;
font-size: 1.5rem;
text-align: left;
align-self: center;
}
.title {
padding: 0 3%;
margin-bottom: 5%;
}
.projectDescription {
margin: 3% 0;
border-radius: 0;
background-color: transparent;
padding: 0 3%;
}
.techStack {
justify-content: flex-start;
padding: 0 3%;
margin: 3% 0;
}
.techs {
margin-right: 5%;
margin-left: 0;
margin-top: 0;
}
.links {
padding: 0 10%;
margin: 6% 0 6% 0;
display: flex;
justify-content: space-around;
}
.linkItems {
margin-right: 0;
margin-left: 0;
transform: scale(2);
}
}
#media (max-width: 600px) {
.projectContent {
transform: scale(0.8);
}
}
#media (max-width: 480px) {
.projectContent {
font-size: 1rem;
}
}

I'm sorry if I wasted anyone's time. I figured it out and the z-index of my section was -2 so that's why the hover wasn't showing. I spent the whole day figuring this out.

The first slide in GlideJS is flashing

When changing slides in the slider with some periodicity, the first slide flashes when changing from the first to the last slide.
The bug only appears in Chrome. I noticed that if you minimize the browser window and then maximize, then the bug appears more often ( but this is not certain :) ).
The solution from https://github.com/glidejs/glide/issues/300 doesn't help!
I put together a small demo: https://codepen.io/depressingutopian/pen/jOwvpGQ?editors=1111
const initCarousel = () => {
const slides = document.querySelectorAll('.glide__slide');
if (slides.length) {
const sliderConfiguration = {
gap: 0,
type: 'carousel',
autoplay: '1000',
animationDuration: '500',
hoverpause: false,
keyboard: true,
animationTimingFunc: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
swipeThreshold: 0,
dragThreshold: false
};
const slider = new Glide('.map-banner', sliderConfiguration);
slider.mount();
}
}
initCarousel();
.section-default {
height: 100%;
width: 100%;
background-color: #f5f5f5;
padding: 0;
margin: 0;
font-family: 'FiraSans';
font-family: 'Fira Sans', sans-serif;
font-weight: 400;
min-width: 320px;
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: none;
}
.layout {
height: 100%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.layout__content {
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mb-p, .mb-sm {
margin-bottom: 1.5rem;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
margin-bottom: 0px;
}
.color-common {
color: #424242;
}
body, html {
font-family: 'FiraSans';
font-family: 'Fira Sans', sans-serif;
font-weight: 400;
-webkit-text-size-adjust: none;
}
html {
font-size: 16px;
}
ul {
list-style-type: none;
font-size: inherit;
color: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.map-banner {
margin: 1.5rem auto 0;
width: 79rem;
cursor: default;
}
.glide--swipeable {
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.glide {
position: relative;
box-sizing: border-box;
}
.map-banner .glide__slide_narrow {
padding: 0 1.5rem;
}
.map-banner .glide__arrow {
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
}
.map-banner .glide__arrow_prev {
left: -5px;
transform: translateY(-50%) rotate(90deg);
}
.map-banner .glide__arrow_next {
right: -5px;
transform: translateY(-50%) rotate(270deg);
}
.map-banner .glide__arrow-img {
width: 2rem;
height: 2rem;
}
.map-banner .map-banner__transfer {
img {
height: 12rem;
}
}
.slider {
img {
width: 100%;
}
}
.map-banner__main {
display: flex;
width: 100%;
height: 24rem;
background-repeat: no-repeat;
background-size: cover;
}
.glide__track {
margin-left: 12px;
margin-right: 12px;
}
.map-banner__main_0 {
background-image: url('https://i.imgur.com/gleemJV.png');
}
.map-banner__main_1 {
background-image: url('https://i.imgur.com/oF41CCc.png');
}
.map-banner__main_2 {
background-image: url('https://i.imgur.com/oEVQL4F.png');
}
// Flickering bug fix (Attempt)
.glide__slide--active {
z-index: 1;
}
<link rel="stylesheet" href="https://unpkg.com/#glidejs/glide#3.3.0/dist/css/glide.core.min.css">
<script src="https://cdn.jsdelivr.net/npm/#glidejs/glide" type="text/javascript"></script>
<div class="section-default platform_unknown">
<div class="layout layout_full_height color-common">
<div class="layout__content">
<section class="mb-sm mb-mob-none">
<div class="glide map-banner">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide slider">
<img class ="map-banner__main" src="https://i.imgur.com/gleemJV.png"/>
</li>
<li class="glide__slide slider">
<img class ="map-banner__main" src="https://i.imgur.com/oF41CCc.png"/>
</li>
<li class="glide__slide slider">
<img class ="map-banner__main" src="https://i.imgur.com/oEVQL4F.png"/>
</li>
</ul>
</div>
</div>
</section>
</div>
</div>
</div>
I would be grateful to everyone who can help fix this bug.

The solution is to add z-index:1 in the active slide.
.glide__slide--active{z-index: 1;}

We Keep Coding

JavaScript is the programming language of the Web.

White line in div hides text (custom component) - javascript

Related

Why does pressing the button only work 2 times? when the screen is narrowed to less than 768px

How to make content editable?

visibility style does not change second time click in javascript and css

How to make hover effect work for an icon in a css grid?

The first slide in GlideJS is flashing

Categories

Resources