diff --git a/src/assets/data_visualization.jpeg b/src/assets/data_visualization.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..ec1e52b40ebc2f0c3a0f665fc7c3625a3cc27d2a Binary files /dev/null and b/src/assets/data_visualization.jpeg differ diff --git a/src/pages/commitListPage/commitListPage.tsx b/src/pages/commitListPage/commitListPage.tsx index 25c0240881ead5f89b1c2124c91bf2713da0bd4b..7b1979841e3951dd0546d0cba6158030d9896f62 100644 --- a/src/pages/commitListPage/commitListPage.tsx +++ b/src/pages/commitListPage/commitListPage.tsx @@ -26,8 +26,9 @@ const SingleCommit: FC<iSingleCommit> = (props) => { <div className={style.Description}> <b>Author: </b> <p> - {props.author_name} at {props.created_at.getUTCDate()}.{props.created_at.getUTCMonth()+1} - - {props.created_at.getUTCHours()}:{props.created_at.getUTCMinutes()} + {props.author_name} at {props.created_at.getUTCDate()}.{props.created_at.getUTCMonth() + 1} + - {props.created_at.getUTCHours() + 2}:{props.created_at.getUTCMinutes().toString().length === 2 + ? props.created_at.getUTCMinutes() : "0" + props.created_at.getUTCMinutes().toString()} </p> </div> </div>) @@ -54,7 +55,7 @@ const CommitComponent = (props: commitProps) => { <div> <ul className={style.UlList}> {commitList} - {commitList?.length===0?<li>Opps! Too far, go back!</li>:<></>} + {commitList?.length === 0 ? <li>Opps! Too far, go back!</li> : <></>} </ul> </div> ); diff --git a/src/pages/landingPage/landingPage.module.css b/src/pages/landingPage/landingPage.module.css index 8dca7a0c75adf1db100c359c2f28290e56cd9d0a..82bc423dfe2d01bd9f7df9c9c7c767517ebf0549 100644 --- a/src/pages/landingPage/landingPage.module.css +++ b/src/pages/landingPage/landingPage.module.css @@ -1,4 +1,7 @@ +.picture{ + max-width: 550px; +} .inputField{ width: 50%; @@ -11,12 +14,26 @@ margin-left: 15%; display: flex; flex-direction: column; + background-color: #1C1644; + height: 100%; } form { display: flex; flex-direction: column; - +} + +.buttonDiv{ + margin-left: 20%; + width: 60%; + flex-direction: row; + display: flex; + justify-content: space-between; + margin-bottom: 50px; +} + +button{ + width: 130px; } .defaultButton { diff --git a/src/pages/landingPage/landingPage.tsx b/src/pages/landingPage/landingPage.tsx index 05e7a03ba5450ab3bc4232d4df38af84f387b09e..0a7f48b2c3d083bdea3ee90bbaa7e39b3a5ff4e2 100644 --- a/src/pages/landingPage/landingPage.tsx +++ b/src/pages/landingPage/landingPage.tsx @@ -6,7 +6,8 @@ import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import { ConnectionTest, queryTypes } from "../../utils/queryType"; import { useGitlabApi } from "../../utils/gitlab_api_service"; -import visualization from "../../assets/gitlab.jpeg"; +//import visualization from "../../assets/gitlab.jpeg"; +import visualization from "../../assets/data_visualization.jpeg"; const LandingPage = () => { @@ -69,16 +70,18 @@ const LandingPage = () => { return ( <div className={style.inputWrapper}> - <img alt="visualization" src={visualization} style={{width: "80%", margin: "30px auto" }}/> - <button className={style.defaultButton} onClick={()=> setDefaultValues()}>set default values</button> + <img className={style.picture} alt="visualization" src={visualization} style={{width: "80%", margin: "30px auto" }}/> <form onSubmit={handleSubmit}> <input className={style.inputField} value = {projectId} type="Text" onChange={e => setProjectId(e.target.value)} id="ProjektIDInput" placeholder="ProjectId" required/> <input className={style.inputField} value = {key} type="Text" onChange={e => setKey(e.target.value)} id="KeyInput" placeholder="Key" required/> - <button className={style.submitButton} type="submit" disabled={disableButton}>Use values</button> - <ToastContainer autoClose={3000} /> + <div className={style.buttonDiv}> + <button className={style.defaultButton} onClick={()=> setDefaultValues()}>Set default values</button> + <button className={style.submitButton} type="submit" disabled={disableButton}>Use current values</button> + </div> </form> + <ToastContainer autoClose={2000} /> </div> ); diff --git a/src/pages/overviewPage/Overview.tsx b/src/pages/overviewPage/Overview.tsx index ed452fde0c94cc9e432e77117734a81f52942afd..b30e08e872d2262521e2b8c4893165c4d17cf7b4 100644 --- a/src/pages/overviewPage/Overview.tsx +++ b/src/pages/overviewPage/Overview.tsx @@ -1,32 +1,39 @@ import style from './overview.module.css'; -import React, { useState, useEffect } from 'react'; -import { useHistory } from 'react-router'; -import { useGitlabApi } from '../../utils/gitlab_api_service'; -import { Languages, queryTypes } from '../../utils/queryType'; +import React, {useState, useEffect} from 'react'; +import {useHistory} from 'react-router'; +import {useGitlabApi} from '../../utils/gitlab_api_service'; +import {Languages, queryTypes} from '../../utils/queryType'; import StatsBox from '../../components/stats/statsBox'; -import { ClipLoader } from 'react-spinners'; -import { toast, ToastContainer } from 'react-toastify'; +import {ClipLoader} from 'react-spinners'; +import {toast, ToastContainer} from 'react-toastify'; const OverviewPage = () => { const slug = window.location.pathname; const history = useHistory(); - const {data, isLoading, error } = useGitlabApi(queryTypes.Languages); - + const {data, isLoading, error} = useGitlabApi(queryTypes.Languages); + return ( <div className={style.wrapper}> - <h1>Stats:</h1> - {isLoading ? <ClipLoader loading={isLoading}/> : - <StatsBox content={data as Languages ? Object.entries(data as Languages).map(element => `${element[0]}: ${element[1]} %`): ["Loading ..."] } /> - } - <h2 style={{marginTop: "50px"}}>More info:</h2> - <div className={style.buttonWrapper}> - <button className={style.button} onClick= {() => history.push(slug=== "/overview" ? "/issue" : `${slug}graph`)}> - {slug=== "/overview" ? "Issues" : "Graph"} - </button> - <button className={style.button} onClick= {() => history.push(slug=== "/overview" ? "/commit" : `${slug}list`)}> - {slug=== "/overview" ? "Commits" : "List"} - </button> + <div className={style.stats}> + <h1>Stats:</h1> + {isLoading ? <ClipLoader loading={isLoading}/> : + <StatsBox + content={data as Languages ? Object.entries(data as Languages).map(element => `${element[0]}: ${element[1]} %`) : ["Loading ..."]}/> + } + </div> + <div className={style.buttons}> + <h1 style={{marginTop: "50px"}}>More info:</h1> + <div className={style.buttonWrapper}> + <button className={style.button} + onClick={() => history.push(slug === "/overview" ? "/issue" : `${slug}graph`)}> + {slug === "/overview" ? "Issues" : "Graph"} + </button> + <button className={style.button} + onClick={() => history.push(slug === "/overview" ? "/commit" : `${slug}list`)}> + {slug === "/overview" ? "Commits" : "List"} + </button> + </div> </div> </div> ); diff --git a/src/pages/overviewPage/overview.module.css b/src/pages/overviewPage/overview.module.css index 69289f747d8f6637155a9afd16f11103a51587da..121c0423ba9f53738fc4ef129f1ce3e19de26115 100644 --- a/src/pages/overviewPage/overview.module.css +++ b/src/pages/overviewPage/overview.module.css @@ -1,8 +1,24 @@ + .wrapper { + display: grid; + grid-template-columns: 1fr 4fr; + grid-column-gap: 1em; + grid-row-gap: 1em; +} + +.stats{ + background-color: lightgrey; + border-radius: 10px; + padding: 20px; display: flex; flex-direction: column; - width: 100%; - align-items: center; + +} + +.buttons{ + background-color: lightcoral; + border-radius: 10px; + padding: 20px; } .buttonWrapper{ @@ -10,7 +26,7 @@ flex-direction: row; justify-content: center; width: 100%; - height: 40%; + height: 100%; } .button{ @@ -20,6 +36,8 @@ height: 250px; border-radius: 16px; margin: 75px; + text-align: center; + font-size: 3em; } .button:hover,