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

Merge pull request #18 from olinpin/Filters

Browse Source 
Filters
This commit is contained in:
TimWijma
2022-11-02 15:38:32 +01:00
committed by GitHub
parent 98bc27439d 68a19ce52a
commit 0835b38326
3 changed files with 16 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
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,8 +107,7 @@
</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>

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,13 +122,13 @@ 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;
}
@@ -141,7 +141,7 @@ body {
.tweet-username {
color: white;
color: var(--main-light);
text-decoration: none;
opacity: 0.8;
}
@@ -224,13 +224,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;
@@ -238,9 +238,9 @@ body {
}
.button {
color: black;
color: var(--main-dark);
cursor: pointer;
background-color: white;
background-color: var(--main-light);
border-radius: 30px;
border: none;
}
@@ -261,7 +261,7 @@ body {
padding: 0;
margin: 0;
margin-left: -8px;
background-color: white;
background-color: var(--main-light);
border-radius: 0 0 16px 16px;
}
@@ -271,10 +271,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;