feat(NcAppContent): add mobileLayout prop
#6364
Conversation
Signed-off-by: Devlin Junker <[email protected]>
Signed-off-by: Devlin Junker <[email protected]>
devlinjunker
force-pushed
the
mobile-split-layout
branch
from
7635b2e to
9b6f558
Compare
devlinjunker
changed the title
mobileLayout prop to NcAppContentmobileLayout prop to NcAppContent
|
Any thoughts or feedback here? @ShGKme @raimund-schluessler |
ShGKme
added
enhancement
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #6364 +/- ##
==========================================
+ Coverage 42.26% 42.50% +0.23%
==========================================
Files 155 156 +1
Lines 3996 4028 +32
Branches 1001 1038 +37
==========================================
+ Hits 1689 1712 +23
- Misses 2199 2200 +1
- Partials 108 116 +8 ☔ View full report in Codecov by Sentry. |
| @media only screen and (width < $breakpoint-mobile) { | ||
| display: none; | ||
| } | ||
| } |
There was a problem hiding this comment.
ESLint error
| } | |
| } |
| @media only screen and (width < $breakpoint-mobile) { | ||
| display: none; | ||
| } | ||
|
|
| default: 'no-split', | ||
| validator(value) { | ||
| return ['no-split', 'horizontal-split'].includes(value) | ||
| } |
| validator(value) { | ||
| return ['no-split', 'horizontal-split'].includes(value) | ||
| } | ||
| } |
| &.splitpanes--horizontal-mobile { | ||
| .splitpanes__pane-details{ | ||
| @media only screen and (width < $breakpoint-mobile) { | ||
| min-height:30%; |
There was a problem hiding this comment.
| min-height:30%; | |
| min-height: 30%; |
| } | ||
|
|
||
| &.splitpanes--horizontal-mobile { | ||
| .splitpanes__pane-details{ |
There was a problem hiding this comment.
| .splitpanes__pane-details{ | |
| .splitpanes__pane-details { |
| @@ -60,22 +60,23 @@ The list size must be between the min and the max width value. | |||
|
|
|||
| <template v-if="hasList"> | |||
| <!-- Mobile view does not allow resizeable panes --> | |||
| <div v-if="isMobile || layout === 'no-split'" | |||
| <div v-if="(isMobile && mobileLayout === 'no-split') || layout === 'no-split' " | |||
There was a problem hiding this comment.
Conditions are quire complicated now.
What about making a new computed property, for instance, currentLayout, that returns corresponding layout depending on isMobile.
Then we can always just check one property value without complex expressions.
| @@ -175,7 +176,7 @@ export default { | |||
| }, | |||
|
|
|||
| /** | |||
| * When in mobile view, only the list or the details are shown | |||
| * When in 'no-split' mobile view, only the list or the details are shown | |||
There was a problem hiding this comment.
Let's remove this line then. It's now covered by the new prop
| @@ -400,6 +412,22 @@ export default { | |||
| scrollbar-width: auto; | |||
| } | |||
|
|
|||
| &:not(.splitpanes--horizontal-mobile) { | |||
| .splitpanes__pane-list{ | |||
There was a problem hiding this comment.
| .splitpanes__pane-list{ | |
| .splitpanes__pane-list { |
| &:not(.splitpanes--horizontal-mobile) { | ||
| .splitpanes__pane-list{ | ||
| @media only screen and (width < $breakpoint-mobile) { | ||
| display: none; | ||
| } | ||
| } |
There was a problem hiding this comment.
Let's control it in JS instead as it was.
ShGKme
changed the title
mobileLayout prop to NcAppContentmobileLayout prop
|
Thanks for taking a look! Will do! |
☑️ Resolves
horizontal-splitlayout for mobile devices. This can be useful if you want to still see the list and details at the same timeno-splitstill so no change for callers that don't pass in themobileLayoutproperty🖼️ Screenshots
🚧 Tasks
mobileLayoutpropertyhorizontal-splitoption formobileLayoutproperty🏁 Checklist
- [ ] 3️⃣ Backport tonextrequested with a Vue 3 upgrade