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

Merge branch 'main' into FiltersSearch

Browse Source
This commit is contained in:
Tim Wijma
2022-11-01 13:28:16 +01:00
parent 186b6e4b3e 49c70b08b8
commit 8d40f8e372
5 changed files with 84 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
dashboard_static/index.html
View File

@@ -57,39 +57,16 @@
</div>
</div>
<div class="main">
<div class="leftcol">
<!-- <div class="tweet">
<img src="https://pbs.twimg.com/profile_images/1158803404656959490/9MKSbW4O_400x400.jpg" alt="" class="tweet-profilepicture">
<div class="tweet-content">
<div class="tweet-name">
<span class="tweet-nickname">Tim Wijma</span>
<span class="tweet-username">@timwijma</span>
</div>
<span class="tweet-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus velit maiores non deserunt adipisci dicta quam nobis ad. Iste, unde?</span>
<div class="tweet-interactions">
<div class="tweet-interaction tweet-likes">
<span class="material-symbols-outlined">favorite</span>
<span>20</span>
</div>
<div class="tweet-interaction tweet-retweets">
<span class="material-symbols-outlined">repeat</span>
<span>20</span>
</div>
<div class="tweet-interaction tweet-replies">
<span class="material-symbols-outlined">chat_bubble</span>
<span>20</span>
</div>
</div>
</div>
</div> -->
</div>
<div class="centercol"></div>
<div class="rightcol">
<div class="filters">
<div class="filters-search">
<input type="text" name="" id="search">
<span class="material-symbols-outlined">search</span>
</div>
<div class="maintable">
<div class="leftcol column">
<h1 class="colheader">LATEST CLUCCS</h1>
</div>
<div class="centercol column">
<h1 class="colheader">FILTERED CLUCCS</h1>
</div>
<div class="searchbar column"></div>
<div class="popchart column">
<h1 class="colheader chartheader">SPORTS POPULARITY CHART</h1>
</div>
</div>
</div>

6
dashboard_static/js/code.js
View File

@@ -20,4 +20,10 @@ $(".sport").on("click", function() {
function getCSSVariable(name) {
return getComputedStyle(root).getPropertyValue(name)
}
function tweetCell(tweet, parent) {
var cell = document.createElement("div")
cell.innerHTML =
"<div>"
}

47
dashboard_static/style/style.css
View File

@@ -23,7 +23,7 @@ body {
.container {
background-color: var(--main-bg);
color: white;
padding: 16px 32px;
padding: 16px 48px;
}
.header, .sports, .logo {
@@ -118,4 +118,49 @@ body {
font-weight: 500;
font-size: 24px;
color: var(--main-medium-dark);
}
/* 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%;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 48px;
/* margin:20px; */
}
.main {
margin-top: 48px;
}
.column {
border-radius: 16px;
}
.leftcol {
background-color: red;
grid-row: 1/ -1;
}
.centercol {
background-color: green;
grid-row: 1/ -1;
}
.searchbar {
background-color: blue;
height: 400px;
}
.popchart {
background-color: rgba(255, 0, 255, 0.344);
height: 400px;
}
.colheader {
font-size: 38px;
padding-left: 30px;
}