Skip to content

Commit 7f3aaa2

Browse files
gordlingordlin
committed
Merge remote-tracking branch 'refs/remotes/origin/new-header-bar-alter' into new-header-bar-alter
2 parents 3abbfed + 1ed7241 commit 7f3aaa2

File tree

2 files changed

+88
-80
lines changed

2 files changed

+88
-80
lines changed

‎src/app.vue

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,6 @@
22
<div
33
id="app"
44
class="storyramp-app bg-white"
5-
:class="{
6-
'canada-ca-site': currentPath.includes('index-ca-en.html') || currentPath.includes('index-ca-fr.html')
7-
}"
85
>
96
<router-view :key="$route.path"></router-view>
107
</div>

‎src/components/editor.vue

Lines changed: 88 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,21 @@
44
<!-- Should prevent stuff in the background from being scrolled or interacted with. Click it to close the sidebar -->
55
<div id="overlay" class="overlay" @click="closeSidebar"></div>
66
<!-- Header bar -->
7-
<div class="sticky top-0">
7+
<div class="sticky top-0" style="z-index: 999">
88
<div class="editor-header-upper sticky top-0 bg-white border-b border-black max-h-full">
99
<div class="flex flex-row justify-between items-center px-3 py-0.5 md:py-0">
1010
<div class="flex flex-row items-center gap-2">
1111
<!-- Back to landing page button -->
1212
<router-link
1313
:to="{ name: 'home' }"
1414
class=""
15-
v-tippy="{
16-
delay: '200',
17-
placement: 'bottom',
18-
content: $t('editor.returnToLanding'),
19-
animateFill: true,
20-
touch: ['hold', 500]
21-
}"
2215
target
2316
:aria-label="$t('editor.returnToLanding')"
2417
tabindex="-1"
2518
>
2619
<button
27-
class="editor-button py-2 md:py-1.5 my-1 md:my-1.5 flex flex-row items-center gap-2 w-fit"
20+
class="editor-button py-2 md:py-1.5 my-1 md:my-1.5 flex flex-row items-center md:gap-2 w-fit"
21+
truncate-trigger
2822
tabindex="0"
2923
>
3024
<svg
@@ -39,7 +33,20 @@
3933
transform="translate(-0.5)"
4034
/>
4135
</svg>
42-
<p class="mobile-hidden-text border md:border-0 border-black font-medium">
36+
<p
37+
class="mobile-hidden-text border md:border-0 border-black font-medium"
38+
v-truncate="{
39+
externalTrigger: true,
40+
options: {
41+
delay: '200',
42+
placement: 'bottom',
43+
content: $t('editor.returnToLanding'),
44+
animateFill: true,
45+
touch: ['hold', 500],
46+
offset: [0, 20]
47+
}
48+
}"
49+
>
4350
{{ $t('editor.leaveEditor') }}
4451
</p>
4552
</button>
@@ -55,7 +62,8 @@
5562
placement: 'bottom',
5663
content: $t('editor.openSidebar'),
5764
animateFill: true,
58-
touch: ['hold', 500]
65+
touch: ['hold', 500],
66+
offset: [0, 2]
5967
}"
6068
>
6169
<svg
@@ -94,6 +102,7 @@
94102
animateFill: true,
95103
touch: ['hold', 500]
96104
}"
105+
tabindex="0"
97106
>
98107
<div class="mr-1 pb-1 fill-current">
99108
<svg
@@ -121,13 +130,7 @@
121130
:disabled="!unsavedChanges"
122131
@click="$vfm.open(`reload-config`)"
123132
class="editor-button flex flex-row border border-gray-700 text-gray-800 rounded my-0"
124-
v-tippy="{
125-
delay: '200',
126-
placement: 'bottom',
127-
content: $t('editor.resetChanges'),
128-
animateFill: true,
129-
touch: ['hold', 500]
130-
}"
133+
truncate-trigger
131134
>
132135
<svg
133136
class="inline fill-current mb-0.5"
@@ -141,21 +144,29 @@
141144
d="M 2 2 L 4.9394531 4.9394531 C 3.1262684 6.7482143 2 9.2427079 2 12 C 2 17.514 6.486 22 12 22 C 17.514 22 22 17.514 22 12 C 22 6.486 17.514 2 12 2 L 12 4 C 16.411 4 20 7.589 20 12 C 20 16.411 16.411 20 12 20 C 7.589 20 4 16.411 4 12 C 4 9.7940092 4.9004767 7.7972757 6.3496094 6.3496094 L 9 9 L 9 2 L 2 2 z"
142145
/>
143146
</svg>
144-
<span class="mobile-hidden-text font-medium ml-1">{{ $t('editor.resetChanges') }}</span>
147+
<span
148+
class="mobile-hidden-text font-medium md:ml-1"
149+
v-truncate="{
150+
externalTrigger: true,
151+
options: {
152+
delay: '200',
153+
placement: 'bottom',
154+
content: $t('editor.resetChanges'),
155+
animateFill: true,
156+
touch: ['hold', 500],
157+
offset: [-10, 32]
158+
}
159+
}"
160+
>{{ $t('editor.resetChanges') }}</span
161+
>
145162
</button>
146163

