I have the following code:
const [hover, setHover] = useState(false);
<Paper
onMouseOver={() => setHover(true)}
onMouseOut={() => setHover(false)}
style={{
width: '100%',
height: 445,
boxShadow: '0px 2px 5px ' + Colors.third + '66',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
backgroundImage: hover ? `url(${preview})` : ''
}}
className={hover ? 'image-paper' : ''}
>
some test text
</Paper>
and the following css:
.image-paper {
filter: blur(6px);
-webkit-filter: blur(6px);
}
above is the result:
and above is the goal:
the unblured element element cannot be a child of the blured element,
here a possible exemple of two stacked element with only one blured (those 2 img can be any other tag with content):
.Overlay {
display: grid;
justify-content: center;
}
img {
grid-row: 1;
grid-column: 1;
object-fit: scale-down;
filter: blur(0);
}
.blur {
filter: blur(5px) hue-rotate(160deg);
}
<div class="Overlay">
<img src="https://pngimg.com/uploads/mars_planet/mars_planet_PNG7.png" width="640" height="480" class="blur" />
<img src="https://pngimg.com/uploads/avatar/avatar_PNG29.png" width="640 " height="480 " />
</div>
Related
I have an editor and several buttons above it on the right. I would like to have a panel just under Button2 that overlays the editor. Then, clicking on Button2 will expand and collapse the panel (which will be easy to implement).
I have written the following code: https://codesandbox.io/s/fervent-mclaren-3mrtyj?file=/src/App.js. At the moment, the panel is NOT under Button2 and does NOT overlay the editor.
Does anyone know how to amend the CSS?
import React from "react";
import { Stack } from "#fluentui/react";
export default class App extends React.Component {
render() {
return (
<div>
<Stack horizontal horizontalAlign="space-between">
<div>Title</div>
<div>Button1 Button2 Button3</div>
</Stack>
<div
style={{
backgroundColor: "yellow",
width: "350px",
height: "50px"
}}
>
A floating panel which is supposed to be always under "Button2" and
overlays the editor.
</div>
<div
style={{
backgroundColor: "gray",
width: "100%",
height: "300px"
}}
>
An editor
</div>
</div>
);
}
}
You need to use position:absolute on floating pane and add it in the editor div which will have position:relative.You can see the result it works fine
On clicking button 2 the floating panel hides/shows alternatively
This will work.
var btn=document.querySelector('.drop_btn');
btn.onclick=function()
{
document.querySelector('.dropdown').classList.toggle('block');
}
*
{
font-family: 'arial';
margin: 0px;
padding: 0px;
}
.menu_pane
{
display: flex;
background: #151515;
color: white;
padding:5px 10px;
align-items: center;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.menu_pane h3
{
font-weight: normal;
font-size: 18px;
flex-grow: 1;
}
.menu_pane .btn button
{
position: relative;
background: #0971F1;
color: white;
border-radius: 5px;
border:none;
cursor: pointer;
padding: 8px 20px;
margin-right: 10px;
}
.dropdown
{
display: none;
height: 100%;
width: 100%;
top: 0;
left: 0;
color: white !important;
position: absolute;
background: #242424;
border-radius: 0 0 10px 10px;
}
.menu_pane .btn .dropdown p
{
font-size: 14px;
}
.editor_pane
{
position: relative;
background:#151515;
color: white;
min-height: 50vh;
border-radius: 0 0 10px 10px;
padding: 10px;
color: #512DA8;
}
.block
{
display: block;
}
<div class="container">
<div class="menu_pane">
<h3>Title</h3>
<div class="btn">
<button>Button-1</button>
</div>
<div class="btn">
<button class="drop_btn">Button-2</button>
</div>
<div class="btn">
<button>Button-3</button>
</div>
</div>
<div class="editor_pane">
<p>An editor</p>
<div class="dropdown">
<p>A floating panel which is supposed to be always under "Button2" and overlays the editor.</p>
</div>
</div>
</div>
How does this look?
https://codesandbox.io/s/hidden-platform-q3v4kc?file=/src/App.js
I moved the floating pane into the button, made the button position relative, and made the floating pane position absolute.
Note: notice there's no top property on the floating pane. One neat thing about position absolute is if you don't set top, left, bottom, right those positions will be where that box would be if it wasn't position absolute.
Update
I noticed that the overlay needed to cover the "editor" area only and have the example updated with hopefully the right placement of it.
Updated live example: codesandbox
import React from "react";
import { Stack } from "#fluentui/react";
export default class App extends React.Component {
state = { showOverlay: true };
handleToggle = () =>
this.setState((prev) => ({ showOverlay: !prev.showOverlay }));
render() {
return (
<div>
<Stack
horizontal
horizontalAlign="space-between"
style={{ padding: "12px" }}
>
<div>Title</div>
<Stack horizontal>
<button>Button1</button>
<button onClick={this.handleToggle}>
{`Button2 (${this.state.showOverlay ? "Hide" : "Show"} Overlay)`}
</button>
<button>Button3</button>
</Stack>
</Stack>
<div
style={{
backgroundColor: "gray",
width: "100%",
height: "300px",
position: "relative"
}}
>
An editor
<div
style={{
position: "absolute",
inset: "0",
backgroundColor: "rgba(0, 0, 0, 0.70)",
display: this.state.showOverlay ? "flex" : "none",
justifyContent: "center",
alignItems: "center",
color: "#fff"
}}
>
A floating panel which is supposed to be always under "Button2" and
overlays the editor.
</div>
</div>
</div>
);
}
}
Keeping the original example (it had overlay on the whole component except for "Button 2") just in case if it might be useful.
Original
Not sure if I fully understand the desired result, but here is the component implemented with a toggle overlay controlled by Button2.
The overlay is currently set on top of and blocking all child elements except for Button2, so that it works as a "start editing" button, but it can be further adjusted to specify which element it covers to better suit the use case.
Quick demo of the example: codesandbox
import React from "react";
import { Stack } from "#fluentui/react";
export default class App extends React.Component {
state = { showOverlay: true };
handleToggle = () =>
this.setState((prev) => ({ showOverlay: !prev.showOverlay }));
render() {
return (
<div style={{ position: "relative", zIndex: "1" }}>
<Stack
horizontal
horizontalAlign="space-between"
style={{ padding: "12px" }}
>
<div>Title</div>
<Stack horizontal>
<button>Button1</button>
<button style={{ zIndex: "75" }} onClick={this.handleToggle}>
{`Button2 (${this.state.showOverlay ? "Hide" : "Show"} Overlay)`}
</button>
<button>Button3</button>
</Stack>
</Stack>
<div
style={{
position: "absolute",
inset: "0",
backgroundColor: "rgba(0, 0, 0, 0.70)",
zIndex: "50",
display: this.state.showOverlay ? "flex" : "none",
justifyContent: "center",
alignItems: "center",
color: "#fff",
}}
>
A floating panel which is supposed to be always under "Button2" and
overlays the editor.
</div>
<div
style={{
backgroundColor: "gray",
width: "100%",
height: "300px",
}}
>
An editor
</div>
</div>
);
}
}
I am trying to make a slide out drawer utilizing the npm package react-transition-group. For whatever reason, I cannot seem to get the drawer to slide out from left to right on clicking the additional criteria button. If you can solve this issue without using the package, that is ok too!
Here is the code I am trying to get to work as a React component:
{/* DeveloperSearch.js */}
<CSSTransition
in={sidebarClicked}
appear
timeout={1000}
classNames="drawer"
mountOnEnter
unmountOnExit
>
<div className="DevSearch__additional-search-criteria">
Additional Search Criteria
<div className="DevSearch__additional-search-criteria-individual">
<div
style={{
fontSize: '0.8rem',
marginBottom: '5px',
fontWeight: 'bold',
}}
>
Only show people who match more than {criteriaMatch}% of all
search criteria
</div>
<input
className="form-control"
type="number"
value={criteriaMatch}
onChange={(e) => setCriteriaMatch(e.target.value)}
min={0}
max={100}
step={5}
/>
</div>
</div>
</CSSTransition>
I also have a css file that is specifically for the CSS Transition component called DeveloperSearch.css:
.drawer-exit {
width: 250px;
}
.drawer-exit.drawer-exit-active {
width: 250px;
transition: width 1000ms ease-in;
}
.drawer-exit-done {
width: 0px;
}
.drawer-enter {
width: 250px;
}
.drawer-enter.drawer-enter-active {
width: 250px;
transition: all 1000ms ease-in;
}
Unfortunately, my results are no where near what I was wanting, as the drawer does not seem to slide out at all...
I also have replicated this issue in a codesandbox that can be found by clicking here. Thanks for your help!
Here is a pure css based solution but this is a bit hacky
Markup
const Drawer = ({ transitionExit, handleExit }) => (
<div
onClick={handleExit}
className={`drawer ${transitionExit ? "exit" : ""}`}
>
<p>Home</p>
<p>About</p>
<p>Contact</p>
<p>Close Drawer</p>
</div>
);
export default function App() {
const [isOpen, setIsOpen] = useState(false);
const [transitionExit, setTransitionExit] = useState(false);
const handleExit = () => {
setTransitionExit(true);
setTimeout(() => {
setIsOpen(false);
setTransitionExit(false);
// timeout should be less than animation time otherwise state might still be true
// after animation ends and drawer appears for few milliseconds
}, 450);
};
return (
<div className="App">
<div className="wrapper">
<div className="sidebar_container">
<button onClick={() => setIsOpen(true)}>open</button>
</div>
{isOpen && (
<div className={`container ${transitionExit ? "exit" : ""}`}>
<Drawer handleExit={handleExit} transitionExit={transitionExit} />
</div>
)}
</div>
</div>
);
}
CSS
.wrapper {
height: 90vh;
max-width: 60vw;
display: grid;
grid-template-columns: 30% 70%;
overflow: hidden;
margin: 40px;
}
.sidebar_container {
width: 100px;
height: 100%;
background-color: rgb(250, 207, 213);
padding: 30px;
position: relative;
z-index: 30;
}
#keyframes containerTransitionEnter {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes drawerTransitionEnter {
0% {
opacity: 0;
left: -10vw;
}
100% {
opacity: 1;
left: 0vw;
}
}
#keyframes containerTransitionExit {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes drawerTransitionExit {
0% {
opacity: 1;
left: 0vw;
}
100% {
opacity: 0;
left: -10vw;
}
}
.container {
position: relative;
z-index: 10;
height: 90vh;
animation: containerTransitionEnter 0.5s;
}
.drawer {
box-sizing: border-box;
position: relative;
height: 90vh;
width: 25vw;
padding: 20px;
background-color: rgb(4, 118, 156);
border-right: 1px solid rgba(0, 0, 0, 0.3);
animation: drawerTransitionEnter 0.5s;
}
p {
margin-bottom: 10px;
color: white;
}
.container.exit {
animation: containerTransitionExit 0.5s;
}
.drawer.exit {
animation: drawerTransitionExit 0.5s;
}
Here is the link to codesandbox
Since you are using react you can use Material UI for this Here
and you can try this in your case
<Drawer
className={classes.drawer}
variant=''
anchor='left'
open={open}
classes={{
paper: classes.drawerPaper,
}}>
<div className={classes.drawerHeader}>
<IconButton onClick={handleDrawerClose}>
{theme.direction === 'ltr' ? (
<ChevronLeftIcon />
) : (
<ChevronRightIcon />
)}
</IconButton>
</div>
<Divider />
<List>
{arr.map((text, index) => (
<ListItem
button
key={text}
onClick={
text === 'Home'
? goToHome
: text === 'About'
? handleOpenAbout
: text === 'Contact'
? goToContact
: text == 'Team'
? goToMyTea,
: goToDashboard
}>
<ListItemIcon>
{text === 'Home' ? (
<HomeIcon />
) : text === 'About' ? (
<NoteAddIcon />
) : text === 'About' || text === 'Contact' ? (
<ListAltIcon />
) : text === 'Dashboard' ? (
<DashboardIcon />
) : (
<></>
)}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</Drawer>
You should not delete div that has class="DevSearch__additional-search-criteria drawer-enter-done" from the DOM. In this case, Transition will not work. If you want to delete it, you must use css animation.
In this way, after adding div to the DOM, put animation on it to enter as a slider
I need to make the vertical slider animation ( dots and line ) as in this pic
i managed to do the Accordion and the dots but i don't know how i will going to implement it ( i'm using pseudo )
**my accordion component Where i define the logic of my nested accordions as in images based on array of data **
function MultiLevelAccordion({
data,
bodyClass,
headerClass,
wrapperClass,
renderHeader,
renderContent,
}) {
const RootAccordionId = 'parent-0';
const [accordionsStates, setActiveCardsIndex] = useMergeState({});
const onAccordionToggled = (id, activeEventKey) => {
console.log(activeEventKey);
setActiveCardsIndex({
[id]: activeEventKey ? Number(activeEventKey) : activeEventKey
});
};
console.log('data', data);
const accordionGenerator = (data, parentId) => {
return map(data, (item, index) => {
const active = accordionsStates[parentId] === index;
const hasChildren = item.hasOwnProperty('children') && isArray(item.children) && !isEmpty(item.children);
const isRootAccordion = RootAccordionId === parentId;
const isLastNestedAccordion = !isRootAccordion && !hasChildren;
const accordion = (
<Card className={classNames(wrapperClass, {
'nested-root-accordion': !isRootAccordion,
'last-nested-root-accordion': isLastNestedAccordion,
'multi-level-accordion': !isLastNestedAccordion
})}
>
<Accordion.Toggle
{...{ ...item.id && { id: item.id } }}
onClick={() => this}
as={Card.Header}
eventKey={`${index}`}
className={'cursor-pointer d-flex flex-column justify-content-center'}
>
<div className="d-flex justify-content-between align-items-center">
{renderHeader(item, hasChildren)}
<img
style={{
transition: 'all .5s ease-in-out',
transform: `rotate(${active ? 180 : 0}deg)`
}}
src={setIcon('arrow-down')}
className="ml-2"
alt="collapse"
/>
</div>
</Accordion.Toggle>
<Accordion.Collapse eventKey={`${index}`}>
<Card.Body
className={`accordion-content-wrapper ${!hasChildren ? 'accordion-children-body' : ''} ${bodyClass}`}
>
{!hasChildren ? renderContent(item, hasChildren) : (
<Accordion onSelect={activeEventKey => onAccordionToggled(`${parentId}-${index}`, activeEventKey)}>
<Fade cascade top when={active}>
{accordionGenerator(item.children, `${parentId}-${index}`)}
</Fade>
</Accordion>
)}
</Card.Body>
</Accordion.Collapse>
</Card>
);
return isRootAccordion ? accordion : (
<div className={'d-flex align-items-center'}>
{accordion}
<div className="accordion-indicator-wrapper">
<div className="accordion-indicator" id={`indicator-${parentId}-${index}`} />
</div>
</div>
);
});
};
if (!isArray(data)) {
return;
}
return (
<Accordion onSelect={activeEventKey => onAccordionToggled(RootAccordionId, activeEventKey)}>
{accordionGenerator(data, RootAccordionId)}
</Accordion>
);
}
export default MultiLevelAccordion;
the styles used in scss
.faqs-questions-wrapper {
padding: 20px 10px
}
.faqs-q-count {
color: $black-color;
font-size: calc(1rem - 1rem/8)
}
.faqs-q-a-wrapper {
flex-basis: 95%;
}
.faq-child-title {
color: $black-color
}
.nested-root-accordion {
flex-basis: 90%;
}
.accordion-indicator-wrapper {
flex-basis: 10%;
width: 100%;
display: flex;
justify-content: center;
.accordion-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: $theme-color;
position: relative;
}
}
Any clue?
Thanks in Advance.
React JS is gonna make this easy
The lines expansion will need to be coded based on the height of the box window
For the dropdown container keep the vertical button lines in a separate div than the Accordian
Check out this pen for creating lines between buttons
https://codepen.io/cataldie/pen/ExVGjya
css part:
.status-container{
padding:10px;
margin:10px;
position:relative;
display: inline-block;
}
.bullet{
padding:0px;
margin:0px;
display: inline-block;
z-index: 10;
}
.bullet:before {
content: ' \25CF';
font-size: 5em;
}
.bullet-before{
/*position:relative;
right:-12px;*/
}
.bullet-after{
/*position:relative;
left:-30px;*/
}
.line{
stroke:blue;
stroke-width:0.3em;
padding:0px;
margin:0px;
display: inline-block;
}
.line-on{
stroke:red;
}
.line-off{
stroke:gray;
}
.color-on{
color: red;
}
.color-off{
color: gray;
}
https://codepen.io/emwing/pen/LgzJOx
I think you can use some inspiration here
I have to build a CSS grid system. Here is some of my initial code:
#carousel-data{
display: grid;
grid-template-columns: 3% 40% 54% 3%;
grid-template-rows: 10% 10% 60% 20%;
align-content: center;
height: 72vh;
margin-top: 8.5vh;
}
.carousel-text-title{
grid-column-start:3;
grid-row:2/3;
justify-self:start;
font-size:2.5em;
margin-left:30px;
font-weight:bold;
color:white;
}
.carousel-text-content{
grid-column-start: 3;
grid-row: 3/4;
justify-self: start;
margin-top:50px;
margin-left:30px;
font-size:2rem;
color: white;
}
The first part is the container and the other two are some element that are placed in the said container.
This works just fine. But then I found out I had to make the container responsive, that is to modify it's height based on the content displayed. So i went ahead and changed the height property to min-height thinking this would do the trick. But when I ran the code, everything was messed up. Some rows were missing and elements that had their size specified with % or had set only a max height/width weren't showing.
I can't figure out what am I doing wrong. Can you help me out please? Thanks in advance!
Edit:
Here is the HTML fragment(can't put it up on codepen because it's a React App,it would be irrelevant, I can link the github repository if that would be helpful) :
<div className="carrousel">
<div className="grid-container">
<PageIndicator size={this.props.data.length} activeIndice={this.state.currentIndice}
style={{gridColumnStart:'second',justifySelf:'center',marginTop:'30px'}}
/>
</div>
<div id="carousel-data" style={this.state.slideBackgroundStyle} className={this.state.style}>
<Arrow style={{ gridColumnStart: '1', gridRow: '3', justifySelf: 'center', alignSelf: 'center' }}
orientation='left' onClick={this.changeSlide} />
<div className="carousel-image" style={{gridColumnStart:'2/3',gridRow:'2/4' ,justifySelf:'center'}}>
<img src={this.props.data[this.state.currentIndice].picture}
style={this.props.data[this.state.currentIndice].style ?
{ ...this.props.data[this.state.currentIndice].style, display: "inline-block", maxWidth: '95%', maxHeight: '100%' } : { display: "inline-block", maxWidth: '95%', maxHeight: '100%' }} />
</div>
<div className="carousel-text-title">
{this.props.data[this.state.currentIndice].title}
</div>
<div className="carousel-text-content" >
{this.props.data[this.state.currentIndice].text}
</div>
<Arrow style={{ gridColumnStart: '4', gridRow: '3', justifySelf: 'center', alignSelf: 'center' }}
orientation='right' onClick={this.changeSlide} />
</div>
</div>
I'm trying to make a signal bar which depending on the number of strength (1-3) will display the corresponding number of bars in black (activated) otherwise in grey colour. So in React i have used the following:
class Application extends React.Component {
signalBar{
switch(this.props.signal-strength) {
case 1:
< className={{'first-bar, signal-bars, bar'}} style={{display: 'block', color 'black'}}>
< className={{'second-bar, signal-bars, bar'}} style={{display: 'block', color 'grey'}}>
< className={{'third-bar, signal-bars, bar'}} style={{display: 'block', color 'grey'}}>
break;
case 2:
< className={{'first-bar, signal-bars, bar'}} style={{display: 'block', color 'black'}}>
< className={{'second-bar, signal-bars, bar'}} style={{display: 'block', color 'black'}}>
< className={{'third-bar, signal-bars, bar'}} style={{display: 'block', color 'grey'}}>
case 3:
< className={{'first-bar, signal-bars, bar'}} style={{display: 'block', color 'black'}}>
< className={{'second-bar, signal-bars, bar'}} style={{display: 'block', color 'black'}}>
< className={{'third-bar, signal-bars, bar'}} style={{display: 'block', color 'black'}}>
break;
default:
< className={{'first-bar bar'}} style={{display: 'block', color 'grey'}}>
< className={{'second-bar bar'}} style={{display: 'block', color 'grey'}}>
< className={{'third-bar bar'}} style={{display: 'block', color 'grey'}}>
}
}
render() {
return <div className={{sizing-box}}>
<div className={{signal-bars, bar}}>
{this.signalBar}
</div>
</div>
<p>
</p>
</div>;
}
}
React.render(<Application />, document.getElementById('app'));
CSS:
html, body
height: 100%
body
background: #333
display: flex
justify-content: center
align-items: center;
{ box-sizing: border-box; }
.sizing-box {
height: 50px;
width: 80px;
}
.signal-bars {
display: inline-block;
}
.signal-bars .bar {
width: 14%;
margin-left: 1%;
min-height: 20%;
display: inline-block;
}
.signal-bars .first-bar { height: 30%; }
.signal-bars .second-bar { height: 60%; }
.signal-bars .third-bar { height: 90%; }
The value of signal-strength is not static and can change depending on pros from the parent element. The error i'm getting is 'this is a reserved word'. How can someone inject the function 'signalBar' in a React element? Is there a more 'simple' way to do this with less coding in switch condition?
With inline styles, you can do some computed styles like this :
const colorScheme = {
first: ['grey', 'black', 'black', 'black'],
second: ['grey', 'grey', 'black', 'black'],
third: ['grey', 'grey', 'grey', 'black'],
}
class Application extends React.Component {
render() {
const colorNb = ((this.props.signal-strength < 4) && (this.props.signal-strength > 0)) ? this.props.signal-strength : 0;
return (
<div className={{sizing-box}}>
<div className={{signal-bars, bar}}>
<div className={{'first-bar, signal-bars, bar'}} style={{display: 'block', color: colorScheme.first[colorNb] }} />
<div className={{'second-bar, signal-bars, bar'}} style={{display: 'block', color: colorScheme.second[colorNb] }} />
<div className={{'third-bar, signal-bars, bar'}} style={{display: 'block', color: colorScheme.third[colorNb] }} />
</div>
</div>
);
}
}
If you have control over your css you can also use the child selector and the inheritance to use less classeNames on your bars :
.signal-bars {
display: inline-block;
}
.signal-bars div {
width: 14%;
margin-left: 1%;
min-height: 20%;
display: block;
}
.signal-bars div:nth-child(1) { height: 30%; }
.signal-bars div:nth-child(2) { height: 60%; }
.signal-bars div:nth-child(3) { height: 90%; }
Then your component will be cleaner :
return (
<div className="sizing-box">
<div className="signal-bars">
<div style={{ color: colorScheme.first[colorNb] }} />
<div style={{ color: colorScheme.second[colorNb] }} />
<div style={{ color: colorScheme.third[colorNb] }} />
</div>
</div>
);
I like to use the classnames package from npm.
For example:
<div className={classnames('first-bar', {'signal-bars': this.state.signal-strength === 1})} />
Alternatively you can move all of the logic outside of the DIV itself:
const divClasses = classnames('first-bar', {
'signal-bars': this.state.signal-strength === 1
})
// ...
<div className={divClasses} />