Skip to content

Commit

Permalink
Implement minor slide editor redesign, improve 'full slide' functiona…
Browse files Browse the repository at this point in the history 
…lity
  • Loading branch information
@gordlin
gordlin committed Dec 12, 2024
1 parent ad21f78 commit 9725716
Show file tree
Hide file tree
Showing 14 changed files with 431 additions and 257 deletions.
2 changes: 1 addition & 1 deletion src/components/dynamic-editor.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="block">
<div class="block mt-2">
<!-- left and right panel buttons for dynamic panels -->
<div class="flex">
<button
Expand Down
38 changes: 22 additions & 16 deletions src/components/editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@
<!-- Save changes button -->
<button
@click="saveChanges"
class="editor-button m-0 bg-black text-white hover:bg-gray-900"
class="editor-button m-0 bg-black text-white hover:bg-gray-900 border border-black"
:disabled="saving"
>
<span class="inline-block">{{
Expand Down Expand Up @@ -287,10 +287,10 @@
></slide-toc>
</div>
<!-- Right side -->
<div class="editor-area flex flex-col space-between w-full overflow-y-auto">
<div class="w-full">
<!-- Slide editor -->
<slide-editor
class="flex-1 w-full overflow-y-auto"
class="editor-area w-full"
ref="slide"
:configFileStructure="configFileStructure"
:currentSlide="currentSlide"
Expand Down Expand Up @@ -612,22 +612,22 @@ window.addEventListener('resize', () => {
}
.editor-label {
width: 10vw;
text-align: right;
margin-right: 15px;
display: inline-block;
font-weight: 600;
text-align: left;
}
.editor-h3 {
font-size: larger;
}
.editor-input {
padding: 10px 10px;
margin-top: 5px;
border: 1px solid black;
display: inline;
padding: 7px 10px;
margin-top: 3px;
border: 1px solid #a1a1a1;
//display: inline;
border-radius: 5px;
--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.editor-container .input-error {
Expand All @@ -636,14 +636,15 @@ window.addEventListener('resize', () => {
}
.editor-button {
border-radius: 3px;
padding: 5px 12px;
margin: 0px 10px;
//margin: 0px 10px;
font-weight: 600;
transition-duration: 0.2s;
}
.editor-forms-button {
padding: 11px 15px;
padding: 8px 15px;
border-radius: 5px;
}
Expand All @@ -652,8 +653,12 @@ window.addEventListener('resize', () => {
color: black;
}
.editor-button:focus {
button:focus,
.editor-button:focus,
input:focus,
select:focus {
outline: 2px solid royalblue;
z-index: 2;
outline-offset: 2px;
transition-duration: 0.075s;
}
Expand Down Expand Up @@ -710,8 +715,8 @@ window.addEventListener('resize', () => {
@media only screen and (min-width: 768px) {
.editor-area {
overflow-y: auto;
height: calc(100vh - 63px);
height: calc(calc(var(--vh, 1vh) * 100) - 63px);
//height: calc(100vh - 80px);
height: calc(calc(var(--vh, 1vh) * 100) - 100px);
}
}
Expand All @@ -730,6 +735,7 @@ window.addEventListener('resize', () => {
font-weight: 600;
border: 1px solid black;
transition: background-color 0.2s;
border-radius: 3px;
}
/* Main dropdown icon - required for positioning */
Expand Down
7 changes: 7 additions & 0 deletions src/components/helpers/action-modal.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<template>
<vue-final-modal
:modalId="name"
:clickToClose="false"
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"
class="flex justify-center items-center"
>
Expand Down Expand Up @@ -65,6 +66,12 @@ button {
color: black;
}
.vfm__content button:focus {
outline: 2px solid royalblue;
outline-offset: 2px;
transition-duration: 0.075s;
}
.vfm__content button:disabled {
border: 1px solid gray;
color: gray;
Expand Down
13 changes: 12 additions & 1 deletion src/components/helpers/image-preview.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ export default class ImagePreviewV extends Vue {
<style lang="scss" scoped>
.image-item {
width: 30%;
cursor: move; // fallback
cursor: grab;
cursor: -moz-grab;
Expand All @@ -61,4 +60,16 @@ export default class ImagePreviewV extends Vue {
padding: 0 !important;
}
}
@media only screen and (max-width: 1500px) {
.image-item {
width: 41%;
}
}
@media only screen and (max-width: 900px) {
.image-item {
width: 90%;
}
}
</style>
54 changes: 17 additions & 37 deletions src/components/helpers/metadata-content.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
id="metaTitle"
:value="metadata.title"
@change="metadataChanged"
class="metadata-input"
class="metadata-input editor-input"
/>
<p class="metadata-subcaption">
{{ $t('editor.metadataForm.caption.title') }}
Expand Down Expand Up @@ -79,7 +79,7 @@
:value="metadata.introTitle"
@change="metadataChanged"
id="introTitle"
class="metadata-input"
class="metadata-input editor-input"
/>
<p class="metadata-subcaption">
{{ $t('editor.metadataForm.caption.introTitle') }}
Expand All @@ -97,7 +97,7 @@
id="introSubtitle"
:value="metadata.introSubtitle"
@change="metadataChanged"
class="metadata-input"
class="metadata-input editor-input"
/>
<p class="metadata-subcaption">
{{ $t('editor.metadataForm.caption.introSubtitle') }}
Expand All @@ -117,20 +117,20 @@
id="metaLogo"
@change="$emit('logo-source-changed', $event)"
:value="metadata.logoName"
class="metadata-input w-full lg:w-1/2"
class="metadata-input editor-input w-full lg:w-1/2"
/>
<!-- Upload button -->
<button
@click.stop="openFileSelector"
class="metadata-button mb-0.5 bg-black border border-black text-white hover:bg-gray-800"
class="editor-button py-1.5 bg-black border border-black text-white hover:bg-gray-800"
>
{{ $t('editor.browse') }}
</button>
<!-- Delete button -->
<button
v-if="metadata.logoName || metadata.logoPreview"
@click.stop="removeLogo"
class="metadata-button border mb-0.5 border-black"
class="editor-button py-1.5 border border-black"
>
{{ $t('editor.remove') }}
</button>
Expand Down Expand Up @@ -169,7 +169,7 @@
id="logoAltText"
:value="metadata.logoAltText"
@change="metadataChanged"
class="metadata-input"
class="metadata-input editor-input"
/>
<p class="metadata-subcaption">
{{ $t('editor.metadataForm.caption.logoAltText') }}
Expand All @@ -193,7 +193,7 @@
id="contextLink"
:value="metadata.contextLink"
@change="metadataChanged"
class="metadata-input"
class="metadata-input editor-input"
/>
<p class="metadata-subcaption">
{{ $t('editor.metadataForm.caption.contextLink') }}
Expand All @@ -211,7 +211,7 @@
id="contextLabel"
:value="metadata.contextLabel"
@change="metadataChanged"
class="metadata-input"
class="metadata-input editor-input"
/>
<p class="metadata-subcaption">
{{ $t('editor.metadataForm.caption.contextLabel') }}
Expand All @@ -224,7 +224,7 @@
<label class="metadata-label" for="dateModified">{{ $t('editor.dateModified') }}</label>
<div v-show="editing">
<input
class="metadata-input w-full md:w-1/3"
class="metadata-input editor-input w-full md:w-1/3"
type="date"
name="dateModified"
id="dateModified"
Expand Down Expand Up @@ -279,15 +279,17 @@ h2 {
}
.metadata-input {
padding: 8px 10px;
border: 1px solid lightgray;
//padding: 8px 10px;
border: 1px solid lightgray !important;
// outline: 1px solid lightgray;
display: block;
border-radius: 5px;
margin-top: 0.15rem;
margin-bottom: 0.25rem;
max-width: 100%;
width: 1200px;
--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.metadata-subcaption {
Expand All @@ -298,36 +300,14 @@ h2 {
.metadata-select {
padding: 8px 10px;
border: 1px solid lightgray;
background-color: white;
display: block;
border-radius: 5px;
margin-top: 0.15rem;
margin-bottom: 0.25rem;
max-width: 100%;
width: 300px;
}
.metadata-button {
padding: 8px 15px;
margin: 0;
border-radius: 5px;
font-weight: 600;
transition-duration: 0.2s;
}
.metadata-button:hover:enabled {
background-color: #dbdbdb;
color: black;
}
.metadata-button:focus {
outline: 2px solid royalblue;
outline-offset: 2px;
transition-duration: 0.075s;
}
.metadata-button:disabled {
border: 1px solid gray;
color: gray;
cursor: not-allowed;
--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
</style>
Loading

0 comments on commit 9725716

Please sign in to comment.