Make Whiteboard font scaleable

[TadeSF]

The Whiteboard font is especially in the presentation mode very small. It should be adjustable or just made bigger by default.

[ahsanfarooq210]

Hi @TadeSF. I would like to work on this issue

[TadeSF]

Great! Go ahead! Thank you :)

[ahsanfarooq210]

Hi @TadeSF. I have built the docker dev container to run the backend. In the login page, I enter my email and I get a message to verify my email and I will receive an email for it, but I don't get any emails. so I am unable to create my account and log in. Can you Assist me with this?

[TadeSF]

Ofcourse! You won't actually get an email in dev mode, but there should be a smtp-mock running in the background on port 3777. When you open that in the browser, the email should appear and you can click on the link.

Next, you won't have any conferences there. To create a mock conference, you can just run two seeding scripts within the backend container, located at prisma/seed.ts (you can also just run bunx prisma reset, which should run this seeding script automatically) and prisma/custom_seeds/seed_simsim.ts (which is a seeding script for practise conferences for our chairs, simsim stands for simulation of the simulation).

Last step: You need to assign your account as a conference admin: Go into prisma studio at port 5555 in your browser and create a new ConferenceMember of Role Admin with your account and the seeded conference as foreign keys. That step should be fairly simple.

After all that, you should be able to refresh and see the conference to launch. And then you have access to all parts of the app.

[TadeSF]

If you need any more assistance, I am happy to help. And sorry that this whole process is not documented well, we didn't have any contributors to this part of the app, so there was no urgent need for better guidance.

If you get stuck, i can also offer you to video call, so that i can get you started with the environment stuff. Just let me know :)

[ahsanfarooq210]

Hi @TadeSF . I am on this screen, how can I add more things to the whiteboard, and how to view them in the presentation mode? because right now in presentation mode, I do not see the whiteboard

[TadeSF]

Hey @ahsanfarooq210! Perfect, I am glad you managed to navigate through my unprecise explanaitions to get this far.

To answer your question: When the State of Debate is "Formal Debate", the Whitboard is hidden from the presentation mode, since the speakers list and comment list are more important. Please just change the "Status Timer" on the Configurations Screen for example to "informal caucus" or "pause". The whiteboard should then appear.

Also, I notice because of the missing Font Awesome Pro Icons, you can't really use the navbar (which is really not good - especially for devs like you), I should file an issue for that). Therefore you might have to navigate through changing the url. You can access the whiteboard screen by replacing the "/overview" (? I think its "/overview") at the end with "/whiteboard". You should then see an editor for the whiteboard before you :)

[ahsanfarooq210]

Hi @TadeSF. I have set the default font to 18 px on the whiteboard. I have attached the screenshot for the dashboard and the presentation mode, please have a look, if it is okay, then I'll create a PR

[TadeSF]

Hey @ahsanfarooq210, thanks! Did you also add any functionality for users/chairs to change the font size dynamically or is it now just statically set to 18px?

[TadeSF]

And just on a side note: Have have you any Idea why the Font is not loaded correctly? Next.js should fetch the fonts from Google Fonts and I am wondering why that is not working in your environment...

[ahsanfarooq210]

Hi @TadeSF. I haven't added the functionality for the user to change the whiteboard's font size yet. If that is what you want then I can add that too. Just tell me the UI/UX of that functionality and I will add that I don't know why fonts are not being loaded, at first I thought that my development environment was an issue but I am using the dev container, and my entire development environment is running on docker so I don't think that my development environment is an issue.

[ahsanfarooq210]

Hi @TadeSF. What is the UI/UX of how we are going to allow the user to change the text size of the whiteboard if that is the approach we are going to follow?

[TadeSF]

Hey @ahsanfarooq210!

We have implemented a similar scaling approach on the presentation screen in the bottom right corner.

It is mainly implemented here:

const [remSize, setRemSize] = useState<number>(16);

...

useEffect(() => {
    document.documentElement.style.fontSize = `${remSize}px`;
    localStorage.setItem("presentationRem", remSize.toString());
  }, [remSize]);

That is basically what I had in mind for the change of text size. You can either try to bind the whiteboard size to the presentation mode rem size, but I actually would prefer it having its own buttons (for example in the header on the right side), so that it can be changed in any viewing context – not only in presentation mode).

Does that make it clearer what I was aiming for?

[TadeSF]

Another thing regarding FontAwesome: Could you please try something for me regarding fontawesome?

Here are the free fontawesome files to download: https://files.dmun.de/s/QwNjAwM (You can also get it from here with a few more files then you need if you don't trust the download link. Make sure to download "For the Web" and the Free version)

Once downloaded, please add the contents to your source code like the following. You have to override the files that are (in encrypted state) already there. Just be sure not to commit the changes.

./chase/frontend/public
├── content
├── dmunlogo
├── flags
├── fontawesome
│   ├── LICENSE.txt
│   ├── css
│   │   ├── all.css
│   │   ├── all.min.css
│   │   ├── brands.css
│   │   ├── brands.min.css
│   │   ├── fontawesome.css
│   │   ├── fontawesome.min.css
│   │   ├── regular.css
│   │   ├── regular.min.css
│   │   ├── solid.css
│   │   ├── solid.min.css
│   │   ├── svg-with-js.css
│   │   ├── svg-with-js.min.css
│   │   ├── v4-font-face.css
│   │   ├── v4-font-face.min.css
│   │   ├── v4-shims.css
│   │   ├── v4-shims.min.css
│   │   ├── v5-font-face.css
│   │   └── v5-font-face.min.css
│   ├── js
│   │   ├── all.js
│   │   ├── all.min.js
│   │   ├── brands.js
│   │   ├── brands.min.js
│   │   ├── conflict-detection.js
│   │   ├── conflict-detection.min.js
│   │   ├── fontawesome.js
│   │   ├── fontawesome.min.js
│   │   ├── regular.js
│   │   ├── regular.min.js
│   │   ├── solid.js
│   │   ├── solid.min.js
│   │   ├── v4-shims.js
│   │   └── v4-shims.min.js
│   └── webfonts
│       ├── fa-brands-400.ttf
│       ├── fa-brands-400.woff2
│       ├── fa-regular-400.ttf
│       ├── fa-regular-400.woff2
│       ├── fa-solid-900.ttf
│       ├── fa-solid-900.woff2
│       ├── fa-v4compatibility.ttf
│       └── fa-v4compatibility.woff2
├── logo
├── misc
├── stock
└── undraw

Once you've done that, you should be seeing some icons and some placeholders for icons that are not in the Free Pack. But in theory, this should make it more easy to navigate the app and actually enable you to fidget with icons yourself. Please let me know if it worked once you've tried it!

[TadeSF]

And about the Fonts: That is really weird, since the fonts are not hardcoded anywhere but rather referenced as google fonts from google directly. Could you please go into your Network Console Tool in the browser and look for any fonts not being loaded and if so, could you report the status code back to me please?