Reducing the size of website increases the width - javascript

I have YouTube-style header like css, when I reduce the size of my website, the width of my YouTube-style header increases and my icons extend beyond the boundaries of the site, but when trying same thing with https://m.youtube.com/
it does not increase its width no matter how small you make it, any idea on this ?
i dont want to use overflow:hidden; because when website size is reduced then it cuts out my icons, icons should still be visible like in youtube mobile version.
try it here:
https://codesandbox.io/s/material-ui-icon-avatar-example-forked-exzhzj?file=/src/app.css&resolutionWidth=153&resolutionHeight=671
code:
import React from "react";
import ReactDOM from "react-dom";
import { makeStyles } from "#material-ui/core/styles";
import Avatar from "#material-ui/core/Avatar";
import NotificationsIcon from "#material-ui/icons/Notifications";
import MenuIcon from "#material-ui/icons/Menu";
import SearchIcon from "#material-ui/icons/Search";
import VideoCallIcon from "#material-ui/icons/VideoCall";
import AppsIcon from "#material-ui/icons/Apps";
import "./app.css";
export default function EmailAvatar() {
return (
<div className="box-container">
<div className="header">
<div className="header__left">
<MenuIcon />
{/* <img
className="header__logo"
src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg"
alt=""
/> */}
</div>
<div className="header__input">
<input placeholder="Search" type="text" />
</div>
<div className="header__icons">
<span title="Create">
<VideoCallIcon className="header__icon" />
</span>
<span>
<AppsIcon className="header__icon" />
</span>
<span title="Notifications">
{" "}
<NotificationsIcon className="header__icon" />
</span>
<Avatar
alt="Remy Sharp"
src="https://www.shutterstock.com/image-photo/skeptic-surprised-cat-thinking-dont-260nw-1905929728.jpg"
/>
</div>
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<EmailAvatar />, rootElement);
img of problem:
youtube mobile:

overflow hidden add
.header {
overflow: hidden;
}

Your header is inside another container, and has a sticky position
change this for your header class :
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
}

Related

How to pass CSS from CSS module as prop in Next.js

I am trying to apply CSS on a component called Cards. I want to apply the CSS on the #image_div div. My code is as follows:
team.module.css:
.grid_container{
display: grid;
grid-template-columns: repeat(3,auto);
}
.image #image_div{
border-radius:100%;
margin: 30vh;
}
index.js:
import Image from "next/image";
import Div from "../../components/Div";
import Cards from "../../components/Cards";
import styles from "../../styles/team.module.css";
import xyz from "../../public/xyz.jpeg"
export default function Team(){
return (
<Div>
<div className={`${styles.grid_container}`}>
<Cards url={xyz} title={"XYZ"} className={styles.image}></Cards>
</div>
</Div>
);
}
Cards.js:
import Image from "next/image";
import { Card } from "react-bootstrap";
import styles from "../styles/components/Card.module.css";
export default function Cards({title,url,width,height,alt,description,className}) {
return (
<Card className={`card col-xs-12 col-sm-4 ${styles.Card} ${className?className:null}`}>
<div className="d-flex justify-content-center" id="image_div">
<Image
variant="top"
src={url}
width={width}
height={height}
alt={alt}
className="img-card"
/>
</div>
<Card.Body className="card-content">
<Card.Title className="card-title text-center">{title}</Card.Title>
<Card.Text className="text-center">{description}</Card.Text>
</Card.Body>
</Card>
);
}
But when I inspected the #image_div the CSS is not applied to it. What am I doing wrong here? I want to apply the CSS defined in the team.module.css without defining the same CSS in the Card.module.css file (which contains CSS for Cards.js).
Just like the class selectors, the #image_div selector also gets namespaced by CSS Modules.
You have to use :global() on the selector to switch to global scope and properly target #image_div.
.image :global(#image_div) {
border-radius:100%;
margin: 30vh;
}

How to move Carousel both vertically and horizontally(nested) with react-responsive-carousel

