From 20a7379cd1306b88d53f2d814e37263017e2dc1b Mon Sep 17 00:00:00 2001 From: Carl Valdemar Ebbesen <ecvebbesen@gmail.com> Date: Mon, 4 Oct 2021 21:25:47 +0200 Subject: [PATCH] fix mobile view, change media query --- .../graphs/barChart/barChart.module.scss | 4 ++-- .../graphs/pieChart/pieChart.module.scss | 2 +- src/components/stats/stats.module.css | 10 +++++++- src/components/stats/statsBox.tsx | 2 +- src/pages/overviewPage/Overview.tsx | 10 ++++---- src/pages/overviewPage/overview.module.css | 24 +++++++++++++++---- 6 files changed, 37 insertions(+), 15 deletions(-) diff --git a/src/components/graphs/barChart/barChart.module.scss b/src/components/graphs/barChart/barChart.module.scss index bf45551..1ac4db4 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 57a7c89..aa47ce2 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 9f04b99..cbf7250 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 ca95405..fa63fcf 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 ed452fd..8824980 100644 --- a/src/pages/overviewPage/Overview.tsx +++ b/src/pages/overviewPage/Overview.tsx @@ -1,11 +1,9 @@ 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; @@ -15,11 +13,11 @@ const OverviewPage = () => { return ( <div className={style.wrapper}> - <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 ..."] } /> - } - <h2 style={{marginTop: "50px"}}>More info:</h2> + 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"} diff --git a/src/pages/overviewPage/overview.module.css b/src/pages/overviewPage/overview.module.css index 69289f7..4ca6c80 100644 --- a/src/pages/overviewPage/overview.module.css +++ b/src/pages/overviewPage/overview.module.css @@ -16,14 +16,30 @@ .button{ background: #8ECAE6; cursor: pointer; - width: 250px; - height: 250px; + width: 225px; + height: 225px; border-radius: 16px; - margin: 75px; + 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; + } +} -- GitLab