Commit 308d5b7f authored by Soo Hyun Kim's avatar Soo Hyun Kim
Browse files

0127 전체css완

parent 6a147e31
...@@ -126,7 +126,7 @@ function Chat(props) { ...@@ -126,7 +126,7 @@ function Chat(props) {
return ( return (
<div id="chat" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#4A5D7E", backgroundColor: "#FFFFFF", padding: '15px', width: "100%", height: "580px", position: "relative" }}> <div id="chat" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#4A5D7E", backgroundColor: "#FFFFFF", padding: '15px', width: "100%", height: "90vh", position: "relative" }}>
<div id="chat-head" style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", width: "100%", height: "80px" }}> <div id="chat-head" style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", width: "100%", height: "80px" }}>
<a href="#;" onClick={handleClick} style={{ margin: "0px 0px 0px 15px" }}><BsCaretLeftFill size="20" color="#333333" /></a> <a href="#;" onClick={handleClick} style={{ margin: "0px 0px 0px 15px" }}><BsCaretLeftFill size="20" color="#333333" /></a>
<div style={{ justifyContent: "center" }}> <div style={{ justifyContent: "center" }}>
...@@ -142,7 +142,7 @@ function Chat(props) { ...@@ -142,7 +142,7 @@ function Chat(props) {
<a href="#;" onClick={() => setExit(!exit)}><BsX size="1em" color="#F2D788" /></a> <a href="#;" onClick={() => setExit(!exit)}><BsX size="1em" color="#F2D788" /></a>
</div> </div>
: null} : null}
<div id="chat-body" style={{ overflow: 'auto', padding: '15px', width: "100%", height: "400px", margin: "1%", background: '' }}> <div id="chat-body" style={{ overflow: 'auto', padding: '15px', width: "100%", height: "75%", margin: "1%", background: '' }}>
{chat.map((value, index) => { {chat.map((value, index) => {
if (!(value.msg === '')) { if (!(value.msg === '')) {
if (value.sender === "system") { if (value.sender === "system") {
......
...@@ -16,7 +16,8 @@ function ClosedList(props) { ...@@ -16,7 +16,8 @@ function ClosedList(props) {
} }
return ( return (
<div> <div style={{height: "80vh"}}>
<div style={{overflow: 'auto', height:"100%"}}>
{props.closedlist.map((item, index) => {props.closedlist.map((item, index) =>
<ListGroup key={index}> <ListGroup key={index}>
<ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} value={item.roomName}> <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} value={item.roomName}>
...@@ -27,6 +28,7 @@ function ClosedList(props) { ...@@ -27,6 +28,7 @@ function ClosedList(props) {
) )
} }
</div > </div >
</div>
) )
} }
......
import React, { useState } from 'react' import React from 'react'
import { Navbar, Nav } from 'react-bootstrap'; import { Nav } from 'react-bootstrap';
import { handleLogout } from '../utils/auth'; import { handleLogout } from '../utils/auth';
import styled from 'styled-components';
import { BsPeopleCircle } from "react-icons/bs"; import { BsPeopleCircle } from "react-icons/bs";
import { AiOutlineLogout } from "react-icons/ai"; import { AiOutlineLogout } from "react-icons/ai";
import "../menu.css";
function Menu() { function Menu(props) {
const [showIcon, setShowIcon] = useState(false);
const name = sessionStorage.getItem('name'); const name = sessionStorage.getItem('name');
console.log('showIcon', showIcon)
return ( return (
<MenuDiv setShowIcon={setShowIcon}> <div className="container-fluid" style={{ display: "flex", flexDirection: "row", backgroundColor: "#61477a", heigth: "100%", position: "relative" }}>
<Navbar style={{ backgroundColor: "#61477a", heigth: "100%" }} variant="dark"> <p className="navbar-brand" href="/home" style={{color: 'white', alignItems: "center"}}>YDK Messenger</p>
<div className="container-fluid">
<Navbar.Brand className="navbar-brand" href="/home">YDK Messenger</Navbar.Brand>
{name ? {name ?
<> <>
<Nav className="nav navbar-nav mr-auto" style={{ color: 'white' }}> <div className="nav navbar-nav mr-auto" style={{ color: 'white', display: "flex", flexDirection: "row", alignItems: "center"}}>
<Nav.Item className="mt-2 mr-4">{name} 환영합니다</Nav.Item> <p className="mt-2 mr-4">{name} 환영합니다</p>
{ showIcon ? <div className="showText">
<a href="/profile"><BsPeopleCircle size="15" color="#FFFFFF"/></a> <a href="/profile" style={{color:"#FFFFFF", marginRight: "15px"}}>{'Profile'}</a>
:<Nav.Link href="/profile">Profile</Nav.Link>} <a onClick={() => handleLogout()} href="/login" style={{color:"#FFFFFF"}}>{'logout'}</a>
{ showIcon ? </div>
<a href="/login" onClick={() => handleLogout()}><AiOutlineLogout size="15" color="#FFFFFF"/></a> <div className="showIcon">
:<Nav.Link onClick={() => handleLogout()} href="/login">logout</Nav.Link>} <a href="/profile" style={{marginRight: "15px"}}><BsPeopleCircle size="25" color="#FFFFFF" /></a>
</Nav> <a href="/login" onClick={() => handleLogout()}><AiOutlineLogout size="25" color="#FFFFFF" /></a>
</div>
</div>
</> </>
: <> : <>
<Nav className="nav navbar-nav"> <Nav className="nav navbar-nav">
...@@ -35,16 +33,7 @@ function Menu() { ...@@ -35,16 +33,7 @@ function Menu() {
</Nav> </Nav>
</>} </>}
</div> </div>
</Navbar>
</MenuDiv>
) )
} }
const MenuDiv = styled.div`
@media (max-width: 500px) {
display: 'none';
}
`
export default Menu export default Menu
...@@ -17,7 +17,7 @@ function OpenList(props) { ...@@ -17,7 +17,7 @@ function OpenList(props) {
} }
return ( return (
<div> <div style={{overflow: 'auto', height: "80vh"}}>
{props.openlist.map((item, index) => {props.openlist.map((item, index) =>
<ListGroup key={index}> <ListGroup key={index}>
<ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId}> <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId}>
......
...@@ -170,9 +170,9 @@ function Home() { ...@@ -170,9 +170,9 @@ function Home() {
}, []) }, [])
return ( return (
<div style={{weight: "100vw", height:"100vh", backgroundColor: "#4A5D7E"}}> <div style={{ weight: "100vw", height: "100vh", backgroundColor: "" }}>
<Menu style={{weight:"100%", height: "10%"}}/> <Menu style={{ weight: "100%", height: "10%" }} />
<Row className="mr-0" style={{weight:"100%", height: "80%"}}> <Row className="mr-0" style={{ weight: "100%", height: "80%" }}>
<Col className="list" md={5}> <Col className="list" md={5}>
<Sdiv chat={chat}> <Sdiv chat={chat}>
<Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" > <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" >
......
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import Menu from '../Components/Menu'; import Menu from '../Components/Menu';
import styled from 'styled-components';
import { Image, Button, Container, Form, Row, Col } from 'react-bootstrap'; import { Image, Button, Container, Form, Row, Col } from 'react-bootstrap';
import { BrowserRouter as Link } from 'react-router-dom'; import { BrowserRouter as Link } from 'react-router-dom';
import axios from 'axios' import axios from 'axios'
......
.showText {
display: flex;
flex-direction: row;
margin-right: 5px;
margin-left: 5px;
position: absolute;
right: 0;
}
.showIcon {
display: none;
}
@media screen and (max-width: 768px) {
.showText {
display: none;
}
.showIcon {
display: flex;
flex-direction: row;
margin-right: 5px;
margin-left: 5px;
position: absolute;
right: 0;
}
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment