From 922623a1396183811a720e4fc18c4ed7843e3646 Mon Sep 17 00:00:00 2001 From: Lucas Terriel Date: Mon, 25 Mar 2024 11:48:40 +0100 Subject: [PATCH 1/4] responsive tests on histogram --- src/components/RegisterHistogramChartBox.vue | 37 ++++++++++++-------- 1 file changed, 23 insertions(+), 14 deletions(-) diff --git a/src/components/RegisterHistogramChartBox.vue b/src/components/RegisterHistogramChartBox.vue index 8fe7730..324e02b 100644 --- a/src/components/RegisterHistogramChartBox.vue +++ b/src/components/RegisterHistogramChartBox.vue @@ -89,14 +89,14 @@ export default { showline: false }, yaxis: { - title: 'Pages' + title: '' }, uirevision: false, displayModeBar: false }; const graph = document.getElementById('histogram'); - Plotly.newPlot(graph, [trace], layout, {responsive: true, displayModeBar: true}); + Plotly.newPlot(graph, [trace], layout, {responsive: true, displayModeBar: false}); graph.on('plotly_relayout', () => { const xaxis = graph.layout.xaxis; if (xaxis.range) { @@ -127,26 +127,35 @@ export default { From f98aad861687a4e9aa5d936cf8807f94f6fa6b78 Mon Sep 17 00:00:00 2001 From: Lucas Terriel Date: Mon, 25 Mar 2024 13:13:55 +0100 Subject: [PATCH 2/4] change home text + justify home text + little move for lettrine + pass spinners in right color --- src/views/FacSimileView.vue | 2 +- src/views/HomeView.vue | 34 +++++++++++++++------------------- src/views/PersonView.vue | 2 +- 3 files changed, 17 insertions(+), 21 deletions(-) diff --git a/src/views/FacSimileView.vue b/src/views/FacSimileView.vue index 6cf2233..8869998 100644 --- a/src/views/FacSimileView.vue +++ b/src/views/FacSimileView.vue @@ -668,7 +668,7 @@ tspan { .loader { border: 4px solid rgba(0, 0, 0, 0.1); - border-left-color: #3273dc; + border-left-color: var(--light-brown) !important; width: 100px; height: 100px; } diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 9654358..d34fbe1 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -28,21 +28,16 @@
-

Le projet e-NDP est consacré à la publication numérique et à l'exploitation des 27 - premiers registres du chapitre de l'Église de Paris, rédigés par ses notaires entre 1326 et 1504. Ces registres - contiennent les décisions prises collectivement par les chanoines pour l’administration du culte, des biens, des - droits, des personnes et collectivités dont le doyen et le chapitre de l'Église de Paris sont seigneurs, - employeurs ou propriétaires.

-

Ces propriétés et biens concernent le territoire du cloître, ses bâtiments et ses - églises ― Notre-Dame et ses tours, Saint-Denis-du-Pas, Saint-Jean-le-Rond, Saint-Aignan ―, le parvis et - l'Hôtel-Dieu, les très nombreuses maisons, terres, bois, vignes, étangs et autres possessions hors du cloître, - hors de la Cité et hors de Paris. Le menu - registres - donne accès aux 14605 pages numérisées des registres et à une transcription obtenue par processus de - reconnaissance de l'écriture manuscrite (« HTR » Handwritten Text Recognition). L’exploitation du contenu des - registres et de la transcription par « HTR » vise à la connaissance du cloître, de sa topographie et de son bâti, - de sa population, de son économie et de sa vie, des usages que l’on y fait du livre et de l’écrit. -

+

Le projet e-NDP propose de renouveler la connaissance de Notre-Dame de Paris par + l'édition + collaborative numérique des registres du chapitre cathédral. 26 registres, établis entre 1326 et 1504, + donnent accès à toutes les décisions prises par les chanoines sur l'administration de la cathédrale, sur la + gestion de leurs droits et de leur patrimoine, et sur la société du cloître.

+

Ces registres sont désormais accessibles grâce à la numérisation de leurs 14605 pages + et à l'utilisation de la reconnaissance automatique de l'écriture manuscrite (HTR), qui permet d'en fournir une + transcription. Celle-ci permet d'exhumer une source majeure pour l'histoire et la vie des hommes, des femmes et + des enfants qui ont composé la société active à l'ombre de la cathédrale Notre-Dame et ont fait de cette dernière + un modèle pour l'architecture, la liturgie, les arts et la vie intellectuelle et scientifique.

@@ -133,14 +128,15 @@ nav a:hover { } - nav a .icon { display: none; } .container { padding: 70px 95px; - background: linear-gradient(#F7F7F7CC 0% ,#F7F7F7 11.94090256424186% ,#F7F7F7 100% ,#FCFCFC 100%); + background: linear-gradient(#F7F7F7CC 0%, #F7F7F7 11.94090256424186%, #F7F7F7 100%, #FCFCFC 100%); + /* justify text */ + text-align: justify; } .container > *:last-child { @@ -171,7 +167,7 @@ nav a .icon { font-weight: 700; margin-left: -7px; - margin-top: 5px; + margin-top: 18px; padding-right: 0.2em; float: left; } @@ -192,7 +188,7 @@ nav a .icon { } .columns > .column:first-child { - background: linear-gradient(#F7F7F7CC 0% ,#F7F7F7 11.94090256424186% ,#F7F7F7 100% ,#FCFCFC 100%); + background: linear-gradient(#F7F7F7CC 0%, #F7F7F7 11.94090256424186%, #F7F7F7 100%, #FCFCFC 100%); transform: none; } diff --git a/src/views/PersonView.vue b/src/views/PersonView.vue index e30f4de..19198fb 100644 --- a/src/views/PersonView.vue +++ b/src/views/PersonView.vue @@ -247,7 +247,7 @@ export default { .loader { border: 4px solid rgba(0, 0, 0, 0.1); - border-left-color: #3273dc; + border-left-color: var(--light-brown) !important; width: 100px; height: 100px; } From e6195035535dd9f7af17441dd135eb79327fa970 Mon Sep 17 00:00:00 2001 From: Lucas Terriel Date: Mon, 25 Mar 2024 16:10:20 +0100 Subject: [PATCH 3/4] fix histogram (styles, animation, y-axis) --- src/components/RegisterHistogramChartBox.vue | 76 ++++++++++++++++++-- 1 file changed, 69 insertions(+), 7 deletions(-) diff --git a/src/components/RegisterHistogramChartBox.vue b/src/components/RegisterHistogramChartBox.vue index 324e02b..939ca17 100644 --- a/src/components/RegisterHistogramChartBox.vue +++ b/src/components/RegisterHistogramChartBox.vue @@ -73,36 +73,97 @@ export default { * @returns {void} */ plotHistogram() { + const finalYValues = Object.values(this.pagesByYear); + const trace = { x: Object.keys(this.pagesByYear), - y: Object.values(this.pagesByYear), + y: finalYValues, type: 'bar', - marker: {color: '#8d1919'} + text: "", + hoverinfo: 'text', + marker: {color: '#D74A52FF'} }; const layout = { title: '', + xaxis: { title: '', tickmode: 'linear', dtick: 10, - showline: false + showline: false, + fixedrange: true, }, yaxis: { - title: '' + title: '', + autoRange: true, + fixedrange: true, + }, + font: { + size: 13, + family: 'Libre Baskerville, sans-serif', + }, + annotations: [{ + xref: 'paper', + yref: 'paper', + x: 0, + xanchor: 'right', + y: 1, + yanchor: 'bottom', + text: 'Pages', + showarrow: false, + font: { + size: 14, + family: 'Libre Baskerville, sans-serif', + weight: 'bold', + } + }], uirevision: false, displayModeBar: false }; const graph = document.getElementById('histogram'); Plotly.newPlot(graph, [trace], layout, {responsive: true, displayModeBar: false}); + + // Initial configuration for the animation : set all values of the y-axis to 0 + const animationStart = { + data: [{y: finalYValues.map(() => 0)}], // All values set to 0 for the initial state + }; + + const animationEnd = { + data: [{y: finalYValues}], + traces: [0], + layout: {} + }; + + const animationOptions = { + transition: { + duration: 2000, + easing: "cubic-in-out" + }, + frame: { + duration: 2000 + } + }; + + Plotly.animate(graph, animationStart, {transition: {duration: 0}}) + .then(() => Plotly.animate(graph, animationEnd, animationOptions)) + .then(() => { + const text = Object.entries(this.pagesByYear).map(([year, pages]) => `${pages} page(s) pour ${year}`); + Plotly.restyle(graph, { + text: [text], + hoverinfo: ['text'] + }); + }); + graph.on('plotly_relayout', () => { const xaxis = graph.layout.xaxis; if (xaxis.range) { this.startYear = Math.max(this.minYear, Math.min(this.maxYear, Math.floor(xaxis.range[0]))); this.endYear = Math.max(this.minYear, Math.min(this.maxYear, Math.floor(xaxis.range[1]))); } + }); }, @@ -115,10 +176,10 @@ export default { const years = Object.keys(this.pagesByYear); const graph = document.getElementById('histogram'); const colors = years.map(year => { - return (year >= this.startYear && year <= this.endYear) ? '#8d1919' : 'lightgrey'; + return (year >= this.startYear && year <= this.endYear) ? '#D74A52FF' : 'lightgrey'; }); if (graph) { - Plotly.restyle(graph, 'marker.color', [colors], [0], {duration: 500, easing: "linear"}); + Plotly.restyle(graph, 'marker.color', [colors], [0], {duration: 500, easing: "cubic-in-out"}); } } } @@ -129,8 +190,9 @@ export default { #histogram { max-width: 580px; margin: -50px -50px 0 -40px; - padding: 0 1px 0 1px; + padding: 0 0.1px 0 10px; } + :deep(.main-svg) { background-color: transparent !important; } From d2790a5c92bde11b168d642e9bf3e51fdea597df Mon Sep 17 00:00:00 2001 From: Lucas Terriel Date: Mon, 25 Mar 2024 16:51:12 +0100 Subject: [PATCH 4/4] fix slider transition effect + fix histogram --- src/assets/css/endp_utils.css | 2 +- src/components/PersonSearchBox.vue | 37 ++++++++++++++++++++ src/components/RegisterHistogramChartBox.vue | 8 ++--- 3 files changed, 42 insertions(+), 5 deletions(-) diff --git a/src/assets/css/endp_utils.css b/src/assets/css/endp_utils.css index 3c14d20..ddca7a4 100644 --- a/src/assets/css/endp_utils.css +++ b/src/assets/css/endp_utils.css @@ -8,7 +8,7 @@ html { --brown: #7B0C12; --dark-grey: #343434; - --light-brown: #D74A52; + --light-brown: #ad464b; --light-brown-alt: #CC3E46; --panel-bg-color: #F7F7F7; --link-over-color: #CC3E46; diff --git a/src/components/PersonSearchBox.vue b/src/components/PersonSearchBox.vue index 6ce7daa..98ed6be 100644 --- a/src/components/PersonSearchBox.vue +++ b/src/components/PersonSearchBox.vue @@ -237,4 +237,41 @@ input[type="text"]::placeholder { font-style: italic; } +/* augment a little bit the size of the slider */ +.slider { + width: 100px; + height: 2px; +} + +/* Chrome, Safari, et d'autres navigateurs WebKit */ +.slider::-webkit-slider-thumb { + /* remove border color */ + border: none; +} + +.slider::-webkit-slider-thumb:hover { + box-shadow: 0 0 2px 13px rgba(231, 101, 101, 0.3); + transition: box-shadow 0.3s; +} + +.slider::-webkit-slider-thumb:active { + box-shadow: 0 0 2px 19px rgba(231, 101, 101, 0.3); + transition: box-shadow 0.3s; +} + +/* Firefox */ +.slider::-moz-range-thumb { + border: none; +} + +.slider::-moz-range-thumb:hover { + box-shadow: 0 0 2px 13px rgba(231, 101, 101, 0.3); + transition: box-shadow 0.3s; +} + +.slider::-moz-range-thumb:active { + box-shadow: 0 0 2px 19px rgba(231, 101, 101, 0.3); + transition: box-shadow 0.3s; +} + \ No newline at end of file diff --git a/src/components/RegisterHistogramChartBox.vue b/src/components/RegisterHistogramChartBox.vue index 939ca17..908bcb2 100644 --- a/src/components/RegisterHistogramChartBox.vue +++ b/src/components/RegisterHistogramChartBox.vue @@ -81,7 +81,7 @@ export default { type: 'bar', text: "", hoverinfo: 'text', - marker: {color: '#D74A52FF'} + marker: {color: '#ad464b'} }; const layout = { @@ -139,11 +139,11 @@ export default { const animationOptions = { transition: { - duration: 2000, + duration: 1000, easing: "cubic-in-out" }, frame: { - duration: 2000 + duration: 1000 } }; @@ -176,7 +176,7 @@ export default { const years = Object.keys(this.pagesByYear); const graph = document.getElementById('histogram'); const colors = years.map(year => { - return (year >= this.startYear && year <= this.endYear) ? '#D74A52FF' : 'lightgrey'; + return (year >= this.startYear && year <= this.endYear) ? '#ad464b' : 'lightgrey'; }); if (graph) { Plotly.restyle(graph, 'marker.color', [colors], [0], {duration: 500, easing: "cubic-in-out"});