From a1ec39cbe7496104a5a8b4a4378a52998a17feae Mon Sep 17 00:00:00 2001 From: Denis Chiron Date: Mon, 25 Mar 2024 18:02:06 +0100 Subject: [PATCH] Personnes (mobile) --- src/components/AppMenuAside.vue | 1 + src/components/FacSimileNavigation.vue | 4 + src/components/PersonPagination.vue | 57 +++++++++- src/components/PersonResultCard.vue | 9 ++ src/components/PersonSearchBox.vue | 34 +++++- src/views/PersonDataView.vue | 42 +++++++- src/views/PersonView.vue | 140 ++++++++++++++++++++++++- 7 files changed, 280 insertions(+), 7 deletions(-) diff --git a/src/components/AppMenuAside.vue b/src/components/AppMenuAside.vue index 1db01fa..4c2c793 100644 --- a/src/components/AppMenuAside.vue +++ b/src/components/AppMenuAside.vue @@ -184,6 +184,7 @@ ul.menu-list > li:not(:last-child)::after { position: absolute; z-index: 2; top: 100px; + left: 5%; width: 90%; margin: 0 auto; background-color: #4B080BF2; diff --git a/src/components/FacSimileNavigation.vue b/src/components/FacSimileNavigation.vue index a3c86ed..ca4eff1 100644 --- a/src/components/FacSimileNavigation.vue +++ b/src/components/FacSimileNavigation.vue @@ -387,6 +387,10 @@ nav menu, nav ul { justify-content: space-between; } + .is-opened .main__title__toc { + background: #A53605; + } + .fac-simile__toc ul { display: none; } diff --git a/src/components/PersonPagination.vue b/src/components/PersonPagination.vue index 139c47f..cabbaf1 100644 --- a/src/components/PersonPagination.vue +++ b/src/components/PersonPagination.vue @@ -231,11 +231,66 @@ nav.pagination { display: inline-block; width: 28px; height: 23px; - background-image: url("@/assets/images/b_fleche.svg"); + background: url("@/assets/images/b_fleche.svg") center / cover no-repeat; } .pagination-previous:before { transform: scaleX(-1); } + + +@media screen and (max-width: 1024px) { + + .pagination-link { + min-width: 51px; + height: 58px; + font-size: 26px; + } + + nav.pagination { + margin-top: 1px; + } + + .pagination-previous, + .pagination-next { + position: absolute; + top: 45px; + right: 0; + width: 53px; + height: 45px; + padding: 0; + } + + .pagination-previous { + transform: translateX(-82px); + } + + .pagination-previous:before, + .pagination-next:before { + display: inline-block; + width: 53px; + height: 45px; + } + + .pagination-panel .label, + .pagination-panel .items-by-page-input { + display: none; + } + + .pagination-box { + margin-top: 0; + } + + .pagination-list { + margin-left: 0; + } + + .pagination-ellipsis { + font-size: 2em; + padding-left: 0.2em; + padding-right: 0.2em; + } +} + diff --git a/src/components/PersonResultCard.vue b/src/components/PersonResultCard.vue index a6b54b2..43f08de 100644 --- a/src/components/PersonResultCard.vue +++ b/src/components/PersonResultCard.vue @@ -153,4 +153,13 @@ header { background-image: url('~@/assets/images/b_Close_liste.svg'); } +@media screen and (max-width: 1024px) { + + header, + .li--person:first-child header.card-header { + min-height: 90px; + } + +} + \ No newline at end of file diff --git a/src/components/PersonSearchBox.vue b/src/components/PersonSearchBox.vue index 6ce7daa..70fcd19 100644 --- a/src/components/PersonSearchBox.vue +++ b/src/components/PersonSearchBox.vue @@ -15,7 +15,7 @@ @keyup.enter="launchSearch" v-model="personQuery">

-

+

@@ -237,4 +237,36 @@ input[type="text"]::placeholder { font-style: italic; } +@media screen and (max-width: 1024px) { + + .container-search { + padding-bottom: 150px; + } + + .container-search > .control { + margin-bottom: 0; + } + + .field.has-addons { + position: unset; + } + + .field.has-addons > :not(:last-child) { + margin-right: 0; + } + + .control-slider { + justify-content: center; + padding: 0; + } + + .control-button { + position: absolute; + bottom: 30px; + left: 50%; + transform: translateX(-50%); + } + +} + \ No newline at end of file diff --git a/src/views/PersonDataView.vue b/src/views/PersonDataView.vue index e507e8b..2054543 100644 --- a/src/views/PersonDataView.vue +++ b/src/views/PersonDataView.vue @@ -364,6 +364,14 @@ export default { background-image: none !important; } + .columns.person-name-columns { + padding: 0; + } + + .person-data-container-header { + padding: 35px var(--mobile-side-padding) 12px; + } + .columns { flex-direction: column; } @@ -373,7 +381,39 @@ export default { display: block; width: 100%; max-width: 100% !important; - padding: 40px 0 0 0; + padding: 0; + background-color: transparent; + } + + .columns.details-column > .column:first-child { + padding-bottom: 20px; + } + + .columns.details-column { + position: relative; + padding-bottom: 100px; + margin-bottom: 100px; + } + + .columns.details-column > .column { + position: unset; + } + + .columns.details-column:not(.has-carousel) > .column:last-child { + padding-bottom: 0; + } + + .person-name { + font-size: 30px; + } + + .section-title { + margin-top: 0; + } + + .wrapper-db-link { + border: none; + justify-content: center; } } diff --git a/src/views/PersonView.vue b/src/views/PersonView.vue index bcd3cb5..14d810e 100644 --- a/src/views/PersonView.vue +++ b/src/views/PersonView.vue @@ -7,7 +7,8 @@

