From d5b5f8afdc1808e45ae8acd3cb66282271a345ab Mon Sep 17 00:00:00 2001 From: Denis Chiron Date: Thu, 4 Apr 2024 09:33:36 +0200 Subject: [PATCH] Ajustements 1 desktop/mobile --- src/App.vue | 1 + src/assets/css/endp_utils.css | 5 ++ src/assets/images/b_Copier_over.svg | 12 ++++ src/components/AppFooter.vue | 61 ++++++++++++++------- src/components/PersonDataCarousel.vue | 14 +++-- src/components/PersonDataTimeline.vue | 6 +- src/components/PersonPagination.vue | 37 +++++++++---- src/components/PersonSearchBox.vue | 26 ++++++--- src/components/RegisterBaseDateSelector.vue | 5 ++ src/views/FacSimileView.vue | 10 +++- src/views/HomeView.vue | 9 ++- src/views/PersonDataView.vue | 1 + src/views/PersonView.vue | 37 ++++++++++++- src/views/RegisterView.vue | 9 +++ 14 files changed, 184 insertions(+), 49 deletions(-) create mode 100644 src/assets/images/b_Copier_over.svg diff --git a/src/App.vue b/src/App.vue index 9eb4ffc..23f4a69 100644 --- a/src/App.vue +++ b/src/App.vue @@ -30,6 +30,7 @@ const toggleMobileMenu = function($event) { const route = useRoute(); watch(route, () => { isMobileMenuOpen.value = false; + window.scrollTo(0,0); }); const isHome = computed(() => { diff --git a/src/assets/css/endp_utils.css b/src/assets/css/endp_utils.css index 881408c..73afd54 100644 --- a/src/assets/css/endp_utils.css +++ b/src/assets/css/endp_utils.css @@ -26,6 +26,11 @@ body { font-family: var(--font-primary); } +button:focus { + outline: none; + box-shadow: none !important; +} + .input:focus { border: none; border-bottom: solid 1px var(--light-brown) diff --git a/src/assets/images/b_Copier_over.svg b/src/assets/images/b_Copier_over.svg new file mode 100644 index 0000000..599fd89 --- /dev/null +++ b/src/assets/images/b_Copier_over.svg @@ -0,0 +1,12 @@ + + + Group 3 + + + + + + + + + \ No newline at end of file diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue index 4627670..c4b2f75 100644 --- a/src/components/AppFooter.vue +++ b/src/components/AppFooter.vue @@ -32,7 +32,7 @@
-
+
@@ -71,7 +71,7 @@ - +
@@ -107,7 +107,7 @@ footer .columns { } footer .columns .column { - padding: 55px 40px 8px; + padding: 55px 40px 30px; background-color: #4C4949; } @@ -124,7 +124,7 @@ footer .columns .column:nth-child(2) { footer .columns .column:last-child { padding-left: 0; - padding-top: 40px; + padding-top: 45px; } @@ -165,8 +165,13 @@ footer .columns .column:last-child { text-align: justify; } -.footer-links{ - display: flex; +.footer-links { + display: inline-block; +} + +.footer-links li { + position: relative; + display: inline; } .footer-links li, @@ -175,13 +180,20 @@ footer .columns .column:last-child { line-height: 1; } +.footer-links li:not(:last-child) { + margin-right: 10px; + padding-right: 10px; +} + .footer-links li:not(:last-child):after { content: ""; + position: absolute; + top: 0; + right: 0; display: inline-block; width: 1px; height: 80%; border-right: solid #ffffff 1px; - margin: 0 10px; transform: translateY(2px); } @@ -195,16 +207,25 @@ footer .columns .column:last-child { .footer-links li a:hover { text-decoration: underline; text-underline-offset: 3px; - color: var(--light-brown-alt); } - - .logos-container { + justify-content: flex-start; align-items: center; gap: 40px; display: flex; flex-wrap: wrap; + + --logo-scale: 0.75; +} + +.logos-container a { + transform-origin: 50% 50%; + transition: transform ease-in-out 0.35s; +} + +.logos-container a:hover { + transform: scale(1.25); } .logo { @@ -213,43 +234,43 @@ footer .columns .column:last-child { } .logo-cmj { - width: 178px; + width: calc( 178px * var(--logo-scale)); } .logo-enc { - width: 256px; + width: calc( 256px * var(--logo-scale)); } .logo-anr { - width: 183px; + width: calc( 183px * var(--logo-scale)); } .logo-lamop { - width: 145px; + width: calc( 145px * var(--logo-scale)); } .logo-paris1 { - width: 74px; + width: calc( 74px * var(--logo-scale)); } .logo-cnrs { - width: 82px; + width: calc( 82px * var(--logo-scale)); } .logo-pariscite { - width: 177px; + width: calc( 177px * var(--logo-scale)); } .logo-an { - width: 223px; + width: calc( 223px * var(--logo-scale)); } .logo-bnf { - width: 160px; + width: calc( 160px * var(--logo-scale)); } .logo-mazarine { - width: 110px; + width: calc( 110px * var(--logo-scale)); } diff --git a/src/components/PersonDataCarousel.vue b/src/components/PersonDataCarousel.vue index dca8c88..dda615d 100644 --- a/src/components/PersonDataCarousel.vue +++ b/src/components/PersonDataCarousel.vue @@ -55,11 +55,11 @@ export default { }, 700: { itemsToShow: 2, - itemsToScroll: 2 + itemsToScroll: 1 }, 1024: { itemsToShow: 3, - itemsToScroll: 3 + itemsToScroll: 1 }, }, } @@ -166,6 +166,8 @@ export default { } .box-content .active-slide-caption { + display: none; + position: absolute; bottom: 0; width: 100%; @@ -233,12 +235,12 @@ li.carousel__slide a::after { position: relative; } -:deep(.carousel__slide--active:after) { +:deep(.carousel__slide--active::after) { content:""; position: absolute; bottom: 76px; display: block; - border: 7px solid white; + border: 7px solid var(--light-brown); width: 100%; transform: scale(0.7); z-index: 6; @@ -300,6 +302,10 @@ li.carousel__slide a::after { padding: 0 var(--mobile-side-padding) 0 !important; } + :deep(.carousel__slide--active::after) { + display: none; + } + } diff --git a/src/components/PersonDataTimeline.vue b/src/components/PersonDataTimeline.vue index eadbcba..0e72ad1 100644 --- a/src/components/PersonDataTimeline.vue +++ b/src/components/PersonDataTimeline.vue @@ -391,12 +391,14 @@ export default { .timeline-scroll-container { max-height: 30rem; - overflow-y: auto; + overflow-y: hidden; border-top: 1px solid #A7A7A7; border-bottom: 1px solid #A7A7A7; + /* scrollbar-width: thin; scrollbar-color: var(--light-brown-alt) #DFDEDE; + */ } .timeline-scroll-container::-webkit-scrollbar { @@ -459,7 +461,7 @@ export default { } .button.btn-scroll[disabled] { - opacity: 1; + opacity: 0.25; } .popup-group { diff --git a/src/components/PersonPagination.vue b/src/components/PersonPagination.vue index f7ae558..35c8646 100644 --- a/src/components/PersonPagination.vue +++ b/src/components/PersonPagination.vue @@ -1,5 +1,5 @@ @@ -103,6 +119,13 @@ export default { methods: { handleUpdateQuery({query, search_type}) { console.log("From parent : ", query, search_type); + + // Close Searchbox on mobile + this.searchBoxOpenState = false; + + // Scroll Page to the top + window.scrollTo(0, 0); + this.currentPage = 1; this.selectSearchType = search_type; this.query = query; @@ -233,7 +256,7 @@ export default { .box-search-person-facets .box-content .checkbox-canon { position: absolute; - bottom: 50px; + bottom: 60px; right: 30px; padding: 20px 40px 20px 0; background: url("@/assets/images/picto_chanoine_liste.svg") center right / auto 50px no-repeat; @@ -307,6 +330,10 @@ h2.subtitle { font-style: italic; } +.pagination-bottom { + display: none; +} + @media screen and (max-width: 1024px) { @@ -414,7 +441,7 @@ h2.subtitle { } .is-searchbox-opened .column-results-header { - padding-top: 30px; + padding-top: 50px; } .is-searchbox-opened .column-results-header.is-sticky { @@ -437,6 +464,11 @@ h2.subtitle { padding-top: 40px; } + .pagination-bottom { + display: block; + margin-top: 100px; + } + .loader-wrapper { position: relative; height: 20px; @@ -452,6 +484,7 @@ h2.subtitle { height: 20px; width: 20px; } + } \ No newline at end of file diff --git a/src/views/RegisterView.vue b/src/views/RegisterView.vue index 6d15dc7..56f68d3 100644 --- a/src/views/RegisterView.vue +++ b/src/views/RegisterView.vue @@ -239,6 +239,9 @@ export default { */ _collapseFacetsBox() { this.isFacetsBoxCollapsed = ! this.isFacetsBoxCollapsed; + + // Scroll Page to the top + window.scrollTo(0, 0); }, /** * Test if years in range are equals @@ -521,6 +524,11 @@ export default { border: none; } +.btn-reset-date:focus { + outline: none; + box-shadow: none; +} + .btn-reset-date:hover { background-image: url("@/assets/images/b_Recherche_reset_over.svg"); } @@ -636,6 +644,7 @@ export default { top:102px; z-index: 10; width: 100vw; + max-width: 100%; padding: 20px 0; margin: -20px 0; background-color: #FFF;