Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Event customization #946

Merged
merged 20 commits into from
Mar 11, 2024
Merged

Conversation

jbodner09
Copy link
Contributor

@jbodner09 jbodner09 commented Feb 12, 2024

Note: turn off whitespace differences to review this PR

Goal: support custom theming for an event that doesn't require re-deploying the website or changing any files in this repo.

Associated work items: #954, #913, Wiki page with how-to for creating future events

This PR does the following, in order of files changed:

  1. Adds a property per-puzzle for the name of a custom css file that will be applied to the answer submission page for that puzzle when puzzle embedding is enabled. The rules for that file are noted in red above the field, and general styling advice is provided in the wiki linked above.
  2. Deprecates the Partial files for customizing event homepages, rules pages, and FAQ pages.
  • Because those are not being used for any future events, the HomePartial field in the event database object is now also deprecated and shouldn't be set for any future events, although old events will still depend on it and the Partials.
  • Now, event customization will use home-content.html, rules-content.html, and faq-content.html files uploaded to the Shared Resources and shown in automatically-sized iframes, similar to embedded puzzles.
  • The event database field for showing content is still supported and said content will be shown above the iframes, but it is not recommended to use those (old logic was to show this field, or a Partial, but not both).
  1. Deprecates the wwwroot folder use for event-specific style assets.
  • Previously, event-specific css files were applied to every page in the event based on their path in the wwwroot folder and a matching event HomePartial field. Note that this actually used to be based on the UrlString, which was considered a bug in CSS files are not applied to pages in a testable manner #876 and partially fixed in More bug fixes #932. This now fully fixes it for old events.
  • Now, events apply a global-styles.css file from the Shared Resources, which is intended to be a companion to the puzzle-specific css files.
  • Also adds custom classes ending in -customizable for targeted changes to things like puzzle titles that were previously pseudo-supported via Html.Raw, all of which are listed on the wiki. No css files in this repo use those classes for anything.

Fixes the following bugs:

  • Properly initializes puzzle properties in the database that previously weren't initialized due to an oversight
  • Fixes a Cancel link on the Player event registration edit page that leads back incorrectly
  • Tweaked the footer placement so it's not styled when the submission page is.
  • Fixes more style bugs like incorrect checkboxes from the bootstrap update
  • Disables client-side form validation in development environments to work around a bug in the current jquery validation library that doesn't allow localhost urls, which prevents local testing of file uploads for things like testing puzzle embedding

@tabascq
Copy link
Contributor

tabascq commented Feb 12, 2024

I think custom per-event CSS outside the repo is a great idea - but I also think it should be an event property, not a puzzle property, and apply to all pages rather than just puzzle pages. Thoughts?

@jbodner09
Copy link
Contributor Author

jbodner09 commented Feb 13, 2024

After discussion at the meeting, this looks like a great opportunity to go "yes, and".

First, we need to really stop using the wwwroot folder, full stop. Now that we have the per-event puzzle-agnostic resource file repository from #936, everything to style the website should go in there. So, from this first commit, change the resource location from the wwwroot folder to the Azure storage Resources folder. That way, css file changes don't need an entire website redeploy!

Second, we're going to change the structure of the other stuff that's required in order to deploy a new event. For example, #788 to add a new PD event needs new partial pages in Pages/Resources/. Those partials should be changed to just be a barebones wrapper that looks for a file with a specific name in the Azure storage Resources folder, and if not, shows an appropriate blank message.

Currently, the wrapper looks for content in the event properties. Those properties can't be removed from the database, but we can remove them from the event management page so future events don't use them, and then we just look for a resource file instead. That way, changing site content no longer needs site deployment if you don't want to use the event properties, although like the event properties, we lose any asp benefits since we're using plain html.

On the plus side, this also no longer requires us to remember to add the minified css building to bundleconfig.json either. Then, any other css files to style the entire event will also be uploaded to that Azure storage Resources folder (alongside the per-puzzle css files already envisioned here, the resource files that the puzzles themselves reference for styling (which could overlap with the files used by the host per-puzzle page), etc.

That means that the following css file structure should be used moving forward (obviously this is just a recommendation, and naming could be improved):

  • The main wwwroot/css/site.css that affects every page on every event and should be updated rarely (all other css in the wwwroot folder will serve past events only)
  • The Azure storage Resources event_name.css that affects every page for a single event
  • The Azure storage Resources puzzle-styles.css and puzzle-print-styles.css that all puzzles in an event use for their own internal styling
  • The optional named css files added here that can be referenced by individual pages in an event and/or individual puzzles (since both kinds of pages are now served from Azure storage, they could in theory use the same files, like if certain puzzles need a "futuristic" style, there could be a futuristic.css with classes used by both the host submission page and the puzzle itself).

Finally, the rest of the pages on the site should have -customizable css classes added so other things can be overridden like the answer submission page added. A few more bugs can also be fixed, like:

  • make navbar text unselectable
  • add hover to errata and solved icons to tell users what that means
  • make the checkbox and errata a span so they can be customizable
  • fix unreadable save button text on individual puzzle management page
  • Make iframe 30px taller/wider on embedded submission page instead of 27...

Data/DataModel/Puzzle.cs Outdated Show resolved Hide resolved
ServerCore/Pages/EventSpecific/FAQ.cshtml Outdated Show resolved Hide resolved
ServerCore/Pages/EventSpecific/FAQ.cshtml Show resolved Hide resolved
ServerCore/Pages/Events/Edit.cshtml Outdated Show resolved Hide resolved
ServerCore/Pages/Resources/Default/HomePartial.cshtml Outdated Show resolved Hide resolved
@jbodner09 jbodner09 changed the title Add custom CSS support to answer submission page when puzzles are embedded Event customization Mar 6, 2024
ServerCore/Pages/EventSpecific/FAQ.cshtml Outdated Show resolved Hide resolved
ServerCore/Pages/Events/Standings.cshtml Show resolved Hide resolved
ServerCore/Pages/Player/Create.cshtml Show resolved Hide resolved
ServerCore/Pages/Resources/Default/FAQPartial.cshtml Outdated Show resolved Hide resolved
ServerCore/Pages/Shared/_Layout.cshtml Outdated Show resolved Hide resolved
ServerCore/Pages/Submissions/Index.cshtml Outdated Show resolved Hide resolved
ServerCore/FileManager.cs Outdated Show resolved Hide resolved
@tabascq
Copy link
Contributor

tabascq commented Mar 8, 2024

LGTM other than the one new comment, and also please merge with main and rebuild the migration part since Jessica's change also had migrations in it.

@tabascq tabascq merged commit c116acd into PuzzleServer:main Mar 11, 2024
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants