Merge pull request #7 from olinpin/ResponsiveCSS

Responsive css
2022-11-02 11:56:12 +01:00
parent c31d514753 221ae7631e
commit abb93024a2
7 changed files with 105 additions and 37 deletions
--- a/pycache/dashboard.cpython-310.pyc
+++ b/pycache/dashboard.cpython-310.pyc
--- a/dashboard_static/index.html
+++ b/dashboard_static/index.html
@@ -6,6 +6,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Twitter sports dashboard</title>
    <link rel="stylesheet" href="./style/style.css">
+    <link rel="stylesheet" href="./style/responsive.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,400&display=swap" rel="stylesheet">
@@ -13,10 +14,9 @@
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="icon" type="image/x-icon" href="./media/logo.png">
-    
 </head>
 <body>
-    <div id="tweet" style="height: 200px;"></div>
+    <!-- <div id="tweet" style="height: 200px;"></div> -->
    <div class="container">
        <div class="header">
            <div class="logo">
@@ -61,7 +61,7 @@
        <div class="main">
            <div class="maintable">
                <div class="leftcol column">
-                    <h1 class="colheader">LATEST CLUCCS</h1>
+                    <span class="colheader">Latest Cluccs</span>
                    <div class="tweetcontainer">
                        <div class="tweet">
                            <img src="https://pbs.twimg.com/profile_images/1158803404656959490/9MKSbW4O_400x400.jpg" alt="" class="tweet-profilepicture">
@@ -90,16 +90,18 @@
                    </div>
                </div>
                <div class="centercol column">
-                    <h1 class="colheader">FILTERED CLUCCS</h1>
+                    <span class="colheader">Filtered Cluccs</span>
                </div>
-                <div class="searchcontainer column">
-                    <input class = "searchbar" type = "text" placeholder="SEARCH CLUCCS...">
-                    <button class = "button">SORT BY</button>
-                    <button class = "button">BLOCKED WORDS</button>
-                    <button class = "button">POPULARITY FILTER</button>
-                </div>
-                <div class="popchart column">
-                    <h1 class="colheader chartheader">SPORTS POPULARITY CHART</h1>
+                <div class="rightcol column">
+                    <div class="searchcontainer column">
+                        <input class = "searchbar" type = "text" placeholder="SEARCH CLUCCS...">
+                        <button class = "button">SORT BY</button>
+                        <button class = "button">BLOCKED WORDS</button>
+                        <button class = "button">POPULARITY FILTER</button>
+                    </div>
+                    <div class="popchart column">
+                        <h1 class="colheader chartheader">SPORTS POPULARITY CHART</h1>
+                    </div>
                </div>
            </div>
        </div> 
@@ -113,10 +115,10 @@
    <script src="./js/code.js"></script>
    <script src="./js/connection.js"></script>
    <script>
-        block("#tweet").tweets({
-            memory: 20
-        });
-        events.connect("tweet", "#tweet");
+        // block("#tweet").tweets({
+        //     memory: 20
+        // });
+        // events.connect("tweet", "#tweet");
        
        // // create a rolling chart block
        // block('#graph').rolling_chart({
--- a/dashboard_static/js/code.js
+++ b/dashboard_static/js/code.js
@@ -16,12 +16,36 @@ $(".sport").on("click", function() {
    }

    $(this).trigger("selected", [selectedSports.includes(sportName), selectedSports]) // Trigger event
+    showFeeds()
 })

 function getCSSVariable(name) {
    return getComputedStyle(root).getPropertyValue(name)
 }

