Merge pull request #116 from abes-esr/develop

Nouveau layout éléments principaux
abes-esr · Aug 21, 2023 · f9a657a · f9a657a
2 parents 13d3a6b + b68e02b
commit f9a657a
Show file tree

Hide file tree

Showing 28 changed files with 1,159 additions and 911 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -108,22 +108,22 @@ main {
   color: rgb(var(--v-theme-text-dark-blue)) !important;
 
   nav {
-    background-color: rgb(var(--v-theme-gris-clair));
     width: 100vw;
   }
 
   .nav-bar {
-    height: 100%;
-    width: 100%;
-    max-width: 20vw;
-    border-right: 3px solid rgb(var(--v-theme-text-dark-blue));
+    grid-column-start: 2;
+    background-color: rgb(var(--v-theme-surface));
+    border: solid 1px rgb(var(--v-theme-gris-clair));
+    padding-bottom: 1em;
   }
 
   .mobile-nav-bar {
     display: flex;
     justify-content: space-between;
     align-content: center;
     padding: 0 10px;
+    margin: -10px 0 30px;
   }
 
   .filter-mobile-nav-bar {
@@ -154,14 +154,18 @@ main {
   }
 
   .logo_home {
-    margin-top: -35px;
+    margin-top: -45px;
 
     @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
       margin-top: -75px;
       align-self: center;
     }
   }
 
+  .logo_resultview {
+    margin-top: -100px;
+  }
+
   .logo-menu-wrapper {
     width: 100%;
     display: grid;
@@ -186,7 +190,6 @@ main {
     display: flex;
     flex-direction: column;
     align-items: center;
-    background-color: rgb(var(--v-theme-gris-clair));
     border-bottom: 1px solid #bbb;
     border-top: 1px solid #bbb;
   }
@@ -254,9 +257,9 @@ h4 {
 }
 
 .scroll-to-top-wrapper {
+  z-index: 1000;
   position: sticky;
   top: 90vh;
-  margin-bottom: 3rem;
   margin-left: 10%;
   width: 30px;
   height: 30px;
@@ -270,6 +273,107 @@ h4 {
   }
 }
 
+.search-bar-container {
+  grid-column-start: 2;
+  margin-top: 50px;
+
+  display: grid;
+  grid-template-columns: 20fr 3fr 80fr;
+}
+
+.sub-header {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 10fr 103fr 10fr;
+
+  .sub_header__logo {
+    grid-column-start: 1;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    h1 {
+      text-align: center;
+      width: 80%;
+      font-weight: 300;
+      font-size: 14px;
+    }
+
+    .logo {
+      margin-top: 0;
+      height: 115px;
+    }
+  }
+
+  .sub_header__action {
+    grid-column-start: 3;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex: 1 0 auto;
+
+    .domain-selector,
+    .searchbar {
+      width: 90%;
+    }
+  }
+}
+
+.v-overlay :deep(.v-overlay__content) {
+  padding: 0 0;
+  background-color: rgb(var(--v-theme-background));
+}
+
+.white-containers {
+  background-color: rgb(var(--v-theme-surface));
+  border: solid 1px rgb(var(--v-theme-gris-clair));
+}
+
+.nom-card {
+  flex: 1 0 100%;
+  display: flex;
+  align-items: center;
+
+  @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
+    flex: 1 0 60%;
+    margin-left: 0.5em;
+  }
+
+  .nomprenom {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    text-decoration: none;
+    color: rgb(var(--v-theme-primary));
+    font-size: 23.5px;
+
+    @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
+      font-size: 29.5px;
+    }
+
+    .prenom {
+      font-weight: 400;
+    }
+
+    .nom {
+      font-weight: 700;
+    }
+  }
+
+  #logoIdref {
+    margin-left: 1em;
+    height: 1em;
+  }
+}
+
+.result-dividers {
+  border: 1px solid rgb(var(--v-theme-gris-clair));
+  margin:0 1rem;
+}
+
 .grecaptcha-badge { visibility: hidden; }
 </style>
 <style scoped lang="scss">

