Achievements Page Mobile View

src/commons/achievement/AchievementManualEditor.tsx

@@ -95,53 +95,61 @@ const AchievementManualEditor: React.FC<Props> = props => {
 
   return (
     <div className="achievement-manual-editor">
-      <h3>User: </h3>
-      <UserSelect
-        filterable={true}
-        items={users}
-        itemRenderer={userRenderer}
-        itemPredicate={userPredicate}
-        onItemSelect={changeSelectedUser}
-        noResults={<MenuItem disabled={true} text="No matching user" />}
-      >
-        <Button
-          outlined={true}
-          text={selectedUser ? selectedUser.name || selectedUser.username : 'No User Selected'}
-          color="White"
+      <div className="editor-section">
+        <h3>User: </h3>
+        <UserSelect
+          filterable={true}
+          items={users}
+          itemRenderer={userRenderer}
+          itemPredicate={userPredicate}
+          onItemSelect={changeSelectedUser}
+          noResults={<MenuItem disabled={true} text="No matching user" />}
+        >
+          <Button
+            outlined={true}
+            text={selectedUser ? selectedUser.name || selectedUser.username : 'No User Selected'}
+            color="White"
+          />
+        </UserSelect>
+      </div>
+
+      <div className="editor-section">
+        <h3>Goal: </h3>
+        <GoalSelect
+          filterable={true}
+          items={manualAchievements}
+          itemRenderer={goalRenderer}
+          itemPredicate={goalPredicate}
+          onItemSelect={changeGoal}
+          noResults={<MenuItem disabled={true} text="No matching goal" />}
+        >
+          <Button outlined={true} text={goal ? goal.text : 'No Goal Selected'} color="White" />
+        </GoalSelect>
+      </div>
+
+      <div className="editor-section">
+        <h3>Count: </h3>
+        <NumericInput
+          value={count}
+          min={0}
+          allowNumericCharactersOnly={true}
+          minorStepSize={null}
+          placeholder="Count"
+          onValueChange={changeCount}
         />
-      </UserSelect>
-
-      <h3>Goal: </h3>
-      <GoalSelect
-        filterable={true}
-        items={manualAchievements}
-        itemRenderer={goalRenderer}
-        itemPredicate={goalPredicate}
-        onItemSelect={changeGoal}
-        noResults={<MenuItem disabled={true} text="No matching goal" />}
-      >
-        <Button outlined={true} text={goal ? goal.text : 'No Goal Selected'} color="White" />
-      </GoalSelect>
-
-      <h3>Count: </h3>
-      <NumericInput
-        value={count}
-        min={0}
-        allowNumericCharactersOnly={true}
-        minorStepSize={null}
-        placeholder="Count"
-        onValueChange={changeCount}
-      />
-
-      <h3> </h3>
-      <Button outlined={true} text="Update Goal" onClick={updateGoal} intent="primary" />
-
-      <h3> </h3>
-      <Checkbox
-        checked={viewHidden}
-        label="View Hidden Achievements"
-        onChange={() => changeViewHidden(!viewHidden)}
-      />
+      </div>
+
+      <div className="editor-section">
+        <Button outlined={true} text="Update Goal" onClick={updateGoal} intent="primary" />
+      </div>
+
+      <div className="editor-section">
+        <Checkbox
+          checked={viewHidden}
+          label="View Hidden Achievements"
+          onChange={() => changeViewHidden(!viewHidden)}
+        />
+      </div>
     </div>
   );
 };

src/commons/achievement/utils/AchievementInferencer.ts

@@ -288,7 +288,6 @@ class AchievementInferencer {
     // finally, process the nodeList
     this.processNodes();
     this.normalizePositions(achievement.uuid, achievement.position);
-
     return newUuid;
   }
 

src/pages/achievement/subcomponents/AchievementDashboard.tsx

@@ -2,7 +2,7 @@ import { IconNames } from '@blueprintjs/icons';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { Role } from 'src/commons/application/ApplicationTypes';
-import { useSession, useTypedSelector } from 'src/commons/utils/Hooks';
+import { useResponsive, useSession, useTypedSelector } from 'src/commons/utils/Hooks';
 
 import AchievementFilter from '../../../commons/achievement/AchievementFilter';
 import AchievementManualEditor from '../../../commons/achievement/AchievementManualEditor';
