upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-04-20 22:00:39 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 14

fix(settings): app list scroll on Safari

Browse source 
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
This commit is contained in:
Grigorii K. Shartsev 2024-03-16 01:52:28 +01:00
parent 73dec20903
commit a173f90b71
2 changed files with 48 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
apps/settings/src/components/AppList.vue
View file

@ -348,11 +348,12 @@ $toolbar-height: 44px + $toolbar-padding * 2;
&--list-view {
margin-bottom: 100px;
// For positioning link overlay on rows
position: relative;
}
&__list-container {
width: 100%;
white-space: normal;
}
&__store-container {

59
apps/settings/src/components/AppList/AppItem.vue
View file

@ -209,6 +209,7 @@ export default {
<style scoped lang="scss">
@use '../../../../../core/css/variables.scss' as variables;
@use 'sass:math';
.app-item {
position: relative;
@ -218,6 +219,9 @@ export default {
}
&--list-view {
--app-item-padding: calc(var(--default-grid-baseline) * 2);
--app-item-height: calc(var(--default-clickable-area) + var(--app-item-padding) * 2);
&.app-item--selected {
background-color: var(--color-background-dark);
}
@ -225,11 +229,12 @@ export default {
> * {
vertical-align: middle;
border-bottom: 1px solid var(--color-border);
padding: 6px;
padding: var(--app-item-padding);
height: var(--app-item-height);
}
.app-image {
width: 44px;
width: var(--default-clickable-area);
height: auto;
text-align: right;
}
@ -244,9 +249,30 @@ export default {
display: inline-block;
}
.app-name {
padding: 0 var(--app-item-padding);
}
.app-name--link {
height: var(--app-item-height);
display: flex;
align-items: center;
}
// Note: because of Safari bug, we cannot position link overlay relative to the table row
// So we need to manually position it relative to the table container and cell
// See: https://bugs.webkit.org/show_bug.cgi?id=240961
.app-name--link::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: var(--app-item-height);
}
.app-actions {
display: flex;
gap: 8px;
gap: var(--app-item-padding);
flex-wrap: wrap;
justify-content: end;
@ -261,7 +287,14 @@ export default {
@media only screen and (max-width: 900px) {
.app-version,
.app-level {
display: none !important;
display: none;
}
}
/* Hide actions on a small screen. Click on app opens fill-screen sidebar with the buttons */
@media only screen and (max-width: math.div(variables.$breakpoint-mobile, 2)) {
.app-actions {
display: none;
}
}
}
@ -289,6 +322,15 @@ export default {
margin: 5px 0;
}
.app-name--link::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.app-actions {
margin: 10px 0;
}
@ -350,15 +392,6 @@ export default {
}
}
.app-name--link::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.app-version {
color: var(--color-text-maxcontrast);
}