The cop4331_largeproject from rna-devknight

Update to have button animations

cop4331_largeproject/frontend/src/pages/Home.js

Lines 342 to 344 in a67170a

    
           <img className="reject-icon" src="./close.png" onClick={swipe_left}></img> 
        
           <img className="accept-icon" src="./heart.png" onClick={swipe_right}></img>

react-switch dependency not on the server.

Determine if there is an alternative or if this is the only way.

cop4331_largeproject/frontend/src/pages/SignUp.js

Line 2 in d86a362

// import Switch from 'react-switch';

Page paths need to be referenced before working on these pages.

Make sure to uncomment the appropriate page once done working with it.

cop4331_largeproject/frontend/src/App.js

Lines 54 to 65 in d86a362

    
           {/*  
        
                   <Route path="/Home" exact> 
        
                     <Home/> 
        
                   </Route> 
        
                   <Route path="/MatchList" exact> 
        
                     <MatchList/> 
        
                   </Route> 
        
                   <Route path="/Settings" exact> 
        
                     <Settings/> 
        
                   </Route> */}

Update formatting

cop4331_largeproject/frontend/src/pages/Home.js

Lines 171 to 178 in a67170a

    
           {match_list && match_list.map((list) => 
        
               <li key={list.name}> 
        
                   <div className='match_list'> 
        
                       <span className='match_list_name'>{list.display_name_str}</span><br/> 
        
                       <span className='match_list_email'>{list.email_str}</span><br/> 
        
                       <span className='match_list_phone'>{list.phone_str}</span><br/> 
        
                   </div> 
        
               </li>

Determine if dependency work around is required.

This is an alternative way of using material-UI without having to install any dependency. This is not recommended for live environments since it loads everything before displaying the site. Determine whether we should install material-UI or not.

cop4331_largeproject/frontend/public/index.html

Lines 29 to 44 in 1f8d7c8

    
           <!-- Using Material UI CDN --> 
        
           <!-- React --> 
        
           <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script> 
        
           <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script> 
        
           <!-- MUI --> 
        
           <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script> 
        
           <!-- Babel --> 
        
           <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script> 
        
           <!-- Fonts to support Material Design --> 
        
           <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> 
        
           <!-- Icons to support Material Design --> 
        
           <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

Make this a link leading to the mainpage

cop4331_largeproject/frontend/src/pages/MainPage.js

Line 21 in 9afce18

<h1 className='top_title'>Kindling</h1><br/>

Background not displaying correctly.

Might be an issue with the CSS or where the background is placed. The .main-page class does not expand to fill the page.

cop4331_largeproject/frontend/src/pages/MainPage.js

Lines 17 to 34 in d86a362

    
           <div className="main-page" style={{backgroundImage: 'url("/background.png")'}}> 
        
             <div> 
        
               {/* Icon */}{/* span */} 
        
               <img class='fire' id='small_icon' src='/kindling-icon.png'></img><br/> 
        
               <h1 className='top_title'>Kindling</h1><br/> 
        
               {/* big icon */} 
        
               <img class='fire_hand' id='small_icon' src='/fire-hand.png'></img><br/> 
        
               {/* span */} 
        
               <h1 className='center_text'>Kindle An Innovation</h1><br/> 
        
               {/* buttom */} {/* buttom */} 
        
               <button className='btn' id='signup_btn' onClick={toSignUp}>Sign Up</button> 
        
               <button className='btn' id='login_btn' onClick={toLogIn}>Log In</button><br/> 
        
             </div> 
        
           </div>

cop4331_largeproject/frontend/src/App.css

Lines 52 to 124 in d86a362

    
           .main-page { 
        
             background-color: #000000; 
        
             background-repeat: no-repeat; 
        
             min-height: 100%; 
        
             max-height: 100%; 
        
           } 
        
           .main-header { 
        
             min-height: 100%; 
        
             background-position: center; 
        
             background-repeat: no-repeat; 
        
             background-size: cover; 
        
             border: 10px solid blue; 
        
             display: inline-block; 
        
           } 
        
           .main-left { 
        
             float: left; 
        
           } 
        
           .main-right { 
        
             float: right; 
        
             justify-content: center; 
        
             margin-top: 45px; 
        
           } 
        
           .fire 
        
           { 
        
               position: absolute; 
        
               left: 50px; 
        
               top: 50px; 
        
           } 
        
           .top_title 
        
           { 
        
               position: absolute; 
        
               top: 70px; 
        
               left: 150px; 
        
               color: white; 
        
               size: 40px; 
        
           } 
        
           .fire_hand 
        
           { 
        
               position: absolute; 
        
               top: 30%; 
        
               left: 45%; 
        
               display: block; 
        
               width: 200px; 
        
               height: 200px; 
        
           } 
        
           .center_text 
        
           { 
        
               top: 52%; 
        
               left: 40%; 
        
               position: absolute; 
        
               color: white; 
        
               font-size: 300%;  
        
           } 
        
           .btn  
        
           { 
        
               position: absolute; 
        
               display: inline-block; 
        
               padding: 20px 100px; 
        
               font-size: 24px; 
        
               text-align: center; 
        
               text-decoration: none; 
        
               color: #fff; 
        
               border-radius: 15px; 
        
               overflow: visible; 
        
           }

Material-UI Dependency not on the server.

Determine if there is an alternative.

cop4331_largeproject/frontend/src/pages/MatchList.js

Lines 3 to 9 in d86a362

    
           // import Table from '@material-ui/core/Table'; 
        
           // import TableBody from '@material-ui/core/TableBody'; 
        
           // import TableCell from '@material-ui/core/TableCell'; 
        
           // import TableContainer from '@material-ui/core/TableContainer'; 
        
           // import TableHead from '@material-ui/core/TableHead'; 
        
           // import TableRow from '@material-ui/core/TableRow'; 
        
           // import Paper from '@material-ui/core/Paper';

Align with logo

cop4331_largeproject/frontend/src/App.css

Lines 83 to 89 in 9afce18

    
           .top_title { 
        
            position: absolute; 
        
            top: 70px; 
        
            left: 150px; 
        
            color: white; 
        
            size: 40px; 
        
           }

Using dependency that does not exist on main server.

Determine if another approach is possible or viable. If not, respond with the dependency that needs to be installed.

cop4331_largeproject/frontend/src/pages/Home.js

Line 2 in 1f8d7c8

// import TinderCard from 'react-tinder-card';

Dependency tinder-cards not on the server.

cop4331_largeproject/frontend/src/pages/Home.js

Lines 50 to 56 in d86a362

    
           //                     <TinderCard className='swipe'  
        
           //                     key={person.name} 
        
           //                     preventSwipe={['up','down']}> 
        
           //                         <div className="card"> 
        
           //                             <h3>{person.name}</h3> 
        
           //                         </div> 
        
           //                     </TinderCard>

Would be nice to add an image preview of the logged in user.

cop4331_largeproject/frontend/src/pages/Home.js

Lines 152 to 153 in dbb0c05

    
           <Row className="settings-content"> 
        
               <Col className="input-block">

rna-devknight / cop4331_largeproject Goto Github PK

cop4331_largeproject's Introduction

Hello there 👋

cop4331_largeproject's People

Contributors

cop4331_largeproject's Issues

Update to have button animations

react-switch dependency not on the server.

Page paths need to be referenced before working on these pages.

Update formatting

Determine if dependency work around is required.

Make this a link leading to the mainpage

Background not displaying correctly.

Material-UI Dependency not on the server.

Align with logo

Using dependency that does not exist on main server.

Dependency tinder-cards not on the server.

Would be nice to add an image preview of the logged in user.

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	<img className="reject-icon" src="./close.png" onClick={swipe_left}></img>

	<img className="accept-icon" src="./heart.png" onClick={swipe_right}></img>

	{/*
	<Route path="/Home" exact>
	<Home/>
	</Route>

	<Route path="/MatchList" exact>
	<MatchList/>
	</Route>

	<Route path="/Settings" exact>
	<Settings/>
	</Route> */}

	{match_list && match_list.map((list) =>
	<li key={list.name}>
	<div className='match_list'>
	<span className='match_list_name'>{list.display_name_str}</span><br/>
	<span className='match_list_email'>{list.email_str}</span><br/>
	<span className='match_list_phone'>{list.phone_str}</span><br/>
	</div>
	</li>

	<!-- Using Material UI CDN -->
	<!-- React -->
	<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
	<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>

	<!-- MUI -->
	<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>

	<!-- Babel -->
	<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>

	<!-- Fonts to support Material Design -->
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

	<!-- Icons to support Material Design -->
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

	<div className="main-page" style={{backgroundImage: 'url("/background.png")'}}>
	<div>
	{/* Icon /}{/ span */}
	<img class='fire' id='small_icon' src='/kindling-icon.png'></img><br/>

	<h1 className='top_title'>Kindling</h1><br/>

	{/* big icon */}
	<img class='fire_hand' id='small_icon' src='/fire-hand.png'></img><br/>

	{/* span */}
	<h1 className='center_text'>Kindle An Innovation</h1><br/>

	{/* buttom /} {/ buttom */}
	<button className='btn' id='signup_btn' onClick={toSignUp}>Sign Up</button>
	<button className='btn' id='login_btn' onClick={toLogIn}>Log In</button><br/>
	</div>
	</div>

	.main-page {
	background-color: #000000;
	background-repeat: no-repeat;
	min-height: 100%;
	max-height: 100%;
	}

	.main-header {
	min-height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border: 10px solid blue;
	display: inline-block;
	}

	.main-left {
	float: left;
	}

	.main-right {
	float: right;
	justify-content: center;
	margin-top: 45px;
	}

	.fire
	{
	position: absolute;
	left: 50px;
	top: 50px;
	}

	.top_title
	{
	position: absolute;
	top: 70px;
	left: 150px;
	color: white;
	size: 40px;
	}

	.fire_hand
	{
	position: absolute;
	top: 30%;
	left: 45%;
	display: block;
	width: 200px;
	height: 200px;
	}

	.center_text
	{
	top: 52%;
	left: 40%;
	position: absolute;
	color: white;
	font-size: 300%;
	}

	.btn
	{
	position: absolute;
	display: inline-block;
	padding: 20px 100px;
	font-size: 24px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	border-radius: 15px;
	overflow: visible;
	}

	// import Table from '@material-ui/core/Table';
	// import TableBody from '@material-ui/core/TableBody';
	// import TableCell from '@material-ui/core/TableCell';
	// import TableContainer from '@material-ui/core/TableContainer';
	// import TableHead from '@material-ui/core/TableHead';
	// import TableRow from '@material-ui/core/TableRow';
	// import Paper from '@material-ui/core/Paper';

	.top_title {
	position: absolute;
	top: 70px;
	left: 150px;
	color: white;
	size: 40px;
	}

	// <TinderCard className='swipe'
	// key={person.name}
	// preventSwipe={['up','down']}>
	// <div className="card">
	// <h3>{person.name}</h3>
	// </div>
	// </TinderCard>

	<Row className="settings-content">
	<Col className="input-block">