From b6df8ed61d4acb7d77ce0fc8d720a196855fb60d Mon Sep 17 00:00:00 2001 From: nncluzu Date: Thu, 5 Sep 2024 17:35:05 +0200 Subject: [PATCH 1/3] front: fix STDCM config section layout. In the mockup, the consist and itinerary forms have fixed widths, while the map is responsive. Signed-off-by: nncluzu --- front/src/styles/scss/applications/stdcmV2/_home.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/front/src/styles/scss/applications/stdcmV2/_home.scss b/front/src/styles/scss/applications/stdcmV2/_home.scss index 9f00b5371e2..688d7569a6f 100644 --- a/front/src/styles/scss/applications/stdcmV2/_home.scss +++ b/front/src/styles/scss/applications/stdcmV2/_home.scss @@ -13,10 +13,9 @@ .stdcm-v2-simulation-settings { display: flex; gap: 0.813rem; - width: 55%; .stdcm-v2-consist-container { - width: 45%; + width: 20.125rem; .stdcm-v2-consist-img { overflow: hidden; @@ -40,7 +39,7 @@ flex-direction: column; gap: 32px; min-width: 28.125rem; - width: 55%; + width: 28.125rem; position: relative; align-items: center; @@ -196,8 +195,8 @@ 0px 0px 0px 2px rgba(255, 255, 255, 0.75) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.25) inset; margin-left: 2rem; - width: 55%; - height: 48.7rem; + width: 100%; + height: 48.5rem; } } } From 2bbfb338fb1429e1aace201d3458fa7b0c40dd69 Mon Sep 17 00:00:00 2001 From: nncluzu Date: Mon, 9 Sep 2024 15:09:08 +0200 Subject: [PATCH 2/3] front: fix css conflict with ui-core Select component. The Select component from ui-core defines a custom-select CSS class, which conflicts with Bootstrap's class of the same name. For now, we override the Bootstrap class with the ui-core version, pending a rename in ui-core. Signed-off-by: nncluzu --- front/src/styles/scss/_uiCoreIntegration.scss | 58 +++++++++++++++++++ .../scss/applications/stdcmV2/_card.scss | 19 ------ 2 files changed, 58 insertions(+), 19 deletions(-) diff --git a/front/src/styles/scss/_uiCoreIntegration.scss b/front/src/styles/scss/_uiCoreIntegration.scss index 16dfecf5259..f3b0dea4aae 100644 --- a/front/src/styles/scss/_uiCoreIntegration.scss +++ b/front/src/styles/scss/_uiCoreIntegration.scss @@ -68,3 +68,61 @@ img { } } } + +// __________________ Select __________________ +.field-and-status-icon { + .custom-select { + border-radius: 0.25rem; + border: 0.063rem solid rgba(148, 145, 142, 1); + box-shadow: + 0 0.063rem 0.063rem rgba(0, 0, 0, 0.2), + 0 0.125 0.25rem rgba(0, 0, 0, 0.1); + height: 2.5rem; + padding: 0.438rem 2rem 0.563rem 0.813rem; + letter-spacing: 0; + text-align: left; + line-height: 1.5rem; + width: 100%; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-color: #94918e; + background-color: #00000003; + color: #312e2b; + + option { + color: #312e2b; + } + + option:first-child { + color: #797671; + } + + &.placeholder-selected { + color: #797671; + } + + &:focus { + outline: none; + border: 2px solid rgba(37, 106, 250, 1); + background-color: #00000003; + border-color: #256afa; + } + + &.read-only { + border: 1px solid rgba(182, 178, 175, 1); + box-shadow: + 0px 0px 0px rgba(0, 0, 0, 0.2), + 0px 1px 0px rgba(0, 0, 0, 0.1); + color: #797671; + } + + &:disabled { + border: 1px solid rgba(211, 209, 207, 1); + box-shadow: + 0px 0px 0px rgba(0, 0, 0, 0.2), + 0px 1px 0px rgba(0, 0, 0, 0.1); + color: #b6b2af; + } + } +} diff --git a/front/src/styles/scss/applications/stdcmV2/_card.scss b/front/src/styles/scss/applications/stdcmV2/_card.scss index 26a9562835c..dc00a5db58d 100644 --- a/front/src/styles/scss/applications/stdcmV2/_card.scss +++ b/front/src/styles/scss/applications/stdcmV2/_card.scss @@ -60,25 +60,6 @@ margin-bottom: 0; } - .suggestions.stdcm-v2-ch-selector { - label { - margin: 0 0 0.15rem; - } - select { - min-height: 2.55rem; - padding: 0 1rem; - appearance: auto; - background-image: none; - border-radius: 4px; - border: 0.125rem solid rgba(255, 255, 255, 0.75); - border: 0.0625rem solid rgba(148, 145, 142, 1); - box-shadow: - 0px 0.0625rem 0.0625rem rgba(0, 0, 0, 0.2), - 0px 0.125rem 0.25rem rgba(0, 0, 0, 0.1); - background-color: rgba(0, 0, 0, 0.01); - } - } - .feed-back { padding-left: 0rem; padding-right: 0.3rem; From 7e6d45aeb1297d209d951c3bc10ee647d8d1724c Mon Sep 17 00:00:00 2001 From: nncluzu Date: Tue, 10 Sep 2024 12:13:30 +0200 Subject: [PATCH 3/3] front: use the wright icon for the dropdown Select even when the options displayed Signed-off-by: nncluzu --- front/src/styles/scss/_uiCoreIntegration.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/front/src/styles/scss/_uiCoreIntegration.scss b/front/src/styles/scss/_uiCoreIntegration.scss index f3b0dea4aae..068ce46e1cb 100644 --- a/front/src/styles/scss/_uiCoreIntegration.scss +++ b/front/src/styles/scss/_uiCoreIntegration.scss @@ -70,6 +70,7 @@ img { } // __________________ Select __________________ +// TODO Remove this after the fix in the ui-core .field-and-status-icon { .custom-select { border-radius: 0.25rem; @@ -87,8 +88,10 @@ img { -moz-appearance: none; appearance: none; border-color: #94918e; - background-color: #00000003; + background: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Ctitle%3Eicon%2F16%2Ftriangle-up-down-16%3C%2Ftitle%3E%0A%20%20%20%20%3Cg%20id%3D%22icon%2F16%2Ftriangle-up-down-16%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M4.42845467%2C5.56944689%20L7.82445467%2C2.17344689%20C7.8713568%2C2.12642604%207.93504104%2C2.1%208.00145467%2C2.1%20C8.0678683%2C2.1%208.13155254%2C2.12642604%208.17845467%2C2.17344689%20L11.5744547%2C5.56944689%20C11.6461431%2C5.64095399%2011.6676197%2C5.74864161%2011.6288468%2C5.84217853%20C11.5900739%2C5.93571546%2011.4987091%2C5.99662805%2011.3974547%2C5.99644729%20L4.60545467%2C5.99644729%20C4.50420023%2C5.99662805%204.41283543%2C5.93571546%204.37406252%2C5.84217853%20C4.3352896%2C5.74864161%204.35676625%2C5.64095399%204.42845467%2C5.56944689%20Z%20M4.43345467%2C10.4270004%20L7.82945467%2C13.8230004%20C7.8763568%2C13.8700213%207.94004104%2C13.8964473%208.00645467%2C13.8964473%20C8.0728683%2C13.8964473%208.13655254%2C13.8700213%208.18345467%2C13.8230004%20L11.5794547%2C10.4270004%20C11.6511431%2C10.3554933%2011.6726197%2C10.2478057%2011.6338468%2C10.1542688%20C11.5950739%2C10.0607318%2011.5037091%2C9.99981924%2011.4024547%2C10%20L4.61045467%2C10%20C4.50920023%2C9.99981924%204.41783543%2C10.0607318%204.37906252%2C10.1542688%20C4.3402896%2C10.2478057%204.36176625%2C10.3554933%204.43345467%2C10.4270004%20L4.43345467%2C10.4270004%20Z%22%20id%3D%22Path%22%20fill%3D%22%23000000%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E') + no-repeat right 0.75rem center; color: #312e2b; + background-color: #00000003; option { color: #312e2b;