@@ -52,6 +52,7 @@ const AchievementDashboard: React.FC = () => {
   // default nothing selected
   const userIdState = useState<AchievementUser | undefined>(undefined);
   const [selectedUser] = userIdState;
+  const { isMobileBreakpoint } = useResponsive();
 
   const {
     group,
@@ -156,8 +157,7 @@ const AchievementDashboard: React.FC = () => {
             updateGoalProgress={handleUpdateGoalProgress}
           />
         )}
-
-        <div className="achievement-main">
+        <div className={isMobileBreakpoint ? 'achievement-main-mobile' : 'achievement-main'}>
           <div className="filter-container">
             <AchievementFilter
               filterState={filterState}

src/styles/_achievementcontrol.scss

@@ -74,6 +74,97 @@
       @extend %container;
       width: $view-width + $default-spacing * 2;
 
+      .task {
+        .achievement-card {
+          border-radius: 0.3rem;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          height: $card-height;
+          transition: box-shadow 0.2s ease-in-out;
+          width: $card-width;
+
+          padding: 0.5em;
+          column-gap: 0.5em;
+
+          .content {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            height: 100%;
+            width: 100%;
+
+            .heading {
+              align-items: center;
+              display: flex;
+
+              > * {
+                margin: 0;
+              }
+            }
+
+            .details {
+              display: flex;
+              flex-direction: row;
+              font-size: 0.8em;
+
+              p {
+                margin: 0;
+              }
+
+              .deadline,
+              .xp {
+                align-items: center;
+                display: flex;
+                column-gap: 0.3em;
+                width: 100%;
+              }
+            }
+          }
+        }
+
+        .achievement-card:hover {
+          box-shadow: 0 0 10px black;
+        }
+
+        .prerequisite-container {
+          $shrink-factor: 0.9;
+          $line-width: 1em;
+          // remaining-width is the empty space between line and card
+          $remaining-width: math.div((1 - $shrink-factor) * $card-width - 2 * $line-width, 2);
+          $top-spacing: 0.2em;
+          $line-extension: 0.1em;
+
+          display: flex;
+          flex-direction: column;
+
+          .prerequisite {
+            display: flex;
+            flex-direction: row;
+            max-width: $card-width;
+
+            .dropdown-lines {
+              height: $top-spacing + $card-height + $remaining-width + $line-extension;
+              margin: -#{math.div($card-height, 1.6)} -#{$line-width + $remaining-width} 0
+                $line-width;
+              min-width: $line-width;
+            }
+
+            .achievement-card {
+              margin: $top-spacing 0 0 0;
+              transform: scale($shrink-factor);
+            }
+          }
+
+          .prerequisite:first-child {
+            .dropdown-lines {
+              height: $top-spacing + math.div($card-height, 2) + $remaining-width;
+              margin-top: 0;
+            }
+          }
+        }
+      }
+
       .no-view {
         align-items: center;
         text-shadow: black 1px 1px;
@@ -84,20 +175,23 @@
       }
 
       .view {
+        border-radius: 1rem;
         text-shadow: black 1px 1px;
         color: white;
         display: flex;
         flex-direction: column;
         margin: $default-spacing;
-        min-height: $view-height;
         width: $view-width;
+        padding-bottom: 1rem;
 
         .cover {
+          border-top-left-radius: 1rem;
+          border-top-right-radius: 1rem;
           display: flex;
           flex-direction: column;
-          height: $cover-height;
           text-align: center;
-          width: $cover-width;
+          min-height: $cover-height;
+          min-width: $cover-width;
 
           h1 {
             margin: 0.5em auto 0;
@@ -117,6 +211,10 @@
           }
         }
 
+        .progress-header {
+          margin-left: 2rem;
+        }
+
         .goal {
           align-items: center;
           display: flex;
@@ -143,6 +241,15 @@
             }
           }
 
+          .goal-progress {
+            width: 100%;
+            padding-right: 2.5em;
+
+            .progress {
+              margin-top: 5px;
+            }
+          }
+
           p {
             margin: 0;
             padding: 0;