Untitled
unknown
plain_text
10 months ago
7.9 kB
3
Indexable
import React from 'react'; import { withPage, Navigate } from '@d-lift/core'; import { Card, Page, Button, Para, Group, Column, Label, Row, Grid, Image, Header, } from '@d-lift/uxcomponents'; import BodySection from '../../Layout/BodySection'; import './home.scss'; import RFIUtil from '@/Util/RFIUtil'; const Home = () => { return ( <Page> <BodySection> <Card className="ux-rfi-grid-home"> <Row className="d-flex mt-2 mb-2 flex-sm-column flex-md-row"> <div className="col-md-6 col-sm-12"> <Header className="ux-rfi-heading" labelKey="HST_knowledge_collab"></Header> <Para className="ux-rfi-content mt-2" labelKey="header_content"></Para> </div> <div className="col-md-6 col-sm-12"> <Image src="../../../images/landingPageImg.png" className="img-fluid" /> </div> </Row> </Card> <Group width="5,7"> <div className="abc m-5"> <div className="p-2 ux-rfi-green-bg rounded-top ux-rfi-black-border border-bottom-0"> <Para> <Label className="pt-2 pl-2 ux-rfi-green-bg-font ux-rfi-font" labelKey="green_card_content"></Label> <Label className="pt-1 pl-2 ux-rfi-green-bg-font ux-rfi-font" labelKey="green_card_content_2"></Label> </Para> </div> <div class="bg-white pt-2 rounded-bottom ux-rfi-black-border border-top-0 d-flex justify-content-center"> <Button id="knowledgeBase-btn" className="ux-rfi-white-button" labelKey="knowledge_base"></Button> </div> </div> <div className="abc2 m-5 ux-rfi-black-border-round"> <div className="d-flex justify-content-center"> <Label className="ux-rfi-round-label" labelKey="requests_for_info"></Label> </div> <Grid> <Row className=""> <Column className="mt-3"> <Para className="ux-rfi-content2" labelKey="white_card_left_content"></Para> <div className="d-flex justify-content-center"> <Button id="search-rfi-btn" className="ux-rfi-white-button mt-4 pr-6" labelKey="search_rfi" mode="link" click={() => Navigate.to('/search')}></Button> </div> </Column> <Column className="mt-3 ux-rfi-vertical-line"> <Para className="ux-rfi-content2" labelKey="white_card_right_content"></Para> <div className="d-flex justify-content-center"> <Button id="request-info-btn" className="ux-rfi-white-button mt-4" labelKey="request_info" mode="link" disabled={!RFIUtil.isAdmin() && !RFIUtil.isPOC()} click={() => Navigate.to('/create-rfi')}></Button> </div> </Column> </Row> </Grid> </div> </Group> </BodySection> </Page> ); }; export default withPage( { Description: 'Home Page', ContentManager: true, LayoutStyle: 'rfi-dashboard', TemplateOptions: { cardWorkFlow: true }, }, Home, ); .ux-rfi-heading{ font-family: Roboto !important; font-size: 1.7rem; font-weight: 400; text-align: left; } .ux-rfi-content{ @extend .ux-rfi-heading; font-size: 1rem !important; padding-top: 10px; } .ux-rfi-grid-home{ background-color: #CEE3B7 !important; padding-left: 20px; padding-right: 20px; } .ux-rfi-green-bg{ background-color: #70A71C !important; } .ux-card-body{ padding: none !important; } .ux-rfi-font{ font-family: sans-serif !important; } .ux-rfi-green-bg-font{ @extend .ux-rfi-font; color: #FFFFFF; font-size: 1rem; font-weight: 400; text-align: left; } .ux-rfi-content2{ @extend .ux-rfi-font; @extend .ux-rfi-green-bg-font; font-size: 0.8rem !important; color: #000000; } .ux-rfi-round-label{ @extend .ux-rfi-font; color: black; font-size: 1rem; border: 2px solid #000000; border-radius: 50px; padding: 5px 10px; text-align: center; margin-top: -30px; background-color: white; } .ux-rfi-vertical-line{ height: 60%; border-left: 2px solid #70A71C; @media (max-width: 430px){ border-left: 0px; } @media (min-width: 547px) and (max-width: 767px) { border-left: 0px; } @media (min-width: 792px) and (max-width: 997px) { border-left: 0px; } } // .abc{ // @media (min-width: 455px){ // margin: 32px; // } // @media (min-width: 290px) and (max-width: 454px) { // margin: 2px; // margin-top: 7px; // } // } // .abc2{ // @media (min-width: 455px){ // margin-top: 45px; // } // @media (min-width: 290px) and (max-width: 454px) { // margin: 2px; // margin-top: 25px; // } // } //below 791 it should be below. column layout (request for info) // .button_abc{ // @media (min-width: 455px){ // margin-top: 5px // } // @media (min-width: 290px) { // margin: 2px; // margin-top: 25px; // } // } All the content withing the group should be one below the other for the size of the screen beow 792. Bot the div and grid sections in the Group should be of the same size of the above card section in mobile view (anything below 792px) Write the code for this. The content inside group should be next to each other in width=(5,7) when the width of the screen is above 792px
Editor is loading...
Leave a Comment