tublbug Page (2)

Reactを使用してTurbug Pageを作成する予定です
手順1)Navigation+Image Slider
フェーズ2)Grid+レスポンス-本日実施

Grid+レスポンス(メディアクエリ)

[原理]

最初の4つのGrid-item->2つのGrid-item、数量は

に調整されました.

2個の場合、フルサイズは幅に応じて自分で調整できる

.

ファイル構造:GridContainerに複数のGridがある

[コード]

(GridContainer.js)

import React from 'react'
import styled from 'styled-components';
import Grid from './secions/Grid';

const Template = styled.div`
    width: 1000px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    @media only screen and (max-width: 996px){
        width:100%;
        height:auto;
    }
`;
const TitleText = styled.div`
    font-size: 20px;
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 20px;
    align-self: flex-start;
    margin-left: 15px;
`;
const GridContainerTemplate = styled.div`
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: auto;
    grid-gap: 20px;
    @media only screen and (max-width: 996px){
        grid-template-columns: repeat(2, minmax(220px,1fr));
        width:97%;
    }
`;
function GridTemplate({titletext, object}) {
    return (
        <Template>
            <TitleText>{titletext}</TitleText>
            <GridContainerTemplate>
            {
                object.map((obj,idx)=>(
                    <Grid
                    obj={obj}
                    key={`Grid-${idx}`}
</Grid>
                ))
            }
            </GridContainerTemplate>
        </Template>
    )
}

export default GridTemplate

GridContainerTemplateの4つ->2つ

const GridContainerTemplate = styled.div`
    display: grid;

/* 최초 4개의 컬럼 유지 ! */
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: auto;
    grid-gap: 20px;

/* 996px 이하가 되면 최소 220px 최대 1fr크기를 가지는 컬럼 유지 ! */
    @media only screen and (max-width: 996px){
        grid-template-columns: repeat(2, minmax(220px,1fr));
        width:97%;
    }
`;

Grid-itemのサイズを幅とともに変化させる
:内部要素の幅または高さのいずれかをautoとし、残りの要素をサイズとして指定すると、幅に応じて比例して

のサイズが変更されます.
(Grid.js)

...
const GridTemplate = styled.div`
    display: flex;
    flex-direction: column;
    width: 235px;
    height: 292px;
    padding-bottom: 64px;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    @media only screen and (max-width: 996px){
        width:100%;
        height:auto;
    }
`;
const Img = styled.img`
    width: 235px;
    height: 160px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
    &:hover {
        transform:scale(1.05);
        ${Like} {
            transform:scale(1.2);
        }
    }
    @media only screen and (max-width: 996px){
        width:100%;
        height:auto;
    }
`;
...
function Grid({obj}) {
    return (
        <GridTemplate>
            <Like>
                <LikeImg src="https://tumblbug.com/wpa/1d4978f729cd37a38573e85f399b74c1.png"></LikeImg>
            </Like>
            <Img src={obj.img}></Img>
            <TextBox>
                <TagText>{obj.tagText}</TagText>
                <TitleText>{obj.titleText}</TitleText>
            </TextBox>
            <SuccessRate>{obj.successRate}</SuccessRate>
        </GridTemplate>
    )
}

GridTemplateのwid:100%,height:autoであるため,同じ割合を保つと同時に内部元素も変化する

その他内蔵Imgタグの幅:100%、高さ:自動指定

Grid-item hover効果

[プレビュー]

grid-itemにマウスを置いたときの画像拡大の効果
:scaleを追加し、オーバーフロー部分

を非表示にする

const Img = styled.img`
    width: 235px;
    height: 160px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
    &:hover {
        transform:scale(1.05);
    }
    @media only screen and (max-width: 996px){
        width:100%;
        height:auto;
    }
`;

ImageSliderへの反作用の追加

[原理]

Grid-同じ割合で項目を縮小するのと同じ原理

を用いる.

ImageSliderにMediaqueryを追加
(git-hub参照)

[コード]

(Slider.js)

...
const SliderTemplate = styled.div`
    display: flex;
    justify-content: flex-start;
    position: relative;
    @media screen and (max-width: 960px){
        display: flex;
        flex-direction: column;
        width:100%;
        height:auto;
    }
`;

ImageSliderでは、画像の一部がImageSlider全体の構造をflex-direction:columとし、内部Imgの大きさはwid:100%であるため、内部要素

を修正する必要はない.

テキスト部分も同様の原理を使用して、外部ボックスをwid:100%、height:autoに設定しようとしたが、なかった.
->imgラベルでいいです.divではできません.

したがって、トランジションを放棄し、条件レンダリングで解決します.
(SideText.js)

function SideText({chIdx, obj, onClickLeftButton, onClickRightButton}) {

    return (
   /* 해당되는 텍스트만 width:100%로 출력하게 했음 */
        chIdx == obj.idx?
        <>
            <SideWrap chIdx={chIdx}>
                <TextBox>
                        <MainText>
                            <MainTxt1>{obj.mainTxt1}</MainTxt1>
                            <MainTxt2>{obj.mainTxt2}</MainTxt2>
                        </MainText>
                        <SubText>{obj.subTxt}</SubText>
                </TextBox>
                <ButtonAndPage>
                    <ButtonBox>
                        <ButtonLeft
                         onClick={onClickLeftButton}>
                            <i className="fas fa-chevron-left"></i>
                        </ButtonLeft>
                        <ButtonRight
                        onClick={onClickRightButton}>
                            <i className="fas fa-chevron-right"></i>
                        </ButtonRight>
                    </ButtonBox>
                    <PageCnt>{obj.idx+1}&nbsp;/&nbsp;5</PageCnt>
                </ButtonAndPage>
            </SideWrap>
        </>
        :null
    )
}

最終結果