Skip to content
Snippets Groups Projects
Commit 0258603b authored by Marius Nåvli Sjølie's avatar Marius Nåvli Sjølie
Browse files

Merge branch '15-fix-mobile-view-stats-page' into 'master'

Resolve "fix mobile view stats page"

Closes #15

See merge request it2810-h21/team-11/gitlab-visualization!19
parents a7dbd34b 20a7379c
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;
...@@ -15,11 +13,11 @@ const OverviewPage = () => { ...@@ -15,11 +13,11 @@ const OverviewPage = () => {
return ( return (
<div className={style.wrapper}> <div className={style.wrapper}>
<h1>Stats:</h1> {slug==="/overview" ?<h1>Stats:</h1>: null}
{isLoading ? <ClipLoader loading={isLoading}/> : {isLoading ? <ClipLoader loading={isLoading}/> :
<StatsBox content={data as Languages ? Object.entries(data as Languages).map(element => `${element[0]}: ${element[1]} %`): ["Loading ..."] } /> slug==="/overview" ?<StatsBox content={data as Languages ? Object.entries(data as Languages).map(element => `${element[0]}: ${element[1]} %`): ["Loading ..."] } />
} :null}
<h2 style={{marginTop: "50px"}}>More info:</h2> <h2 style={{marginTop: "30px"}}>{slug=== "/overview" ?"More info:": "Choose display form"}</h2>
<div className={style.buttonWrapper}> <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"} {slug=== "/overview" ? "Issues" : "Graph"}
......
...@@ -16,10 +16,11 @@ ...@@ -16,10 +16,11 @@
.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;
font-size: 24px;
} }
.button:hover, .button:hover,
...@@ -27,3 +28,18 @@ ...@@ -27,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