Skip to content

Commit 32c2ea2

Browse files
dartcafedartcafe
authored
Merge pull request #4361 from nextcloud/ref/flex-to-grid
Use more grid over flexbox
2 parents c723820 + aeeda84 commit 32c2ea2

19 files changed

Lines changed: 132 additions & 216 deletions

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ All notable changes to this project will be documented in this file.
1212
- Add forced display mode to poll configuration
1313
### Changed
1414
- Updated job control for the administration
15+
- Refactored some elements flex to grid
1516

1617
## [8.5.0] - 2025-10-03
1718
### Fixed

‎src/components/Base/modules/ConfigBox.vue‎

Lines changed: 24 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -17,53 +17,44 @@ const { name, info = '', indented = false } = defineProps<Props>()
1717

1818
<template>
1919
<div class="config-box">
20-
<div class="config-box__header">
21-
<slot name="icon" />
22-
<div :title="info" :class="['config-box__title', { indented }]">
23-
{{ name }}
24-
<InformationIcon v-if="info" />
25-
</div>
26-
<slot name="actions" />
20+
<slot name="icon" />
21+
<div :title="info" :class="['config-box__title', { indented }]">
22+
{{ name }}
23+
<InformationIcon v-if="info" />
2724
</div>
25+
<slot name="actions" />
2826
<div class="config-box__container">
2927
<slot />
3028
</div>
3129
</div>
3230
</template>
3331