147164
<!-- Save changes button -->
148165
<button
149166
@click="saveChanges"
150-
class="editor-button flex flex-row gap-1.5 items-center m-0 bg-black text-white hover:bg-gray-900 border border-black"
167+
class="editor-button flex flex-row md:gap-1.5 items-center m-0 bg-black text-white hover:bg-gray-900 border border-black"
151168
:disabled="!unsavedChanges || saving"
152-
v-tippy="{
153-
delay: '200',
154-
placement: 'bottom',
155-
content: $t('editor.saveChanges'),
156-
animateFill: true,
157-
touch: ['hold', 500]
158-
}"
169+
truncate-trigger
159170
>
160171
<svg
161172
xmlns="http://www.w3.org/2000/svg"
@@ -177,9 +188,21 @@
177188
/>
178189
</g>
179190
</svg>
180-
<span class="mobile-hidden-text font-medium">{{
181-
saving ? $t('editor.savingChanges') : $t('editor.saveChanges')
182-
}}</span>
191+
<span
192+
class="mobile-hidden-text font-medium"
193+
v-truncate="{
194+
externalTrigger: true,
195+
options: {
196+
delay: '200',
197+
placement: 'bottom',
198+
content: $t('editor.saveChanges'),
199+
animateFill: true,
200+
touch: ['hold', 500],
201+
offset: [-10, 20]
202+
}
203+
}"
204+
>{{ saving ? $t('editor.savingChanges') : $t('editor.saveChanges') }}</span
205+
>
183206
<span v-if="saving" class="align-middle inline-block px-1">
184207
<spinner size="16px" color="#009cd1" class="ml-1 mb-1"></spinner>
185208
</span>
@@ -197,13 +220,6 @@
197220
name: 'editor',
198221
params: { lang: currentRoute.includes('#/en') ? 'fr' : 'en', uid: uuid }
199222
}"
200-
v-tippy="{
201-
delay: '200',
202-
placement: 'bottom',
203-
content: currentRoute.includes('#/en') ? 'Français' : 'English',
204-
animateFill: true,
205-
touch: ['hold', 500]
206-
}"
207223
class="underline text-black font-medium px-2"
208224
>
209225
<a>
@@ -222,27 +238,31 @@
222238
<span
223239
tabindex="0"
224240
class="font-semibold text-lg line-clamp-1 leading-snug"
225-
v-tippy="{
226-
delay: '200',
227-
placement: 'bottom-start',
228-
content: metadata.title,
229-
animateFill: true,
230-
touch: ['hold', 500]
241+
v-truncate="{
242+
options: {
243+
delay: '200',
244+
placement: 'bottom-start',
245+
content: metadata.title,
246+
animateFill: true,
247+
touch: ['hold', 500]
248+
}
231249
}"
232250
>{{ metadata.title }}</span
233251
>
234252
<span
235253
tabindex="0"
236254
class="line-clamp-1"
237255
:class="metadata.title ? 'text-xs' : ''"
238-
v-tippy="{
239-
delay: '200',
240-
placement: 'bottom-start',
241-
content: uuid,
242-
animateFill: true,
243-
touch: ['hold', 500]
256+
v-truncate="{
257+
options: {
258+
delay: '200',
259+
placement: 'bottom-start',
260+
content: uuid,
261+
animateFill: true,
262+
touch: ['hold', 500]
263+
}
244264
}"
245-
>UUID: {{ uuid }}</span
265+
>{{ $t('editor.uuid') }}: {{ uuid }}</span
246266
>
247267
</div>
248268
<span class="ml-auto"></span>
@@ -251,16 +271,7 @@
251271
<!-- Preview dropdown -->
252272
<div class="dropdown editor-button">
253273
<!-- The "Preview" button - hover over it to show the options -->
254-
<button
255-
v-tippy="{
256-
delay: '200',
257-
placement: 'top',
258-
content: $t('editor.preview'),
259-
animateFill: true,
260-
touch: ['hold', 500]
261-
}"
262-
class="dropbtn flex gap-2 items-center cursor-default"
263-
>
274+
<button class="dropbtn flex gap-2 items-center cursor-default">
264275
<svg
265276
xmlns="http://www.w3.org/2000/svg"
266277
xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -317,7 +328,7 @@
317328
class="bg-white border border-black rounded-full w-9 h-9 flex items-center justify-center hover:bg-gray-100"
318329
v-tippy="{
319330
delay: '200',
320-
placement: 'top',
331+
placement: 'bottom',
321332
content: $t('editor.export'),
322333
animateFill: true,
323334
touch: ['hold', 500]
@@ -362,7 +373,7 @@
362373
class="bg-white border border-black rounded-full w-9 h-9 hover:bg-gray-100"
363374
v-tippy="{
364375
delay: '200',
365-
placement: 'top',
376+
placement: 'bottom',
366377
content: $t('help.title'),
367378
animateFill: true,
368379
touch: ['hold', 500]
@@ -376,7 +387,7 @@
376387
class="bg-white border border-black rounded-full w-9 h-9 hover:bg-gray-100"
377388
v-tippy="{
378389
delay: '200',
379-
placement: 'top',
390+
placement: 'bottom',
380391
content: $t('editor.feedback'),
381392
animateFill: true,
382393
touch: ['hold', 500]
@@ -416,7 +427,7 @@
416427
</div>
417428