diff --git a/src/components/common/DomainSelector.vue b/src/components/common/DomainSelector.vue
@@ -66,7 +66,7 @@ async function select(selection) {
   align-items: center;
   width: 100%;
   background-color: transparent;
-  margin-top: 1rem;
+  margin: 1.5rem 0 1rem 0;
 
   .v-btn {
     flex: 0 1 48%;

diff --git a/src/components/common/FooterCustom.vue b/src/components/common/FooterCustom.vue
@@ -1,17 +1,12 @@
 <template>
   <v-footer class="pa-0">
-    <div class="footerTop">
-      <div>
-        <h4>Theses.fr</h4>
-        <span>{{ $t("footer.texte") }}</span>&nbsp;<a href="/apropos">{{ $t("footer.plus")
-        }}</a>
-      </div>
-      <div>
+    <div class="footer-top">
+      <div class="links-container footer-content">
         <h3>
           <v-icon>mdi-arrow-top-right</v-icon>
           {{ $t("accesDirect") }}
         </h3>
-        <ul>
+        <ul class="list-1">
           <li><span class="orange-link"> > </span><a
               href="https://www.data.gouv.fr/fr/datasets/theses-soutenues-en-france-depuis-1985/" target="_blank">{{
                 $t("footer.opendata") }}</a>
@@ -34,16 +29,21 @@
           </li>
         </ul>
       </div>
-      <div>
-        <a href="https://www.enseignementsup-recherche.gouv.fr/fr" target="_blank" :title='$t("footer.logoMesriAlt")'>
-          <img src="../../assets/logo-mesr.svg" :alt='$t("footer.logoMesriAlt")' style="height: 60px;" class="pr-4 "></a>
+      <div class="theses-description footer-content">
+        <h4>Theses.fr</h4>
+        <span>{{ $t("footer.texte") }}</span>&nbsp;<a href="/apropos">{{ $t("footer.plus")
+        }}</a>
+      </div>
+      <div class="logos-container footer-content">
         <a href="https://abes.fr/" target="_blank" :title='$t("footer.logoAbesAlt")'>
-          <img src="../../assets/abes-logo-cercle.svg" :alt='$t("footer.logoAbesAlt")' style="height: 80px;"></a>
+          <img src="../../assets/abes-logo-cercle.svg" :alt='$t("footer.logoAbesAlt")'></a>
+        <a href="https://www.enseignementsup-recherche.gouv.fr/fr" target="_blank" :title='$t("footer.logoMesriAlt")'>
+          <img src="../../assets/logo-mesr.svg" :alt='$t("footer.logoMesriAlt")' class="pr-4 "></a>
       </div>
     </div>
     <v-divider></v-divider>
     <v-card-text class="footerBottom">
-      <v-row class="px-6">
+      <v-row>
         <v-col cols="12" md="3" class="text-center text-md-left pa-0">
           {{ new Date().getFullYear() }} —
           <strong>Theses.fr</strong>
@@ -83,19 +83,23 @@
 .v-footer {
   flex-direction: column;
   width: 100vw;
-  background-color: rgb(var(--v-theme-gris-clair));
+  background-color: rgb(var(--v-theme-surface));
   color: rgb(var(--v-theme-fond-noir));
   flex-basis: 1%;
 
   @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
     max-height: 300px;
   }
 
-  .footerTop {
-    flex: 1 0 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+  .footer-top {
+    display: grid;
+    grid-template-columns: 30fr 0.5fr 30fr 0.5fr 30fr;
+
+    @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
+      display: flex;
+      flex-direction: column;
+    }
+
     width: 90%;
     padding-top: 1em;
     padding-bottom: 1em;
@@ -108,24 +112,17 @@
 
     @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
       div:nth-of-type(1) {
-        flex: 1 0 25%;
-        max-width: 30%;
+
       }
     }
 
-    div:nth-of-type(2) {
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: flex-start;
+    div {
 
       @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
-        flex: 1 0 30%;
-        max-width: 30%;
+
       }
 
       ul {
-        margin-left: 1rem;
         list-style: none;
         text-align: left;
 
@@ -144,14 +141,43 @@
         }
       }
     }
+  }
 
-    div:nth-of-type(3) {
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
+  .links-container {
+    order: 2;
+    width: 100%;
+    grid-column-start: 3;
+    grid-row-start: 1;
+
+    display: grid;
+    grid-template-rows: 1fr 8fr;
+
+    justify-content: center;
+  }
 
+  .theses-description {
+    grid-column-start: 1;
+    order: 1;
+
+    span {
+      opacity: 0.6;
     }
+  }
+
+  .logos-container {
+    order: 3;
+    grid-column-start: 5;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-around;
+
+    a {
 
+      img {
+        height: 6em;
+      }
+    }
   }
 
   .footerBottom {
@@ -171,7 +197,7 @@
   }
 
   .v-divider {
-    background-color: rgb(var(--v-theme-background));
+    background-color: rgb(var(--v-theme-gris-clair));
   }
 
 }
@@ -191,7 +217,11 @@ h3 {
 
 footer {
   padding-top: 0;
-  background-color: rgb(var(--v-theme-gris-clair));
-  border-top: 2px solid rgb(var(--v-theme-gris-fonce));
+  background-color: rgb(var(--v-theme-surface));
+  border-top: 1px solid rgb(var(--v-theme-gris-clair));
+}
+
+.footer-content {
+  margin-top: 1em;
 }
 </style>