+function showFeeds() {
+    if ($(window).width() < 1280) {
+        if (selectedSports.length === 0) {
+            $(".leftcol").show()
+            $(".centercol").hide()
+        } else {
+            $(".leftcol").hide()
+            $(".centercol").show()
+        }
+    } else {
+        $(".leftcol").show()
+        $(".centercol").show()
+    }
+}
+
+$(window).on("resize", function(){
+    showFeeds()
+});
+
+$(window).on("load", function() {
+    showFeeds()
+})
+
 function tweetCell(tweet) {
    var cell = document.createElement("div");
    cell.innerHTML =
@@ -51,6 +75,3 @@ function tweetCell(tweet) {
    </div>`
    return cell
 }
-
-$(document).on('tweet', console.log(tweet));
-    
--- a/dashboard_static/style/responsive.css
+++ b/dashboard_static/style/responsive.css
@@ -0,0 +1,33 @@
+@media only screen and (max-width: 1280px) {
+    .maintable {
+        grid-template-columns: 1fr 1fr;
+        grid-gap: 32px;
+    }
+}
+
+
+@media only screen and (max-width: 850px) {
+    .maintable {
+        grid-template-columns: 1fr;
+    }
+    .header-title {
+        display: none;
+    }
+    .sport-name {
+        font-size: 20px;
+    }
+    .column {
+        grid-row: unset;
+    }
+    .colheader {
+        font-size: 32px;
+    }
+
+}
+
+
+
+
+
+  /* 360x640 414x896
+  601x962 1280x800 */
--- a/dashboard_static/style/style.css
+++ b/dashboard_static/style/style.css
@@ -24,6 +24,8 @@ body {
 	background-color: var(--main-bg);
 	color: white;
 	padding: 16px 48px;
+	display: flex;
+	flex-direction: column;
 }

 .header, .sports, .logo {
@@ -45,11 +47,11 @@ body {
 }

 .logo img {
-	height: 40px;
+	height: 36px;
 }

 .logo span {
-	font-size: 40px;
+	font-size: 36px;
 	font-weight: 500;
 	margin: 0 8px;
 }
@@ -112,7 +114,7 @@ body {
 .tweet-interaction {
 	display: flex;
 	align-items: center;
-	margin-right: 32px;
+	margin-right: 24px;
 }

 .tweet-interaction .material-symbols-outlined {
@@ -147,51 +149,61 @@ body {
 /* Three main columns; CSS Grid */
 .maintable {
 	/*background-color: #ffffff; */ /* The colors are there just so that I can see what I'm doing better */
-	display: grid;
 	width: 100%;
+	height: 100%;
+	display: grid;
 	grid-template-columns: 1fr 1fr 1fr;
-	grid-template-rows: 1fr 1fr;
-
-	gap: 48px;
+	grid-template-rows: 1fr;
+	grid-gap: 48px;
 	/* margin:20px; */
 }

 .main {
-	margin-top: 48px;
+	margin-top: 32px;
+	height: 100%;
 }

 .column {
 	border-radius: 16px;
 }

+.leftcol, .centercol {
+	overflow-y: auto;
+	grid-row: 1/ -1;
+}
+
 .leftcol {
 	background-color: red;
-	grid-row: 1/ -1;
 }

 .centercol {
 	background-color: green;
-	grid-row: 1/ -1;
+}
+
+.rightcol {
+	display: flex;
+    flex-direction: column;
 }

 .searchcontainer {
 	background-color: blue;
-	height: 400px;
+	/* height: 400px; */
 }

 .popchart {
 	background-color: rgba(255, 0, 255, 0.344);
-	height: 400px;
+	/* height: 400px; */
 }

 .colheader {
+	display: block;
+	font-weight: 500;
+	font-size: 40px;
+	padding: 8px 16px;
 	font-size: 38px;
 	padding-left: 30px;
 }

-.searchbar {
-	width: 500px;
-}
 .searchbar, .button {
 	font-weight: bold;
 	font-size: 32px;
@@ -205,6 +217,6 @@ body {
 	border: none;
 }

-.button:hover {
+/* .button:hover {
 	background-color: ;
-}
+} */
--- a/eca/pycache/arff.cpython-310.pyc
+++ b/eca/pycache/arff.cpython-310.pyc
--- a/eca/pycache/generators.cpython-310.pyc
+++ b/eca/pycache/generators.cpython-310.pyc