Makes the Notes column wider. (Will require editing if you have a different combination of visible columns to me — see Notes)
Timesheets task list by cameralibre
Details
Authorcameralibre
LicenseNo License
Categoryhttps://app.forecast.it/timesheets
Created
Updated
Size721 B
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
If you really want to use this setting, but your columns are different from mine, here's how:
- right-click on the page https://app.forecast.it/timesheets somewhere and choose 'Inspect'.
- Your browser dev tools will open.
- Find the 'Console' tab, and at the blinking cursor, enter
document.querySelector('.grid-wrapper')
and hit enter. - If you now navigate to the Inspector tab, the correct element will be selected.
- Somewhere near the top, you'll see a rule that looks something like this:
element {
--gridCols: 44px auto 1fr auto min-content auto 30px 30px;
}
(the line may be crossed out if you've already installed this userstyle)
- Count how many columns from the left your Notes field is. In
--gridCols
there should be anauto
value in this position — that's the width of your Notes column. - change it to
3fr
, then copy your edited line e.g.--gridCols: 44px auto 1fr auto min-content 3fr 30px 30px;
and edit this userstyle to reflect your particular column layout.
Source code
/* ==UserStyle==
@name Timesheets task list
@namespace github.com/openstyles/stylus
@version 1.0.0
@description Makes the Notes column wider
@author Me
==/UserStyle== */
@-moz-document url-prefix("https://app.forecast.it/timesheets") {
/* TIMESHEETS TASK LIST */
/* maximise the width of the 'Notes' field in the 'Day' view */
[data-cy="timesheets-page"]:has(#unit-toggle-day.purple) .grid-wrapper {
--gridCols: 1rem 1.5fr 1fr min-content min-content 3fr 30px 30px !important
}
/* but not in the 'Week' view */
[data-cy="timesheets-page"]:has(#unit-toggle-week.purple) .grid-wrapper {
--gridCols: 8px 1fr 1fr min-content min-content auto 30px 30px !important;
}
}