From 6de34728f4b9a356d1b1d18165cc4809017216b2 Mon Sep 17 00:00:00 2001 From: Izhari Ishak Aksa Date: Tue, 30 Jan 2024 18:54:51 +0700 Subject: [PATCH 1/7] Add ContestAnnouncementInstruction --- .../ContestAnnouncementCreateDialog.scss | 17 ----------------- .../ContestAnnouncementCreateForm.jsx | 2 ++ .../ContestAnnouncementEditDialog.scss | 17 ----------------- .../ContestAnnouncementEditForm.jsx | 2 ++ .../ContestAnnouncementInstruction.jsx | 18 ++++++++++++++++++ 5 files changed, 22 insertions(+), 34 deletions(-) create mode 100644 judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementInstruction/ContestAnnouncementInstruction.jsx diff --git a/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementCreateDialog/ContestAnnouncementCreateDialog.scss b/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementCreateDialog/ContestAnnouncementCreateDialog.scss index a10691698..928f35df1 100644 --- a/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementCreateDialog/ContestAnnouncementCreateDialog.scss +++ b/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementCreateDialog/ContestAnnouncementCreateDialog.scss @@ -1,20 +1,3 @@ .contest-announcement-create-dialog { width: 750px; - height: 650px; -} - -.contest-announcement-create-dialog-body { - height: 520px; -} - -// This is to compensate the increase in toolbar height - -@media only screen and (max-width: 600px) { - .contest-announcement-create-dialog { - height: 700px; - } - - .contest-announcement-create-dialog-body { - height: 570px; - } } diff --git a/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementCreateForm/ContestAnnouncementCreateForm.jsx b/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementCreateForm/ContestAnnouncementCreateForm.jsx index f1cf82989..9d647eaa0 100644 --- a/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementCreateForm/ContestAnnouncementCreateForm.jsx +++ b/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementCreateForm/ContestAnnouncementCreateForm.jsx @@ -6,6 +6,7 @@ import { FormSelect2 } from '../../../../../../components/forms/FormSelect2/Form import { FormTextInput } from '../../../../../../components/forms/FormTextInput/FormTextInput'; import { Required } from '../../../../../../components/forms/validations'; import { ContestAnnouncementStatus } from '../../../../../../modules/api/uriel/contestAnnouncement'; +import { ContestAnnouncementInstruction } from "../ContestAnnouncementInstruction/ContestAnnouncementInstruction"; export default function ContestAnnouncementCreateForm({ onSubmit, renderFormComponents }) { const statusField = { @@ -34,6 +35,7 @@ export default function ContestAnnouncementCreateForm({ onSubmit, renderFormComp <> + ); diff --git a/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementEditDialog/ContestAnnouncementEditDialog.scss b/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementEditDialog/ContestAnnouncementEditDialog.scss index 6effec38b..3f5593f0e 100644 --- a/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementEditDialog/ContestAnnouncementEditDialog.scss +++ b/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementEditDialog/ContestAnnouncementEditDialog.scss @@ -1,20 +1,3 @@ .contest-announcement-edit-dialog { width: 750px; - height: 700px; -} - -.contest-announcement-edit-dialog-body { - height: 570px; -} - -// This is to compensate the increase in toolbar height - -@media only screen and (max-width: 600px) { - .contest-announcement-edit-dialog { - height: 750px; - } - - .contest-announcement-edit-dialog-body { - height: 620px; - } } diff --git a/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementEditForm/ContestAnnouncementEditForm.jsx b/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementEditForm/ContestAnnouncementEditForm.jsx index 57dbd2044..87da496d8 100644 --- a/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementEditForm/ContestAnnouncementEditForm.jsx +++ b/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementEditForm/ContestAnnouncementEditForm.jsx @@ -6,6 +6,7 @@ import { FormSelect2 } from '../../../../../../components/forms/FormSelect2/Form import { FormTextInput } from '../../../../../../components/forms/FormTextInput/FormTextInput'; import { Required } from '../../../../../../components/forms/validations'; import { ContestAnnouncementStatus } from '../../../../../../modules/api/uriel/contestAnnouncement'; +import {ContestAnnouncementInstruction} from "../ContestAnnouncementInstruction/ContestAnnouncementInstruction"; export default function ContestAnnouncementEditForm({ onSubmit, initialValues, renderFormComponents }) { const statusField = { @@ -33,6 +34,7 @@ export default function ContestAnnouncementEditForm({ onSubmit, initialValues, r <> + ); diff --git a/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementInstruction/ContestAnnouncementInstruction.jsx b/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementInstruction/ContestAnnouncementInstruction.jsx new file mode 100644 index 000000000..e9365df4f --- /dev/null +++ b/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementInstruction/ContestAnnouncementInstruction.jsx @@ -0,0 +1,18 @@ +import { Callout } from "@blueprintjs/core"; + +export function ContestAnnouncementInstruction() { + return ( + +
Add an Image to Your Announcement
+

+ Want to make your announcement pop? Try adding an image! Here's how: +

    +
  • First, go to Settings and turn on the 'Files' module.
    • +
  • Then, in the 'Files' area, click 'Upload File' to upload your picture.
    • +
  • Now, just write download/[your-image-name].jpg in the announcement where you want the image. Make sure to change [your-image-name] to the name of the file you uploaded.
    • +
+ That's it! A little picture can say a lot. +

