Publications - quicky et article

src/views/contents/ContentEditorPage.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import {ref} from 'vue';
 import HTMLContentEditor from "@/views/contents/HTMLContentEditor.vue";
 import QuickyContentEditor from "@/views/contents/QuickyContentEditor.vue";
 
@@ -18,64 +18,71 @@ const toggleHtmlEditor = () => {
 </script>
 
 <template>
-  <div class="editor-buttons flex flex-column items-center rounded-2xl mt-2">
+  <div class="flex flex-col h-screen">
-    <div class="mb-4 text-xl uppercase">Éditeurs de contenu</div>
+    <!-- Titre en haut -->
-  
+    <header class="text-2xl text-center py-4 bg-gray-200">
-    <div class="flex flex-row space-x-4">
+      Création de contenu
+    </header>
 
+    <!-- Contenu en deux colonnes -->
+    <div class="flex flex-grow">
+      <!-- Menu latéral -->
+      <aside class="side-menu flex flex-col items-center py-6 bg-gray-100 w-1/4">
+        <div class="text-xl uppercase mb-6">Éditeurs de contenu</div>
+        <!-- Le bouton Quicky est plus visible quand il est actif -->
         <v-btn
             :variant="showQuickyEditor ? 'elevated' : 'plain'"
             @click="toggleQuickyEditor"
+            class="mb-4 normal-button"
         >
           Quicky
         </v-btn>
-
+        <!-- Le bouton Article est plus visible quand il est actif -->
         <v-btn
             :variant="showHtmlEditor ? 'elevated' : 'plain'"
             @click="toggleHtmlEditor"
+            class="normal-button"
         >
           Article
         </v-btn>
-    </div>
+      </aside>
+
+      <!-- Contenu principal -->
+      <main class="flex-grow p-6 bg-white">
+        <div v-if="showQuickyEditor">
+          <quicky-content-editor/>
         </div>
 
-  <div class="flex flex-row">
+        <div v-if="showHtmlEditor">
-    <div>
+          <HTMLContentEditor/>
-      <div v-if="showQuickyEditor" class="mt-16">
-        <quicky-content-editor />
-      </div>
-
-      <div v-if="showHtmlEditor" class="mt-16">
-        <HTMLContentEditor />
         </div>
+      </main>
     </div>
   </div>
 </template>
 
 <style scoped>
-.editor-buttons {
+.side-menu {
-  display: flex;
+  background-color: #f7f7f7;
-  justify-content: center;
+  border-right: 1px solid #ccc;
-  position: fixed;
-  top: 0;
-  left: 245px; 
-  width: calc(100% - 250px); 
-  background-color: white;
-  z-index: 2;
-  padding: 1rem;
-  border-bottom: 1px solid #ccc;
 }
 
-button {
+.v-btn {
-  padding: 0.5rem 1rem;
+  width: 80%; /* Ajuster la largeur des boutons */
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  background-color: #f5f5f5;
-  cursor: pointer;
-  margin: 0 0.5rem;
 }
 
-button:hover {
+.normal-button {
-  background-color: #e0e0e0;
+  padding: 0.5rem 1rem; /* Taille normale des boutons */
+  font-size: 1rem; /* Ajuster la taille du texte */
+}
+
+header {
+  background-color: #f0f0f0;
+  font-weight: bold;
+}
+
+main {
+  padding: 2rem;
+  overflow-y: auto;
 }
 </style>

src/views/contents/HTMLContentEditor.vue

@@ -158,16 +158,16 @@ const setupTinyMCE = (editor) => {
     </template>
   </v-snackbar>
 
-  <div class="w-full h-full flex flex-col items-center justify-start">
+  <div class="flex flex-col items-center justify-start">
     Html
     <v-btn  class="mb-4 text-xl px-6 py-3" @click="router.go(-1)">Return</v-btn>
     <v-text-field
         v-model="title"
         placeholder="Title"
-        style="width: 40%; font-size: 1.5rem; padding: 10px;"
+        style="width: 100%; font-size: 1.5rem; padding: 10px;"
     ></v-text-field>
     <Editor
-        style="max-width: 400px; width: 50%; font-size: 1.5rem; padding: 10px; height: 120%"
+        style="max-width: 500px; width: 50%; font-size: 1.5rem; padding: 10px; height: 120%"
         :tinymceScriptSrc="tinymceScriptSrc"
         v-model="content"
         :init="{

src/views/contents/QuickyContentEditor.vue

@@ -63,7 +63,7 @@ const cancelPost = () => {
 
 <template>
   <v-form>
-    <v-card class="text-center rounded-xl">
+    <v-card class="text-center rounded-xl w-[600px]">
       <v-card-title class="font-medium">
         Créer un Contenu
       </v-card-title>

src/views/main/SideBar.vue

@@ -6,8 +6,6 @@ import {computed, ref} from "vue";
 import {useI18n} from 'vue-i18n';
 import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
 import {useUserProfileStore} from "@/stores/userProfileStore.js";
-import {useBrandingStore} from "@/stores/brandingStore.js";
-import PublishContentButton from "@/views/contents/PublishContentButton.vue";
 
 const {locale} = useI18n();
 const router = useRouter();
@@ -15,7 +13,6 @@ const selectedLanguage = ref(locale.value);
 
 const userProfileStore = useUserProfileStore();
 const creatorProfileStore = useCreatorProfileStore();
-const brandingStore = useBrandingStore();
 const authStore = useAuthStore();
 
 const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId);
@@ -59,7 +56,7 @@ initializeLocale();
 
     
     <div v-if="creatorIsCurrentUser" class="justify-center text-center"> 
-    <v-btn variant="flat" icon @click="createHtmlContent">
+    <v-btn variant="flat" icon="" @click="createHtmlContent">
       <v-icon>mdi-pencil</v-icon>
     </v-btn>
       
@@ -155,11 +152,5 @@ initializeLocale();
   </nav>
 </template>
 
-<style scoped>
+
-.icon {
-  width: 36px;
-  height: 36px;
-  fill: #6a0065;
-}
-</style>