Mobile view updated (#63)

Former-commit-id: 07789c8 Former-commit-id: 75d44a40e20e6c4d3007502adffc4dcd2d2b50e6 Former-commit-id: ba35872 Former-commit-id: e57a676
HackerSpace-PESU · Jan 9, 2021 · 0b5e654 · 0b5e654
1 parent 95870b1
commit 0b5e654
Show file tree

Hide file tree

Showing 8 changed files with 228 additions and 36 deletions.
diff --git a/app/fantasy_cricket/static/fonts/hackerspace.ttf.REMOVED.git-id b/app/fantasy_cricket/static/fonts/hackerspace.ttf.REMOVED.git-id
@@ -0,0 +1 @@
+53fe1c229697eae81ec113266d66ec19b704b6f1
diff --git a/app/fantasy_cricket/static/icon.png b/app/fantasy_cricket/static/icon.png
diff --git a/app/fantasy_cricket/static/styles/style.css b/app/fantasy_cricket/static/styles/style.css
@@ -1,4 +1,4 @@
-/* This folloeing style sheet is not being used  */
+/* This following style sheet is not being used  */
 body {
  background-image: url("../images/background1.jpg");
 }

diff --git a/app/fantasy_cricket/static/styles/style1.css b/app/fantasy_cricket/static/styles/style1.css
@@ -11,7 +11,7 @@
   height: 100%;
   filter: blur(2px);
 }
