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