Skip to content

Commit f094e14

Browse files
max width, anchors, labels (#5122)
* max width, anchors, labels * cleanup
1 parent 14371ac commit f094e14

File tree

3 files changed

+46
-9
lines changed

3 files changed

+46
-9
lines changed

modules/@apostrophecms/i18n/i18n/en.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -267,7 +267,7 @@
267267
"lastUpdatedBy": "Last saved on {{ updatedAt }} <br /> by {{ updatedBy }}",
268268
"layout": "Layout",
269269
"layoutAlign": "Vertical alignment",
270-
"layoutColumn": "Layout Column",
270+
"layoutColumn": "Column",
271271
"layoutColumnEmptyArea": "Empty column. Click \"Edit Content\" to add widgets.",
272272
"layoutColumnTooSmall": "Too small to add column",
273273
"layoutJustify": "Horizontal alignment",
@@ -281,7 +281,7 @@
281281
"layoutBottom": "Bottom",
282282
"layoutTabletShow": "Visible on tablet",
283283
"layoutMobileShow": "Visible on mobile",
284-
"layoutTogggleTooltip": "Use Content mode to edit your widgets and Layout mode to modify your columns",
284+
"layoutTogggleTooltip": "Use Edit Content to edit widgets and Edit Columns to move or resize columns",
285285
"leavePageDescription": "The content you're trying to edit belongs to another document and must be edited there.\nChanges made to {{ oldTitle }} are saved automatically.",
286286
"leavePageHeading": "Leave {{ oldTitle }} to edit {{ newTitle }}?",
287287
"linkHrefHelp": "Write the full URL, beginning with https:// or http://",

modules/@apostrophecms/layout-widget/ui/apos/components/AposGridLayout.vue

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div
33
ref="root"
44
class="apos-layout"
5-
:style="rootCssVars"
5+
:style="rootStyles"
66
>
77
<TransitionGroup
88
ref="grid"
@@ -134,13 +134,27 @@ export default {
134134
'remove-item'
135135
],
136136
data() {
137+
const maxWidthMargin = 20;
137138
return {
138139
isResizing: false,
139140
isMoving: false,
140141
// Live preview from manager: patches to apply to items for render-only
141142
preview: {
142143
patches: null,
143144
key: null
145+
},
146+
maxWidthMargin,
147+
maxWidth:
148+
Math.max(
149+
document.documentElement.clientWidth || 0,
150+
window.innerWidth || 0
151+
) - (maxWidthMargin * 2),
152+
maxWidthStyles: {
153+
left: 'auto',
154+
right: 'auto',
155+
marginRight: 'auto',
156+
marginLeft: 'auto',
157+
boxSizing: 'border-box'
144158
}
145159
};
146160
},
@@ -154,14 +168,24 @@ export default {
154168
deviceMode: this.deviceMode
155169
});
156170
},
157-
rootCssVars() {
171+
rootStyles() {
172+
let styles = {};
158173
// Escape quotes and backslashes for CSS content property
159174
const text = this.$t('apostrophe:layoutColumnEmptyArea')
160175
.replace(/\\/g, '\\\\')
161176
.replace(/'/g, '\\\'');
162-
return {
163-
'--empty-area-text': `'${text}'`
164-
};
177+
178+
styles['--empty-area-text'] = `'${text}'`;
179+
180+
if (this.isManageMode) {
181+
styles = {
182+
...styles,
183+
...this.maxWidthStyles,
184+
maxWidth: `${this.maxWidth}px`
185+
};
186+
}
187+
188+
return styles;
165189
},
166190
syntheticItems() {
167191
if (!this.isManageMode) {
@@ -221,7 +245,18 @@ export default {
221245
};
222246
}
223247
},
248+
mounted() {
249+
window.addEventListener('resize', this.updateMaxWidth);
250+
},
251+
unmounted() {
252+
window.removeEventListener('resize', this.updateMaxWidth);
253+
},
224254
methods: {
255+
updateMaxWidth() {
256+
const vw =
257+
Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
258+
this.maxWidth = vw - this.maxWidthMargin * 2;
259+
},
225260
onResizeStart() {
226261
this.isResizing = true;
227262
this.$emit('resize-start');

modules/@apostrophecms/layout-widget/ui/apos/components/AposGridManager.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -920,6 +920,7 @@ export default {
920920
$resize-ui-width: 12px;
921921
$resize-ui-height: 32px;
922922
$resize-button-width: 4px;
923+
$resize-ui-z-index: 2;
923924
924925
/* The base grid styles, mimicking the default public behavior */
925926
.apos-layout__item {
@@ -1164,8 +1165,8 @@ $resize-button-width: 4px;
11641165
position: absolute;
11651166
width: $anchor-size;
11661167
height: $anchor-size;
1167-
outline: 1px solid var(--a-primary);
1168-
background-color: var(--a-primary-light-80);
1168+
outline: 1px solid var(--a-base-5);
1169+
background-color: var(--a-base-10);
11691170
pointer-events: none;
11701171
}
11711172
@@ -1243,6 +1244,7 @@ $resize-button-width: 4px;
12431244
}
12441245
12451246
.apos-layout__item-resize-handle-icon {
1247+
z-index: $resize-ui-z-index;
12461248
pointer-events: none;
12471249
position: absolute;
12481250
top: 0;

0 commit comments

Comments
 (0)