review news page style

components/Common/Share.vue

@@ -74,7 +74,7 @@
   i {
     font-size: 32px;
     margin: 0.5rem 0.3rem;
-    color: var(--on-neutral-color-light);
+    color: var(--primary-color);
   }
 
   a:hover i {

components/Home/Solution.vue

@@ -261,6 +261,7 @@ h4 {
   }
 
   .v-btn {
+    left: 50%;
     font-size: 0.8rem;
     border-radius: 6px;
     background: var(--secondary-color);

components/News/Details.vue

@@ -1,14 +1,5 @@
 <template>
   <LayoutContainer>
-    <v-row>
-      <v-col cols="12">
-        <CommonBanner
-          imageSrc="/images/actu/pub.png"
-          imageAlt="banner"
-        />
-      </v-col>
-    </v-row>
-
     <div class="news-section">
       <v-row class="mb-6 center-90">
         <v-col class="d-flex align-items-center">
@@ -39,15 +30,22 @@
             :description="newsItem.leadText"
           />
 
-          <v-row class="center-90">
+          <v-row class="center-90 mb-12">
             <v-col cols="12" md="6">
-              <v-img :src="getImageUrl(newsItem.attachment)"/>
+              <v-img
+                :src="getImageUrl(newsItem.attachment)"
+                cover
+              />
             </v-col>
 
-            <v-col cols="12" md="6">
-              <h1>
+            <v-col cols="12" md="6" class="d-flex flex-column justify-center">
+              <h3>
                 {{ newsItem.title }}
-              </h1>
+              </h3>
+
+              <strong>
+                {{ newsItem.leadText }}
+              </strong>
             </v-col>
           </v-row>
 
@@ -59,15 +57,17 @@
           </v-row>
 
           <v-row class="d-flex justify-center align-center">
-            <v-btn prepend-icon="fas fa-info" class="btn-plus mb-12" text>
+            <v-btn class="btn-plus mb-12" text>
               En savoir plus
             </v-btn>
           </v-row>
 
           <v-row class="d-flex justify-space-between center-90">
-            <p>
-              MOTS CLÉS
-            </p>
+            <div>
+              <p v-if="newsItem.tags.length > 0">
+                MOTS CLÉS
+              </p>
+            </div>
             <div v-if="mdAndUp">
               <p>PARTAGER</p>
             </div>
@@ -90,8 +90,6 @@
         </div>
       </div>
     </div>
-
-    <CommonAgenda />
   </LayoutContainer>
 </template>
 
@@ -124,31 +122,33 @@ const getImageUrl = (attachment: string): string | null => {
 <style scoped>
 .news {
   .v-img {
-    width: 80%;
-    margin-left: 3.5rem;
+    max-height: 600px;
+    margin-left: auto;
     margin-right: auto;
   }
 
-  h1 {
-    margin-top: 11rem;
+  h3 {
     text-decoration: none;
     text-transform: uppercase;
     font-size: 36px;
     font-weight: 600;
+    color: var(--primary-color);
+  }
 
-    @media (max-width: 600px) {
-      margin-top: 3rem;
-    }
+  strong {
+    font-size: 21px;
+    margin-top: 16px;
   }
 
   .description {
     color: var(--primary-color);
+    max-width: 80%;
     text-align: justify;
-    font-size: 30px;
+    font-size: 21px;
     font-weight: 500;
     line-height: 34px;
-    margin-left: 3.5rem;
-    margin-right: 3.5rem;
+    margin-left: auto;
+    margin-right: auto;
     margin-bottom: 3rem;
   }
 

components/News/List.vue

@@ -31,6 +31,7 @@
                   alt="poster"
                   height="200"
                   width="400"
+                  cover
                 />
               </v-col>
 
@@ -67,7 +68,7 @@
                         <v-card-actions class="justify-end">
                           <v-btn
                             :to="`/actualites/${newsItem.id}`"
-                            class="btn mr-2 mb-1"
+                            class="inv-theme btn mr-2 mb-1"
                           >
                             En savoir plus
                           </v-btn>
@@ -113,7 +114,7 @@ const page: Ref<number> = ref(1);
 const query: ComputedRef<Record<string, string | number>> = computed(() => {
   return {
     page: page.value,
-    type: "ENTREPRISE",
+    type: "BUSINESS",
     "startPublication[before]": "now",
     "endPublication[after]": "now"
   };
@@ -154,7 +155,7 @@ h1 {
 
 .news {
   .v-card {
-    border-radius: 10px;
+    border-radius: 14px;
     min-width: 100%;
     margin-bottom: 1rem;
     margin-left: 2rem;
@@ -175,14 +176,15 @@ h1 {
 
   .v-img {
     width: 80%;
-    margin-left: auto;
-    margin-right: auto;
+    max-height: 160px;
+    margin: 12px;
+    border-radius: 14px;
   }
 
   .details {
     border: 1px solid var(--neutral-color) !important;
     padding: 9px;
-    border-radius: 20px;
+    border-radius: 24px;
     width: 99%;
 
     @media (max-width: 600px) {

pages/actualites/[id].vue

@@ -1,6 +1,18 @@
 <template>
+  <LayoutUITitlePage>
+    Actualités
+    <template #subtitle>Découvrez toute l’actualité de l’entreprise Opentalent</template>
+  </LayoutUITitlePage>
+
+  <CommonBanner
+    imageSrc="/images/actu/Slider_Actualites.png"
+    imageAlt="Journaux pliés en deux posés les uns à côté des autres"
+  />
+
   <!-- Balises meta: définies dans le component Details -->
-  <NewsDetails />
+  <NewsDetails class="mb-12"/>
+
+  <HomeEventAgenda />
 
   <LayoutFooterPrefooter />
 </template>

pages/actualites/index.vue

@@ -29,7 +29,13 @@
     </v-col>
   </v-row>
 
-  <NewsList />
+  <v-row class="center-90">
+    <v-col cols="12">
+      <NewsList />
+    </v-col>
+  </v-row>
 
   <LayoutFooterPrefooter />
 </template>
+<script setup lang="ts">
+</script>