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

merge with master

parents 7567fddf 0258603b
Branches
No related tags found
No related merge requests found
......@@ -4,8 +4,8 @@
align-self: center;
}
@media only screen and (max-width: 500px){
[class*="wrapper"] {
@media screen and (max-width: 500px){
.wrapper {
width: 100%;
}
}
......
......@@ -7,7 +7,7 @@
}
@media only screen and (max-width: 500px){
[class*="pieChartContainer"] {
.pieChartContainer {
width: 100%;
}
}
......
.wrapper {
.wrapperStats {
display: flex;
flex-direction: column;
align-items: center;
border-radius: 16px;
background-color: lightslategray;
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 {
const StatsBox: React.FC<StatsBoxProps> = ({content }) => {
return (
<div className={style.wrapper}>
<div className={style.wrapperStats}>
{content.map(element => <p key={element} style={{margin: "10px auto", padding: "10px auto"}}>{element}</p>)}
</div>
);
......
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 StatsBox from '../../components/stats/statsBox';
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);
return (
<div className={style.wrapper}>
<div className={style.stats}>
<h1>Stats:</h1>
{slug==="/overview" ?<h1>Stats:</h1>: null}
{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>
slug==="/overview" ?<StatsBox 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 className={style.buttonWrapper}>
<button className={style.button}
onClick={() => history.push(slug === "/overview" ? "/issue" : `${slug}graph`)}>
<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`)}>
<button className={style.button} onClick= {() => history.push(slug=== "/overview" ? "/commit" : `${slug}list`)}>
{slug=== "/overview" ? "Commits" : "List"}
</button>
</div>
</div>
</div>
);
};
......
.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;
}
.buttons {
background-color: lightcoral;
border-radius: 10px;
padding: 20px;
width: 100%;
align-items: center;
}
.buttonWrapper{
......@@ -27,18 +10,17 @@
flex-direction: row;
justify-content: center;
width: 100%;
height: 100%;
height: 40%;
}
.button{
background: #8ECAE6;
cursor: pointer;
width: 250px;
height: 250px;
width: 225px;
height: 225px;
border-radius: 16px;
margin: 75px;
text-align: center;
font-size: 3em;
margin: 50px;
font-size: 24px;
}
.button:hover,
......@@ -46,3 +28,18 @@
box-shadow: 0 0.5em 0.5em -0.4em;
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