Skip to content

Commit 2e6423d

Browse files
mihowmihow
authored
Merge branch 'main' into fix/missing-crops
2 parents a9063aa + 79d4bc5 commit 2e6423d

File tree

42 files changed

+332
-142
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+332
-142
lines changed

‎ui/src/components/blueprint-collection/blueprint-collection.module.scss‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,9 @@
33
@import 'src/design-system/variables/variables.scss';
44

55
.blueprint {
6-
display: flex;
7-
flex-direction: column;
8-
align-items: center;
9-
gap: 40px;
10-
min-height: 100%;
116
padding: 20px;
7+
width: 100%;
8+
min-height: 100%;
129
background-color: rgba($color: $color-primary-2-50, $alpha: 0.5);
1310
background-size: 20px 20px;
1411
background-image: linear-gradient(
@@ -20,6 +17,20 @@
2017
box-sizing: border-box;
2118
}
2219

20+
.licenseInfoContent {
21+
padding: 20px;
22+
text-align: right;
23+
}
24+
25+
.blueprintContent {
26+
display: flex;
27+
flex-direction: column;
28+
align-items: center;
29+
gap: 40px;
30+
padding: 20px;
31+
overflow-x: auto;
32+
}
33+
2334
.blueprintItem {
2435
display: flex;
2536
flex-direction: column;
@@ -69,8 +80,11 @@
6980
}
7081

7182
@media only screen and (max-width: $small-screen-breakpoint) {
72-
.blueprint {
73-
min-width: 100%;
83+
.licenseInfoContent {
84+
text-align: left;
85+
}
86+
87+
.blueprintContent {
7488
flex-direction: row;
7589

7690
&.empty {

‎ui/src/components/blueprint-collection/blueprint-collection.tsx‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Icon, IconType } from 'design-system/components/icon/icon'
33
import { useState } from 'react'
44
import { Link } from 'react-router-dom'
55
import styles from './blueprint-collection.module.scss'
6+
import { LicenseInfo } from 'components/license-info/license-info'
67

78
export interface BlueprintItem {
89
id: string
@@ -19,17 +20,22 @@ export const BlueprintCollection = ({ items }: { items: BlueprintItem[] }) => (
1920
[styles.empty]: items.length === 0,
2021
})}
2122
>
22-
{items.map((item) =>
23-
item.to ? (
24-
<Link key={item.id} to={item.to} className={styles.blueprintItem}>
25-
<BlueprintItem item={item} />
26-
</Link>
27-
) : (
28-
<div key={item.id} className={styles.blueprintItem}>
29-
<BlueprintItem item={item} />
30-
</div>
31-
)
32-
)}
23+
<div className={styles.licenseInfoContent}>
24+
<LicenseInfo />
25+
</div>
26+
<div className={styles.blueprintContent}>
27+
{items.map((item) =>
28+
item.to ? (
29+
<Link key={item.id} to={item.to} className={styles.blueprintItem}>
30+
<BlueprintItem item={item} />
31+
</Link>
32+
) : (
33+
<div key={item.id} className={styles.blueprintItem}>
34+
<BlueprintItem item={item} />
35+
</div>
36+
)
37+
)}
38+
</div>
3339
</div>
3440
)
3541

‎ui/src/components/cookie-dialog/cookie-dialog.module.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import 'src/design-system/variables/colors.scss';
22
@import 'src/design-system/variables/typography.scss';
3+
@import 'src/design-system/variables/variables.scss';
34

45
.dialog {
56
position: fixed;
@@ -48,3 +49,17 @@
4849
display: flex;
4950
gap: 16px;
5051
}
52+
53+
@media only screen and (max-width: $small-screen-breakpoint) {
54+
.dialog {
55+
left: 0;
56+
bottom: 0;
57+
max-width: 100%;
58+
padding: 16px;
59+
border-radius: 0;
60+
}
61+
62+
.actions {
63+
gap: 8px;
64+
}
65+
}

‎ui/src/components/header/header.tsx‎

Lines changed: 33 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1+
import classNames from 'classnames'
12
import { useLogout } from 'data-services/hooks/auth/useLogout'
23
import { Button, ButtonTheme } from 'design-system/components/button/button'
3-
import { Link, useLocation, useNavigate } from 'react-router-dom'
4-
import { APP_ROUTES } from 'utils/constants'
4+
import buttonStyles from 'design-system/components/button/button.module.scss'
5+
import { Icon, IconTheme, IconType } from 'design-system/components/icon/icon'
6+
import { Link, useLocation } from 'react-router-dom'
7+
import { APP_ROUTES, LANDING_PAGE_URL } from 'utils/constants'
58
import { STRING, translate } from 'utils/language'
69
import { usePageTitle } from 'utils/usePageTitle'
710
import { useUser } from 'utils/user/userContext'
@@ -12,7 +15,6 @@ import { VersionInfo } from './version-info/version-info'
1215

1316
export const Header = () => {
1417
const location = useLocation()
15-
const navigate = useNavigate()
1618
const { user } = useUser()
1719
const { logout, isLoading: isLogoutLoading } = useLogout()
1820

@@ -32,11 +34,25 @@ export const Header = () => {
3234
<VersionInfo />
3335
<div className={styles.rightContent}>
3436
<div className={styles.infoPages}>
35-
<Button
36-
label="Terms of Service"
37-
theme={ButtonTheme.Plain}
38-
onClick={() => navigate(APP_ROUTES.TERMS_OF_SERVICE)}
39-
/>
37+
<a
38+
href={LANDING_PAGE_URL}
39+
rel="noreferrer"
40+
target="_blank"
41+
className={classNames(buttonStyles.button, buttonStyles.plain)}
42+
>
43+
<span className={buttonStyles.label}>About Antenna</span>
44+
<Icon
45+
type={IconType.ExternalLink}
46+
theme={IconTheme.Primary}
47+
size={14}
48+
/>
49+
</a>
50+
<Link
51+
to={APP_ROUTES.TERMS_OF_SERVICE}
52+
className={classNames(buttonStyles.button, buttonStyles.plain)}
53+
>
54+
<span className={buttonStyles.label}>Terms of Service</span>
55+
</Link>
4056
</div>
4157
{user.loggedIn ? (
4258
<>
@@ -49,15 +65,15 @@ export const Header = () => {
4965
<UserInfoDialog />
5066
</>
5167
) : (
52-
<>
53-
<Button
54-
label={translate(STRING.LOGIN)}
55-
theme={ButtonTheme.Plain}
56-
onClick={() =>
57-
navigate(APP_ROUTES.LOGIN, { state: { to: location.pathname } })
58-
}
59-
/>
60-
</>
68+
<Link
69+
to={APP_ROUTES.LOGIN}
70+
state={{ to: location.pathname }}
71+
className={classNames(buttonStyles.button, buttonStyles.plain)}
72+
>
73+
<span className={buttonStyles.label}>
74+
{translate(STRING.LOGIN)}
75+
</span>
76+
</Link>
6177
)}
6278
</div>
6379
</header>

‎ui/src/components/header/version-info/version-info.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
}
1111

1212
.badge {
13-
padding: 4px 16px;
13+
padding: 6px 16px 4px;
1414
border-radius: 4px;
1515
background-color: $color-success-100;
1616
color: $color-success-700;

‎ui/src/components/license-info/license-info.module.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@import 'src/design-system/variables/colors.scss';
2+
@import 'src/design-system/variables/typography.scss';
3+
4+
.text {
5+
@include paragraph-small();
6+
color: $color-neutral-300;
7+
margin: 0;
8+
9+
a {
10+
font-weight: 600;
11+
color: $color-primary-1-600;
12+
}
13+
}

‎ui/src/components/license-info/license-info.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { CSSProperties } from 'react'
2+
import styles from './license-info.module.scss'
3+
4+
const LINK = 'https://creativecommons.org/licenses/by-nc/4.0/legalcode'
5+
6+
interface LicenseInfoProps {
7+
style?: CSSProperties
8+
}
9+
10+
export const LicenseInfo = ({ style }: LicenseInfoProps) => {
11+
// TODO: Check licence given the current project
12+
13+
return (
14+
<p className={styles.text} style={style}>
15+
These images are licensed under <a href={LINK}>CC BY-NC 4.0</a>
16+
</p>
17+
)
18+
}

‎ui/src/data-services/models/session.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,13 @@ export class Session {
7171
}
7272

7373
get numSpecies(): number | undefined {
74+
// Workaround for taxa count being 0 when occurrences count > 0
75+
if (this.numOccurrences) {
76+
if (this._event.taxa_count === 0) {
77+
return undefined
78+
}
79+
}
80+
7481
return this._event.taxa_count
7582
}
7683

‎ui/src/data-services/models/timeline-tick.ts‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { getCompactTimespanString } from 'utils/date/getCompactTimespanString/getCompactTimespanString'
2-
31
export type ServerTimelineTick = {
42
start: string
53
end: string
@@ -60,16 +58,4 @@ export class TimelineTick {
6058
get representativeCaptureId(): string | undefined {
6159
return this.topCaptureId ?? this.firstCaptureId
6260
}
63-
64-
get tooltip(): string {
65-
const timespanString = getCompactTimespanString({
66-
date1: this.startDate,
67-
date2: this.endDate,
68-
options: {
69-
second: true,
70-
},
71-
})
72-
73-
return `${timespanString}<br>Captures: ${this.numCaptures}<br>Avg. detections: ${this.avgDetections}`
74-
}
7561
}

‎ui/src/design-system/components/button/button.module.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,12 @@
6060
}
6161
}
6262

63+
.label {
64+
padding-top: 2px;
65+
}
66+
6367
.details {
68+
padding-top: 2px;
6469
@include paragraph-xx-small();
6570
color: $color-neutral-300;
6671
font-weight: 600;

0 commit comments

Comments
 (0)