Sorry for my atrociously bad title on this post.
I would like to achieve something like this as my end goal (my figma mockup):
But I don't know how to achieve this as when I call a component on a "page", it just places the items underneath the navbar like this:
(the text like iPad momentos was just for me testing if the components worked and were called correctly)
I haven't developed all of the components you can see in the mockup (figma), but that shouldn't matter. All I would like to know is with (S)CSS, how you can place different flexboxes or items around each other like in the image below.
Thanks a lot.
My code:
// This file is SRDash (you could call it a page if you want)
// Normal Imports
import React from 'react';
import CardLink from '../components/CardLink';
// Component Imports
import SNavbar from '../components/SNavbar'
import Text from '../components/Text'
// Styling Imports (Global Styles for this Dash)
import './sradmin.scss'
const SrDash = () => {
return (
<div className="mainContent">
<SNavbar />
<Text />
<CardLink text="text here" link="asdfsd" svg="asdfsdf"/>
</div>
);
}
export default SrDash;
It's styling:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
}
body {
color: blue;
}
Navbar SCSS:
body {
margin: 0
}
.snavbarcontainer {
background-color: black;
min-width: 3.5em;
max-width: 3.5em;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.icons_ul {
text-decoration: none;
list-style-type: none;
padding: 0;
}
.icons_ul li {
margin: 0.5em 0;
}
.icons_ul {
justify-content: center;
}
.toplefticon {
position: absolute;
top: 0;
transform: translateY(50%);
}
Navbar JSX:
import React from 'react';
import './navbar.scss';
// SVG Imports
import topleft from '../assets/toplefticon.svg'
import IDash from '../assets/dashboard.svg'
import IDB from '../assets/database.svg'
import IHand from '../assets/hand.svg'
import ILookupPupils from '../assets/lookup-pupils.svg'
import IMAdmins from '../assets/manage-admins.svg'
import IMUsers from '../assets/manage-users.svg'
const SNavbar = () => {
{/* <img className="testimage" src={topleft} alt="Testing Logo" /> */}
return (
<div className="snavbarcontainer">
<div className="toplefticon">
<a className="test" href="#"><img src={topleft} alt="Testing Logo" /></a>
</div>
<div className="mainIcons">
<ul className="icons_ul">
<li><img src={ILookupPupils} alt="Pupil Lookup" /></li>
<li><img src={IMUsers} alt="Manage Users" /></li>
<li><img src={IHand} alt="Coming Soon" /></li>
<li><img src={IMAdmins} alt="Manage Admins" /></li>
<li><img src={IDash} alt="Dashboard" /></li>
<li><img src={IDB} alt="Dashboard" /></li>
</ul>
</div>
</div>
);
}
export default SNavbar;
Thanks again.
Give mainContent css with property
display:flex;
Hey so after hours of trying to figure it out, the solution was to seperate the navbar and the actual content into seperate divs, like below:
<div className="mainContent">
<SNavbar />
<div className="content">
<Text />
<CardLink text="text here" link="asdfsd" svg="asdfsdf"/>
</div>
</div>
This worked perfectly and after which I had no issues with, and look at the outcome now!
Related
I am trying to do a horizontal slider with buttons. So i have 6 cards and 6 dot buttons. As i click for example in the second button with id of 1 it should slide to the second image. But fore some reason the scroll event is not working.
This is my css:
#media only screen and (max-width: 810px){
.fake-magicwall ul{
overflow: hidden;
overflow-x: auto;
flex-wrap: nowrap;
}
.dot{
width: 15px;
height: 15px;
border-radius: 50%;
margin: 10px;
}
}
And this is my component:
import React from 'react'
import './Work.css'
import Cta from '../atoms/Cta'
import Headphone from '../assets/images/headphones3.png'
import Calendar from '../assets/images/calendar.png'
import DevConnector from '../assets/images/dev.png'
import Bulls from '../assets/images/bulls2.png'
import Expenses from '../assets/images/reactExpenses.png'
import SixFlags from '../assets/images/sixflags.png'
import useDots from '../hooks/useDots';
const images = [Calendar, Headphone, SixFlags, DevConnector, Bulls, Expenses];
const Work = () => {
const [activeIndex, setActiveIndex] = useDots(images.length);
function handleDotClick(index) {
console.log("Clicked dot with index:", index);
setActiveIndex(index);
const targetCard = document.querySelector(`[data-id="${index}"]`);
console.log("Target card:", targetCard);
if (targetCard) {
const magicWall = document.getElementById('home-magicwall');
console.log("Magic wall:", magicWall);
console.log("Target card offsetLeft:", targetCard.offsetLeft);
console.log("Magic wall offsetLeft:", magicWall.offsetLeft);
magicWall.scroll({
left: targetCard.offsetLeft - magicWall.offsetLeft,
behavior: 'smooth'
});
}
}
return (
<div className="main-container">
<section id="section-work">
<div id="header">
<h2>My Work</h2>
</div>
<div className="text-zone-2">
<div>
<p>
A small gallery of recent projects chosen by me. I've done them all together with amazing people from
companies around the globe. It's only a drop in the ocean compared to the entire list. Interested to see
some more? Visit my work page.
<br />
</p>
</div>
<div className="btn-container">
<Cta className="btn" link="https://github.com/mateoghidini1998" content="See More" />
</div>
</div>
<div className="fake-big-2">Work</div>
</section>
<div className="dots">
{images.map((image, index) => (
<button
key={index}
className={`dot ${index === activeIndex ? 'active' : ''}`}
onClick={() => handleDotClick(index)}
></button>
))}
</div>
<div id="home-magicwall" className="fake-magicwall">
<ul>
{images.map((image, index) => (
<li key={index} className={`magic-wall_item ${index === activeIndex ? 'active' : ''}`}>
<img src={image} alt="image" />
<div className="hover-content"></div>
<a href="/" className="colorbox" data-id={index}></a>
</li>
))}
</ul>
</div>
</div>
);
};
export default Work;
This is my custom hook:
import { useState } from 'react';
function useDots(images) {
const [activeIndex, setActiveIndex] = useState(0);
return [activeIndex, setActiveIndex];
}
export default useDots;
I did some console log and the index of the dot i am clicking is correct.
The data-id on the <a> tags is correct.
I also get Target card offsetLeft: 133
and Magic wall offsetLeft: 0 Every time i click in a button
Any reason why it is not scrolling?
You have applied the overflow-x: auto to the ul element inside of the home-magicwall div and not the home-magicwall div itself so that technically isn't scrollable. Try the ul instead:
if (targetCard) {
const magicWall = document.querySelector('.home-magicwall ul');
console.log("Magic wall:", magicWall);
console.log("Target card offsetLeft:", targetCard.offsetLeft);
console.log("Magic wall offsetLeft:", magicWall.offsetLeft);
magicWall.scroll({
left: targetCard.offsetLeft - magicWall.offsetLeft,
behavior: 'smooth'
});
}
I'm new to react and i hope someone can help me with this. I've searched everywhere for a solution to my problem with no luck.
Basically i want to render an array of SVG images inside a div as a backgroundImage: url().
I've managed to render my array with math.random but i want the SVG images to render in same order as in the array.
This is my code so far:
import './ListView.css';
import Green from '../Assets/ListCard/Green.svg';
import Brown from '../Assets/ListCard/Brown.svg';
import Orange from '../Assets/ListCard/Orange.svg';
import Mail from '../Assets/Icons/Mail.svg'
import Phone from '../Assets/Icons/Phone.svg'
function ListView({ userData}) {
const cardImages = [Green, Brown, Orange]; /// Array
const renderList = cardImages.map(function(image) { /// Tried to map through the array with -
return image; /// no luck
})
/// This Math.radom method works, but not the solution i want
const randomItem = cardImages[Math.floor(Math.random()*cardImages.length)];
return ( /// Below inside the div is where i want to render the images.
<div className="list-card" style={{backgroundImage: `url(${renderList})`}}>
<div className="list-card-wrapper">
<div className="list-user-image"><img src={userData.picture.medium} alt=""/></div>
<div className="list-user-info">
<div className="list-user-name">{userData.name.first} {userData.name.last}</div>
<div className="list-user-location">{userData.location.city}</div>
</div>
<div className="list-user-contact">
<img height={19} src={Mail} alt="svg"/>
<img height={19} src={Phone} alt="svg"/>
</div>
</div>
</div>
)
}
export default ListView```
you will need import image and bind it like below:
import logo from './logo.svg';
function App() {
return (
<div className="App">
<img src={logo} className="App-logo" alt="logo" />
</div>
);
}
export default App;
This is what you might be looking for:
import "./styles.css";
export default function App() {
const items = [
{ name: "first" },
{ name: "second" },
{ name: "third" },
{ name: "fourth" },
{ name: "fifth" },
{ name: "sixth" }
];
const colorArray = ["green", "brown", "orange"];
return (
<div className="App">
{items.map((item, index) => {
const classColorIndex = index % 3;
return (
<div
className={`list-card ${colorArray[classColorIndex]}`}
key={index}
>
<p>{item.name}</p>
</div>
);
})}
</div>
);
}
The main concept behind this is, that you have to focus on the index of the item and check if it the first, second, or third item (I am considering it 3 because you have 3 colors in the array). Now, according to index number, you need to add a class to that div, and using CSS, you could provide background to each div according to that array.
In this sample, I have used plain background color, but I have commented how you could use svg as well. on APP.css, and here is the css
.App {
font-family: sans-serif;
text-align: center;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list-card {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
flex-basis: 50%;
}
.list-card.green {
background: green;
/* background:url('../../Green.svg'); */
}
.list-card.brown {
background: brown;
}
.list-card.orange {
background: orange;
}
and here is the sandbox link:
https://codesandbox.io/s/stack-overflos-sample-z0yxyk?file=/src/App.js
On this example, you can see background is assigned, exactly to the array.
I am unable to insert an image to my sign up page. I have tried inserting it using index.js (HTML codes in React component) and also in the corresponding CSS file. Both not working. Sharing the codes and screenshot below (I have removed irrelevant import codes):
React Component code:
import styles from "./register.css";
return(
<div>
<div id="styledImg">
<img alt="" title="" src="../../src/assets/bocLogo.png"/>
</div>
</div>
);
}
export default Register;
CSS code:
#styledImg {
width: 1110px;
height: 428px;
height: 428px;
position: absolute;
top: 245px;
left: 87px;
}
#styledImg Img {
max-width: 100%;
max-height: 100%;
}
You have to import the image and then use the imported file as src.
it would be something like this.
import logo from '.../../src/assets/bocLogo.png';
and then you will use this logo in src
<img src={logo} alt="Logo" />;
for more information please check This link
You have to upload that image as a ReactComponent.
import { ReactComponent as Logo } from "../../assets/your-image.png";
So that should look like:
import styles from "./register.css";
import { ReactComponent as Image } from "../../assets/your-image.png"
return(
<div>
<div id="styledImg">
<img alt="" title="" src={Image}/>
</div>
</div>
);
}
export default Register;
I'm setting scrolls with react-scroll but it isn't working for some reason. I checked the documentation but I can't see why this isn't working.
Here is my component where I'm setting the links:
import React from 'react';
import classes from './Footer.css';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { Link } from 'react-scroll';
import {
faFacebook,
faTwitter,
faInstagram,
} from '#fortawesome/free-brands-svg-icons';
const footer = (props) => (
<footer className={classes.Footer}>
<ul className={classes.FooterLinks}>
<li>
<Link
to="navigation-bar"
smooth={true}
duration={1000}
className={classes.FooterLink}
>
home
</Link>
</li>
<li>
<Link
to="about"
smooth={true}
duration={1000}
className={classes.FooterLink}
>
about
</Link>
</li>
<li>
<Link
to="products"
smooth={true}
duration={1000}
className={classes.FooterLink}
>
products
</Link>
</li>
</ul>
<ul className={classes.FooterIcons}>
<li>
<a
href="https://www.facebook.com/"
// target="_blank"
className={classes.FooterIcon}
>
<FontAwesomeIcon icon={faFacebook} />
</a>
</li>
<li>
<a
href="https://www.twitter.com"
// target="_blank"
className={classes.FooterIcon}
>
<FontAwesomeIcon icon={faTwitter} />
</a>
</li>
<li>
<a
href="https://instagram.com"
// target="_blank"
className={classes.FooterIcon}
>
<FontAwesomeIcon icon={faInstagram} />
</a>
</li>
</ul>
<p className={classes.Copyright}>
copyright © carlos suarez. all rights reserved
</p>
</footer>
);
Here is an example of the components and how Im setting Id:
import React from 'react';
import classes from './NavBar.css';
import NavbarMenuBurger from './NavbarMenuBurger/NavbarMenuBurger';
import NavbarCartIcon from './NavbarCartIcon/NavbarCartIcon';
const navBar = (props) => {
return (
<nav className={classes.Navbar} id="navigation-bar">
<NavbarMenuBurger clicked={props.menuDrawerShowToTrue} />
<h1 className={classes.HeaderTitle}>RAINBOW SODAS UK</h1>
<NavbarCartIcon clicked={props.drawerShowToTrue} />
</nav>
);
};
export default navBar;
All the other components are set similarly.
Unfortunately, something isn't right and I can't figure out what this could be. I checked the DOM after the page is rendered and notice that the tags are not showing the href property. Is this normal when using scroll-react?
It turns out I had a setting in my CSS that didn't allow scroll.
body,
html {
font-family: 'Roboto', sans-serif;
background: #fff;
color: rgb(41, 41, 41);
line-height: 1.5;
font-size: 0.875rem;
/* width: 100%;
height: 100%; */
overflow-x: hidden;
scroll-behavior: smooth;
}
I have been struggling with this issue for a few weekends now. I'm trying to build a carousel in to my (first) Gatsby website using react-slick however when I view the frontend after running gatsby develop the slider initialised but the markup that gets output is malformed, causing the slider to not work.
I am calling this component on to my index.js page like this, however the rendered output on page looks like this:
<div class="art_list__slider">
<div class="slick-slider slick-initialized">
<div class="slick-list">
<div class="slick-track" style="width: 1348px; opacity: 1; transform: translate3d(0px, 0px, 0px);">
<div aria-hidden="false" class="slick-slide slick-active slick-current" data-index="0" style="outline: none; width: 1348px;" tabindex="-1">
<div>
<div>
<div class="gatsby-image-wrapper" style="position: relative; overflow: hidden; margin: 3rem 0px;">
// image slide here - code removed for space
</div>
</div>
<div>
<div class="gatsby-image-wrapper" style="position: relative; overflow: hidden; margin: 3rem 0px;">
// image slide here - code removed for space
</div>
</div>
<div>
<div class="gatsby-image-wrapper" style="position: relative; overflow: hidden; margin: 3rem 0px;">
// image slide here - code removed for space
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As you can see from the render above, ALL of the individual images are rendering as one slide. How can I fix this?
You need to make sure you import the css as well. Depending on what version of the React Slick you are using you need to include that as well
ie.
npm install slick-carousel
// Import css files
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
As per documentation here
If that is not working for some reason, you can try to reference the css straight from where it is in your node modules file. Alternatively you can try using the cdn solution.
If using React Helmet you can try something like
<Helmet>
<link
rel="stylesheet"
href="href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" "
></link>
</Helmet>
Inside the React Component you are rendering your carousel or inside the Layout.js file if you are using this in many places in your project.
As react-slick expects each child node to be it's own slide, you're probably going to have to render your slider in the same component that you make the staticQuery
import React from "react"
import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
import Slider from "react-slick"
export default props => (
<StaticQuery
query = {graphql`
query {
allFile(
filter: {
extension: { regex: "/(jpg)|(png)|(jpeg)/" }
relativeDirectory: { eq: "gallery" }
}
) {
edges {
node {
base
childImageSharp {
fluid {
...GatsbyImageSharpFluid_withWebp_tracedSVG
}
}
}
}
}
}
`}
render = { data => (
<Slider {...sliderSettings}>
{data.allFile.edges.slice(0, `${props.limit}`).map(image => (
<div key={image.node.childImageSharp.fluid.src}>
<Img fluid={image.node.childImageSharp.fluid} style={{ margin: '3rem 0' }} />
</div>
))}
</Slider>
) }
/>
)