From bba9c51e7bef8a4b2932df9d7dd8fc10a15ef38d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Bisson?= Date: Wed, 19 Dec 2018 21:40:15 +0100 Subject: [PATCH] changes (#29180) --- static/rouen/_collapsible.scss | 87 ++++++ static/rouen/_custom.scss | 273 ++++++++---------- static/rouen/_info_block.scss | 35 +++ static/rouen/_links.scss | 273 ++++++++++++++++++ static/rouen/_side_block.scss | 149 ++++++++++ static/rouen/img/logo.png | Bin 2667 -> 0 bytes static/rouen/img/logo.svg | 63 ++++ static/rouen/img/ticket.svg | 27 ++ static/rouen/js/collapse.js | 67 +++++ static/rouen/style.scss | 5 + templates/variants/rouen/authentic2/base.html | 70 +++++ .../display_message_and_continue.html | 19 ++ .../variants/rouen/combo/page_template.html | 43 ++- templates/variants/rouen/theme.html | 163 +++++++++++ templates/variants/rouen/wcs/base.html | 41 +++ 15 files changed, 1143 insertions(+), 172 deletions(-) create mode 100644 static/rouen/_collapsible.scss create mode 100644 static/rouen/_info_block.scss create mode 100644 static/rouen/_links.scss create mode 100644 static/rouen/_side_block.scss delete mode 100644 static/rouen/img/logo.png create mode 100644 static/rouen/img/logo.svg create mode 100644 static/rouen/img/ticket.svg create mode 100644 static/rouen/js/collapse.js create mode 100644 templates/variants/rouen/authentic2/base.html create mode 100644 templates/variants/rouen/authentic2/display_message_and_continue.html create mode 100644 templates/variants/rouen/theme.html create mode 100644 templates/variants/rouen/wcs/base.html diff --git a/static/rouen/_collapsible.scss b/static/rouen/_collapsible.scss new file mode 100644 index 0000000..d77ee89 --- /dev/null +++ b/static/rouen/_collapsible.scss @@ -0,0 +1,87 @@ +/* Collapsible element */ +.collapsible { + display: block; + position: relative; + background-color: #2e2d2c; + color: #fff; + margin: 3em 0; + padding: 0 0.7em 0.7em 0.7em; + + .collapsible { background-color: #5e5d5c; } + + /* Title */ + h1, h2, h3, h4 { color: #fff; } + + /* Legend */ + &>:first-child, &>:first-child a, &>:first-child a:visited { + color: #000; + border-bottom: none; + display: block; + } + + &>legend:first-child { margin-bottom: 0; } + + &>:first-child { + position: relative; + color: #000; + width: 100%; + padding: 0.5em 0; + margin: 0 0 0.7em 0; + font-size: 100%; + font-weight: normal; + background-color: #ee787c; + + /* Left padding */ + &:before { + content: " "; + display: block; + width: 0.7em; + position: absolute; + height: 100%; + top: 0; + left: -0.7em; + background-color: #ee787c; + } + + /* Right padding */ + &>:after { + content: " "; + display: block; + width: 0.7em; + position: absolute; + height: 100%; + top: 0; + right: -0.7em; + background-color: #ee787c; + } + + /* Right button */ + a:after { + height: 100%; + width: 1.15em; + right: 0.8em; + position: absolute; + top: 0; + margin-right: -1.15em; + font-size: 200%; + content: "\e011"; + font-family: MarsIcons; + font-weight: normal; + text-align: center; + line-height: 130%; + background-color: #2e2d2c; + color: #ee787c; + z-index: 1; + } + } + + table { color: #000; } + + &.collapsed { + padding: 0 0.7em; + + &>:first-child a:after { content: "\e012"; } + &>* { display: none; } + &>:first-child { display: inherit; } + } +} \ No newline at end of file diff --git a/static/rouen/_custom.scss b/static/rouen/_custom.scss index 24b85cf..aeaab2a 100644 --- a/static/rouen/_custom.scss +++ b/static/rouen/_custom.scss @@ -1,15 +1,22 @@ @import '../../publik-base-theme/static/includes/font-roboto'; - @font-face { font-family: 'MarsIcons'; src: url('fonts/marsicons12.ttf') format('truetype'), - url('fonts/marsicons12.woff') format('woff'), - url('fonts/marsicons12.woff2') format('woff2'); + url('fonts/marsicons12.woff') format('woff'), + url('fonts/marsicons12.woff2') format('woff2'); font-weight: normal; font-style: normal; } +element-invisible { + position: absolute !important; + clip: rect(1px, 1px, 1px, 1px); + overflow: hidden; + height: 1px; + width: 1px; + word-wrap: normal; +} h1, h2, h3, h4, div.textcell h3, div.textcell h4 { font-weight: bold; @@ -28,6 +35,17 @@ h2 { font-size: 187%; } +#login-page h2 { + color: $red; + font-size: 237%; + padding-left: 0; + text-align: left; + padding-top: 0; + padding-bottom: 0; +} + +#login-page div.block h2 + div { padding: 0; } + h3 { color: $link-color; font-size: 162%; @@ -37,12 +55,44 @@ h4 { font-size: 137%; } +.gru-content div.a2-block h2, .gru-content div.block h2, div.links-list h2, +div#rub_service h2 { + color: #C64A59; + font-size: 187%; +} + +div#rub_service div.category h3, .gru-content div.a2-block h2, +.gru-content div.block h2, div.links-list h2, +div#services > ul > li > strong > a, +.gru-content div.textcell h2:first-child, +.gru-content div.cell h2:first-child, div#tracking-code h3, +div#rub_service h2, #toplinks { + background-color: transparent; +} + +div#header { + @media screen and (max-width: $mobile-limit) { + padding: 0; + + h1 { + padding-left: 0; + background-position: inherit; + } + } +} + h1#logo a { - background: url(img/logo.png) no-repeat left bottom; - background-size: contain; + background: url(img/logo.svg) no-repeat left bottom; + background-size: auto 1.3em; + background-position: 0.4em center; display: block; - height: 83px; + height: 2em; text-indent: -9999px; + + @media screen and (max-width: $mobile-limit) { + background-size: auto 0.7em; + background-position: 0.4em 0.42em; + } } div#nav li { @@ -151,7 +201,6 @@ div#footer div#footer-content { display: inline; font-weight: bold; line-height: 1.6em; - margin-bottom: 0; a { border-bottom: none; color: $black; @@ -175,8 +224,17 @@ div#rub_service h2 { text-align: left; } -button { - font-weight: bold; +button { font-weight: bold; } + +form.quixote div.widget { margin-bottom: 2em; } +form.quixote div.widget div.widget { margin-bottom: inherit; } + +@media screen and (min-width: $mobile-limit) { + div#rub_service form.quixote, div#rub_service h2, + body.authentic #content, #messages { + max-width: 50rem; + margin: 0 auto; + } } %icon-common { @@ -224,7 +282,10 @@ select { @extend %border-style; } -input[type=text], input[type=password], input[type=email], input[type=color], input[type=date], input[type=datetime], input[type=datetime-local], input[type=month], input[type=number], input[type=range], input[type=search], input[type=tel], input[type=time], input[type=url], input[type=week], textarea { +input[type=text], input[type=password], input[type=email], input[type=color], +input[type=date], input[type=datetime], input[type=datetime-local], +input[type=month], input[type=number], input[type=range], input[type=search], +input[type=tel], input[type=time], input[type=url], input[type=week], textarea { @extend %border-style; background-color: #FFF; display: inline-block; @@ -233,13 +294,20 @@ input[type=text], input[type=password], input[type=email], input[type=color], in -webkit-appearance: none; } -form.quixote div.title label{ +form.quixote div.title label, body.authentic label { display: block; font-weight: bold; font-size: 122%; margin-bottom: 0.5em; } +body.authentic label { margin-top: 1.7em; } + +div.a2-block form button, div.a2-block form input[type="submit"] { + margin-top: 1.7em; + min-width: inherit; +} + div#content div.buttons.submit { @include flexbox(); & div.submit-button { @@ -248,7 +316,9 @@ div#content div.buttons.submit { } div#content div.SubmitWidget { - button[name=submit][value=Suivant], button[name=submit][value=Valider], button[name=previous] { + button[name=submit][value=Suivant], + button[name=submit][value=Valider], + button[name=previous] { background-color: $primary-color; background-repeat: no-repeat; background-position: right; @@ -279,52 +349,6 @@ div#nav #nav-button.toggled + ul li { } } -div#toplinks { - border: none; - border-radius: 0; - box-shadow: none; - margin-top: 0.5em; - padding: 0; - right: 0.2em; - a.login,a.logout { - @include flexbox(); - @include vendor-prefix(justify-content, flex-end); - div.logtext { - background: $primary-color; - color: $black; - font-size: 122%; - font-weight: 700; - height: 2em; - padding: 0 0.5em; - text-align: center; - line-height: 2em; - } - div.logicon { - background-color: $black; - background-image: url(img/picto_btn_connexion.svg); - background-position: center; - background-repeat: no-repeat; - background-size: 70%; - content: ""; - width: 2em; - } - } - a.registration { - @include flexbox(); - @include vendor-prefix(justify-content, flex-end); - color: $red; - font-weight: 500; - margin-top: 0.4em; - span.pre-register { - color: $light-black; - margin-right: 0.2em; - } - span.register { - text-decoration: underline; - } - } -} - div#gauche { clear: both; width: auto; @@ -336,109 +360,38 @@ div#gauche + div#rub_service { float: none; } -div#tracking-code { - text-align: center; - h3 { - margin: 0; - padding: 0; - @media screen and (max-width: $mobile-limit) { - padding-right: 1ex; - } - } - a { - padding: 0; - } - margin-bottom: 2rem; - @media screen and (max-width: $mobile-limit) { - order: 0; - margin-bottom: 0; +#publik-portal-agent { display: none; } + +#messages { + li.info { + background-color: transparent; + color: inherit; + margin: inherit; + padding-left: 1em; + + &::before, &::after { display: none; } } } -div#steps ol { - display: -ms-flexbox; - display: flex; - li.first.last::after { - background: none; - } - li { - position: relative; - -ms-flex: 1; - flex: 1; - padding: 0; - text-transform: uppercase; - color: $primary-color; - font-size: 24px; - margin-bottom: 0; - border: none; - min-width: 30px; - min-height: 40px; - &::after { - content: ''; - height: 5px; - width: 100%; - display: block; - position: absolute; - left: 0; - bottom: 5px; - background: #9b9b9b; - @media screen and (max-width: $mobile-limit) { - bottom: 15px; - } - } - &:first-child::after { - left: 50%; - width: 50%; - } - &:last-child::after { - right: 50%; - width: 50%; - } - span.marker { - position: absolute; - bottom: 0; - overflow: hidden; - left: 50%; - text-indent: -1000px; - border: none; - color: $primary-color; - background: white; - width: 15px; - height: 15px; - box-shadow: 0 0 0 5px #9b9b9b; - border-radius: 10px; - z-index: 100; - @media screen and (max-width: $mobile-limit) { - padding: 0; - bottom: 10px; - } - } - span.label { - display: block; - width: 100%; - text-align: center; - font-size: $font-size; - padding-right: 0; - text-transform: none; - color: #9b9b9b; - padding-bottom: 30px; - @media screen and (max-width: $mobile-limit) { - display: none; - } - } - &.current { - span.marker { - background: $primary-color; - box-shadow: 0 0 0 5px $primary-color; - @media screen and (max-width: $mobile-limit) { - border-radius: 10px; - } - } - } - &.step-before { - span.marker { - background: #9b9b9b; - } - } - } +.fargo-pick-popup button, button.ui-button, a.pk-button, a.pk-big-button, +a#a2-continue, div.gru-content button, input[type="submit"], div.buttons input { + box-shadow: none; + height: 2.5em; } + +.fargo-pick-popup button:hover, button.ui-button:hover, a.pk-button:hover, +a.pk-big-button:hover, a#a2-continue:hover, div.gru-content button:hover, +input[type="submit"]:hover, div.buttons input:hover { + box-shadow: none; +} + +/* Account management */ +#profile span.label { + display: block; + color: $red; + font-size: inherit; + font-weight: bold; +} + +div.a2-block p { margin-left: 0; } +div.a2-block form, div.a2-block > p { margin: 1em 1em; } \ No newline at end of file diff --git a/static/rouen/_info_block.scss b/static/rouen/_info_block.scss new file mode 100644 index 0000000..fdf1f38 --- /dev/null +++ b/static/rouen/_info_block.scss @@ -0,0 +1,35 @@ +/* Warning, emphasize, validate blocks */ +.warning, .emphasize, .validate, .messages { + position: relative; + font-weight: bold; + padding: 0.7em 0.88em; + border: 0.2em solid white; + border-right: 2.3em solid white; + background-color: white; + margin: 2em 0; +} + +.warning:after, .emphasize:after, .validate:after, .messages:after { + display: block; + width: 1.15em; + right: -1.15em; + position: absolute; + top: 50%; + margin-top: -0.5em; + margin-right: -0.27em; + font-size: 130%; + content: "\e033"; + font-family: MarsIcons; + font-weight: normal; + text-align: center; + line-height: 100%; + color: white; +} + +.warning { color: #e53323; border-color: #e53323; } +.emphasize, .messages { color: #164193; border-color: #164193; } +.validate { color: #39a935; border-color: #39a935; } + +.warning:after { content: "\e033"; } +.emphasize:after, .messages:after { content: "\e035"; } +.validate:after { content: "\e038"; } \ No newline at end of file diff --git a/static/rouen/_links.scss b/static/rouen/_links.scss new file mode 100644 index 0000000..0b87371 --- /dev/null +++ b/static/rouen/_links.scss @@ -0,0 +1,273 @@ +/* Links */ +a, div#account-management ul>li>a { + text-decoration: none; + border-bottom-width: 0.08em; + border-bottom-style: solid; + transition: border 0.2s ease-out; + color: #c64a59; + border-bottom-color: #c64a59; + + &:hover { + color: #c64a59; + border-bottom-color: #c64a59; + border-bottom-width: 0.20em; + } + + &:visited { + color: #198468; + border-bottom-color: #198468; + } +} + +#logo a { border: none; } + +/* Collapsible */ +.collapsible a, .collapsible a:visited { + color: #fff; + border-color: #fff; +} + +a.elf-external.elf-icon:after { + content: " \e05f"; + font-family: MarsIcons; +} + +/* Block links */ +a.blocklink, div#account-management ul>li>a { + font-weight: bold; + border-bottom-width: 0.16em; + border-bottom-style: solid; + transition: border 0.2s ease-out; + line-height: 200%; + + &.inline { display: inline-block; } + + &:hover { border-bottom-width: 0.32em; } + + &:before { + display: block; + float: left; + content: "\e032\a0"; + font-family: MarsIcons; + position: relative; + font-size: 150%; + font-weight: normal; + top: 0.1em; + } +} + +/* Button links */ +a.btlnk { + display: inline-block; + position: relative; + font-weight: bold; + font-size: 122%; + color: #000; + padding: 0.5em 0.727em; + border: none; + border-right: 2.3em solid #2d2d2d; + margin-bottom: 1.5em; + background-color: #ee787c; + + &.fullwidth { display: block; width: auto; } + &.complement { background-color: #82CEBB; } + &:visited { color: #000; } + + &::after { + display: block; + width: 1.15em; + right: -1.15em; + position: absolute; + top: 50%; + margin-top: -0.47em; + margin-right: -0.27em; + font-size: 130%; + content: "\e014"; + font-family: MarsIcons; + font-weight: normal; + text-align: center; + line-height: 100%; + color: #ee787c; + } + + &.strong { background-color: #82cebb; } + &.strong::after { color: #82cebb; } + &.complement::after { color: #82CEBB; } +} + +.E003::after { content: "\e003"; } +.E004::after { content: "\e004"; } +.E005::after { content: "\e005"; } +.E006::after { content: "\e006"; } +.E007::after { content: "\e007"; } +.E008::after { content: "\e008"; } +.E009::after { content: "\e009"; } +.E00A::after { content: "\e00a"; } +.E00B::after { content: "\e00b"; } +.E00C::after { content: "\e00c"; } +.E00D::after { content: "\e00d"; } +.E00E::after { content: "\e00e"; } +.E00F::after { content: "\e00f"; } +.E010::after { content: "\e010"; } +.E011::after { content: "\e011"; } +.E012::after { content: "\e012"; } +.E013::after { content: "\e013"; } +.E014::after { content: "\e014"; } +.E015::after { content: "\e015"; } +.E016::after { content: "\e016"; } +.E017::after { content: "\e017"; } +.E018::after { content: "\e018"; } +.E019::after { content: "\e019"; } +.E01A::after { content: "\e01a"; } +.E01B::after { content: "\e01b"; } +.E01C::after { content: "\e01c"; } +.E01D::after { content: "\e01d"; } +.E01E::after { content: "\e01e"; } +.E01F::after { content: "\e01f"; } +.E020::after { content: "\e020"; } +.E021::after { content: "\e021"; } +.E022::after { content: "\e022"; } +.E023::after { content: "\e023"; } +.E024::after { content: "\e024"; } +.E025::after { content: "\e025"; } +.E026::after { content: "\e026"; } +.E027::after { content: "\e027"; } +.E028::after { content: "\e028"; } +.E029::after { content: "\e029"; } +.E02A::after { content: "\e02a"; } +.E02B::after { content: "\e02b"; } +.E02C::after { content: "\e02c"; } +.E02D::after { content: "\e02d"; } +.E02E::after { content: "\e02e"; } +.E02F::after { content: "\e02f"; } +.E030::after { content: "\e030"; } +.E031::after { content: "\e031"; } +.E032::after { content: "\e032"; } +.E033::after { content: "\e033"; } +.E034::after { content: "\e034"; } +.E035::after { content: "\e035"; } +.E036::after { content: "\e036"; } +.E037::after { content: "\e037"; } +.E038::after { content: "\e038"; } +.E039::after { content: "\e039"; } +.E03A::after { content: "\e03a"; } +.E03B::after { content: "\e03b"; } +.E03C::after { content: "\e03c"; } +.E03D::after { content: "\e03d"; } +.E03E::after { content: "\e03e"; } +.E03F::after { content: "\e03f"; } +.E040::after { content: "\e040"; } +.E041::after { content: "\e041"; } +.E042::after { content: "\e042"; } +.E043::after { content: "\e043"; } +.E044::after { content: "\e044"; } +.E05C::after { content: "\e05c"; } +.E05D::after { content: "\e05d"; } +.E05E::after { content: "\e05e"; } +.E05F::after { content: "\e05f"; } +.E060::after { content: "\e060"; } +.E061::after { content: "\e061"; } +.E062::after { content: "\e062"; } +.E063::after { content: "\e063"; } +.E064::after { content: "\e064"; } +.E065::after { content: "\e065"; } +.E066::after { content: "\e066"; } +.E06E::after { content: "\e06e"; } +.E08E::after { content: "\e08e"; } +.E08F::after { content: "\e08f"; } +.E090::after { content: "\e090"; } +.E09C::after { content: "\e09c"; } +.E09D::after { content: "\e09d"; } +.E09E::after { content: "\e09e"; } +.E09F::after { content: "\e09f"; } +.E0A0::after { content: "\e0a0"; } +.E0A1::after { content: "\e0a1"; } +.E0A2::after { content: "\e0a2"; } +.E0A3::after { content: "\e0a3"; } +.E0A4::after { content: "\e0a4"; } +.E0A5::after { content: "\e0a5"; } +.E0A6::after { content: "\e0a6"; } +.E0A7::after { content: "\e0a7"; } +.E0E9::after { content: "\e0e9"; } +.E0EA::after { content: "\e0ea"; } +.E0EB::after { content: "\e0eb"; } +.E0EC::after { content: "\e0ec"; } +.E0ED::after { content: "\e0ed"; } +.E100::after { content: "\e100"; } +.E101::after { content: "\e101"; } +.E102::after { content: "\e102"; } +.E104::after { content: "\e104"; } +.E105::after { content: "\e105"; } +.E106::after { content: "\e106"; } +.E107::after { content: "\e107"; } +.E108::after { content: "\e108"; } +.E109::after { content: "\e109"; } + +/* Authentication links */ +div#toplinks { + border: none; + border-radius: 0; + box-shadow: none; + margin-top: 0.5em; + padding: 0; + right: 0.2em; + text-align: right; + + a.login, a.logout { + @include flexbox(); + @include vendor-prefix(justify-content, flex-end); + + border: none; + + div.logtext { + background: $primary-color; + color: $black; + font-size: 122%; + font-weight: 700; + height: 2em; + padding: 0 0.5em; + text-align: center; + line-height: 2em; + } + + div.logicon { + background-color: $black; + background-image: url(img/picto_btn_connexion.svg); + background-position: center; + background-repeat: no-repeat; + background-size: 70%; + content: ""; + width: 2.441em; + } + } + + a.registration { + color: $red; + font-weight: 500; + margin-top: 0.4em; + + &:visited { + color: #198468; + border-bottom-color: #198468; + } + + span.pre-register { + color: $light-black; + margin-right: 0.2em; + } + } +} + +/* Account management */ +div#account-management ul { + padding: 1rem; + + &>li { + &>a { + display: inline; + padding: inherit; + + &:hover { background-color: transparent; } + } + } +} \ No newline at end of file diff --git a/static/rouen/_side_block.scss b/static/rouen/_side_block.scss new file mode 100644 index 0000000..20f4fee --- /dev/null +++ b/static/rouen/_side_block.scss @@ -0,0 +1,149 @@ +/* Steps and tracking code */ +div#side { position: relative; } + +body.one-step div#tracking-code { + display: inline-block; + position: relative; + top: 1em; +} + +div#tracking-code { + position: absolute; + top: 5em; + left: 50%; + text-align: center; + + margin-bottom: 2rem; + @media screen and (max-width: $mobile-limit) { + order: 0; + margin-bottom: 0; + } + + h3 { padding: 0; } + + a { + padding: 0; + border: none; + text-decoration: underline; + } +} + +div.tracking-code-part { + position: relative; + left: -43%; + background-color: #82cebb; + padding: 1em 2em; + + &::before { + content: ' '; + background-image: url(img/ticket.svg); + position: absolute; + height: 100%; + width: 3.3em; + left: -3.3em; + top: 0; + background-size: contain; + @media screen and (max-width: $mobile-limit) { + width: 4.3em; + left: -3.6em; + } + } +} + +body.one-step div#steps { display: none; } +body.without-tracking-code div#steps { margin-bottom: 2em; } + +div#steps { + margin-top: 8em; + margin-bottom: 9.5em; + + @media screen and (max-width: $mobile-limit) { + margin-top: 0; + margin-bottom: 7.5em; + } + + ol { + display: -ms-flexbox; + display: flex; + li.first.last::after { + background: none; + } + + li { + position: relative; + -ms-flex: 1; + flex: 1; + padding: 0; + text-transform: uppercase; + color: $primary-color; + font-size: 24px; + margin-bottom: 0; + border: none; + min-width: 30px; + min-height: 40px; + &::after { + content: ''; + height: 5px; + width: 100%; + display: block; + position: absolute; + left: 0; + bottom: 5px; + background: #9b9b9b; + @media screen and (max-width: $mobile-limit) { + bottom: 15px; + } + } + &:first-child::after { left: 50%; width: 50%; } + &:last-child::after { right: 50%; width: 50%; } + span.marker { + position: absolute; + bottom: 0; + overflow: hidden; + left: 50%; + text-indent: -1000px; + border: none; + color: $primary-color; + background: white; + width: 15px; + height: 15px; + box-shadow: 0 0 0 5px #9b9b9b; + border-radius: 10px; + z-index: 100; + @media screen and (max-width: $mobile-limit) { + padding: 0; + bottom: 10px; + } + } + span.label { + display: block; + left: 50%; + position: absolute; + width: 12em; + font-size: $font-size; + padding-right: 0; + text-transform: none; + color: #9b9b9b; + transform: rotate(-45deg); + transform-origin: top left; + top: -0.2em; + + @media screen and (max-width: $mobile-limit) { + display: none; + } + } + &.current { + span.marker { + background: $primary-color; + box-shadow: 0 0 0 5px $primary-color; + @media screen and (max-width: $mobile-limit) { + border-radius: 10px; + } + } + } + &.step-before { + span.marker { background: #9b9b9b; } + } + } + } +} \ No newline at end of file diff --git a/static/rouen/img/logo.png b/static/rouen/img/logo.png deleted file mode 100644 index b6604cbdddd9d25bdc6d9c2739918765b007761f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2667 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 + + + + + image/svg+xml + + + + + + + + + + + + + + + + + diff --git a/static/rouen/img/ticket.svg b/static/rouen/img/ticket.svg new file mode 100644 index 0000000..c2d93e0 --- /dev/null +++ b/static/rouen/img/ticket.svg @@ -0,0 +1,27 @@ + +image/svg+xml \ No newline at end of file diff --git a/static/rouen/js/collapse.js b/static/rouen/js/collapse.js new file mode 100644 index 0000000..84b0232 --- /dev/null +++ b/static/rouen/js/collapse.js @@ -0,0 +1,67 @@ +(function ($) { + /** + * Scroll a given fieldset into view as much as possible. + */ + const collapseScrollIntoView = function (node) { + var h = document.documentElement.clientHeight || document.body.clientHeight || 0; + var offset = document.documentElement.scrollTop || document.body.scrollTop || 0; + var posY = $(node).offset().top; + var fudge = 55; + if (posY + node.offsetHeight + fudge > h + offset) { + if (node.offsetHeight > h) { + window.scrollTo(0, posY); + } + else { + window.scrollTo(0, posY + node.offsetHeight - h + fudge); + } + } + }; + + /** + * Toggle the visibility of a block. + */ + const toggleblock = function (block) { + var $block = $(block); + if ($block.is('.collapsed')) { + $block + .removeClass('collapsed') + .attr('aria-expanded', 'true') + .find('>:first-child .collapse-action').html("Cacher"); + + collapseScrollIntoView(block); + } else { + $block + .addClass('collapsed') + .attr('aria-expanded', 'false') + .find('>:first-child .collapse-action').html("Montrer"); + } + }; + + $('.collapsible').each(function () { + const $block = $(this); + + // Add the Aria attributes to our custom element + if ($block.hasClass('collapsed')) { + $block.attr('aria-expanded', 'false'); + } else { + $block.attr('aria-expanded', 'true'); + } + + // Turn the legend into a clickable link + const $legend = $('>:first-child', this); + + $('') + .append($block.hasClass('collapsed') ? "Montrer" : "Cacher") + .prependTo($legend) + .after(' '); + + // .wrapInner() does not retain bound events. + const $link = $('') + .prepend($legend.contents()) + .appendTo($legend) + .click(function () { + toggleblock($block.get(0)); + return false; + }); + }); +})($); \ No newline at end of file diff --git a/static/rouen/style.scss b/static/rouen/style.scss index 1b85f31..eed8859 100644 --- a/static/rouen/style.scss +++ b/static/rouen/style.scss @@ -3,4 +3,9 @@ @import 'vars'; @import '../../publik-base-theme/static/includes/publik'; @import '../../publik-base-theme/static/includes/flexbox_mixins'; + @import 'custom'; +@import 'links'; +@import 'collapsible'; +@import 'info_block'; +@import 'side_block'; \ No newline at end of file diff --git a/templates/variants/rouen/authentic2/base.html b/templates/variants/rouen/authentic2/base.html new file mode 100644 index 0000000..d3b452b --- /dev/null +++ b/templates/variants/rouen/authentic2/base.html @@ -0,0 +1,70 @@ +{% extends theme_base %} + +{% block extra-body-args %} + {% block bodyargs %}{% endblock %} +{% endblock %} + +{% block placeholder-content %} + {% block content %}{% endblock %} +{% endblock %} + +{% block extra-body-class %} + {{ block.super }} + + authentic + + {% if request.path_info == "/accounts/" %} + account-management + {% endif %} + + {% if request.path_info == "/accounts/change-email/" %} + account-management + account-mail + {% endif %} + + {% if request.path_info == "/accounts/password/change/" %} + account-management + account-password + {% endif %} + + {% if request.path_info == "/accounts/edit/" %} + account-management + account-edit + {% endif %} + + {% if request.path_info == "/accounts/delete/" %} + account-management + account-delete + {% endif %} + +{% endblock %} + +{% block user-info %} + {% if user.is_authenticated %} + +
Déconnexion
+ + {% if idp_account_url %}{% endif %} + {{user.first_name}} {{user.last_name}} + {% if idp_account_url %}{% endif %} + {% endif %} +{% endblock %} + +{% block messages %} +{% if messages %} + +{% endif %} +{% endblock %} + +{% block extra-top-head %} + {% block extrascripts %}{% endblock %} + {% block extra_scripts %}{% endblock %} + {{ form.media }} +{% endblock %} + diff --git a/templates/variants/rouen/authentic2/display_message_and_continue.html b/templates/variants/rouen/authentic2/display_message_and_continue.html new file mode 100644 index 0000000..b551cc6 --- /dev/null +++ b/templates/variants/rouen/authentic2/display_message_and_continue.html @@ -0,0 +1,19 @@ +{% extends "authentic2/base.html" %} +{% load i18n %} + +{% block content %} +
+ {% if "logout" in url %} + {% trans "Continue" %} + {% else %} + {% trans "Continue" %} + {% endif %} +
+ {% if only_info %} + + {% endif %} +{% endblock %} diff --git a/templates/variants/rouen/combo/page_template.html b/templates/variants/rouen/combo/page_template.html index 50414b4..2681f6c 100644 --- a/templates/variants/rouen/combo/page_template.html +++ b/templates/variants/rouen/combo/page_template.html @@ -3,17 +3,36 @@ {% block user-info %} {% skeleton_extra_placeholder user-info %} - {% if user.is_authenticated %} -
Déconnexion
 - {% if idp_account_url %}{% endif %} - {{user.first_name}} {{user.last_name}}{% if idp_account_url %}{% endif %} - {% else %} - {% if idp_registration_url %} - - Pas de compte ?Enregistrez-vous ! - {% else %} - Connexion / Inscription - {% endif %} - {% endif %} + {% if user.is_authenticated %} + +
Déconnexion
+
+ + + {% if idp_account_url %} + + {% endif %} + + {{user.first_name}} {{user.last_name}} + {% if idp_account_url %} + + {% endif %} + {% else %} + {% if idp_registration_url %} + + + + Pas de compte ? + Enregistrez-vous ! + + {% else %} + + Connexion / Inscription + + {% endif %} + {% endif %} {% end_skeleton_extra_placeholder %} {% endblock %} diff --git a/templates/variants/rouen/theme.html b/templates/variants/rouen/theme.html new file mode 100644 index 0000000..8b23487 --- /dev/null +++ b/templates/variants/rouen/theme.html @@ -0,0 +1,163 @@ + +{% load i18n static %} + + + + + + {% firstof global_title "Compte Citoyen" %} {% block title %}{% endblock %} + {% if meta_robots %} + + {% elif environment_label %} + + {% endif %} + {% if meta_description %} + + {% endif %} + {% if favicon %} + + {% endif %} + {% if theme_color %} + + + {% endif %} + {% if pwa_display == "standalone" or pwa_display == "fullscreen" %} + + {% endif %} + {% block extra_top_head %} + {% endblock %} + {{ media }} + {% if css_variant %} + + {% else %} + + {% endif %} + {% block extra_css %}{% endblock %} + {% block extra_scripts %}{% endblock %} + + + +
+
+
+ {% block header-pre %}{% endblock %} + + {% block header-post %}{% endblock %} +
+
+ + {% block nav %} + + {% endblock %} + + {% block before-main-content %}{% endblock %} + +
+
+ + {% block messages %} + {% if messages %} + + {% endif %} + {% endblock %} + + {% block content-pre %}{% endblock %} +
+ {% block content-top %}{% endblock %} + {% block content %}{% endblock %} + {% block content-bottom %}{% endblock %} +
+ {% block content-post %}{% endblock %} + +
+ +
+
+ +
+ {% block footer-top %}{% endblock %} + + {% block footer-bottom %}{% endblock %} +
+
+ {% if environment_label %}{{ environment_label }}{% endif %} + Retour en haut de page + {% include "includes/tracking.html" %} + {% block body-bottom %}{% endblock %} + + + \ No newline at end of file diff --git a/templates/variants/rouen/wcs/base.html b/templates/variants/rouen/wcs/base.html new file mode 100644 index 0000000..5dc019b --- /dev/null +++ b/templates/variants/rouen/wcs/base.html @@ -0,0 +1,41 @@ +{% extends theme_base %} +{% load static %} + +{% block extra-top-head %} +{{script|safe}} + +{% endblock %} + +{% block extra-body-class %} + {{ block.super }} + {% if form_slug %} + {% if category_slug %}formdef-category-{{category_slug}}{% endif %} + formdef-{{form_slug}} + {% endif %} + + {% if '"steps-1"' in steps|safe %} + one-step + {% else %} + multi-steps + {% endif %} + + {% if 'tracking-code' in gauche|safe %} + with-tracking-code + {% else %} + without-tracking-code + {% endif %} +{% endblock %} + +{% block placeholder-content %} + {% block content %} + {% if gauche %} +
{{ gauche|safe }}
+ {% endif %} + +
+ {% if title %}

{{ title }}

{% endif %} + + {% block body %}{{ body|safe }}{% endblock %} +
+ {% endblock %} +{% endblock %}