tanner/spaceport
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add black border to tag filter

Browse Source
This commit is contained in:
Tanner Collin 2022-04-26 20:27:26 +00:00
parent 0aeecdcbba
commit 5d3ab17f74
3 changed files with 62 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
webclient/src/Classes.js
View File

@ -155,6 +155,9 @@ function NewClassTable(props) {
{name}
</Label>
)}
<p/>
<p>No upcoming classes.</p>
</Segment>
)}
</div>
@ -275,7 +278,27 @@ export function Classes(props) {
<p>
Filter by tag:
<div className='coursetags'>
<div
className='labelbox'
style={{borderColor: tagFilter === false ? 'black' : 'transparent'}}
>
<Label
onClick={() => {
setTagFilter(false);
tagFilterCache = false;
}}
as='a'
tag
>
No Filter
</Label>
</div>
{Object.entries(tags).map(([name, color]) =>
<div
className='labelbox'
style={{borderColor: tagFilter === name ? 'black' : 'transparent'}}
>
<Label
onClick={() => {
setTagFilter(name);
@ -287,20 +310,10 @@ export function Classes(props) {
>
{name}
</Label>
</div>
)}
</div>
</p>
<p>
{tagFilter && <Button
onClick={() => {
setTagFilter(false);
tagFilterCache = false;
}}
>
Clear {tagFilter} filter
</Button>}
</p>
{classes.length && courses.length ?
sortByCourse ?

31
webclient/src/Courses.js
View File

@ -56,7 +56,27 @@ export function Courses(props) {
<p>
Filter by tag:
<div className='coursetags'>
<div
className='labelbox'
style={{borderColor: tagFilter === false ? 'black' : 'transparent'}}
>
<Label
onClick={() => {
setTagFilter(false);
tagFilterCache = false;
}}
as='a'
tag
>
No Filter
</Label>
</div>
{Object.entries(tags).map(([name, color]) =>
<div
className='labelbox'
style={{borderColor: tagFilter === name ? 'black' : 'transparent'}}
>
<Label
onClick={() => {
setTagFilter(name);
@ -68,19 +88,10 @@ export function Courses(props) {
>
{name}
</Label>
</div>
)}
</div>
</p>
<p>
{tagFilter && <Button
onClick={() => {
setTagFilter(false);
tagFilterCache = false;
}}
>
Clear {tagFilter} filter
</Button>}
</p>
{courses ?
<Table basic='very'>

8
webclient/src/light.css
View File

@ -138,11 +138,17 @@ body {
flex-wrap: wrap;
}
.newclasstable .ui.tag.label {
.ui.tag.label {
padding-left: 1rem;
padding-right: 0.5rem;
}
.labelbox {
display: inline;
padding: 0.55rem 0.1rem;
border: 2px solid black;
}
.usage {
height: 100vh;
background-color: black;