From a41ba27183a9640543b61f687b340568e3887d84 Mon Sep 17 00:00:00 2001 From: znmustic Date: Tue, 26 Sep 2023 13:57:25 +0200 Subject: [PATCH] #173, #137 --- .../FixMyStreet/App/Controller/Report/New.pm | 2 + .../report/new/fill_in_details.html | 12 +- .../popravitodev/tokens/confirm_problem.html | 50 ++++++++ web/cobrands/popravitodev/base.scss | 120 ++++++++++++++++++ .../popravitodev/hideConfirmationProblem.js | 8 ++ web/cobrands/popravitodev/images/Oval.svg | 3 + 6 files changed, 193 insertions(+), 2 deletions(-) create mode 100644 templates/web/popravitodev/tokens/confirm_problem.html create mode 100644 web/cobrands/popravitodev/hideConfirmationProblem.js create mode 100644 web/cobrands/popravitodev/images/Oval.svg diff --git a/perllib/FixMyStreet/App/Controller/Report/New.pm b/perllib/FixMyStreet/App/Controller/Report/New.pm index f64a109e8e8..d8828a943f2 100644 --- a/perllib/FixMyStreet/App/Controller/Report/New.pm +++ b/perllib/FixMyStreet/App/Controller/Report/New.pm @@ -115,6 +115,8 @@ sub report_new : Path : Args(0) { $c->detach('generate_map') unless $c->forward('check_for_errors'); $c->forward('save_user_and_report'); $c->forward('redirect_or_confirm_creation'); + $c->stash->{show_notification} = 'true'; + $c->stash->{template} = 'report/new/fill_in_details.html'; } # This is for the new phonegap versions of the app. It looks a lot like diff --git a/templates/web/popravitodev/report/new/fill_in_details.html b/templates/web/popravitodev/report/new/fill_in_details.html index 8c09f9cf664..9049c3033c5 100644 --- a/templates/web/popravitodev/report/new/fill_in_details.html +++ b/templates/web/popravitodev/report/new/fill_in_details.html @@ -10,18 +10,22 @@ INCLUDE 'header.html', title => loc('Reporting a problem'); %] +[% IF show_notification == 'true' %] +
+[% ELSE %]
+[% END %] [% IF report.used_map %] -
+ [% IF c.req.params.map_override %] [% END %] [% ELSE %] - + [% END %] @@ -61,6 +65,10 @@
+ [% IF show_notification == 'true' %] + [% INCLUDE 'tokens/confirm_problem.html' %] + [% END %] + [% INCLUDE 'footer.html' %] diff --git a/templates/web/popravitodev/tokens/confirm_problem.html b/templates/web/popravitodev/tokens/confirm_problem.html new file mode 100644 index 00000000000..0b9fbfb5345 --- /dev/null +++ b/templates/web/popravitodev/tokens/confirm_problem.html @@ -0,0 +1,50 @@ + + + \ No newline at end of file diff --git a/web/cobrands/popravitodev/base.scss b/web/cobrands/popravitodev/base.scss index aaf1fc2d925..6e05d6e2997 100644 --- a/web/cobrands/popravitodev/base.scss +++ b/web/cobrands/popravitodev/base.scss @@ -2573,6 +2573,126 @@ fieldset { .main-alert { padding: 1.5rem; } + +.modal-background { + position: fixed; + width: 100%; + background-color: #606060; + opacity: 0.7; + height: 100% !important; + z-index: 5; + top: 0; +} + +.confirmation-header { + background-color: white; + width: 25%; + height: 375px; + padding: 65px; + border-radius: 35px; + z-index: 8; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.confirm-modal-button { + background-color: $primary; + color: white; + width: 375px; + height: 56px; + margin-top: 40px; +} + +.confirm-button { + float: none; + margin-left: auto; + margin-right: auto; + margin-top: 100px; + width: 100%; +} + +.confirmation-problem { + background-color:white; + text-align:center; + border-radius: 25px; + height: 525px; + width: 455px; + padding-top: 60px; + position: absolute; + top:0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.close-modal-btn { + position: absolute; + right: 15px; + cursor: pointer; + right: 25px; + top: 10px; + border: 2px solid; + border-color: white; + font-weight: bold; +} + +.text-main { + margin-bottom: 0px !important; + margin-top: 50px !important; +} + +.text-secondary { + margin-top: 0px !important; + margin-bottom: 20px !important; +} + +.row { + width: 100%; +} + +#confirm-problem h2 { + font-family: "Darker Grotesque"; + font-size: 2rem; + width: 90%; + margin-bottom: 25px; +} + +.text-centered { + margin-left: auto; + margin-right: auto; +} + +.confirmation-problem > p { + width: 95%; + margin: auto; +} + +@media only screen and (max-width: 769px) { + + .mobile-hidden { + display: none; + } + + .confirmation-problem { + position: static; + margin: auto; + width: 100%; + } + + .confirm-modal-button { + height: 48px; + width:105px; + } + + .with-bullets > li:first-child { + padding: 0 1.5rem 0 1.5rem; + } + +} + //#146 @media only screen and (max-width: 755px) { .shadow-wrap { diff --git a/web/cobrands/popravitodev/hideConfirmationProblem.js b/web/cobrands/popravitodev/hideConfirmationProblem.js new file mode 100644 index 00000000000..9d4ee384f6d --- /dev/null +++ b/web/cobrands/popravitodev/hideConfirmationProblem.js @@ -0,0 +1,8 @@ +function closeModal() { + const modal = document.getElementById("confirm-problem"); + const form = document.getElementsByClassName("mobile-hidden"); + if (form[0] !== undefined && form[0] !== null) { + form[0].classList.remove('mobile-hidden'); + } + modal.style.display = 'none'; +} \ No newline at end of file diff --git a/web/cobrands/popravitodev/images/Oval.svg b/web/cobrands/popravitodev/images/Oval.svg new file mode 100644 index 00000000000..40b55f2c00c --- /dev/null +++ b/web/cobrands/popravitodev/images/Oval.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file