Frontpage rework #256

B-i-t-K · 2024-05-04T18:41:19Z

API:
added two new queries.

ctfsByDate(year:int, month:int) return all the CTFs taking place during a specific month
`ctftimeCtfById(id: number) return the CTF information from CTFTime (manager+ only)

UI change:

removed incomming/past CTFs and calendar page, instead use a by month display
removed import CTF dialog, instead use the same dialog as edit, the CTFTime input now has a button to refresh the informations.
The front page should be responsive, I've tested on my device but more tests are welcome.

Routing:

removed: /ctfs/incomming, /ctfs/past, /ctfs/calendar
added: /ctfs/:year?/:month?

Added dependencies:

V-calendar: quasar calendar is too primitive for what I'm doing now

Do we want to remove ImportCtf mutation and IncommingCtf PastCtf queries in the future?

- removing of past/ctf/calendar tab, instead use a by month index. - remove the import ctf, it's now merged into the editCtfDialog

Use the new components in ctf card and ctf info.

Also fix some small css isssues

XeR

I just deployed this today on TFNS's instance.
(This is not "testing in prod", this is "dogfooding").

I only browsed the different pages with a computer screen.
I did not look at the interface from a mobile/tablet.
I did not look at the code.

The players from TFNS have no choice but use this new interface.
I believe more pain points will arise in the next few days :-)

CTF list on the main page

Today is May the 30th ; there is no CTF between today and the end of the month.
The main page is filled with all the past CTF we've done in May.
I think we always want to have the very next CTF at the top of the main page.

Also it means that, I have to scroll past the CTF we've already did earlier this month.
For example, we'll see the Codegate CTF every time we open CTFNote until July the 1st.

CTFtime logo

I am not sure if this is only for my specific screen resolution, but it looks like the CTFtime logo is slightly off

Update: this is done on purpose, as if it were a ribbon that wraps around the CTF card

CTF Archive

The CTF Archive page should show CTF either sorted by start time or end time (asc or desc)
Since this page includes previous and next CTF, I have a preference for start time asc.
If it only included past CTF I would have had a preference for end time desc.

I believe they are ranked by import date (id), so they are a bit all over the place

Ideally, we would also be able to click on any of the column header to have it sorted by this column.

CTF end date

As mentioned by somebody on IRC, the start date and end date of CTF is the same.

For the record, this is what the database contains for this specific event

       start_time       |        end_time        
------------------------+------------------------
 2024-06-01 01:00:00+00 | 2024-06-02 01:00:00+00

Main page title

The main page has no title, it keeps the previous title.
For example, after a successful log in, I end up on the main page but the title is CTFNote - Login

Invalid calendar -> CTF card link

When two CTF are overlapping, clicking on a specific day in the calendar should point to the first CTF that is active during that day.

In our instance, there are two CTF for Saturday the 15th:

The justCTF 2024 teaser starts the 15th at 08:00Z.
The Midnight Sun CTF 2024 Finals starts at 10:00Z.

They are displayed in the correct order on the list.
However, they are displayed in the wrong order (sorted by id?) on the calendar.
When I click on the 15th, it goes to the Midnight Sun, hiding the justCTF (I have to scroll up)

When I click a day, the first CTF card should always be the oldest CTF that is still active that day.
In this situation, it should jump to the justCTF because it starts 2 hours earlier.

I suspect this is sorted by the internal id from the database :

 id |            title             |       start_time       |        end_time        
----+------------------------------+------------------------+------------------------
 86 | justCTF 2024 teaser          | 2024-06-15 08:00:00+00 | 2024-06-16 08:00:00+00
 85 | Midnight Sun CTF 2024 Finals | 2024-06-15 10:00:00+00 | 2024-06-16 10:00:00+00

Current cards wrongly show the end date as the start date of a CTF.

JJ-8 · 2024-07-14T18:47:28Z

@XeR, @B-i-t-K, how well was the new interface received by the team? I checked out the new interface too and I think it looks like a big improvement! But the CTF archive button in the dropdown menu is too much hidden and counter intuitive. I think the button should be positioned somewhere below or in the calendar on the front page.

XeR · 2024-07-21T12:05:23Z

how well was the new interface received by the team?

Pretty good overall.
The major pain point comes from the CTF list that shows the first CTF of the month.

But the CTF archive button in the dropdown menu is too much hidden and counter intuitive. I think the button should be positioned somewhere below or in the calendar on the front page.

I personally don't use it as much. I usually "search" for a CTF/task name
So I have no opinion on this. Maybe @B-i-t-K does.

B-i-t-K · 2024-07-29T19:32:14Z

The ui is in my opinion better, but there is still some bug I want to fix before merging.

When a ctf is at the end of the month you need to scroll down to find it
I've put some scroll anchor for mobile, but on desktop it's awful, I just need apply them according to the window size.

I don't have time right now to do the changes, but I will have some freetime after DEFCON to do more updates

…to frontpage-rework

JJ-8

Amazing work! I really like the auto scrolling functionality and the design in general. I only have a few small remarks, see the reviews but overall the code and UI looks very good!

JJ-8 · 2024-08-25T07:38:41Z

front/src/components/CTF/CardList.vue

+          {{
+            date
+              .buildDate({ year: group.year, month: group.month })
+              .toLocaleDateString(undefined, { year: 'numeric', month: 'long' })


Here you use toLocaleDateString which will translate the current month to the browser defined language. This makes the UI inconsistent: we use English everywhere except here. I would suggest to keep it English here too.

JJ-8 · 2024-08-25T07:40:47Z

front/src/components/CTF/CardList.vue

+        <q-card-section>
+          <div class="text-center text-h5 q-pt-md">No CTFs this month</div>
+        </q-card-section>
+        <q-card-section class="text-center">
+          <q-icon name="hotel" size="128px" />
+        </q-card-section>
+      </q-card>


I think this q-card-section is a bit too big. On mobile it will occupy a full screen to display that there is no information available. On desktop it is also quite large. I would suggest to lower the size and padding so more information would fit on one screen.

JJ-8 · 2024-08-25T07:42:15Z

front/src/components/Menu/MainMenu.vue

+      <q-item
+        v-if="me.isLogged"
+        clickable
+        :to="{ name: 'ctfs-archive' }"
+        active-class="dimmed-background"
+      >
+        <q-item-section side>
+          <q-avatar icon="archive" />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>CTF Archive</q-item-label>
+        </q-item-section>
+      </q-item>


I still want to suggest to move this to the calendar as an extra button there. It does not make sense to me to hide this button in the dropdown menu for user settings.

JJ-8 · 2024-08-25T07:50:14Z

front/src/pages/Index.vue

+async function handleNavigation(date: ShortDate) {
+  void router.replace({
+    name: 'ctfs',
+    params: { year: date.year, month: date.month },
+  });
+  await doFetchMore(date);
+  void nextTick(() => {
+    document
+      .querySelector(`[data-date="${shortDate.toId(date)}"]`)
+      ?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+      });
+  });
+  if (shortDate.lt(date, start.value)) {
+    start.value = shortDate.copy(date);
+  }
+  if (shortDate.gt(date, end.value)) {
+    end.value = shortDate.copy(date);
+  }
+}


I have this annoying bug that will not trigger by a refresh but does trigger when navigating back to the front page (video explains more than words):
ctfnote bug scrolling.webm

B-i-t-K added 4 commits May 4, 2024 20:23

Change ctfcard layout

d027518

Add ctfsByDate and CtftimeCtf queries

a9d84b0

Added vcalendar to the dependencies and to boot

dd1469c

Change index layout

aa086ec

- removing of past/ctf/calendar tab, instead use a by month index. - remove the import ctf, it's now merged into the editCtfDialog

JJ-8 self-requested a review May 4, 2024 18:47

B-i-t-K added 14 commits May 4, 2024 20:48

fix formating issue

15a2178

Regenerate graphql schema

6944cf8

remove margins from vc-bars

3d8e8e9

Created LinkChip and TimeChip.

34a743a

Use the new components in ctf card and ctf info.

remove borders from ctf-card and calendar

f4df250

Also fix some small css isssues

make all the button square and the same size

ae31f32

make timechip label optional

a3cb472

Hide weight and ctftime url if not available

1503c7a

add mini mode to CtfTimeLink

0409bcb

added archive page

a13076f

fix ctftimeInput icon

c06f5d0

formating

ea9fcc2

make calendar better for mobile

c148ccf

make ctftime input button consistent with logo upload

ecd755a

XeR requested changes May 30, 2024

View reviewed changes

CTF card: fix end date

ab386d2

Current cards wrongly show the end date as the start date of a CTF.

B-i-t-K added 6 commits August 22, 2024 22:58

Fix endtime, start time was displayed instead

919419b

added vueuse as a dependencie

8e00117

Added infinite scroll

c55357d

Merge branch 'frontpage-rework' of https://github.com/TFNS/CTFNote in…

8cf7041

…to frontpage-rework

Add sorting to the ctfarchive

df59b5d

Fix typo

34c39ff

Add a document.title for the index

49f20a1

JJ-8 requested changes Aug 25, 2024

View reviewed changes

JJ-8 added 2 commits August 25, 2024 09:54

Merge branch 'main' into frontpage-rework

995b14b

Add missing ;

b2d4fd5

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Frontpage rework #256

Frontpage rework #256

B-i-t-K commented May 4, 2024 •

edited

Loading

XeR left a comment •

edited

Loading

JJ-8 commented Jul 14, 2024

XeR commented Jul 21, 2024

B-i-t-K commented Jul 29, 2024

JJ-8 left a comment

JJ-8 Aug 25, 2024

JJ-8 Aug 25, 2024

JJ-8 Aug 25, 2024

JJ-8 Aug 25, 2024

Frontpage rework #256

Are you sure you want to change the base?

Frontpage rework #256

Conversation

B-i-t-K commented May 4, 2024 • edited Loading

XeR left a comment • edited Loading

Choose a reason for hiding this comment

CTF list on the main page

CTFtime logo

CTF Archive

CTF end date

Main page title

Invalid calendar -> CTF card link

JJ-8 commented Jul 14, 2024

XeR commented Jul 21, 2024

B-i-t-K commented Jul 29, 2024

JJ-8 left a comment

Choose a reason for hiding this comment

JJ-8 Aug 25, 2024

Choose a reason for hiding this comment

JJ-8 Aug 25, 2024

Choose a reason for hiding this comment

JJ-8 Aug 25, 2024

Choose a reason for hiding this comment

JJ-8 Aug 25, 2024

Choose a reason for hiding this comment

B-i-t-K commented May 4, 2024 •

edited

Loading

XeR left a comment •

edited

Loading