I am using this boilerplate to create a react based application. I have this basic code:
App.js:
render() {
const styles = require('./App.scss');
return (
<div className="styles.app">
<Helmet {...config.app.head}/>
<Navbar fixedTop className={styles.navbar}>
<Navbar.Header>
<Navbar.Brand>
<IndexLink to="/" activeStyle={{color: '#33e0ff'}}>
<div className={styles.brand}/>
</IndexLink>
</Navbar.Brand>
<Navbar.Toggle/>
</Navbar.Header>
</Navbar>
</div>
);
}
App.scss:
.app {
.navbar{
background: #1b6d85;
}
.brand {
position: absolute;
$size: 40px;
top: 5px;
left: 5px;
display: inline-block;
background: #2d2d2d;
width: $size;
height: $size;
background-size: 80%;
margin: 0 10px 0 0;
border-radius: $size / 2;
}
nav :global(.fa) {
font-size: 2em;
line-height: 20px;
}
}
.appContent {
margin: 50px 0; // for fixed navbar
}
For the Navbar tag, I tried using both className as was done in the template and bsStyle as I saw in some questions online. I havent been able to successfully edit any component of react-bootstrap.
If I have missed the documentation of this in react-bootstrap website, please point me to it too. Thanks.
React-bootstrap requires bootstrap.css as a dependency in your file. Add it in your index.html and it should work fine for you.
See this documentation:
React-bootstrap guide
Related
I'm trying to upload a local image in the project using before but it's not visible. the image is in the same folder as the files.
images from the link from the Internet work fine, but local ones do not(. Please push in which direction to go))
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<div className="qrt"></div>
</div>
);
}
css
.App {
font-family: sans-serif;
text-align: center;
}
.qrt {
width: 50px;
height: 50px;
background-color: red;
}
.qrt::before {
content: "";
width: 20px;
height: 20px;
background-image: url("./image.jpeg");
}.
https://codesandbox.io/s/goofy-rhodes-uzdk0k Link to sunbox
I have a react component called TeamBanner like so
import styles from "./teamBanner.module.css";
import { useNavigate } from "react-router-dom";
import { TeamBannerProps } from "../ProjectTypes.types";
export const TeamBanner = ({
team,
onBannerClick,
showName,
}: TeamBannerProps) => {
let navigate = useNavigate();
const handleOnClick = () => {
navigate(`/${team}`);
onBannerClick();
};
return (
<div
className={`${styles.container} flex theme-light ${
showName ? "" : styles["no-name"]
}`}
title={team}
onClick={handleOnClick}
>
<div>
<img
src={require(`../logos/${team}.svg`)}
alt="logo"
className={`${styles.logo} ${showName ? "" : styles["only-logo"]}`}
/>
</div>
{showName ? team : ""}
</div>
);
};
The teamBanner.module.css file is like so
.container {
margin: 0.25em;
align-items: center;
cursor: pointer;
top: 0;
z-index: 2;
background-color: hsl(var(--color-background));
padding: 0.1em 0.25em;
border-radius: 0.5em;
box-shadow: 0.05rem 0.05rem 0.2rem rgb(0 0 0 / 50%);
font-family: var(--ff-serif);
font-size: var(--fs-200);
}
.logo {
display: inline-block;
vertical-align: middle;
width: 3vmax;
height: 3vmax;
}
.container:hover {
outline: 0.15em solid hsl(240, 90%, 67%);
}
.no-name {
border-radius: 0.25em;
}
.only-logo {
width: 5vmax;
height: 5vmax;
}
I am using it to create a list of team of a page & this works just fine.
However, I want to use it in another place also. In the place, the to now want the .container:hover effect & I want the font properties of the .contaner and width & height properties of the .logo changed.
How can I accomplish this? only changing these items of the module.css? Can any one help? Thanks
I am trying to create a slide out drawer exactly like the one present in JIRA.
Here is what JIRA looks like (notice how sidebar opens and pushes content to the side):
Here is what I have managed to create in my code:
The sliding effect and shelf looks similar enough and I am happy with it. However, there is one feature that Jira has that I find quite interesting and would like to recreate in my code base. When the sidebar is closed, and the user hovers over the sliver of sidebar that remains, the sidebar opens up as if the button to open had been clicked, and it then closes when the mouse leaves the sidebar. What is really interesting to me is that the grid format does not change and the sidebar appears to not move the other content on the page which makes me believe it somehow switches to a fixed position just during this mouse over event. I am not sure how to achieve this effect and my code is currently not working. Any help would be greatly appreciated!
Here is the desired effect (notice how sidebar opens and DOES NOT push content to the side, which is different than actually clicking the button. See first gif example):
EDIT: Here is the effect for mousing in to the sidebar and the button becoming visible while in the sidebar:
Here is what I have tried so far:
(SideBar Component)
import React, { useState, useRef } from 'react';
import { Link } from 'react-router-dom';
import './RenewalSidebar.css';
function RenewalSidebar({ worksheetID }) {
const [sidebar, setSidebar] = useState(false);
const [cursorInSidebar, setCursorInSidebar] = useState(false);
const showSidebar = () => setSidebar(!sidebar);
const sidebarRef = useRef(null);
return (
<nav
ref={sidebarRef}
className={sidebar ? 'sidebar' : 'sidebar inactive'}
onMouseLeave={() => setCursorInSidebar(false)}
onMouseOver={(e) => {
if (e.target === sidebarRef.current || sidebarRef.current.contains(e.target)) {
console.log(`Hey I'm in the sidebar`);
setCursorInSidebar(true);
}
}}
data-sidebarhover={cursorInSidebar}
data-sidebaropen={!sidebar}
>
<div
role="button"
tabIndex={0}
className="hamburger"
type="button"
onClick={showSidebar}
data-open={!sidebar}
data-hover={cursorInSidebar}
onMouseEnter={() => setCursorInSidebar(true)}
onMouseLeave={() => setCursorInSidebar(false)}
>
{sidebar ? '>' : '<'}
</div>
<div className="sidebar-content">
<ul onClick={showSidebar} data-open={!sidebar}>
<li>
<Link to={`/`}>Test</Link>
</li>
<li>
<Link to={`/`}>Test</Link>
</li>
<li>
<Link to={`/`}>Test</Link>
</li>
</ul>
</div>
</nav>
);
}
export default RenewalSidebar;
Here is my css for the top level grid container I am using:
.RenewalsDetailContainer {
display: grid;
grid-template-columns: max-content 1fr;
justify-items: center;
}
And here is my css for the Sidebar component:
.sidebar {
position: relative;
/* top: 20vh;
left: -300px; */
width: 20px;
height: 100%;
/* border-radius: 0px 5px 5px 0px; */
background-color: aliceblue;
z-index: 0;
transition: width 200ms ease-out;
box-shadow: inset -10px 0 25px -25px #888;
padding: 0 10px;
}
.sidebar.inactive {
width: 300px;
z-index: 6000;
}
.sidebar ul {
margin: 0;
padding: 0;
}
.sidebar ul[data-open='false'] {
display: none;
}
.sidebar li a {
display: block;
border: none;
background-color: white;
padding: 14px 28px;
font-size: 16px;
margin: 10px 10px 10px 10px;
width: auto;
text-align: center;
}
/* .sidebar[data-sidebaropen='false'][data-sidebarhover='true'] {
z-index: -9000;
} */
.sidebar[data-sidebaropen='false'][data-sidebarhover='true'] .sidebar-content {
position: fixed;
width: 300px;
top: 0;
left: 0;
background-color: purple;
}
.hamburger {
color: rgb(107, 119, 140);
background-color: rgb(255, 255, 255);
height: 24px;
border: none;
outline: 0;
width: 24px;
top: 32px;
position: absolute;
right: 0px;
font-size: 15px;
font-weight: bold;
border-radius: 50%;
transform: translateX(50%);
display: grid;
place-items: center;
transition: all 500ms linear, color 100ms linear, opacity 350ms cubic-bezier(0.2, 0, 0, 1);
box-shadow: rgb(9 30 66 / 8%) 0px 0px 0px 1px, rgb(9 30 66 / 8%) 0px 2px 4px 1px;
}
.hamburger:hover {
background-color: #4c9aff;
color: white;
box-shadow: none;
cursor: pointer;
}
.hamburger[data-open='true'] {
opacity: 0;
}
.hamburger[data-open='true']:hover {
opacity: 1;
}
.hamburger[data-open='true'][data-hover='true'] {
opacity: 1;
}
.hamburger:after,
.hamburger:before,
.hamburger div {
background-color: #0076c7;
/* margin: 7px 0; */
border-radius: 3px;
content: '';
display: block;
transition: all 300ms ease-in-out;
}
.sidebar-content {
position: relative;
width: 100%;
height: 100%;
}
.sidebar-content .sidebar.active .hamburger div {
transform: scale(0);
}
And finally...here is a Code sandbox link I have created to help you test the code. Click me!
I believe I have addressed all of your feature requests in this updated CodeSandbox:
https://codesandbox.io/s/jira-inspired-menu-bnyd8
The crux of the solution was to decouple the SideBar content from the mechanics of how that column is propped open, depending on UI state. It required a bit of nesting and absolute positioning to get the job done.
The content width of the SideBar is measured with getBoundingClientRect() when the panel is opened up, and then that value is stored in state. That value is then used to control the width of the SideBar container when it is open, as well as the shim width (which is what actually pushes the main content to the side when the SideBar is fully opened) and hamburger x coordinate.
Relevant code for my solution is in SideBar.js and SideBar.css in the CodeSandbox link above.
Preview of UI in action:
I have made few changes to accommodate this.
Nesting of sidebar and button will raise conflict between onMouseEnter events, you won't be able to click on the button. (Moved the button outside nav)
Position absolute does not push the content. And you can use react inline styles like this :
style={{position: cursorInSidebar && !sidebar ? "absolute" : "relative"}}
Added isOpen to track if the sidebar is open. Either by button click or mouse hover.
onClick events should set cursorInSidebar.
const SideBar = () => {
const [sidebar, setSidebar] = useState(false);
const [cursorInSidebar, setCursorInSidebar] = useState(false);
const showSidebar = (isOpen) => {
setSidebar(!isOpen);
setCursorInSidebar(false);
};
const sidebarRef = useRef(null);
const enterSideBar = () => {
setCursorInSidebar(true);
};
const leaveSideBar = () => {
setCursorInSidebar(false);
};
const isOpen = sidebar || cursorInSidebar;
return (
<div className="divSid">
<div
role="button"
tabIndex={0}
className="hamburger"
type="button"
onClick={() => showSidebar(isOpen)}
data-open={isOpen}
>
{isOpen ? "<" : ">"}
</div>
<nav
ref={sidebarRef}
style={{
position: cursorInSidebar && !sidebar ? "absolute" : "relative"
}}
className={isOpen ? "sidebar inactive" : "sidebar"}
data-sidebaropen={isOpen}
onMouseEnter={enterSideBar}
onMouseLeave={leaveSideBar}
>
<div className="sidebar-content">
<ul onClick={() => showSidebar(isOpen)} data-open={isOpen}>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
</nav>
</div>
);
};
While moving button outside nav, alignment of components will break. Here is the working code.
I am learning css and react and a bit confused how to display:block for a component when a user clicks a button myButton. And to hide the component when the user clicks it again.
I am using mobile and desktop views and want the button to not show in desktop view, it will only show in Mobile view.
In Mobile view once the user clicks the button toggle component needs to show. That is where I dont know how onclick I can say for Toggle css to display:block to show entire component. Toggle shows in desktop view.
Here is code map.tsx
<div className={styles.controlsContainer}>
<Toggle />
</div>
<div className={styles.button_about}>
<AboutPopup />
<Button id=myButton
type="primary"
icon={<FilterOutlined />}
className={styles.filterbutton} onClick== --- How to say to enable toggle css to block??
></Button>
</div>
Here is how my map.module.scss looks like
.toggle {
width: 244px;
background: #ffffff;
border: 1px solid #d9d9d9;
box-sizing: border-box;
border-radius: 4px;
display: flex;
align-items: center;
float: left;
}
#media screen and (max-width: $mobileMax) {
.toggle {
display: none;
}
}
.button {
&_about {
#include for-desktop {
position: absolute;
bottom: 2em;
right: 2em;
}
#include for-mobile {
position: absolute;
top: 2em;
z-index: 1;
right: 2em;
z-index: 1;
}
}
}
.filterbutton {
width: 40px;
height: 40px;
left: calc(50% - 40px / 2);
top: calc(50% - 40px / 2);
background: $color-blue;
border-radius: 100px;
color: #83888c;
#include for-desktop {
display: none;
}
#include for-mobile {
position: absolute;
top: 4em;
right: 2em;
}
}
----- Update 2
So I did something like this
const [isShow, setIsShow] = React.useState(true);
const handleClick = () => {
setIsShow((prev) => !prev);
console.log(isShow);
};
return
(
<div className={styles.controlsContainer}>
<Toggle
className= {isShow ? {styles.toggle_show} : {styles.toggle_hide}}
/>
)
But I am getting a parsing error on styles.toggle_show Parsing error: ',' expected.eslt
maybe this could help
import React from "react";
import "./styles.css";
export default function App() {
const [isShow, setIsShow] = React.useState(false);
const handleClick = () => setIsShow((prev) => !prev);
return (
<>
<div className={isShow ? "show" : "hide"}>my toggling component</div>
<button onClick={handleClick}>toggle show</button>
</>
);
}
css:
.show {
display: block;
}
.hide {
display: none;
}
so I'm using a gorgeous search bar component that I found on codepen in my react (CRA) project.
I have imported css in the default src/index.js
Then I have my search component which is composed of Search.js and Search.module.css.
Clearly Bootstrap styling and the Search component styling doesn't work together, when I comment the bootstrap file import in src/index.js, the Search component will be working fine.
So how can I override bootstrap only on my Search Component?
Here is the css of the Search.module.css
#import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
* {
font-family: Roboto, sans-serif;
padding: 0;
margin: 0;
}
.flexbox {
background: linear-gradient(155deg, #cccccc, #e8ecee, #d4d4d4);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.search {
margin: 20px;
}
.search>h3 {
font-weight: normal;
}
.search>h1,
.search>h3 {
color: white;
margin-bottom: 15px;
text-shadow: 0 1px #eaeff1;
}
.search>div {
display: inline-block;
position: relative;
}
.search>div:after {
content: "";
background: white;
width: 4px;
height: 20px;
position: absolute;
top: 40px;
right: 2px;
transform: rotate(135deg);
box-shadow: 1px 0 #eaeff1;
}
.search>div>input {
color: white;
font-size: 16px;
background: transparent;
width: 25px;
height: 25px;
padding: 10px;
border: solid 3px white;
outline: none;
border-radius: 35px;
box-shadow: 0 1px #eaeff1;
transition: width 0.5s;
}
.search>div>input::placeholder {
color: #5a5a5a;
opacity: 1;
}
.search>div>input::-ms-placeholder {
color: #efefef;
}
.search>div>input::-ms-input-placeholder {
color: #5a5a5a;
}
.search>div>input:focus,
.search>div>input:valid {
width: 250px;
}
As you haven't shared the code snippets. I am assuming the bootstrap search will be using: text and button tag. Now, the CSS of this would be coming from bootstrap.
You can do the following:
1) Make a search component level class eg "search-module"
2) Now, create css or scss file import in the search component and within that css
override the bootstrap css by :
.search-module input[type=search] {...}
OR
3) you can do this overriding on your main style.css file too.
You need do to step 2 for all the other conflicting classes, tags, and IDs in the bootstrap with the search component.
PS: This will bloat your CSS. Best would be if you can just pick that part of Bootstrap which is required and rest you write your own style.
Thank you.