Skip to content

Commit ceaf256

Browse files
JovenSohRichDom2185sayomaki
authored and
izruff
committed
Achievements Page Mobile View (#2868)
* updated for mobile * fixed formatting * ran test suites * minor achievement card changes * Revert snapshot change * Remove committed temporary file * Revert unnecessary changes * Remove test coverage file * reverted tsconfig change * made achievement card scrollable * Removed additional div * Add css to achivementcontrol so it would format the page properly * fixed formatting issues --------- Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Co-authored-by: sayomaki <sayomayomaki@gmail.com>
1 parent d4c8e15 commit ceaf256

File tree

5 files changed

+485
-53
lines changed

5 files changed

+485
-53
lines changed

‎src/commons/achievement/AchievementManualEditor.tsx

Lines changed: 54 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -95,53 +95,61 @@ const AchievementManualEditor: React.FC<Props> = props => {
9595

9696
return (
9797
<div className="achievement-manual-editor">
98-
<h3>User: </h3>
99-
<UserSelect
100-
filterable={true}
101-
items={users}
102-
itemRenderer={userRenderer}
103-
itemPredicate={userPredicate}
104-
onItemSelect={changeSelectedUser}
105-
noResults={<MenuItem disabled={true} text="No matching user" />}
106-
>
107-
<Button
108-
outlined={true}
109-
text={selectedUser ? selectedUser.name || selectedUser.username : 'No User Selected'}
110-
color="White"
98+
<div className="editor-section">
99+
<h3>User: </h3>
100+
<UserSelect
101+
filterable={true}
102+
items={users}
103+
itemRenderer={userRenderer}
104+
itemPredicate={userPredicate}
105+
onItemSelect={changeSelectedUser}
106+
noResults={<MenuItem disabled={true} text="No matching user" />}
107+
>
108+
<Button
109+
outlined={true}
110+
text={selectedUser ? selectedUser.name || selectedUser.username : 'No User Selected'}
111+
color="White"
112+
/>
113+
</UserSelect>
114+
</div>
115+
116+
<div className="editor-section">
117+
<h3>Goal: </h3>
118+
<GoalSelect
119+
filterable={true}
120+
items={manualAchievements}
121+
itemRenderer={goalRenderer}
122+
itemPredicate={goalPredicate}
123+
onItemSelect={changeGoal}
124+
noResults={<MenuItem disabled={true} text="No matching goal" />}
125+
>
126+
<Button outlined={true} text={goal ? goal.text : 'No Goal Selected'} color="White" />
127+
</GoalSelect>
128+
</div>
129+
130+
<div className="editor-section">
131+
<h3>Count: </h3>
132+
<NumericInput
133+
value={count}
134+
min={0}
135+
allowNumericCharactersOnly={true}
136+
minorStepSize={null}
137+
placeholder="Count"
138+
onValueChange={changeCount}
111139
/>
112-
</UserSelect>
113-
114-
<h3>Goal: </h3>
115-
<GoalSelect
116-
filterable={true}
117-
items={manualAchievements}
118-
itemRenderer={goalRenderer}
119-
itemPredicate={goalPredicate}
120-
onItemSelect={changeGoal}
121-
noResults={<MenuItem disabled={true} text="No matching goal" />}
122-
>
123-
<Button outlined={true} text={goal ? goal.text : 'No Goal Selected'} color="White" />
124-
</GoalSelect>
125-
126-
<h3>Count: </h3>
127-
<NumericInput
128-
value={count}
129-
min={0}
130-
allowNumericCharactersOnly={true}
131-
minorStepSize={null}
132-
placeholder="Count"
133-
onValueChange={changeCount}
134-
/>
135-
136-
<h3> </h3>
137-
<Button outlined={true} text="Update Goal" onClick={updateGoal} intent="primary" />
138-
139-
<h3> </h3>
140-
<Checkbox
141-
checked={viewHidden}
142-
label="View Hidden Achievements"
143-
onChange={() => changeViewHidden(!viewHidden)}
144-
/>
140+
</div>
141+
142+
<div className="editor-section">
143+
<Button outlined={true} text="Update Goal" onClick={updateGoal} intent="primary" />
144+
</div>
145+
146+
<div className="editor-section">
147+
<Checkbox
148+
checked={viewHidden}
149+
label="View Hidden Achievements"
150+
onChange={() => changeViewHidden(!viewHidden)}
151+
/>
152+
</div>
145153
</div>
146154
);
147155
};

‎src/commons/achievement/utils/AchievementInferencer.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -288,7 +288,6 @@ class AchievementInferencer {
288288
// finally, process the nodeList
289289
this.processNodes();
290290
this.normalizePositions(achievement.uuid, achievement.position);
291-
292291
return newUuid;
293292
}
294293

‎src/pages/achievement/subcomponents/AchievementDashboard.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { IconNames } from '@blueprintjs/icons';
22
import React, { useEffect, useMemo, useState } from 'react';
33
import { useDispatch } from 'react-redux';
44
import { Role } from 'src/commons/application/ApplicationTypes';
5-
import { useSession, useTypedSelector } from 'src/commons/utils/Hooks';
5+
import { useResponsive, useSession, useTypedSelector } from 'src/commons/utils/Hooks';
66

77
import AchievementFilter from '../../../commons/achievement/AchievementFilter';
88
import AchievementManualEditor from '../../../commons/achievement/AchievementManualEditor';
@@ -52,6 +52,7 @@ const AchievementDashboard: React.FC = () => {
5252
// default nothing selected
5353
const userIdState = useState<AchievementUser | undefined>(undefined);
5454
const [selectedUser] = userIdState;
55+
const { isMobileBreakpoint } = useResponsive();
5556

5657
const {
5758
group,
@@ -156,8 +157,7 @@ const AchievementDashboard: React.FC = () => {
156157
updateGoalProgress={handleUpdateGoalProgress}
157158
/>
158159
)}
159-
160-
<div className="achievement-main">
160+
<div className={isMobileBreakpoint ? 'achievement-main-mobile' : 'achievement-main'}>
161161
<div className="filter-container">
162162
<AchievementFilter
163163
filterState={filterState}

‎src/styles/_achievementcontrol.scss

Lines changed: 110 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,97 @@
7474
@extend %container;
7575
width: $view-width + $default-spacing * 2;
7676

77+
.task {
78+
.achievement-card {
79+
border-radius: 0.3rem;
80+
cursor: pointer;
81+
display: flex;
82+
align-items: center;
83+
height: $card-height;
84+
transition: box-shadow 0.2s ease-in-out;
85+
width: $card-width;
86+
87+
padding: 0.5em;
88+
column-gap: 0.5em;
89+
90+
.content {
91+
display: flex;
92+
flex-direction: column;
93+
justify-content: space-between;
94+
height: 100%;
95+
width: 100%;
96+
97+
.heading {
98+
align-items: center;
99+
display: flex;
100+
101+
> * {
102+
margin: 0;
103+
}
104+
}
105+
106+
.details {
107+
display: flex;
108+
flex-direction: row;
109+
font-size: 0.8em;
110+
111+
p {
112+
margin: 0;
113+
}
114+
115+
.deadline,
116+
.xp {
117+
align-items: center;
118+
display: flex;
119+
column-gap: 0.3em;
120+
width: 100%;
121+
}
122+
}
123+
}
124+
}
125+
126+
.achievement-card:hover {
127+
box-shadow: 0 0 10px black;
128+
}
129+
130+
.prerequisite-container {
131+
$shrink-factor: 0.9;
132+
$line-width: 1em;
133+
// remaining-width is the empty space between line and card
134+
$remaining-width: math.div((1 - $shrink-factor) * $card-width - 2 * $line-width, 2);
135+
$top-spacing: 0.2em;
136+
$line-extension: 0.1em;
137+
138+
display: flex;
139+
flex-direction: column;
140+
141+
.prerequisite {
142+
display: flex;
143+
flex-direction: row;
144+
max-width: $card-width;
145+
146+
.dropdown-lines {
147+
height: $top-spacing + $card-height + $remaining-width + $line-extension;
148+
margin: -#{math.div($card-height, 1.6)} -#{$line-width + $remaining-width} 0
149+
$line-width;
150+
min-width: $line-width;
151+
}
152+
153+
.achievement-card {
154+
margin: $top-spacing 0 0 0;
155+
transform: scale($shrink-factor);
156+
}
157+
}
158+
159+
.prerequisite:first-child {
160+
.dropdown-lines {
161+
height: $top-spacing + math.div($card-height, 2) + $remaining-width;
162+
margin-top: 0;
163+
}
164+
}
165+
}
166+
}
167+
77168
.no-view {
78169
align-items: center;
79170
text-shadow: black 1px 1px;
@@ -84,20 +175,23 @@
84175
}
85176

86177
.view {
178+
border-radius: 1rem;
87179
text-shadow: black 1px 1px;
88180
color: white;
89181
display: flex;
90182
flex-direction: column;
91183
margin: $default-spacing;
92-
min-height: $view-height;
93184
width: $view-width;
185+
padding-bottom: 1rem;
94186

95187
.cover {
188+
border-top-left-radius: 1rem;
189+
border-top-right-radius: 1rem;
96190
display: flex;
97191
flex-direction: column;
98-
height: $cover-height;
99192
text-align: center;
100-
width: $cover-width;
193+
min-height: $cover-height;
194+
min-width: $cover-width;
101195

102196
h1 {
103197
margin: 0.5em auto 0;
@@ -117,6 +211,10 @@
117211
}
118212
}
119213

214+
.progress-header {
215+
margin-left: 2rem;
216+
}
217+
120218
.goal {
121219
align-items: center;
122220
display: flex;
@@ -143,6 +241,15 @@
143241
}
144242
}
145243

244+
.goal-progress {
245+
width: 100%;
246+
padding-right: 2.5em;
247+
248+
.progress {
249+
margin-top: 5px;
250+
}
251+
}
252+
146253
p {
147254
margin: 0;
148255
padding: 0;

0 commit comments

Comments
 (0)