3432
<style lang="scss">
35-
.config-box__header {
36-
display: flex;
37-
align-content: center;
38-
align-items: center;
39-
gap: 5px;
40-
margin: 8px 0 8px 0;
41-
}
42-
4333
.config-box {
44-
display: flex;
45-
flex-direction: column;
46-
padding: 8px 0;
47-
.icon-container {
48-
width: 20px;
49-
}
50-
51-
.config-box__title {
52-
display: flex;
53-
flex: 1;
34+
display: grid;
35+
grid-template-columns: auto 1fr auto;
36+
grid-template-areas:
37+
'icon title actions'
38+
'. container container';
39+
column-gap: 0.5rem;
40+
margin: 1rem 0;
41+
42+
&__title {
43+
grid-area: title;
5444
opacity: 0.7;
5545
font-weight: bold;
56-
margin: 0;
46+
margin: 0.5rem 0;
5747
}
5848
59-
.config-box__container {
60-
display: flex;
61-
flex-direction: column;
62-
padding-inline-start: 24px;
49+
&__container {
50+
grid-area: container;
51+
& > * {
52+
width: 100%;
53+
}
6354
}
64-
}
6555
66-
.indented {
67-
margin-inline-start: 24px !important;
56+
.indented {
57+
margin-inline-start: 1.6rem !important;
58+
}
6859
}
6960
</style>

‎src/components/Base/modules/FlexSettings.vue‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,15 @@
44
-->
55

66
<template>
7-
<div class="flex_settings">
7+
<div class="grid_settings">
88
<slot name="default" />
99
</div>
1010
</template>
1111

1212
<style lang="scss">
13-
.flex_settings {
14-
display: flex;
15-
flex-wrap: wrap;
16-
align-items: stretch;
17-
18-
.settings-section {
19-
flex: 1 0 480px;
20-
margin-bottom: 0;
21-
border-bottom: 1px solid var(--color-border);
22-
}
13+
.grid_settings {
14+
display: grid;
15+
grid-template-columns: repeat(auto-fit, minmax(var(--cap-width), 1fr));
2316
}
2417
2518
.settings-description {

‎src/components/Base/modules/StickyDiv.vue‎

Lines changed: 25 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -59,87 +59,24 @@ const stickyClass = computed(() => ({
5959

6060
<template>
6161
<div :class="['sticky-div', stickyClass]" :style="style">
62-
<div class="top-left-corner"></div>
63-
<div class="top"></div>
64-
<div class="top-right-corner"></div>
65-
66-
<div class="left"></div>
6762
<div class="stage" :style="style">
6863
<slot name="default">
6964
<div class="inner"></div>
7065
</slot>
7166
</div>
72-
<div class="right"></div>
73-
74-
<div class="bottom-right-corner"></div>
75-
<div class="bottom"></div>
76-
<div class="bottom-left-corner"></div>
7767
</div>
7868
</template>
7969

8070
<style lang="scss" scoped>
81-
.sticky-div {
82-
display: grid;
83-
grid-template-columns: auto 1fr auto;
84-
grid-template-rows: auto 1fr auto;
85-
grid-template-areas:
86-
'top-left-corner top top-right-corner'
87-
'left center right'
88-
'bottom-left-corner bottom bottom-right-corner';
89-
}
90-
9171
.stage {
72+
display: grid;
9273
padding: 0.3rem;
9374
grid-area: center;
9475
width: 100%;
9576
height: 100%;
9677
background-color: var(--color-main-background);
9778
}
9879
99-
.top-left-corner {
100-
grid-area: top-left-corner;
101-
height: 0;
102-
width: 0;
103-
}
104-
105-
.top {
106-
grid-area: top;
107-
height: 0;
108-
}
109-
110-
.top-right-corner {
111-
grid-area: top-right-corner;
112-
height: 0;
113-
width: 0;
114-
}
115-
116-
.right {
117-
grid-area: right;
118-
width: 0;
119-
}
120-
121-
.bottom-right-corner {
122-
grid-area: bottom-right-corner;
123-
height: 0;
124-
width: 0;
125-
}
126-
127-
.bottom {
128-
grid-area: bottom;
129-
height: 0;
130-
}
131-
132-
.bottom-left-corner {
133-
grid-area: bottom-left-corner;
134-
height: 0;
135-
width: 0;
136-
}
137-
138-
.left {
139-
grid-area: left;
140-
width: 0;
141-
}
142-
14380
.sticky-left {
14481
position: sticky;
14582
inset-inline-start: 0;
@@ -150,20 +87,35 @@ const stickyClass = computed(() => ({
15087
top: 0;
15188
}
15289
153-
.bottom-right-corner,
154-
.bottom,
155-
.bottom-left-corner {
90+
.sticky-div.sticky-bottom-shadow::after {
91+
content: '';
15692
background: linear-gradient(
15793
to bottom,
15894
rgba(var(--color-box-shadow-rgb), 0.3),
15995
rgba(var(--color-box-shadow-rgb), 0)
16096
);
97+
content: '';
98+
position: absolute;
99+
width: 100%;
100+
height: 6px;
101+
bottom: -6px;
102+
left: 0px;
103+
z-index: -1;
104+
}
161105
162-
transition:
163-
all var(--animation-slow) linear,
164-
border 1ms;
165-
.sticky-bottom-shadow & {
166-
height: var(--shadow-height);
167-
}
106+
.sticky-div.sticky-right-shadow::after {
107+
content: '';
108+
background: linear-gradient(
109+
to right,
110+
rgba(var(--color-box-shadow-rgb), 0.3),
111+
rgba(var(--color-box-shadow-rgb), 0)
112+
);
113+
content: '';
114+
position: absolute;
115+
height: 100%;
116+
width: 6px;
117+
right: -6px;
118+
top: 0px;
119+
z-index: -1;
168120
}
169121
</style>

‎src/components/Cards/VoteInfoCards.vue‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -78,21 +78,13 @@ const showRegisterCard = computed(
7878

7979
<style lang="scss" scoped>
8080
.vote-info-cards {
81-
// margin: auto;
82-
display: flex;
81+
display: grid;
8382
gap: 1rem;
84-
flex-wrap: wrap;
85-
justify-content: center;
83+
grid-template-columns: repeat(auto-fit, minmax(calc(var(--cap-width) / 2), 1fr));
8684
87-
& > * {
88-
flex: 1;
89-
}
90-
91-
// remove margin from notecard in favor of flexbox gap
85+
// remove margin from notecard in favor of gap
9286
.notecard {
9387
margin: unset;
94-
flex: 1 calc(var(--cap-width) / 2);
95-
max-width: var(--cap-width);
9688
}
9789
}
9890
</style>

‎src/components/Configuration/ConfigDangerArea.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,9 +96,8 @@ function routeAway() {
9696

9797
<style lang="scss">
9898
.delete-area {
99-
display: flex;
99+
display: grid;
100100
gap: 8px;
101-
justify-content: space-between;
102-
flex-wrap: wrap;
101+
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
103102
}
104103
</style>

‎src/components/Options/OptionItem.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ const pollStore = usePollStore()
6969
display: grid;
7070
grid-template-columns: auto 1fr auto auto;
7171
grid-template-areas: 'drag option owner actions';
72+
align-items: center;
7273
position: relative;
7374
padding: 8px 0;
7475
background-color: var(--color-main-background);

‎src/components/Options/OptionItemOwner.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const showDelete = computed(
3333
</script>
3434

3535
<template>
36-
<div class="option-item-owner blabla">
36+
<div class="option-item-owner">
3737
<ActionDelete
3838
v-if="showDelete"
3939
:name="
@@ -50,6 +50,7 @@ const showDelete = computed(
5050
v-else-if="option.owner"
5151
:user="option.owner"
5252
:icon-size="avatarSize"
53+
condensed
5354
hide-names
5455
:tooltip-message="
5556
t('polls', '{displayName}\'s proposal', {

‎src/components/Options/OptionMenu.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { t } from '@nextcloud/l10n'
1010
import NcActions from '@nextcloud/vue/components/NcActions'
1111
import NcActionButton from '@nextcloud/vue/components/NcActionButton'
1212
import NcModal from '@nextcloud/vue/components/NcModal'
13+
import NcActionText from '@nextcloud/vue/components/NcActionText'
1314
1415
import CloneDateIcon from 'vue-material-design-icons/CalendarMultiple.vue'
1516
import DeleteIcon from 'vue-material-design-icons/TrashCanOutline.vue'
@@ -55,6 +56,17 @@ const cloneAllowed = computed(
5556
&& !pollStore.isClosed
5657
&& pollStore.permissions.edit,
5758
)
59+
const proposalHint = computed(() => {
60+
if (!option.owner || option.isOwner) {
61+
return null
62+
}
63+
64+
return option.owner
65+
? t('polls', "{displayName}'s proposal", {
66+
displayName: option.owner.displayName,
67+
})
68+
: ''
69+
})
5870
5971
/**
6072
*
@@ -84,6 +96,8 @@ function confirmOption() {
8496

8597
<template>
8698
<NcActions class="option-menu">
99+
<NcActionText v-if="proposalHint" :name="proposalHint" />
100+
87101
<NcActionButton
88102
v-if="deleteAllowed"
89103
:name="deleteOrRestoreStaticText"

0 commit comments

Comments
 (0)