-
+
+
+
-
+

{{ total }} Résultats @@ -73,6 +75,7 @@ export default { isLoading: false, showCanon: false, selectSearchType: "exact", + searchBoxOpenState: false }; }, computed: { @@ -177,6 +180,10 @@ export default { this.getPersons(); } }, + toggleSearchBox(event) { + event.preventDefault(); + this.searchBoxOpenState = !this.searchBoxOpenState; + }, }, mounted() { this.handleDefaultSearch(); @@ -216,6 +223,10 @@ export default { margin-bottom: 0; } +.box-search-person-facets .box-search-header { + display: none; +} + .box-search-person-facets .box-content { position: relative; } @@ -306,6 +317,15 @@ h2.subtitle { .columns { flex-direction: column; + gap: 0; + padding-bottom: 100px; + } + + .column-results-header, + .columns .column.column-result { + background-color: transparent; + padding: 0; + height: auto; } .columns .column:first-child, @@ -313,9 +333,121 @@ h2.subtitle { display: block; width: 100%; max-width: 100% !important; - padding: 40px 0 0 0; } -} + .columns .column:first-child { + position: sticky; + top: 102px; + z-index: 2; + padding: 0; + background-color: #FFF; + } + + .box-search-person-facets { + position: relative; + padding: 0; + } + + .box-search-person-facets { + padding-top: 0; + padding-bottom: 2px; + } + + .box-search-person-facets .box { + padding-top: 20px; + } + + .box-search-person-facets .box-search-header { + position: absolute; + top:0; + left:0; + z-index: 2; + + display: block; + width: 100%; + height: 68px; + background: transparent url('~@/assets/images/b_Open_liste.svg') right 20px top 23px / 25px auto no-repeat; + cursor: pointer; + } + + .box-search-person-facets.is-opened .box-search-header { + background-image: url('~@/assets/images/b_Close_liste.svg'); + } + + .box-search-person-facets:not(.is-opened) .box-search-header { + border-bottom: #D0D0D0 solid 1px; + } + + .box-search-person-facets .box-content .checkbox-canon { + bottom: 88px; + right: 50%; + transform: translateX(50%); + } + + .box-search-person-facets .box-content .checkbox-canon, + :deep(.box-search-person-facets .box-content .container-search) { + display: block; + } + + .box-search-person-facets:not(.is-opened) .box-content .checkbox-canon, + :deep(.box-search-person-facets:not(.is-opened) .box-content .container-search) { + display: none; + } + + /* Second column */ + + .column-results-header { + position: relative; + top: 8px; + } + + .column-results-header.is-sticky { + position: sticky; + top: 200px; + z-index: 2; + background-color: #FFF; + } + + .is-searchbox-opened .column-results-header { + padding-top: 30px; + } + + + .is-searchbox-opened .column-results-header.is-sticky { + top: 452px; + padding-top: 20px; + } + + :deep(.is-searchbox-opened .pagination-box nav.pagination) { + display: none; + } + + :deep(.box-search-person-facets.is-opened .box-content .container-search) { + border-bottom: solid 1px #BBBBBB; + } + + .results-count { + width: 57px; + height: 106px; + font-size: 18px; + padding-top: 40px; + } + + .loader-wrapper { + position: relative; + height: 20px; + width: 20px; + margin-top: 15px; + } + + .is-opened .loader-wrapper { + margin-top: -30px; + } + + .loader-wrapper .loader { + height: 20px; + width: 20px; + } +} \ No newline at end of file