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

Jump to bottom

Rework layout with flexbox #3904

Merged
merged 43 commits into from
Dec 6, 2019
Merged

Rework layout with flexbox #3904

merged 43 commits into from
Dec 6, 2019

Conversation

flourish86
Copy link
Contributor

@flourish86 flourish86 commented Aug 6, 2019 •
edited by nilmerg
Loading

Flexbox layout is now implemented.

resolves #3810

Some notes:

  • It works fine in recent versions of Chrome, Safari and Firefox (I tested on macOS, we should test other OSes)
  • It works surprisingly great in Edge
  • It works in IE 11. Though there are some minor inconsistencies.
  • Layout is completely broken in IE 10 and below. It might be possible to get it to work, but imho not with a reasonable amount of effort, since IE 10 basically supports flex-box but uses an older version with different syntax and required -ms-prefixes

flourish86 added a commit that referenced this pull request Aug 7, 2019
@flourish86
JS: Fix navigation flyout not fading out after mouseout
867f1a4 
refs #3904
flourish86 added a commit that referenced this pull request Aug 7, 2019
@flourish86
JS: Do not apply 'menu-hovered' on #layout
a3bfcbd 
refs #3904
@flourish86 flourish86 requested a review from theFeu August 8, 2019 08:34
@theFeu
Copy link
Contributor

theFeu commented Aug 8, 2019

So i clicked around in your branch a little and that's what I noticed:

It buggs me a little is that there is no longer a gap above the tabs like so:

image

image

Announcements and notifications are not centered properly:
image

image