418429
<!-- Body content -->
419-
<div class="editor-body flex">
430+
<div class="editor-body flex" style="z-index: 1">
420431
<!-- Left side -->
421432
<!-- Sidebar, desktop version -->
422433
<div id="sidebar-desktop" class="w-80 flex flex-col flex-shrink-0 border-r border-black editor-toc hidden">
@@ -858,12 +869,12 @@ select:focus {
858869
859870
.editor-header-upper {
860871
grid-area: 'header-upper';
861-
z-index: 20;
872+
z-index: 1000;
862873
}
863874
864875
.editor-header {
865876
grid-area: header;
866-
z-index: 19;
877+
z-index: 999;
867878
}
868879
869880
.editor-body {
@@ -973,7 +984,7 @@ select:focus {
973984
}
974985
975986
#sidebar-mobile {
976-
z-index: 25; // should be on top
987+
z-index: 2001; // should be on top
977988
height: 100%;
978989
width: 0; /* Initial width is 0 to be hidden */
979990
max-width: 100%;
@@ -992,7 +1003,7 @@ select:focus {
9921003
width: 100%;
9931004
height: 100%;
9941005
background-color: rgba(0, 0, 0, 0.5); /* Translucent black */
995-
z-index: 21; /* Ensure it appears just under the sidebar */
1006+
z-index: 2000; /* Ensure it appears just under the sidebar */
9961007
display: none; /* Initially hidden */
9971008
}
9981009
@@ -1003,24 +1014,24 @@ select:focus {
10031014
-webkit-line-clamp: 1;
10041015
}
10051016
1006-
.line-clamp-2 {
1007-
overflow: hidden;
1008-
display: -webkit-box;
1009-
-webkit-box-orient: vertical;
1010-
-webkit-line-clamp: 2;
1011-
}
1012-
10131017
.mobile-hidden-text {
1014-
display: none;
1018+
width: auto;
10151019
}
10161020
10171021
@media only screen and (min-width: 768px) {
10181022
#sidebar-desktop {
10191023
display: block !important;
10201024
}
1025+
}
10211026
1027+
@media only screen and (max-width: 768px) {
10221028
.mobile-hidden-text {
1023-
display: block !important;
1029+
width: 0 !important;
1030+
height: 0 !important;
1031+
padding: 0;
1032+
margin: 0;
1033+
overflow: hidden;
1034+
border: none;
10241035
}
10251036
}
10261037
</style>

0 commit comments

Comments
 (0)