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

CSS Grid Headings

Browse Source
This commit is contained in:
Drew
2022-11-01 13:36:10 +01:00
parent 8e9d748210 5521913353
commit 9ac9b48876
3 changed files with 42 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dashboard.py
View File

@@ -27,7 +27,7 @@ def generate_sample(ctx, e):
if ctx.count % 50 == 0: if ctx.count % 50 == 0:
emit('debug', {'text': 'Log message #'+str(ctx.count)+'!'}) emit('debug', {'text': 'Log message #'+str(ctx.count)+'!'})
tweet = e.data tweet = e.data
print(tweet) # print(tweet)
# base sample on previous one # base sample on previous one
# sample = clip(-100, e.data['previous'] + random.uniform(+5.0, -5.0), 100) # sample = clip(-100, e.data['previous'] + random.uniform(+5.0, -5.0), 100)
# emit to outside world # emit to outside world

38
dashboard_static/index.html
View File

@@ -57,32 +57,18 @@
</div> </div>
</div> </div>
<div class="main"> <div class="main">
<!-- <div class="maintable">
<div class="leftcol"> <div class="leftcol column">
<div class="tweet"> <h1 class="colheader">LATEST CLUCCS</h1>
<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 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>
<<<<<<< HEAD
</div> </div>
--> -->
<div class = "maintable"> <div class = "maintable">
@@ -96,6 +82,8 @@
<div class = "popchart"> <div class = "popchart">
<h1 class = 'colheader'>SPORTS POPULARITY CHART</h1> <h1 class = 'colheader'>SPORTS POPULARITY CHART</h1>
</div> </div>
=======
>>>>>>> 552191335378d5d4fcc19eee637d115ec515d385
</div> </div>
</div> </div>
</div> </div>

44
dashboard_static/style/style.css
View File

@@ -23,10 +23,7 @@ body {
.container { .container {
background-color: var(--main-bg); background-color: var(--main-bg);
color: white; color: white;
display: block; padding: 16px 48px;
margin-left: auto;
margin-right: auto;
padding: 16px 32px;
} }
.header, .sports, .logo { .header, .sports, .logo {
@@ -106,8 +103,24 @@ body {
align-items: center; align-items: center;
} }
/* Three main columns; CSS Grid */ .filters-search input {
height: 28px;
width: 100%;
border: none;
font-family: 'Robot', sans-serif;
font-size: 24px;
padding: 0;
padding-right: 32px;
}
.filters-search span {
position: absolute;
font-weight: 500;
font-size: 24px;
color: var(--main-medium-dark);
}
/* Three main columns; CSS Grid */
.maintable { .maintable {
/*background-color: #ffffff; */ /* The colors are there just so that I can see what I'm doing better */ /*background-color: #ffffff; */ /* The colors are there just so that I can see what I'm doing better */
display: grid; display: grid;
@@ -115,37 +128,36 @@ body {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
gap: 20px; gap: 48px;
margin:20px; /* margin:20px; */
}
.main {
margin-top: 48px;
}
.column {
border-radius: 16px;
} }
.leftcol { .leftcol {
background-color: red; background-color: red;
border-radius: 16px;
grid-row: 1/ -1; grid-row: 1/ -1;
margin: 40px;
} }
.centercol { .centercol {
background-color: green; background-color: green;
border-radius: 16px;
grid-row: 1/ -1; grid-row: 1/ -1;
margin: 40px;
} }
.searchbar { .searchbar {
background-color: blue; background-color: blue;
border-radius: 16px;
height: 400px; height: 400px;
margin: 40px;
} }
.popchart { .popchart {
background-color: rgba(255, 0, 255, 0.344); background-color: rgba(255, 0, 255, 0.344);
border-radius: 16px;
height: 400px; height: 400px;
margin: 40px;
} }
.colheader { .colheader {