Skip to content
Snippets Groups Projects
Commit 334278d5 authored by Andreas Rystad's avatar Andreas Rystad
Browse files

merge with master

parents 7567fddf 0258603b
No related branches found
No related tags found
No related merge requests found
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
align-self: center; align-self: center;
} }
@media only screen and (max-width: 500px){ @media screen and (max-width: 500px){
[class*="wrapper"] { .wrapper {
width: 100%; width: 100%;
} }
} }
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
} }
@media only screen and (max-width: 500px){ @media only screen and (max-width: 500px){
[class*="pieChartContainer"] { .pieChartContainer {
width: 100%; width: 100%;
} }
} }
......
.wrapper { .wrapperStats {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border-radius: 16px; border-radius: 16px;
background-color: lightslategray; background-color: lightslategray;
padding: 15px; padding: 15px;
font-size: 24px;
}
@media (max-width:600px) {
.wrapperStats {
width: 60%;
font-size: 16px;
}
} }
\ No newline at end of file
...@@ -7,7 +7,7 @@ interface StatsBoxProps { ...@@ -7,7 +7,7 @@ interface StatsBoxProps {
const StatsBox: React.FC<StatsBoxProps> = ({content }) => { const StatsBox: React.FC<StatsBoxProps> = ({content }) => {
return ( return (
<div className={style.wrapper}> <div className={style.wrapperStats}>
{content.map(element => <p key={element} style={{margin: "10px auto", padding: "10px auto"}}>{element}</p>)} {content.map(element => <p key={element} style={{margin: "10px auto", padding: "10px auto"}}>{element}</p>)}
</div> </div>
); );
......
import style from './overview.module.css'; import style from './overview.module.css';
import React, {useState, useEffect} from 'react';
import { useHistory } from 'react-router'; import { useHistory } from 'react-router';
import { useGitlabApi } from '../../utils/gitlab_api_service'; import { useGitlabApi } from '../../utils/gitlab_api_service';
import { Languages, queryTypes } from '../../utils/queryType'; import { Languages, queryTypes } from '../../utils/queryType';
import StatsBox from '../../components/stats/statsBox'; import StatsBox from '../../components/stats/statsBox';
import { ClipLoader } from 'react-spinners'; import { ClipLoader } from 'react-spinners';
import {toast, ToastContainer} from 'react-toastify';
const OverviewPage = () => { const OverviewPage = () => {
const slug = window.location.pathname; const slug = window.location.pathname;
const history = useHistory(); const history = useHistory();
const {data, isLoading, error } = useGitlabApi(queryTypes.Languages); const {data, isLoading, error } = useGitlabApi(queryTypes.Languages);
return ( return (
<div className={style.wrapper}> <div className={style.wrapper}>
<div className={style.stats}> {slug==="/overview" ?<h1>Stats:</h1>: null}
<h1>Stats:</h1>
{isLoading ? <ClipLoader loading={isLoading}/> : {isLoading ? <ClipLoader loading={isLoading}/> :
<StatsBox slug==="/overview" ?<StatsBox content={data as Languages ? Object.entries(data as Languages).map(element => `${element[0]}: ${element[1]} %`): ["Loading ..."] } />
content={data as Languages ? Object.entries(data as Languages).map(element => `${element[0]}: ${element[1]} %`) : ["Loading ..."]}/> :null}
} <h2 style={{marginTop: "30px"}}>{slug=== "/overview" ?"More info:": "Choose display form"}</h2>
</div>
<div className={style.buttons}>
<h1 style={{marginTop: "50px"}}>More info:</h1>
<div className={style.buttonWrapper}> <div className={style.buttonWrapper}>
<button className={style.button} <button className={style.button} onClick= {() => history.push(slug=== "/overview" ? "/issue" : `${slug}graph`)}>
onClick={() => history.push(slug === "/overview" ? "/issue" : `${slug}graph`)}>
{slug=== "/overview" ? "Issues" : "Graph"} {slug=== "/overview" ? "Issues" : "Graph"}
</button> </button>
<button className={style.button} <button className={style.button} onClick= {() => history.push(slug=== "/overview" ? "/commit" : `${slug}list`)}>
onClick={() => history.push(slug === "/overview" ? "/commit" : `${slug}list`)}>
{slug=== "/overview" ? "Commits" : "List"} {slug=== "/overview" ? "Commits" : "List"}
</button> </button>
</div> </div>
</div> </div>
</div>
); );
}; };
......
.wrapper { .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; display: flex;
flex-direction: column; flex-direction: column;
width: 100%;
} align-items: center;
.buttons {
background-color: lightcoral;
border-radius: 10px;
padding: 20px;
} }
.buttonWrapper{ .buttonWrapper{
...@@ -27,18 +10,17 @@ ...@@ -27,18 +10,17 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%; height: 40%;
} }
.button{ .button{
background: #8ECAE6; background: #8ECAE6;
cursor: pointer; cursor: pointer;
width: 250px; width: 225px;
height: 250px; height: 225px;
border-radius: 16px; border-radius: 16px;
margin: 75px; margin: 50px;
text-align: center; font-size: 24px;
font-size: 3em;
} }
.button:hover, .button:hover,
...@@ -46,3 +28,18 @@ ...@@ -46,3 +28,18 @@
box-shadow: 0 0.5em 0.5em -0.4em; box-shadow: 0 0.5em 0.5em -0.4em;
transform: translateY(-0.25em); transform: translateY(-0.25em);
} }
@media screen and (max-width: 800px) {
.buttonWrapper{
flex-direction: column;
align-items: center;
}
}
@media screen and (max-width: 800px) {
.button{
height: 124px;
width: 124px;
margin: 20px;
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment