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

css variables

Browse Source
This commit is contained in:
Tim Wijma
2022-11-02 15:36:49 +01:00
parent 1a6582a18a
commit 2aefeb2075
3 changed files with 17 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
dashboard_static/index.html
View File

@@ -94,9 +94,10 @@
</div>
<div class="rightcol column">
<div class="searchcontainer column">
<input class="searchbar" type="text" placeholder="SEARCH CLUCCS...">
<input class="searchbar" type="text" placeholder="Search Cluccs">
<input class="blockedwords" type="text" placeholder="Enter blocked words (separated by comma)">
<div class="button sort-btn">
<span class="sortby">SORT BY <span class="material-symbols-outlined">arrow_drop_down</span></span>
<span class="sortby">Sort By <span class="material-symbols-outlined">arrow_drop_down</span></span>
<div class="sort-dropdown">
<ul class="sort-dropdown-list">
<li>Time</li>
@@ -106,11 +107,10 @@
</ul>
</div>
</div>
<div class="button">BLOCKED WORDS</div>
<div class="button">POPULARITY FILTER</div>
<!-- <div class="button">BLOCKED WORDS</div> -->
</div>
<div class="popchart column">
<span class="colheader chartheader">Sports Popularity Filter</span>
<span class="colheader chartheader">Sports Popularity Chart</span>
</div>
</div>
</div>

2
dashboard_static/js/code.js
View File

@@ -154,4 +154,4 @@ function sortTweets(tweets, likesDes=null, retweetsDes=null, repliesDes=null, da
tweets.sort(function(a,b){return Date(a.created_at)-Date(b.reply_count)})
}
return tweets
}
}

26
dashboard_static/style/style.css
View File

@@ -22,7 +22,7 @@ body {
.container {
background-color: var(--main-bg);
color: white;
color: var(--main-dark);
padding: 16px 48px;
display: flex;
flex-direction: column;
@@ -68,7 +68,7 @@ body {
height: 30px;
padding: 4px;
margin-right: 8px;
border: 1px solid white;
border: 1px solid var(--main-light);
border-radius: 100px;
cursor: pointer;
}
@@ -122,19 +122,19 @@ body {
}
.tweet-nickname {
color: white;
color: var(--main-light);
text-decoration: none;
font-weight: bold;
}
.tweet-nickname:active {
color: white;
color: var(--main-light);
text-decoration: underline;
font-weight: bold;
}
.tweet-username {
color: white;
color: var(--main-light);
text-decoration: none;
opacity: 0.8;
}
@@ -217,13 +217,13 @@ body {
}
.searchbar {
.searchbar, .blockedwords {
width: 100%;
}
.searchbar, .button {
.searchbar, .button, .blockedwords {
font-weight: bold;
font-size: 24px;
font-size: 22px;
border-radius: 50px;
padding: 8px;
margin: 4px 8px;
@@ -231,9 +231,9 @@ body {
}
.button {
color: black;
color: var(--main-dark);
cursor: pointer;
background-color: white;
background-color: var(--main-light);
border-radius: 30px;
border: none;
}
@@ -254,7 +254,7 @@ body {
padding: 0;
margin: 0;
margin-left: -8px;
background-color: white;
background-color: var(--main-light);
border-radius: 0 0 16px 16px;
}
@@ -264,10 +264,6 @@ body {
padding: 0 8px;
}
.sort-dropdown-list li:hover {
background-color: #dddddd;
}
.radius-bottom {
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;