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

Merge pull request #4 from olinpin/cssgrid

Browse Source 
Cssgrid
This commit is contained in:
oliverhnat
2022-11-01 12:37:11 +01:00
committed by GitHub
parent 139628dcde 3cdf519031
commit 49c70b08b8
2 changed files with 51 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
dashboard_static/index.html
View File

@@ -57,8 +57,9 @@
</div> </div>
</div> </div>
<div class="main"> <div class="main">
<!--
<div class="leftcol"> <div class="leftcol">
<div class="tweet"> <!-- You can use this template in the javascript file, css will come later --> <div class="tweet">
<img src="https://pbs.twimg.com/profile_images/1158803404656959490/9MKSbW4O_400x400.jpg" alt="" class="tweet-profilepicture"> <img src="https://pbs.twimg.com/profile_images/1158803404656959490/9MKSbW4O_400x400.jpg" alt="" class="tweet-profilepicture">
<div class="tweet-content"> <div class="tweet-content">
<div class="tweet-name"> <div class="tweet-name">
@@ -83,8 +84,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="centercol"></div> -->
<div class="rightcol"></div> <div class = "maintable">
<div class = "leftcol"></div>
<div class="centercol"></div>
<div class = "searchbar"></div>
<div class = "popchart"></div>
</div>
</div> </div>
</div> </div>
<script src="./js/code.js"></script> <script src="./js/code.js"></script>

42
dashboard_static/style/style.css
View File

@@ -101,4 +101,46 @@ body {
.tweet-interaction { .tweet-interaction {
display: flex; display: flex;
align-items: center; align-items: center;
}
/* 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: 20px;
margin:20px;
}
.leftcol {
background-color: red;
border-radius: 16px;
grid-row: 1/ -1;
margin: 40px;
}
.centercol {
background-color: green;
border-radius: 16px;
grid-row: 1/ -1;
margin: 40px;
}
.searchbar {
background-color: blue;
border-radius: 16px;
height: 400px;
margin: 40px;
}
.popchart {
background-color: rgba(255, 0, 255, 0.344);
border-radius: 16px;
height: 400px;
margin: 40px;
} }