Contributing

The aim of this extension is to improve general usefulness of 42's Intranet website. Try to only make changes to the styling by using the CSS file. Only use Javascript if it is absolutely necessary.

Steps to contribute

1. Read the contributing guidelines here (thank you!).
2. Fork and clone this repository.
3. Create a new branch: git checkout -b branch-name (to switch to this branch later on, remove the -b flag).
4. Open the extensions page in your web browser.
5. Click the Load unpacked button and open the directory where you cloned the repository. Now you can debug.
6. Make your changes and verify that they work as intended. Remember to click on Refresh in the extension's debugging overview every time you make a change.
7. Push to your fork (git push --set-upstream branch-name) and submit a pull request.
8. Wait for the pull request to be merged, and make changes if necessary or if asked for by the community.

Adding campus specific improvements

If an improvement you write only applies to certain campuses, please only write to files in a subfolder of your campus in the features/campus_specific/[campus_name] folder. This keeps things a bit more tidy and clear. Additionally, check if the improvement can be hidden away under an option in the extension's options page (in server/options.php. See options/addoptions.txt on how to add an option).

Adding your campus' clustermap

If your campus has a clustermap website, please add it to features/clustermap.js! In the switch (getCampus()) statement in the openClusterMap(event) function, add your campus's location (usually the city of where your campus is located), and set the url variable to the URL of the clustermap.

Implementing highlighting in a clustermap

If it's supported by the clustermap implementation, you can use the location variable to attach the location to the URL (e.g. url = "https://locatepeer.vercel.app/"+location;, url = "https://example.com/?highlight="+location;). This way the cluster map can highlight the location requested on their map.

If the clustermap's frontend gets loaded asynchronously and it's using URL hashes to highlight locations, it's also possible to send the hash of the location over to the opened clustermap window for up to 5 seconds. Just set the highlightAfter variable to true in your campus' switch case. The clustermap can then receive this hash by looking for window.location.hash in JS, or easily stylize it using the CSS :target rule (example here).

Modifying a CSS style

When you add a rule to a CSS file, make sure it only applies to the element you wish to stylize. An easy trick to achieve this, is just to right click the element on the website, and to choose Inspect Element. Find the class/id that currently sets the style you wish to set, and modify only that class/id in the CSS file. If it does not exist yet, feel free to add it.

An example: if you wanted to modify the background of the boxes in the header of the dashboard page, you would right click any of them, choose to inspect the element, find out they all have the class user-header-box, and that the background color is set by the rule .profile-item .user-header-box in the application's CSS. Thus, you modify that rule. You check improv.css (or the CSS you need to edit) if the rule already exists, ignoring any rules in the @media segments (which are used for stylizing based on certain rules, such as the device's resolution. Generally, they go unused in this extension, since it only works on desktop PCs anyways). Since the rule does not exist yet, you simply add it to the CSS file.

/* change background colors of profile banner containers to red */
.profile-item .user-header-box {
    background-color: red !important;
}

Please add a comment describing the rule above the rule's targets, like in the example above. This is not necessary in theme files, such as dark.css.

!important everything

Make sure to add !important to any CSS rule you add, so that it gets overwritten by the extension. Otherwise, the style will end up getting overruled by Intranet's CSS.