+ + ); +} From 7291c07568c74c762560438b530c627e6ba0ac46 Mon Sep 17 00:00:00 2001 From: Izhari Ishak Aksa Date: Tue, 30 Jan 2024 19:10:43 +0700 Subject: [PATCH 2/7] Update ContestAnnouncementInstruction.jsx --- .../ContestAnnouncementInstruction.jsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementInstruction/ContestAnnouncementInstruction.jsx b/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementInstruction/ContestAnnouncementInstruction.jsx index e9365df4f..5c86d5b09 100644 --- a/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementInstruction/ContestAnnouncementInstruction.jsx +++ b/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementInstruction/ContestAnnouncementInstruction.jsx @@ -3,16 +3,18 @@ import { Callout } from "@blueprintjs/core"; export function ContestAnnouncementInstruction() { return ( -
Add an Image to Your Announcement
-

- Want to make your announcement pop? Try adding an image! Here's how: -

    -
  • First, go to Settings and turn on the 'Files' module.
    • -
  • Then, in the 'Files' area, click 'Upload File' to upload your picture.
    • -
  • Now, just write download/[your-image-name].jpg in the announcement where you want the image. Make sure to change [your-image-name] to the name of the file you uploaded.
    • -
- That's it! A little picture can say a lot. -

+
Add Image to Your Contest Announcement
+
    +
  1. + Navigate to Settings and enable the Files module. +
    2. +
  2. + In the Contest Menu > Files section, click on Upload File to upload your desired image. +
    3. +
  3. + Insert the uploaded image in the Content form below using the following format: download/<your-image-file-name.jpg> +
    4. +
); } From 0333a1e11f73a0514ee5d250b8e54d5515e683ec Mon Sep 17 00:00:00 2001 From: Izhari Ishak Aksa Date: Tue, 30 Jan 2024 19:18:41 +0700 Subject: [PATCH 3/7] remove unused css class --- .../ContestAnnouncementInstruction.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementInstruction/ContestAnnouncementInstruction.jsx b/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementInstruction/ContestAnnouncementInstruction.jsx index 5c86d5b09..1c43f3795 100644 --- a/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementInstruction/ContestAnnouncementInstruction.jsx +++ b/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementInstruction/ContestAnnouncementInstruction.jsx @@ -2,7 +2,7 @@ import { Callout } from "@blueprintjs/core"; export function ContestAnnouncementInstruction() { return ( - +
Add Image to Your Contest Announcement
  1. From 887b41b0ffefb47cf3b961378d53c019cd93d2c3 Mon Sep 17 00:00:00 2001 From: Izhari Ishak Aksa Date: Tue, 30 Jan 2024 19:31:49 +0700 Subject: [PATCH 4/7] clean up css classes within a component --- .../ContestAnnouncementCreateDialog.jsx | 2 +- .../ContestAnnouncementCreateForm.jsx | 2 +- .../ContestAnnouncementEditDialog.jsx | 2 +- .../ContestAnnouncementEditForm/ContestAnnouncementEditForm.jsx | 2 +- .../ContestAnnouncementInstruction.jsx | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementCreateDialog/ContestAnnouncementCreateDialog.jsx b/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementCreateDialog/ContestAnnouncementCreateDialog.jsx index b5b396246..ad42f7427 100644 --- a/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementCreateDialog/ContestAnnouncementCreateDialog.jsx +++ b/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementCreateDialog/ContestAnnouncementCreateDialog.jsx @@ -54,7 +54,7 @@ export class ContestAnnouncementCreateDialog extends Component { renderDialogForm = (fields, submitButton) => ( <> -
    {fields}
    +
    {fields}
    ); } From da06959e9e593abdf0f3d7c435f899857dabca4e Mon Sep 17 00:00:00 2001 From: Izhari Ishak Aksa Date: Sat, 6 Apr 2024 22:24:27 +0700 Subject: [PATCH 7/7] Satisfy linter --- .../ContestAnnouncementEditForm.jsx | 2 +- .../ContestAnnouncementInstruction.jsx | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementEditForm/ContestAnnouncementEditForm.jsx b/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementEditForm/ContestAnnouncementEditForm.jsx index f705f8136..b28b47f88 100644 --- a/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementEditForm/ContestAnnouncementEditForm.jsx +++ b/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementEditForm/ContestAnnouncementEditForm.jsx @@ -6,7 +6,7 @@ import { FormSelect2 } from '../../../../../../components/forms/FormSelect2/Form import { FormTextInput } from '../../../../../../components/forms/FormTextInput/FormTextInput'; import { Required } from '../../../../../../components/forms/validations'; import { ContestAnnouncementStatus } from '../../../../../../modules/api/uriel/contestAnnouncement'; -import {ContestAnnouncementInstruction} from '../ContestAnnouncementInstruction/ContestAnnouncementInstruction'; +import { ContestAnnouncementInstruction } from '../ContestAnnouncementInstruction/ContestAnnouncementInstruction'; export default function ContestAnnouncementEditForm({ onSubmit, initialValues, renderFormComponents }) { const statusField = { diff --git a/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementInstruction/ContestAnnouncementInstruction.jsx b/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementInstruction/ContestAnnouncementInstruction.jsx index 12c1b2dc3..3efaab84f 100644 --- a/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementInstruction/ContestAnnouncementInstruction.jsx +++ b/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementInstruction/ContestAnnouncementInstruction.jsx @@ -1,5 +1,5 @@ -import {useState} from 'react'; -import {Callout, Collapse, Button} from "@blueprintjs/core"; +import { Button, Callout, Collapse } from '@blueprintjs/core'; +import { useState } from 'react'; export function ContestAnnouncementInstruction() { const [isOpen, setIsOpen] = useState(false); @@ -10,9 +10,9 @@ export function ContestAnnouncementInstruction() {
  2. - In the Contest Menu > Files section, click on Upload - File to upload your desired image. + In the Contest Menu > Files section, click on{' '} + Upload File to upload your desired image.
  3. - Insert the uploaded image in the Content form below using the following - format: download/<your-image-file-name.jpg> + Insert the uploaded image in the Content form below using the following format:{' '} + download/<your-image-file-name.jpg>