I am working in Ionic react . I have added react-responsive-carousel for swiping the content, I need to scroll the carousel both vertically and horizontally according to the condition .How can I solve the issue? please help
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';
class DemoCarousel extends Component {
render() {
return (
<Carousel>
<div>
<img src="assets/1.jpeg" />
<p className="legend">Legend 1</p>
</div>
<div>
<img src="assets/2.jpeg" />
<p className="legend">Legend 2</p>
</div>
<div>
<img src="assets/3.jpeg" />
<p className="legend">Legend 3</p>
</div>
</Carousel>
);
}
});
ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));
// Don't forget to include the css in your page
// Using webpack or parcel with a style loader
// import styles from 'react-responsive-carousel/lib/styles/carousel.min.css';
// Using html tag:
// <link rel="stylesheet" href="<NODE_MODULES_FOLDER>/react-responsive-carousel/lib/styles/carousel.min.css"/>
According to the docs, you can pass scroll direction as a parameter to the Carousel as 'horizontal' or 'vertical'
Store the 2 options for scroll direction as a variable and depending on a condition, set the scroll direction.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';
const SCROLL_DIRECTION = {
H = "horizontal",
V = "vertical"
}
class DemoCarousel extends Component {
constructor() {
super()
this.state = {
scrollDirection: SCROLL_DIRECTION.H // or SCROLL_DIRECTION.V
}
}
render() {
return (
<Carousel
direction = {this.state.scrollDirection}
>
<div>
<img src="assets/1.jpeg" />
<p className="legend">Legend 1</p>
</div>
<div>
<img src="assets/2.jpeg" />
<p className="legend">Legend 2</p>
</div>
<div>
<img src="assets/3.jpeg" />
<p className="legend">Legend 3</p>
</div>
</Carousel>
);
}
});
ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));
// Don't forget to include the css in your page
// Using webpack or parcel with a style loader
// import styles from 'react-responsive-carousel/lib/styles/carousel.min.css';
// Using html tag:
// <link rel="stylesheet" href="<NODE_MODULES_FOLDER>/react-responsive-carousel/lib/styles/carousel.min.css"/>

React Loading Animations and Visiblitiy

I'm looking for some guidance on how I can implement a loading screen in react. I have a page with pictures, since the pictures are raw photographs, they take a little bit to load on-page. So I'm looking to have a loading animation to run until the last photo is loaded and show the components. I found a few libraries but I'm fairly new and struggling to get only the animation to appear and have it disappear once the images have been loaded. Would someone be able to help guide me?
import { Container, CardColumns} from "react-bootstrap";
import PictureCards from "./PictureCards";
import React, { useState } from "react";
import "./Photography.css";
import "bootstrap/dist/css/bootstrap.min.css";
import img1 from "../../Assets/Photography/img1.jpg";
import img7 from "../../Assets/Photography/img7.jpg";
import img8 from "../../Assets/Photography/img8.jpg";
function Photography() {
return (
<section id="buffer" style={{paddingTop:"80px" }}>
<Container>
<h1 className="project-heading">
Photography <strong className="purple">Gallery </strong>
</h1>
<p style={{ color: "white", paddingTop:"20px" }}>
Here is a compilation of pictures:.</p>
<p align="left" style={{ color: "white", paddingBottom:"50px", paddingTop:"20px" }}>
<strong>Shot on Nikon</strong>
</p>
<CardColumns>
<PictureCards
imgPath={img7}
text=""
/>
<PictureCards
imgPath={img8}
text=""
/>
<PictureCards
imgPath={img1}
text=""
/>
</CardColumns>
</Container>
</section>
);
}
export default Photography;

React component is getting rendered twice

I am newbie to Reactjs and trying to develop the static website. so far was able to render the few components like carasouel and cards.
however, in the recent development , the specific <div> is getting rendered twice. while troubleshooting, i see that <div> is coming twice, but in the code , have written <div> just once. scratching my head how to fix this.
here is the code :
App.js
import React, { Fragment, Component } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Button } from "react-bootstrap";
import Carasel from "./Components/carosel";
import Cards from "./Components/cards";
class App extends Component {
render() {
return (
<Router>
<Carasel />
<Cards />
</Router>
);
}
}
export default App;
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
card.js
import React, { Component } from "react";
import img1 from "../test/person1.jpg";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button } from "react-bootstrap";
import "./card-style.css";
class Card extends Component {
render() {
const mouse = this.props.mouse;
return (
<div className="card text-center">
<div className="overflow">
<img src={img1} alt="image1" />
</div>
<div className="card-body text-dark" />
<h4 className="card-title">{mouse}</h4>
<p className="card-text text-secondary">lorem20</p>
<a href="#" className="btn btn-outline-success">
Go Anywhere
</a>
</div>
);
}
}
export default Card;
cards.js
import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Card from "./card";
class Cards extends Component {
render() {
return (
<div className="container-fluid d-flex justify-content-center">
<div className="row">
<div className="col-md-4">
<Card mouse="DevOps" />
</div>
<div className="col-md-4">
<Card mouse="Cloud Computing" />
</div>
<div className="col-md-4">
<Card mouse="Machine Learning" />
<Card />
</div>
</div>
</div>
);
}
}
export default Cards;
now the issue is : <div className="card text-center"> is getting rendered twice at the end. not getting where and which is the issue . while troubleshooting, seems the component is stateful ? please suggest
It seems you have an aditional card with no mouse in Cards? In the div at the end? I dont think that is supposed to be there.

Building a small site in React with one module VS in Html/css/js

