diff --git a/src/components/graphs/barChart/barChart.module.scss b/src/components/graphs/barChart/barChart.module.scss
index bf4555180dc3561f60260ee99fadd73de9f60800..1ac4db45ae7c1e799392b664fd4ba9e7a2246ffa 100644
--- a/src/components/graphs/barChart/barChart.module.scss
+++ b/src/components/graphs/barChart/barChart.module.scss
@@ -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%;
}
}
diff --git a/src/components/graphs/pieChart/pieChart.module.scss b/src/components/graphs/pieChart/pieChart.module.scss
index 57a7c89be6647264e7262e0a646eecbf46aafbf9..aa47ce2c59055a3603ffc878f3408e8548d3c378 100644
--- a/src/components/graphs/pieChart/pieChart.module.scss
+++ b/src/components/graphs/pieChart/pieChart.module.scss
@@ -7,7 +7,7 @@
}
@media only screen and (max-width: 500px){
- [class*="pieChartContainer"] {
+ .pieChartContainer {
width: 100%;
}
}
diff --git a/src/components/stats/stats.module.css b/src/components/stats/stats.module.css
index 9f04b9987c0e6251b083596e580437d520e44cb9..cbf7250da4dca52c7e583dfc5f2446c2f6fbf333 100644
--- a/src/components/stats/stats.module.css
+++ b/src/components/stats/stats.module.css
@@ -1,8 +1,16 @@
-.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
diff --git a/src/components/stats/statsBox.tsx b/src/components/stats/statsBox.tsx
index ca9540595f3cb6e9acb6610a9e181ed6fd7f481b..fa63fcf37c91ce1d1d30754868c77dcd22ff04af 100644
--- a/src/components/stats/statsBox.tsx
+++ b/src/components/stats/statsBox.tsx
@@ -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>
);
diff --git a/src/pages/overviewPage/Overview.tsx b/src/pages/overviewPage/Overview.tsx
index 55dec75a8614d2ed2bf9b72684020c46a977086a..8824980ebc56d5632b0cfc6b96351bf6d4d5bef8 100644
--- a/src/pages/overviewPage/Overview.tsx
+++ b/src/pages/overviewPage/Overview.tsx
@@ -1,38 +1,30 @@
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 { 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';
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}>
- <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>
+ {slug==="/overview" ?<h1>Stats:</h1>: null}
+ {isLoading ? <ClipLoader loading={isLoading}/> :
+ 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`)}>
+ {slug=== "/overview" ? "Issues" : "Graph"}
+ </button>
+ <button className={style.button} onClick= {() => history.push(slug=== "/overview" ? "/commit" : `${slug}list`)}>
+ {slug=== "/overview" ? "Commits" : "List"}
+ </button>
</div>
</div>
);
diff --git a/src/pages/overviewPage/overview.module.css b/src/pages/overviewPage/overview.module.css
index e9c52ca91ff5e20dbe6cbdf87cc4286c8af5c76f..4ca6c800dda8dc6e2af4e5ae92affb846772452f 100644
--- a/src/pages/overviewPage/overview.module.css
+++ b/src/pages/overviewPage/overview.module.css
@@ -1,48 +1,45 @@
-
.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{
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ width: 100%;
+ height: 40%;
}
-.buttonWrapper {
- display: flex;
- flex-direction: row;
- justify-content: center;
- width: 100%;
- height: 100%;
-}
-
-.button {
+.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,
.button:focus {
box-shadow: 0 0.5em 0.5em -0.4em;
transform: translateY(-0.25em);
-}
\ No newline at end of file
+}
+
+@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;
+ }
+}