-
+ 
 .content{
   position: fixed;
   left: 0;
@@ -30,7 +30,8 @@ h1 {
     margin-bottom: 1em;
 }
 
-.line1 {  
+.line1 { 
+  margin-top: 4em; 
   margin-left: 2em;
   display: grid;
   grid-template-columns: auto auto auto auto auto;
@@ -39,16 +40,15 @@ h1 {
   padding: 10px;
   text-align: center;
   font-size: large;
-  font-weight:20px;
+  font-weight:600;
 }
 
 .line2 {  
-  margin-top: 4em;
   display: grid;
   grid-template-columns: auto auto auto auto auto auto;
   text-align: center;
   font-size: large;
-  font-weight:40px;
+  font-weight:600;  
 }
 
 p {
@@ -84,4 +84,50 @@ figcaption {
   padding-bottom: 30px;
   margin-left: 40px;
   margin-right: 40px;
+}
+
+.fix{
+  display: none;
+}
+
+
+@media only screen and (max-width: 1100px) {
+  .fix{
+    display: inline;
+  }
+  h1 {
+    font-size: 20px;
+  }
+  .button {
+    line-height:20px;
+    font-size: 15px;
+  }
+  figcaption {
+    font-size: 10px; 
+  }
+  .whiteCard{
+    padding: 10px;
+    padding-top:10px ;
+    padding-bottom: 10px;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
+  .line1 {  
+    margin-top: 1em; 
+    margin-left: 0px;
+    grid-row-gap: 0px;
+    grid-gap:0px;
+    padding: 0px;
+    font-weight:600;
+  }
+
+  .line2 {  
+    margin-top: 0em;
+    display: grid;
+    grid-template-columns: auto auto auto auto auto auto;
+    text-align: center;
+    font-size: large;
+    font-weight:600;
+  }
 }
diff --git a/app/fantasy_cricket/static/styles/style2.css b/app/fantasy_cricket/static/styles/style2.css
@@ -13,13 +13,12 @@ body {
     margin-left: 20px;
     margin-right: 20px;
 }
-
+  
 .container{
     display: flex;
     flex-direction: row;
     justify-content: center;
     border-radius: 5px;
-
 }
 
 .space{
@@ -77,4 +76,52 @@ body {
 .team2{
     height:25px;
     width: 25px;
+}
+#grey{
+    width: 100%; 
+	position: fixed;
+	height:100%;
+	background-color: rgb(0, 0, 0,0.9);
+	top:0%;
+	left:0%;
+	display: none;
+}
+#loading{
+    width: 250px; 
+    position: fixed;
+    height:auto;
+	top:30%;
+	left:40%;
+	display: none;
+}
+
+@media only screen and (max-width: 1100px) {
+    #loading{
+        width: 150px;
+        top:30%;
+        left:40%;
+    }
+} 
+
+@media only screen and (max-width: 600px) {
+    #loading{
+        width: 150px;
+        top:30%;
+        left:30%;
+    }
+    .container{
+        flex-direction: column;
+    }
+    .heading{
+        font-size: 20px;
+    }
+    .content{
+        font-size: 15px;
+        background-color:rgb(255,255,255,0.9);
+        padding: 10px;
+        padding-top:5px ;
+        padding-bottom: 5px;
+        margin-left: 30px;
+        margin-right: 30px;
+    }
 }
diff --git a/app/fantasy_cricket/templates/Playing_11.html b/app/fantasy_cricket/templates/Playing_11.html
@@ -17,6 +17,9 @@
 <html>
 <head>
 	<title>Choose your playing 11</title>
+	<meta content="width=device-width, initial-scale=1" name="viewport">
+	<!-- Icon that is visible on the tab -->
+    <link rel="icon" href="../static/icon.png">
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
 	</script>
 	<link
@@ -53,9 +56,9 @@ <h4 class="heading">
 			</div>
 
 			<div class="space"></div>
-
+			<br>
+
 			<div class="content">
-
 				<table>
 					<h4 class="heading">
 						{{teams[1]}}
@@ -75,27 +78,14 @@ <h4 class="heading">
 
 
 		</div>
-
+
+		<br>
+
 		<input type="submit" class="button" id="submitButton" name="Confirm"></input>
 		</form>
 
-		<div id="grey" style="
-		width: 100%; 
-		position: fixed;
-		height:100%;
-		background-color: rgb(0, 0, 0,0.9);
-		top:0%;
-		left:0%;
-		display: none;
-		">
-			<img src="../static/loading.gif" alt="Loading" 
-			id="loading"
-			style="width: 300px; position: fixed;
-			height:auto;
-			top:30%;
-			left:40%;
-			display: none;
-			">
+		<div id="grey">
+			<img src="../static/loading.gif" alt="Loading" id="loading">
 			<br><br>
 			<center>
 				<h2 style="color:white; font-size:40px">Loading....</h2>

diff --git a/app/fantasy_cricket/templates/index.html b/app/fantasy_cricket/templates/index.html
@@ -29,9 +29,15 @@
       Fantasy-cricket Prediction
     </title>
     <meta name="description" content="A simple website to help you choose your playing 11 in your fantasy cricket game">
+    <!-- Icon that is visible on the tab -->
+    <link rel="icon" href="../static/icon.png">
     <!-- CDN for fontawesome library  -->
     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
     <style>
+      @font-face {
+        font-family: hackerspace;
+        src: url(../static/fonts/hackerspace.ttf);
+      }
       .button {
         background          : linear-gradient(to bottom, #081482, #004e92);
         border              : none;
@@ -86,6 +92,7 @@
         background          : linear-gradient(to bottom, #000428, #004e92);
         color               : rgb(240, 234, 234);
         margin              : -10px;
+        font-size           : 50px;
       }
       .reportBox{
         background-color:  #131314;
@@ -103,6 +110,8 @@
       flex-direction: row;
       align-content: space-around;
       padding: 10px;
+      padding-left:30px ;
+      padding-right:30px ;
       bottom: 0;
       position: relative;
     }
@@ -123,16 +132,52 @@
     .content {
       font-size: 20px;
       font-weight: 500;
+      font-family: hackerspace;
+      letter-spacing: 1px;
       color: rgb(100, 166, 252);
     }
+
+    @media only screen and (max-width: 1100px) {
+      .footer{
+        padding-left:15px;
+        padding-right:15px;
+      }
+      .footerSpace {
+        width: 460px;
+      }
+      .card{
+        font-size: 30px;
+        width: 260px;
+      }
+      .header{
+        font-size: 20px;
+      }
+      .content{
+          font-size: 15px;
+      }
+      .footerIcon{
+          font-size: 17px;
+      }
+      .reportBox{
+        padding: 5px;
+        padding-top:10px ;
+        padding-bottom: 10px;
+        margin-left: 20px;
+        margin-right: 20px;
+        border-radius: 16px;
+      }
+      .Rheader{
+        font-size: 20px;
+      }
+    }
     </style>
   </head>
   <body style="background-color: #000000;">
 
     <div class="container" style="text-align:centre;">
 
       <div class="jumbotron header">
-        <div style="text-align: center;font-size: 50px; font-weight:100px">
+        <div style="text-align: center;font-weight:100px">
           <div>
             Best Playing 11 Recommendation System
           </div>
@@ -189,7 +234,7 @@ <h3>
     <br>
     <!-- The Report part for missing matches -->
     <div class="reportBox">
-      <h2 style="text-align:center; color: white">
+      <h2 class="Rheader" style="text-align:center; color: white">
         If there is any match missing that you would like us to add <br> Do raise a issue on Github by clicking on the button below
       </h2>
       <br>