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.

Sign up for GitHub

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

Improvement the behavior to remove the date label and day browser on small screens [SDESK-6930] #1806

Merged
merged 8 commits into from
May 19, 2023
Merged

Improvement the behavior to remove the date label and day browser on small screens [SDESK-6930] #1806

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8eacfe8
remove the date label and day browser on small screens
devketanpro May 17, 2023
dd92124
address comment
devketanpro May 17, 2023
2258a9b
update class name
devketanpro May 17, 2023
4c06cfd
use container query instead of media
devketanpro May 18, 2023
42acf12
address comment
devketanpro May 18, 2023
2e3c8ab
refactore code
devketanpro May 19, 2023
a58d3b1
minor change
devketanpro May 19, 2023
7c6a5f4
add span for filter name
devketanpro May 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions client/apps/Planning/PlanningListSubNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ class PlanningListSubNavComponent extends React.Component<IProps, IState> {
</ButtonGroup>
{this.props.activefilter == PLANNING_VIEW.EVENTS ? ' ' : (
<div>
{gettext('Assigned to: ')}
<span className="sd-margin-l--1 sd-opacity--75 ">{gettext('Assigned to :')}</span>
devketanpro marked this conversation as resolved.
Show resolved Hide resolved
<Dropdown items={userList}>
<span className="sd-margin-l--1 sd-margin-r--3">
{this.props.users.find(
Expand All @@ -203,7 +203,7 @@ class PlanningListSubNavComponent extends React.Component<IProps, IState> {
</div>
)}

<ButtonGroup align="end">
<ButtonGroup className="hideOnMobile" align="end">
{this.props.listViewType === LIST_VIEW_TYPE.LIST ? (
<React.Fragment>
<div
Expand Down
2 changes: 1 addition & 1 deletion client/apps/Planning/SubNavDatePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export class SubNavDatePicker extends React.Component<IProps, IState> {

render() {
return (
<span>
<span className="subnav-calendar">
<span
className="subnav-calendar__date-picker sd-text__normal cursor-pointer sd-margin-r--1"
onClick={this.togglePopup}
Expand Down
15 changes: 15 additions & 0 deletions client/apps/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,3 +195,18 @@ a:hover {
.sd-filters-panel--fixed {
flex-shrink: 0;
}

.subnav {
container-type: inline-size;
container-name: subnav;
}

@container subnav (max-width: 800px) {
.sd-page-content--slide-in--open{
.hideOnMobile {
.icn-btn, .btn, .subnav-calendar {
display: none;
}
}
}
}