From 23211337efb701d6fab02a2d1a5e9def446cbedf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mart=C3=ADn=20Gonz=C3=A1lez?= Date: Mon, 5 Dec 2016 16:17:22 +0100 Subject: [PATCH] Legislation process debate markup --- .../stylesheets/legislation_process.scss | 186 ++++++++++++++++-- app/assets/stylesheets/participation.scss | 3 +- app/views/sandbox/legislation_debate.html.erb | 7 +- .../sandbox/legislation_debate_quiz.html.erb | 57 ++++++ app/views/sandbox/legislation_home.html.erb | 4 +- 5 files changed, 229 insertions(+), 28 deletions(-) create mode 100644 app/views/sandbox/legislation_debate_quiz.html.erb diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss index 31045f649..2ba1a4685 100644 --- a/app/assets/stylesheets/legislation_process.scss +++ b/app/assets/stylesheets/legislation_process.scss @@ -4,7 +4,8 @@ // 02. Hero // 03. Legislation process // 04. Debate list -// 05. Legislation draft +// 05. Debate quiz +// 06. Legislation draft // // 01. Utils @@ -33,9 +34,11 @@ // ----------------- .legislation-hero { padding-top: 1.5rem; + margin-bottom: 2rem; @include breakpoint(medium) { padding-top: 3.5rem; + margin-bottom: 4rem; } h4 { @@ -72,14 +75,23 @@ .headline { margin-bottom: 1rem; + + @include breakpoint(medium) { + margin-bottom: 4rem; + + } } .description { margin-bottom: 1rem; + + @include breakpoint(medium) { + margin-bottom: 0; + } } .button-subscribe { - margin-top: 1.5rem; + margin-top: 1rem; h3 { margin-bottom: 0; @@ -99,16 +111,6 @@ margin-top: 3rem; } } - - @include breakpoint(medium) { - .headline { - margin-bottom: 4rem; - } - - .description { - margin-bottom: 0; - } - } } // 03. Legislation process @@ -121,32 +123,51 @@ li { cursor: pointer; - margin-left: 3rem; + margin-left: 1rem; display: inline-block; + margin-bottom: 1rem; + + @include breakpoint(medium) { + margin-left: 3rem; + margin-bottom: 0; + } a, h4 { color: #6D6D6D; margin-bottom: 0; } - a:hover { - text-decoration: none; + + a { + &:hover, &:active { + text-decoration: none; + } + + p { + margin-bottom: 0; + + @include breakpoint(medium) { + margin-bottom: 1rem; + } + } } } .active { border-bottom: 2px solid $brand; } - - .active h4 { - // padding-bottom: 0.4rem; - } } // 04. Debate list // ----------------- .debate-chooser { - padding: 2rem 3rem; + padding: 2rem 1rem; + + @include breakpoint(medium) { + .debate-chooser { + padding: 2rem 3rem; + } + } .debate-block { margin-bottom: 2.5rem; @@ -183,7 +204,130 @@ } } -// 05. Legislation draft +// 05. Debate quiz +// ----------------- +.debate-quiz { + + .quiz-header { + margin-bottom: 2rem; + + .quiz-title, .quiz-next { + padding: 1rem; + height: 6rem; + } + + .quiz-title { + background: #E5ECF2; + + .quiz-header-title { + margin-bottom: 0; + text-transform: uppercase; + color: #979B9F; + font-weight: 700; + font-size: $small-font-size; + } + } + + h4 a { + color: $brand; + } + + h4 a:hover { + text-decoration: none; + } + + .quiz-next-link { + + &:hover, &:active { + text-decoration: none; + } + + .quiz-next { + background: #CCDBE5; + font-weight: 700; + color: $brand; + font-size: $small-font-size; + text-align: right; + text-transform: uppercase; + transition: background 0.25s ease-out, background 0.25s ease-out; + + .icon-angle-right { + vertical-align: sub; + } + + &:hover, &:active { + text-decoration: none; + background: $brand; + color: white; + + .icon-angle-right { + color: white; + } + } + } + } + } + + .quiz-question { + margin-bottom: 2rem; + } + + .debate-questions { + list-style: none; + + .control { + position: relative; + display: inline-block; + color: #555; + cursor: pointer; + background: #fff; + border: 1px solid $border; + border-radius: 4px; + padding: 0.75rem 2.5rem; + margin-right: 1.5rem; + } + + .active { + background: #CCDBE6; + border: none; + } + + .control input { + position: absolute; + opacity: 0; + z-index: -1; + } + + .control input:checked ~ .control-indicator { + background-color: $brand; + border: none; + } + + .radio .control-indicator { + border-radius: 50%; + } + + .control-indicator { + position: absolute; + top: 0.95rem; + left: 0.95rem; + display: block; + width: 1rem; + height: 1rem; + line-height: 1rem; + font-size: 65%; + text-align: center; + border: 2px solid #9C9C9C; + pointer-events: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + } +} + +// 06. Legislation draft // ----------------- .debate-draft { padding: 10rem 2rem 15rem 2rem; diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 79702b138..9af22d4ab 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -294,7 +294,8 @@ .debate-show, .proposal-show, -.investment-project-show { +.investment-project-show, +.debate-quiz { p { word-wrap: break-word; diff --git a/app/views/sandbox/legislation_debate.html.erb b/app/views/sandbox/legislation_debate.html.erb index 92d018965..adb5feff2 100644 --- a/app/views/sandbox/legislation_debate.html.erb +++ b/app/views/sandbox/legislation_debate.html.erb @@ -75,13 +75,12 @@
-
Debate
-

¿Qué medidas podría adoptar el Ayuntamiento de Madrid para facilitar y agilizar la autorización para la realización de obras y la apertura de locales comerciales o empresariales?

+

¿Qué medidas podría adoptar el Ayuntamiento de Madrid para facilitar y agilizar la autorización para la realización de obras y la apertura de locales comerciales o empresariales?

Sin comentarios · 27/11/2016 @@ -147,13 +146,13 @@ Sin comentarios · 27/11/2016
-
+
Realiza tus aportaciones al debate previo participando en los siguientes temas.
-
+ diff --git a/app/views/sandbox/legislation_debate_quiz.html.erb b/app/views/sandbox/legislation_debate_quiz.html.erb new file mode 100644 index 000000000..d4411b3bd --- /dev/null +++ b/app/views/sandbox/legislation_debate_quiz.html.erb @@ -0,0 +1,57 @@ +
+
+
+
+

Proceso de legislación colaborativa

+

Licencias urbanísticas, declaraciones responsables y comunicaciones previas

+
+
+
+
Siguiente pregunta
+
+
+
+
+

¿Considera necesario realizar una nueva regulación para facilitar y simplificar las obras en viviendas, o la modificación y apertura de locales comerciales o empresariales?

+
+
+ + + +
+
+
+ +
+ +
+ +
+ +
+
+ COMENTARIOS +
+
diff --git a/app/views/sandbox/legislation_home.html.erb b/app/views/sandbox/legislation_home.html.erb index 09ea887c1..c054788b7 100644 --- a/app/views/sandbox/legislation_home.html.erb +++ b/app/views/sandbox/legislation_home.html.erb @@ -24,13 +24,13 @@
-

Licencias urbanísticas, declaraciones responsables y comunicaciones previas

+

Licencias urbanísticas, declaraciones responsables y comunicaciones previas

Se va a modificar la regulación del procedimiento para la autorización de obras y la apertura de locales comerciales o empresariales para simplificar y agilizar trámites