fix: update mobile schedule view (#2306)

* fix: update mobile schedule view * remove old code * fix: update header * fix: prettier
rolling-scopes · Sep 27, 2023 · 39e6af1 · 39e6af1
1 parent 3408039
commit 39e6af1
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 43 deletions.
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { Fragment, useContext, useMemo } from 'react';
-import { Button, Dropdown, Menu, Space, Tooltip } from 'antd';
+import { Button, Dropdown, Menu, Space } from 'antd';
 import {
   EyeOutlined,
   LogoutOutlined,
@@ -36,6 +36,12 @@ const MENU_ITEMS = [
     icon: <SolutionOutlined />,
     title: 'My CV',
   },
+  {
+    link: 'https://docs.app.rs.school',
+    icon: <QuestionCircleFilled />,
+    title: 'Help',
+    target: '_blank',
+  },
   {
     link: '/api/v2/auth/github/logout',
     icon: <LogoutOutlined />,
@@ -53,11 +59,11 @@ export function Header({ title, showCourseName }: Props) {
 
   const menu = (
     <Menu>
-      {MENU_ITEMS.map(({ link, icon, title }, id, arr) => (
+      {MENU_ITEMS.map(({ link, icon, title, target }, id, arr) => (
         <Fragment key={id}>
           {id === arr.length - 1 ? <Menu.Divider /> : null}
           <Menu.Item key={id} style={currentRoute === link ? menuActiveItemStyle : undefined}>
-            <Button type="link" href={link} style={{ textAlign: 'left', width: '100%' }}>
+            <Button type="link" target={target} href={link} style={{ textAlign: 'left', width: '100%' }}>
               {icon} {title}
             </Button>
           </Menu.Item>
@@ -97,41 +103,22 @@ export function Header({ title, showCourseName }: Props) {
           <b>{title}</b> {showCourseName ? course?.name : null}
         </div>
         <div className="profile">
-          <a target="_blank" href="https://docs.app.rs.school">
-            <Tooltip title="RS School App docs">
-              <Button type="primary" ghost size="large" style={{ marginRight: 8 }}>
-                <QuestionCircleFilled />
-                <span className="button-text">Help</span>
-              </Button>
-            </Tooltip>
-          </a>
           {session.githubId && (
             <Dropdown overlay={menu} trigger={['click']}>
-              <Button type="dashed" size="large">
-                <GithubAvatar githubId={session?.githubId} size={24} />
-                <span style={{ marginLeft: '12px' }} className="button-text">
-                  My Profile
-                </span>
+              <Button type="link">
+                <GithubAvatar githubId={session?.githubId} size={32} />
               </Button>
             </Dropdown>
           )}
         </div>
         <style jsx>{`
-          .title {
-            font-size: 120%;
-            align-self: center;
-          }
           @media all and (max-width: 768px) {
             .title {
               width: 100%;
               order: 3;
               text-align: center;
               margin-top: 16px;
             }
-
-            .button-text {
-              display: none;
-            }
           }
         `}</style>
       </nav>

diff --git a/client/src/modules/Schedule/components/MobileItemCard/MobileItemCard.tsx b/client/src/modules/Schedule/components/MobileItemCard/MobileItemCard.tsx
@@ -3,21 +3,22 @@ import { Row, Col, Typography } from 'antd';
 import { SwapRightOutlined } from '@ant-design/icons';
 import { coloredDateRenderer } from 'components/Table';
 import { renderTagWithStyle, statusRenderer } from '../TableView/renderers';
+import Link from 'next/link';
 
 const { Title } = Typography;
 
 export const MobileItemCard = ({ item }: { item: CourseScheduleItemDto }) => {
   return (
-    <div style={{ padding: '12px', backgroundColor: 'white', borderBottom: '1px groove' }}>
-      <Row gutter={8} wrap={false}>
+    <div style={{ padding: '12px 0px', backgroundColor: 'white', borderBottom: '1px groove' }}>
+      <Row gutter={12} wrap={false}>
         <Col flex="1">
-          <Title level={5} ellipsis={{ expandable: true, rows: 1, symbol: 'more' }}>
-            {item.name}
-          </Title>
+          <Link href={item.descriptionUrl ? item.descriptionUrl : ''} target="_blank">
+            <Title level={5}>{item.name}</Title>
+          </Link>
         </Col>
         <Col flex="0 0 auto">{renderTagWithStyle(item.tag)}</Col>
       </Row>
-      <Row gutter={8} wrap={false}>
+      <Row gutter={12} wrap={false}>
         <Col flex="1">{statusRenderer(item.status)}</Col>
         <Col flex="0 0 auto">
           {coloredDateRenderer('UTC', 'MMM D HH:mm', 'start', 'Recommended date for studying')(item.startDate, item)}

diff --git a/client/src/modules/Schedule/pages/SchedulePage/index.tsx b/client/src/modules/Schedule/pages/SchedulePage/index.tsx
@@ -87,19 +87,21 @@ export function SchedulePage() {
     <>
       <PageLayout loading={loading} error={error} title="Schedule" showCourseName>
         <StatusTabs activeTab={selectedTab} statuses={statuses} onTabChange={setSelectedTab} mobileView={mobileView}>
-          <SettingsPanel
-            onCreateCourseTask={handleCreateCourseTask}
-            onCreateCourseEvent={handleCreateCourseEvent}
-            onCopyFromCourse={() => setCopyModal({})}
-            isCourseManager={isManager}
-            courseId={course.id}
-            courseAlias={course.alias}
-            settings={settings}
-            calendarToken={cipher}
-            tags={eventTags}
-            refreshData={refreshData}
-            mobileView={mobileView}
-          />
+          {!mobileView && (
+            <SettingsPanel
+              onCreateCourseTask={handleCreateCourseTask}
+              onCreateCourseEvent={handleCreateCourseEvent}
+              onCopyFromCourse={() => setCopyModal({})}
+              isCourseManager={isManager}
+              courseId={course.id}
+              courseAlias={course.alias}
+              settings={settings}
+              calendarToken={cipher}
+              tags={eventTags}
+              refreshData={refreshData}
+              mobileView={mobileView}
+            />
+          )}
         </StatusTabs>
 
         <TableView settings={settings} data={data} statusFilter={selectedTab} mobileView={mobileView} />