CSS style / UX suggestions

[th23x]

Hey Tasks team,

great to have such app available as open source free to use for everybody - thanks a lot!

Wanted to bring up some ideas to enhance the visual / styling and partly usage. And instead of only complaining about things not as they could be, directly support with CSS adjustments I implemented (via the theming option).

Changes suggested (see according comment in CSS below):

1. Smaller navigation, giving more room for the key imformation ie tasks
2. Nicer positioning of navigation toggle
3. Hide sharing button - alternatively would put it behind the 3 dots as option
4. Larger sidebar ie more space for task details - fixed for wide screens, less "jumping" of elements and adjustments of width on usage
5. Task title only shown as input field upon editing
6. Fix for datepicker - see Datepicker does not display sunday column #935
7. Hide unused elements - personal preference, of course nothing for general implementation, but otherwise toggeling fields on/off would be good for a less crowded details pane
8. Visually nicer integrated notes text field - also less "jumpy" upon switch to/from editing style

And this would be the resulting look & feel:

All changes also work/ adjust for smaller screens as well...

/* smaller navigation */
.app-tasks .app-navigation {
	width: 200px !important;
}
.app-tasks .app-navigation--close {
	margin-left: -200px !important;
}
@media only screen and (max-width: 1024px) {
	.app-tasks .app-navigation:not(.app-navigation--close) {
		margin-left: -200px !important;
	}
}
/* position of navigation toggle */
.app-tasks .app-navigation-toggle {
	top: 12px !important;
	margin-right: -60px !important;
}
@media only screen and (max-width: 1024px) {
	.app-tasks :not(.app-navigation--close) .app-navigation-toggle {
		margin-right: -44px !important;
	}
}
.app-tasks .app-content .header {
	padding-left: 15px;
}
.app-tasks #target {
    padding-left: 45px;
}
/* hide sharing button */
.app-tasks .app-navigation-entry__utils .icon-share {
	display: none;
}
/* larger sidebar - fixed for wide screen */
.app-tasks #app-sidebar {
	z-index: unset;
	width: 40%;
	max-width: unset;
	background-color: var(--color-background-dark);
}
@media only screen and (min-width: 1024px) {
	.app-tasks #app-sidebar.disappear {
		display: block;
	}
}
/* task title */
.app-tasks #app-sidebar .title {
	background-color: var(--color-background-dark);
}
.app-tasks #app-sidebar .title .expandable-container {
	border-color: transparent !important;
}
/* fix for https://github.com/nextcloud/tasks/issues/935 */
.app-tasks #app-sidebar .mx-datepicker-main.mx-datepicker-popup {
	left: auto !important;
}
/* hide unused elements - personal preference */
.app-tasks #app-sidebar .content-wrapper .body .section.detail-start,
.app-tasks #app-sidebar .content-wrapper .body .section.detail-all-day,
.app-tasks #app-sidebar .content-wrapper .body .section.detail-calendar,
.app-tasks #app-sidebar .content-wrapper .body .section.detail-class,
.app-tasks #app-sidebar .content-wrapper .body .section.detail-complete,
.app-tasks #app-sidebar .content-wrapper .body .section.detail-categories {
	display: none;
}
/* notes text */
.app-tasks #app-sidebar div.section-content.note {
	margin: 0 10px !important;
	line-height: 1.5 !important;
	border: medium none;
	background-color: #ffffff;
}
@media only screen and (min-width: 1024px) {
	.app-tasks #app-sidebar div.section-content.note {
		margin: 0 10px 0 0 !important;
	}
}

Maybe some things to consider and take up - if not, feel free to close this topic...

[decaby7e]

An improvement for preserving background color in text fields:

/* Preserves background color in dropdown fields */
.app-tasks #app-sidebar .multiselect,
.app-tasks #app-sidebar .multiselect__single {
  background-color: var(--color-background-dark);
}

Before:

After:

[raimund-schluessler]

An improvement for preserving background color in text fields:

@decaby7e Which browser do you use? For me, the background-color of dropdowns is already correct:

[decaby7e]

I use Firefox 85.0.2 on Linux but I believe the cause of this is a result of using the custom styling that @th23x recommended.

[raimund-schluessler]

Changes suggested (see according comment in CSS below):

1. Smaller navigation, giving more room for the key imformation ie tasks

This is a global Nextcloud width and I don't think we should differ here. If more space is needed, the Navigation can be hidden completely.

2. Nicer positioning of navigation toggle

I know this is not a very nice positioning of the toggle, but is also a global decision for Nextcloud. And moving it into the input field doesn't seem right, as it appears related to the input then.

3. Hide sharing button - alternatively would put it behind the 3 dots as option

Moving it into the dropdown would be an option, but imho since it's only shown for the active list, it doesn't seem that important to me. Feel free to open a separate issue, though.

4. Larger sidebar ie more space for task details - fixed for wide screens, less "jumping" of elements and adjustments of width on usage

Again, a global Nextcloud value. But one could think about allowing to drag the sidebar border to change it's width.

5. Task title only shown as input field upon editing

This is already the case.

6. Fix for datepicker - see #935

Fix for this issue will come with #1030.

7. Hide unused elements - personal preference, of course nothing for general implementation, but otherwise toggeling fields on/off would be good for a less crowded details pane

#1030 will have tabs in the sidebar, so it might be a bit less crowded.

8. Visually nicer integrated notes text field - also less "jumpy" upon switch to/from editing style

Will be changed with #1030 as well.

[raimund-schluessler]

4. Larger sidebar ie more space for task details - fixed for wide screens, less "jumping" of elements and adjustments of width on usage

I just saw there is already a PR implementing resizable columns in the vue-components: nextcloud-libraries/nextcloud-vue#1759