olinpin/twitter-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

css responsive

Browse Source
This commit is contained in:
Tim Wijma
2022-11-02 11:38:04 +01:00
parent 3ee60ecb3c
commit 713c401ee6
4 changed files with 144 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
dashboard_static/index.html
View File

@@ -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,11 +90,13 @@
</div>
</div>
<div class="centercol column">
<h1 class="colheader">FILTERED CLUCCS</h1>
<span class="colheader">Filtered Cluccs</span>
</div>
<div class="rightcol column">
<div class="searchbar column"></div>
<div class="popchart column">
<h1 class="colheader chartheader">SPORTS POPULARITY CHART</h1>
<span class="colheader chartheader">Sports Popularity Chart</span>
</div>
</div>
</div>
</div>

32
dashboard_static/js/code.js
View File

@@ -16,12 +16,37 @@ $(".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, parent) {
var cell = document.createElement("div");
cell.innerHTML =
@@ -52,6 +77,9 @@ function tweetCell(tweet, parent) {
parent.append(cell);
}
for (let i = 0; i < 2; i++) {
tweetCell(atweet, $(".leftcol"));
}
var atweet = {
"created_at": "Sat Nov 16 12:51:41 +0000 2019",
@@ -101,7 +129,3 @@ var atweet = {
]
},
}
for (let i = 0; i < 2; i++) {
tweetCell(atweet, $(".leftcol"));
}

33
dashboard_static/style/responsive.css Normal file
View File

@@ -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 */

41
dashboard_static/style/style.css
View File

@@ -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,44 +149,55 @@ 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;
}
.searchbar {
background-color: blue;
height: 400px;
/* height: 400px; */
}
.popchart {
background-color: rgba(255, 0, 255, 0.344);
height: 400px;
/* height: 400px; */
}
.colheader {
font-size: 38px;
padding-left: 30px;
display: block;
font-weight: 500;
font-size: 40px;
padding: 8px 16px;
}