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

31
webclient/src/Courses.js
View File

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

8
webclient/src/light.css
View File

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