I'm new to React.. If I load all my content like so in App.js in the React framework (all as one component). I'm guessing I'm not really using React in the proper way. But does this one component for a whole website approach have any advantage/disadvantage over building it in the normal HTML/CSS/JS format? Would this actually be slower as a site ?
import React, { Component } from 'react';
import WebFont from 'webfontloader';
import urban_tribal_stfregular from './fonts/urban_tribal_stfregular.ttf';
import urban_brush_zoneregular from './fonts/urban_brush_zoneregular.ttf';
import urbanpaintsregular from './fonts/urbanpaintsregular.ttf';
import urbantrailsregular from './fonts/urbantrailsregular.ttf';
import urbanposterregular from './fonts/urbanposterregular.ttf';
import urban_rubberregular from './fonts/urban_rubberregular.ttf';
import logo from './img/logo.png';
import leaf from './img/leaf.png';
import hq from './img/hq.png';
import eyeSprinkle from './img/eye-sprinkle.png';
import docturDotHead from './img/doctur-dot-head.png';
import johnnyVenus from './img/johnny-venus.png';
import pyramid from './img/pyramid.png';
import goldElevator from './img/gold-elevator.png';
import demon from './img/demon.png';
import sword from './img/sword.png';
import stage1 from './img/stage-1.png';
import stage1Fire1 from './img/stage-1-fire-1.png';
import stage1Fire2 from './img/stage-1-fire-2.png';
import stage2Fire1 from './img/stage-2-fire-1.png';
import cloud1 from './img/cloud-1.png';
import cloud2 from './img/cloud-2.png';
import stage2 from './img/stage-2.png';
import footerShim from './img/840.png';
import footer from './img/footer.png';
import './App.css';
const styles = {
urban_tribal_stfregular: {
fontFamily: 'urban_tribal_stfregular'
},
urban_brush_zoneregular: {
fontFamily: 'urban_brush_zoneregular'
},
urbanpaintsregular: {
fontFamily: 'urbanpaintsregular'
},
urbantrailsregular: {
fontFamily: 'urbantrailsregular'
},
urbanposterregular: {
fontFamily: 'urbanposterregular'
}
};
// CONFIG OBJECT TO PASS TO HOC
class App extends Component {
render() {
let projectTitle = 'Earthgang'
return (
<div className="App">
<div className="background-enhance">
<header className="App-header">
<div style={{flexDirection:"row"}}>
{/* new wrap for dat perspective ting */}
<div className="wrap">
<div className="bg">
{/* perspective level 1 (back)*/}
<div style={{ position: "absolute", width: "100%" }}>
<div className="plate">
<br />
</div>
<img src={hq} className="hq" alt="HQ" />
<div id="imageEye" className="spriteEye"></div>
<img src={leaf} className="leaf" alt="weed" />
<img src={leaf} className="leaf leaf_right" alt="grass" />
</div>
<div className="bg">
{/* perspective level 2*/}
<div id="imageHeadJohny" className="spriteHeadJohny"></div>
<div id="imageHeadDot" className="spriteHeadDot"></div>
<div className="bg">
{/* perspective level 3*/}
<img alt="" id="myButtn" className="logoTop" src={logo} />
<div className="pyramid-box">
<img src={pyramid} className="pyramid" alt="pyramid" />
<img src={goldElevator} className="gold-elevator" alt="pain profit" />
<img src={eyeSprinkle} className="eye-sprinkle" alt="eye" />
<img src={demon} className="demon" alt="demon" />
<div className="stages stage-1-box">
<img src={stage1}className="stage-1" alt="Stage 1" />
<img src={stage1Fire1} className="stage-1-fire-1" alt="Stage 1 Fire 1" />
<img src={stage1Fire2} className="stage-1-fire-2" alt="Stage 1 Fire 2" />
</div>
<div className="stages stage-2-box">
<img src={stage2} className="stage-2" alt="Stage 2" />
<img src={stage2Fire1} className="stage-2-fire-1" alt="Stage 2 Fire 1" />
</div>
</div>
<div id="imageApe" className="spriteApe"></div>
<div id="imageHyena" className="spriteHyena"></div>
</div>
</div>
</div>
</div>
{/* End of new wrap for dat perspective ting */}
</div>
</header>
<div id="footer1">
</div>
<div id="footer2">
<p>Footer (or other) content here</p>
</div>
<div style={{flexDirection:"row"}}>
<div>
</div>
</div>
</div>
</div>
);
}
}
export default App;
Well , this is entirely just my own opinion which may be wrong .
If you are building with this single component website approach , then there is no need to use react really . You are just loading extra 57 kb or something according to this link React file size since you are not loading extra libraries.
But obviously maintaining this would not be an easy job and you are better off using react features to make you life easier and make the app scalable

Categories