Skip to content

Commit 9725716

Browse files
gordlingordlin
committed
Implement minor slide editor redesign, improve 'full slide' functionality
1 parent ad21f78 commit 9725716

14 files changed

+431
-257
lines changed

‎src/components/dynamic-editor.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="block">
2+
<div class="block mt-2">
33
<!-- left and right panel buttons for dynamic panels -->
44
<div class="flex">
55
<button

‎src/components/editor.vue

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@
154154
<!-- Save changes button -->
155155
<button
156156
@click="saveChanges"
157-
class="editor-button m-0 bg-black text-white hover:bg-gray-900"
157+
class="editor-button m-0 bg-black text-white hover:bg-gray-900 border border-black"
158158
:disabled="saving"
159159
>
160160
<span class="inline-block">{{
@@ -287,10 +287,10 @@
287287
></slide-toc>
288288
</div>
289289
<!-- Right side -->
290-
<div class="editor-area flex flex-col space-between w-full overflow-y-auto">
290+
<div class="w-full">
291291
<!-- Slide editor -->
292292
<slide-editor
293-
class="flex-1 w-full overflow-y-auto"
293+
class="editor-area w-full"
294294
ref="slide"
295295
:configFileStructure="configFileStructure"
296296
:currentSlide="currentSlide"
@@ -612,22 +612,22 @@ window.addEventListener('resize', () => {
612612
}
613613
614614
.editor-label {
615-
width: 10vw;
616-
text-align: right;
617-
margin-right: 15px;
618-
display: inline-block;
615+
font-weight: 600;
616+
text-align: left;
619617
}
620618
621619
.editor-h3 {
622620
font-size: larger;
623621
}
624622
625623
.editor-input {
626-
padding: 10px 10px;
627-
margin-top: 5px;
628-
border: 1px solid black;
629-
display: inline;
624+
padding: 7px 10px;
625+
margin-top: 3px;
626+
border: 1px solid #a1a1a1;
627+
//display: inline;
630628
border-radius: 5px;
629+
--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
630+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
631631
}
632632
633633
.editor-container .input-error {
@@ -636,14 +636,15 @@ window.addEventListener('resize', () => {
636636
}
637637
638638
.editor-button {
639+
border-radius: 3px;
639640
padding: 5px 12px;
640-
margin: 0px 10px;
641+
//margin: 0px 10px;
641642
font-weight: 600;
642643
transition-duration: 0.2s;
643644
}
644645
645646
.editor-forms-button {
646-
padding: 11px 15px;
647+
padding: 8px 15px;
647648
border-radius: 5px;
648649
}
649650
@@ -652,8 +653,12 @@ window.addEventListener('resize', () => {
652653
color: black;
653654
}
654655
655-
.editor-button:focus {
656+
button:focus,
657+
.editor-button:focus,
658+
input:focus,
659+
select:focus {
656660
outline: 2px solid royalblue;
661+
z-index: 2;
657662
outline-offset: 2px;
658663
transition-duration: 0.075s;
659664
}
@@ -710,8 +715,8 @@ window.addEventListener('resize', () => {
710715
@media only screen and (min-width: 768px) {
711716
.editor-area {
712717
overflow-y: auto;
713-
height: calc(100vh - 63px);
714-
height: calc(calc(var(--vh, 1vh) * 100) - 63px);
718+
//height: calc(100vh - 80px);
719+
height: calc(calc(var(--vh, 1vh) * 100) - 100px);
715720
}
716721
}
717722
@@ -730,6 +735,7 @@ window.addEventListener('resize', () => {
730735
font-weight: 600;
731736
border: 1px solid black;
732737
transition: background-color 0.2s;
738+
border-radius: 3px;
733739
}
734740
735741
/* Main dropdown icon - required for positioning */

‎src/components/helpers/action-modal.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<vue-final-modal
33
:modalId="name"
4+
:clickToClose="false"
45
content-class="flex flex-col max-h-full overflow-y-auto max-w-xl mx-4 p-4 bg-white border rounded-lg space-y-2"
56
class="flex justify-center items-center"
67
>
@@ -65,6 +66,12 @@ button {
6566
color: black;
6667
}
6768
69+
.vfm__content button:focus {
70+
outline: 2px solid royalblue;
71+
outline-offset: 2px;
72+
transition-duration: 0.075s;
73+
}
74+
6875
.vfm__content button:disabled {
6976
border: 1px solid gray;
7077
color: gray;

‎src/components/helpers/image-preview.vue

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ export default class ImagePreviewV extends Vue {
3939
<style lang="scss" scoped>
4040
.image-item {
4141
width: 30%;
42-
4342
cursor: move; // fallback
4443
cursor: grab;
4544
cursor: -moz-grab;
@@ -61,4 +60,16 @@ export default class ImagePreviewV extends Vue {
6160
padding: 0 !important;
6261
}
6362
}
63+
64+
@media only screen and (max-width: 1500px) {
65+
.image-item {
66+
width: 41%;
67+
}
68+
}
69+
70+
@media only screen and (max-width: 900px) {
71+
.image-item {
72+
width: 90%;
73+
}
74+
}
6475
</style>

‎src/components/helpers/metadata-content.vue

Lines changed: 17 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
id="metaTitle"
1313
:value="metadata.title"
1414
@change="metadataChanged"
15-
class="metadata-input"
15+
class="metadata-input editor-input"
1616
/>
1717
<p class="metadata-subcaption">
1818
{{ $t('editor.metadataForm.caption.title') }}
@@ -79,7 +79,7 @@
7979
:value="metadata.introTitle"
8080
@change="metadataChanged"
8181
id="introTitle"
82-
class="metadata-input"
82+
class="metadata-input editor-input"
8383
/>
8484
<p class="metadata-subcaption">
8585
{{ $t('editor.metadataForm.caption.introTitle') }}
@@ -97,7 +97,7 @@
9797
id="introSubtitle"
9898
:value="metadata.introSubtitle"
9999
@change="metadataChanged"
100-
class="metadata-input"
100+
class="metadata-input editor-input"
101101
/>
102102
<p class="metadata-subcaption">
103103
{{ $t('editor.metadataForm.caption.introSubtitle') }}
@@ -117,20 +117,20 @@
117117
id="metaLogo"
118118
@change="$emit('logo-source-changed', $event)"
119119
:value="metadata.logoName"
120-
class="metadata-input w-full lg:w-1/2"
120+
class="metadata-input editor-input w-full lg:w-1/2"
121121
/>
122122
<!-- Upload button -->
123123
<button
124124
@click.stop="openFileSelector"
125-
class="metadata-button mb-0.5 bg-black border border-black text-white hover:bg-gray-800"
125+
class="editor-button py-1.5 bg-black border border-black text-white hover:bg-gray-800"
126126
>
127127
{{ $t('editor.browse') }}
128128
</button>
129129
<!-- Delete button -->
130130
<button
131131
v-if="metadata.logoName || metadata.logoPreview"
132132
@click.stop="removeLogo"
133-
class="metadata-button border mb-0.5 border-black"
133+
class="editor-button py-1.5 border border-black"
134134
>
135135
{{ $t('editor.remove') }}
136136
</button>
@@ -169,7 +169,7 @@
169169
id="logoAltText"
170170
:value="metadata.logoAltText"
171171
@change="metadataChanged"
172-
class="metadata-input"
172+
class="metadata-input editor-input"
173173
/>
174174
<p class="metadata-subcaption">
175175
{{ $t('editor.metadataForm.caption.logoAltText') }}
@@ -193,7 +193,7 @@
193193
id="contextLink"
194194
:value="metadata.contextLink"
195195
@change="metadataChanged"
196-
class="metadata-input"
196+
class="metadata-input editor-input"
197197
/>
198198
<p class="metadata-subcaption">
199199
{{ $t('editor.metadataForm.caption.contextLink') }}
@@ -211,7 +211,7 @@
211211
id="contextLabel"
212212
:value="metadata.contextLabel"
213213
@change="metadataChanged"
214-
class="metadata-input"
214+
class="metadata-input editor-input"
215215
/>
216216
<p class="metadata-subcaption">
217217
{{ $t('editor.metadataForm.caption.contextLabel') }}
@@ -224,7 +224,7 @@
224224
<label class="metadata-label" for="dateModified">{{ $t('editor.dateModified') }}</label>
225225
<div v-show="editing">
226226
<input
227-
class="metadata-input w-full md:w-1/3"
227+
class="metadata-input editor-input w-full md:w-1/3"
228228
type="date"
229229
name="dateModified"
230230
id="dateModified"
@@ -279,15 +279,17 @@ h2 {
279279
}
280280
281281
.metadata-input {
282-
padding: 8px 10px;
283-
border: 1px solid lightgray;
282+
//padding: 8px 10px;
283+
border: 1px solid lightgray !important;
284284
// outline: 1px solid lightgray;
285285
display: block;
286286
border-radius: 5px;
287287
margin-top: 0.15rem;
288288
margin-bottom: 0.25rem;
289289
max-width: 100%;
290290
width: 1200px;
291+
--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
292+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
291293
}
292294
293295
.metadata-subcaption {
@@ -298,36 +300,14 @@ h2 {
298300
.metadata-select {
299301
padding: 8px 10px;
300302
border: 1px solid lightgray;
303+
background-color: white;
301304
display: block;
302305
border-radius: 5px;
303306
margin-top: 0.15rem;
304307
margin-bottom: 0.25rem;
305308
max-width: 100%;
306309
width: 300px;
307-
}
308-
309-
.metadata-button {
310-
padding: 8px 15px;
311-
margin: 0;
312-
border-radius: 5px;
313-
font-weight: 600;
314-
transition-duration: 0.2s;
315-
}
316-
317-
.metadata-button:hover:enabled {
318-
background-color: #dbdbdb;
319-
color: black;
320-
}
321-
322-
.metadata-button:focus {
323-
outline: 2px solid royalblue;
324-
outline-offset: 2px;
325-
transition-duration: 0.075s;
326-
}
327-
328-
.metadata-button:disabled {
329-
border: 1px solid gray;
330-
color: gray;
331-
cursor: not-allowed;
310+
--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
311+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
332312
}
333313
</style>

0 commit comments

Comments
 (0)