Merge pull request #6 from swve/feat/responsive

Adapt to mobile devices
swve · Jun 4, 2022 · b52a0bc · b52a0bc
2 parents 3d663d8 + 6ba0ae0
commit b52a0bc
Show file tree

Hide file tree

Showing 11 changed files with 191 additions and 33 deletions.
diff --git a/components/Dialog/Dialog.tsx b/components/Dialog/Dialog.tsx
@@ -10,7 +10,7 @@ function Dialog(props) {
       <DialogBox>
         <DialogTitle>You've reached the GitHub Public API limitation</DialogTitle>
         <p>GitStory uses the GitHub Public API which have a usage rate limitation for non-authenticated users, you've just reached that limit.</p>
-        <p>Please consider sign in using your GitHub account to be able to continue using GitStory, or wait for 1 hour.</p>
+        <p>Please consider sign in using your GitHub account to be able to continue using GitStory, or please wait for 1 hour.</p>
         <DialogActions>
           <Link href="/privacy">
             <a>Privacy Policy</a>
@@ -59,6 +59,11 @@ const DialogBox = styled.div`
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
   z-index: 100;
 
+
+  @media (max-width: 768px) {
+    width: 300px;
+    height: 410px;
+  }
   p {
     font-size: 14px;
     color: #ffffffad;

diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
@@ -14,7 +14,7 @@ export default function Footer(props) {
         </li>
         <li>
           <Link href={`/privacy`}>
-            <a >Privacy</a>
+            <a>Privacy</a>
           </Link>
         </li>
         <li>
@@ -34,14 +34,17 @@ export default function Footer(props) {
 
 const FooterWrapper: any = styled.div`
   position: relative;
-  font-size: 14px;
   display: flex;
   margin: auto;
   justify-content: center;
   font-size: 12px;
   margin-top: ${(props: any) => (props.home ? "8%" : "2%")};
   padding-bottom: ${(props: any) => (props.home ? "0%" : "3%")};
 
+  @media (max-width: 768px) {
+    font-size: 10px;
+  }
+
   ul {
     margin: 0;
     display: flex;

diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -59,7 +59,7 @@ export default function Header({ withLeftPart = true, withPaddings = false, ...p
   saveGitHubSessionToCookie();
   if (props.disable_api_usage_check) {
     //setOpenApiPopup(true);
-  }else{
+  } else {
     checkApiUsage();
   }
 
@@ -182,14 +182,25 @@ const SessionWrapper = styled.div`
     margin-right: 20px;
   }
 `;
-const RightWrapper = styled.div``;
+const RightWrapper = styled.div`
+  @media (max-width: 768px) {
+    margin: auto;
+    margin-bottom: 30px;
+  }
+`;
 // CSS
 const HeaderWrapper: any = styled.div`
   display: flex;
   justify-content: space-between;
   padding-left: ${(props: any) => (props.withPaddings === true ? 130 : 0)}px;
   padding-right: ${(props: any) => (props.withPaddings === true ? 130 : 0)}px;
   padding-top: ${(props: any) => (props.withPaddings === true ? 30 : 0)}px;
+
+  @media (max-width: 768px) {
+    flex-direction: column-reverse;
+    padding-left: ${(props: any) => (props.withPaddings === true ? 60 : 0)}px;
+    padding-right: ${(props: any) => (props.withPaddings === true ? 60 : 0)}px;
+  }
 `;
 
 const LeftWrapper: any = styled.div`

diff --git a/pages/404.tsx b/pages/404.tsx
@@ -6,13 +6,13 @@ import styled from "styled-components";
 function Error(props) {
   return (
     <>
-    <GradientHeader>
-      <Header title={`Error`}></Header>
-      <h1>404</h1>
-      <h2>Page Not found</h2>
-
-    </GradientHeader>
-    <Footer></Footer></>
+      <GradientHeader>
+        <Header title={`Error`}></Header>
+        <h1>404</h1>
+        <h2>Page Not found</h2>
+      </GradientHeader>
+      <Footer></Footer>
+    </>
   );
 }
 
@@ -26,10 +26,19 @@ const GradientHeader = styled.div`
   background: linear-gradient(180deg, #09090a 0%, rgba(39, 49, 55, 0.52) 100%),
     linear-gradient(228.87deg, rgba(69, 80, 174, 0.54) 9.05%, rgba(227, 9, 88, 0.27) 51.25%, rgba(255, 255, 255, 0) 84.11%),
     linear-gradient(243.33deg, #4c15eb 5.62%, #245aaa 36.13%, rgba(221, 50, 13, 0.71) 127.92%);
- 
 
- h1 {
-     padding-top: 20px;
-     font-size: 45px;
- }
+  @media (max-width: 768px) {
+    padding-left: 60px;
+    padding-right: 60px;
+  }
+
+  h1 {
+    padding-top: 20px;
+    font-size: 45px;
+  }
+
+  // media query for mobile
+  @media (max-width: 1500px) {
+    height: 650px;
+  }
 `;
diff --git a/pages/about.tsx b/pages/about.tsx
@@ -41,7 +41,6 @@ function About() {
               by <img src="/img/sweave.png" height="12" alt="" />
             </p>
           </MadeBy>
-
         </AboutWrapper>
       </GradientHeader>
       <Footer></Footer>
@@ -111,6 +110,11 @@ const AboutElements = styled.div`
   justify-content: space-between;
   margin-left: 120px;
   margin-right: 120px;
+
+  @media (max-width: 768px) {
+    margin-left: 60px;
+    margin-right: 60px;
+  }
   flex-wrap: wrap;
 `;
 
@@ -127,15 +131,27 @@ const AboutWrapper = styled.div`
     margin: auto;
     padding-top: 20px;
     font-size: 45px;
-    line-height: 46px;
-    letter-spacing: -2px;
+    line-height: 42px;
+    letter-spacing: -1.2px;
+
+    @media (max-width: 768px) {
+      width: 90%;
+      line-height: 25px;
+      font-weight: bolder;
+      font-size: 25px !important;
+    }
   }
 `;
 
 const GradientHeader = styled.div`
   height: 820px;
   padding-left: 130px;
   padding-right: 130px;
+  @media (max-width: 768px) {
+    padding-left: 60px;
+    padding-right: 60px;
+  }
+
   padding-top: 30px;
   background: linear-gradient(180deg, #09090a 0%, rgba(39, 49, 55, 0.52) 100%),
     linear-gradient(228.87deg, rgba(69, 80, 174, 0.54) 9.05%, rgba(227, 9, 88, 0.27) 51.25%, rgba(255, 255, 255, 0) 84.11%),
@@ -147,9 +163,8 @@ const GradientHeader = styled.div`
   }
 
   // media query for mobile
-    @media (max-width: 1500px) {
-
-        height: 1650px;
-    }
+  @media (max-width: 1500px) {
+    height: 1650px;
+  }
 `;
 export default About;
diff --git a/pages/calendar/[[...slug]].tsx b/pages/calendar/[[...slug]].tsx
@@ -96,6 +96,31 @@ export default function Repo() {
               );
             })}
           </Years>
+          <MobileYears>
+            <select
+              onChange={(e) => {
+                setCalendarYear(parseInt(e.target.value));
+              }}
+            >
+              {activeYears.map((yearElement) => {
+                return (
+                  <>
+                    <option
+                      key={yearElement + "-" + Math.random()}
+                      onClick={() => {
+                        setCalendarYear(yearElement);
+                        alert(yearElement);
+                      }}
+                      selected={year == yearElement ? true : false}
+                    >
+                      {" "}
+                      {yearElement}
+                    </option>
+                  </>
+                );
+              })}
+            </select>
+          </MobileYears>
         </GradientHeader>
         <YearCalendar year={year}></YearCalendar>
         <Footer></Footer>
@@ -113,18 +138,53 @@ const GradientHeader = styled.div`
     linear-gradient(228.87deg, rgba(69, 80, 174, 0.54) 9.05%, rgba(227, 9, 88, 0.27) 51.25%, rgba(255, 255, 255, 0) 84.11%),
     linear-gradient(243.33deg, #4c15eb 5.62%, #245aaa 36.13%, rgba(221, 50, 13, 0.71) 127.92%);
   //background: linear-gradient(180deg, #13161a 0%, rgba(39, 49, 55, 0.52) 100%), linear-gradient(243.33deg, #280b7d 5.62%, #245aaa 74.42%, #0dd1dd 127.92%);
+
+  @media (max-width: 768px) {
+    padding-left: 60px;
+    padding-right: 60px;
+  }
 `;
 
 const RepoBar = styled.div`
   padding-top: 40px;
   font-size: 40px;
   font-weight: bold;
+
+  @media (max-width: 768px) {
+    text-align: center;
+    font-size: 30px;
+  }
 `;
 
 const Years = styled.div`
   padding-top: 30px;
   display: flex;
   flex-wrap: wrap;
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
+
+const MobileYears = styled.div`
+  padding-top: 30px;
+  margin: auto;
+  display: none;
+
+  select {
+    width: 100%;
+    background-color: #12161aba;
+    padding: 10px;
+    border-radius: 5px;
+    border: none;
+    text-align: center;
+    color: white;
+    box-shadow: 0 9px 11px 2px rgb(3 8 19 / 20%);
+  }
+
+  @media (max-width: 768px) {
+    text-align: center;
+    display: flex;
+  }
 `;
 
 const YearBox: any = styled.div`

diff --git a/pages/commits/[[...slug]].tsx b/pages/commits/[[...slug]].tsx
@@ -138,7 +138,7 @@ export default function Repo() {
                       {console.log(commit)}
                       <a target="_blank" href={`https://github.com/${slug[1]}/${slug[2]}/tree/${commit.sha}/`}>
                         <Tooltip title="Travel in time to that commit, in GitHub">
-                          <AccessTimeFilledIcon sx={{ fontSize: 30 }} />
+                          <AccessTimeFilledIcon sx={{ fontSize: 30  }} />
                         </Tooltip>
                       </a>
                     </CommitRightGlobal>
@@ -168,6 +168,10 @@ const ListOfCommitsBox = styled.div`
 
   width: 85%;
   top: -150px;
+
+  @media (max-width: 768px) {
+    top: -50px;
+  }
   position: relative;
   display: flex;
   flex-direction: row;
@@ -190,6 +194,11 @@ const GradientHeader = styled.div`
   padding-right: 130px;
   padding-top: 30px;
 
+  @media (max-width: 768px) {
+    padding-left: 60px;
+    padding-right: 60px;
+  }
+
   background: linear-gradient(180deg, #09090a 0%, rgba(39, 49, 55, 0.52) 100%),
     linear-gradient(228.87deg, rgba(69, 80, 174, 0.54) 9.05%, rgba(227, 9, 88, 0.27) 51.25%, rgba(255, 255, 255, 0) 84.11%),
     linear-gradient(243.33deg, #4c15eb 5.62%, #245aaa 36.13%, rgba(221, 50, 13, 0.71) 127.92%);
@@ -250,6 +259,12 @@ const CommitRightGlobal = styled.div`
   a {
     margin-left: 20px;
   }
+
+  svg{
+    background-color: #10131b8f;
+    padding: 5px;
+    border-radius: 3px;
+  }
 `;
 const CommitLeftTopInfo = styled.div`
   font-size: 19px;

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -27,7 +27,7 @@ export default function Home() {
       <Header disable_api_usage_check withLeftPart={false} withPaddings={true} title="Home"></Header>
       <LogoBox>
         {" "}
-        <img src="/img/index_logo.png" height="70" />{" "} <span>Beta</span>
+        <img src="/img/index_logo.png" /> <span>Beta</span>
       </LogoBox>
       <DescriptionBox>
         <img alt="Internet's git time machine" src="/img/description.png" />
@@ -57,11 +57,19 @@ const LogoBox = styled.div`
   align-items: center;
   padding-top: 90px;
 
-  span{
+  img {
+    height: 70px;
+
+    @media (max-width: 768px) {
+      height: 30px;
+    }
+  }
+
+  span {
     font-size: 7px;
     text-transform: uppercase;
     font-weight: bold;
-    opacity: 0.20;
+    opacity: 0.2;
     letter-spacing: 0.5px;
   }
 `;
@@ -74,6 +82,10 @@ const DescriptionBox = styled.div`
 
   img {
     width: 30%;
+
+    @media (max-width: 768px) {
+      width: 50%;
+    }
   }
 `;
 
@@ -106,14 +118,27 @@ const SearchBox = styled.input`
   color: white;
   transition: all 0.3s ease-in-out;
 
+  @media (max-width: 768px) {
+    width: 250px;
+    margin-top: 10px;
+    font-size: 9px;
+    height: 31px;
+  }
+
   &:focus {
     outline: none;
     width: 700px;
     font-size: 16px;
 
+    @media (max-width: 768px) {
+      width: 270px;
+      font-size: 10px;
+      height: 31px;
+    }
+
     ::placeholder {
-    color: rgba(255, 255, 255, 0.33);
-  }
+      color: rgba(255, 255, 255, 0.33);
+    }
   }
 
   ::placeholder {