theFeu
theFeu reviewed Aug 8, 2019
View reviewed changes
application/layouts/scripts/body.phtml Outdated Show resolved Hide resolved
application/layouts/scripts/parts/navigation.phtml Show resolved Hide resolved
application/layouts/scripts/body.phtml Outdated Show resolved Hide resolved
public/js/icinga/ui.js Outdated Show resolved Hide resolved
@flourish86 flourish86 force-pushed the feature/flex-box-layout-reworked branch from 04e4bfa to 708b452 Compare August 22, 2019 15:04
flourish86 added a commit that referenced this pull request Nov 13, 2019
@flourish86
JS: Fix navigation flyout not fading out after mouseout
af35f17 
refs #3904
flourish86 added a commit that referenced this pull request Nov 13, 2019
@flourish86
JS: Do not apply 'menu-hovered' on #layout
c6ba394 
refs #3904
@flourish86 flourish86 force-pushed the feature/flex-box-layout-reworked branch from 708b452 to 64f80d8 Compare November 13, 2019 12:22
lippserd pushed a commit that referenced this pull request Dec 3, 2019
@flourish86 @lippserd
JS: Fix navigation flyout not fading out after mouseout
853dcb3 
refs #3904
@lippserd lippserd force-pushed the feature/flex-box-layout-reworked branch from 64f80d8 to 126aa71 Compare December 3, 2019 11:09
lippserd pushed a commit that referenced this pull request Dec 3, 2019
@flourish86 @lippserd
JS: Do not apply 'menu-hovered' on #layout
2bf137c 
refs #3904
lippserd pushed a commit that referenced this pull request Dec 5, 2019
@flourish86 @lippserd
JS: Fix navigation flyout not fading out after mouseout
3f56fa5 
refs #3904
lippserd pushed a commit that referenced this pull request Dec 5, 2019
@flourish86 @lippserd
JS: Do not apply 'menu-hovered' on #layout
c663f97 
refs #3904
@lippserd lippserd force-pushed the feature/flex-box-layout-reworked branch from 126aa71 to 7e85b31 Compare December 5, 2019 08:08
nilmerg pushed a commit that referenced this pull request Dec 6, 2019
@flourish86 @nilmerg
JS: Fix navigation flyout not fading out after mouseout
66abe51 
refs #3904
@nilmerg nilmerg force-pushed the feature/flex-box-layout-reworked branch from 7e85b31 to bf92252 Compare December 6, 2019 07:15
nilmerg pushed a commit that referenced this pull request Dec 6, 2019
@flourish86 @nilmerg
JS: Do not apply 'menu-hovered' on #layout
eba23e3 
refs #3904
@nilmerg nilmerg added this to the 2.8.0 milestone Dec 6, 2019
@nilmerg nilmerg added area/ui Affects the user interface enhancement New feature or improvement labels Dec 6, 2019
nilmerg pushed a commit that referenced this pull request Dec 6, 2019
@flourish86 @nilmerg
JS: Fix navigation flyout not fading out after mouseout
57d9cb7 
refs #3904
nilmerg pushed a commit that referenced this pull request Dec 6, 2019
@flourish86 @nilmerg
JS: Do not apply 'menu-hovered' on #layout
6d0b990 
refs #3904
@nilmerg nilmerg force-pushed the feature/flex-box-layout-reworked branch from 703c958 to 64f55ca Compare December 6, 2019 14:33
flourish86 and others added 19 commits December 6, 2019 15:36
@flourish86 @nilmerg
JS: Remove unused code
c6c77aa
@flourish86 @nilmerg
CSS: Prevent tabs from line-break
eb104c3 
refs #3810
refs #3815
@flourish86 @nilmerg
CSS: Compensate .tabs-spacer
88db9c8 
refs #3810
refs #3815
@flourish86 @nilmerg
JS: Fix navigation flyout not fading out after mouseout
7864150 
refs #3904
@flourish86 @nilmerg
JS: Do not apply 'menu-hovered' on #layout
5443bfe 
refs #3904
@flourish86 @nilmerg
Monitoring: Beautify quick-action item hover
8ebc04f
@flourish86 @nilmerg
Tabs: Beautify tabs hover
ca02547
@flourish86 @nilmerg
menu.less: Align .badge-nav-item with flexbox
2b2f0cf
@flourish86 @nilmerg
menu.less: Use appropriate less functions to darken colors
6218ad8
@nilmerg
layout: Don't use id header if it's not a global header
31e3ce7
@nilmerg
Winter.less: Apply snow effect to directly to tabs
cfb9450 
The header has no height anymore without announcements.
@nilmerg
application-state.js: Remove redundant rendered callback
83d6a25
@nilmerg
js: Remove ui.fixControls() and ui.initializeControls()
4af48c7 
Hooray!
@nilmerg
ui: Fix sidebar issues in minimal layout
e61eb6f 
Was completely broken even prior the removal of `ui.fixControls()`..
@nilmerg
css: Remove remaining position instructions used for the legacy layout
8922447
@nilmerg
css: Remove min-height and overflow from body
9acd45d 
Causes issues in minimal layouts otherwise, at least in
Chrome. Safari suffers from this, but who cares...
@nilmerg
Fix some .phtml indentation issues
2cc90e0
@nilmerg
Remove remaining usages of #menu-container
60dfbcb
@nilmerg
Winter.less: Properly apply snow effect to menu items
9a32be2
@nilmerg nilmerg force-pushed the feature/flex-box-layout-reworked branch from 64f55ca to 9a32be2 Compare December 6, 2019 14:42
@nilmerg nilmerg merged commit f5dc25b into master Dec 6, 2019
@nilmerg nilmerg deleted the feature/flex-box-layout-reworked branch December 6, 2019 15:37
@nilmerg nilmerg self-assigned this Dec 9, 2019
@nilmerg nilmerg mentioned this pull request Feb 27, 2020
Closed
@nilmerg nilmerg added the affects-upgrades The change requires migration or user awareness label Apr 8, 2020
@nilmerg nilmerg modified the milestones: 2.8.0-rc1, 2.8.0 May 12, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@theFeu theFeu theFeu left review comments

@lippserd lippserd Awaiting requested review from lippserd

@nilmerg nilmerg Awaiting requested review from nilmerg

Assignees

@nilmerg nilmerg

Labels
affects-upgrades The change requires migration or user awareness area/ui Affects the user interface enhancement New feature or improvement
Projects
None yet
Milestone
2.8.0
Development

Successfully merging this pull request may close these issues.

Avoid fixed positioning in main layout
3 participants
@flourish86 @theFeu @nilmerg