From bbacd4546bc750ea9c7255d40c6d1e78c5d38cab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mart=C3=ADn=20Gonz=C3=A1lez?= Date: Thu, 1 Dec 2016 13:37:40 +0100 Subject: [PATCH] Legislation process markup and styles --- app/assets/stylesheets/application.scss | 2 + app/assets/stylesheets/legislation.scss | 131 +++++++++++ .../stylesheets/legislation_process.scss | 205 ++++++++++++++++++ app/assets/stylesheets/participation.scss | 2 +- app/views/sandbox/legislation_debate.html.erb | 159 ++++++++++++++ app/views/sandbox/legislation_draft.html.erb | 93 ++++++++ app/views/sandbox/legislation_home.html.erb | 67 ++++++ 7 files changed, 658 insertions(+), 1 deletion(-) create mode 100644 app/assets/stylesheets/legislation.scss create mode 100644 app/assets/stylesheets/legislation_process.scss create mode 100644 app/views/sandbox/legislation_debate.html.erb create mode 100644 app/views/sandbox/legislation_draft.html.erb create mode 100644 app/views/sandbox/legislation_home.html.erb diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 36e055a4e..6a773e38f 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -6,6 +6,8 @@ @import "admin"; @import "layout"; @import "participation"; +@import "legislation"; +@import "legislation_process"; @import "custom"; @import "c3"; @import "annotator.min"; diff --git a/app/assets/stylesheets/legislation.scss b/app/assets/stylesheets/legislation.scss new file mode 100644 index 000000000..389d92e03 --- /dev/null +++ b/app/assets/stylesheets/legislation.scss @@ -0,0 +1,131 @@ +// Table of Contents +// +// 01. Hero +// 02. Sidebar menu +// 03. Legislation cards +// + +// 01. Hero +// ----------------- +.legislation-hero { + margin-bottom: 4rem; +} + +.brand-heading { + background: $brand; + + .column { + padding-top: 10rem; + padding-bottom: 10rem; + + h4 { + font-weight: 400; + text-align: center; + color: white; + } + } +} + +// 02. Sidebar menu +// ----------------- +.legislation-categories { + ul { + list-style: none; + padding-left: 0; + margin-left: 0; + + li { + cursor: pointer; + + @include breakpoint(medium) { + max-width: 80%; + } + + h4 { + font-weight: 400; + color: $text-medium; + margin-bottom: 3rem; + transition: color 0.25s ease-out, color 0.25s ease-out; + } + + &:hover h4, &:active h4 { + color: $brand; + } + } + + .active h4 { + font-weight: 700; + color: $brand; + padding-bottom: 0.5rem; + border-bottom: 2px solid $brand; + } + } +} + +// 03. Legislation cards +// ----------------- +.legislation { + margin: 0 0 4rem 0; +} + +.legislation { + background: white; + border: 1px solid; + border-color: #e5e6e9 #dfe0e4 #d0d1d5; + border-radius: 0; + box-shadow: 0px 1px 3px 0 #DEE0E3; + min-height: 12rem; + padding: 2rem 0 0 0; +} + +.button-legislation { + background: white; + border: 1px solid #2C9BE5; + color: #2C9BE5; + display: inline-block; + font-weight: 700; + margin-top: rem-calc(12); + + .icon-comments { + margin-right: 0.5rem; + color: $text-medium; + transition: color 0.25s ease-out, color 0.25s ease-out; + } + + &:hover, &:active { + border: 1px solid lighten(#2C9BE5, 25%); + cursor: pointer; + } + + &:hover .icon-comments, &:active .icon-comments { + color: white; + } +} + +.legislation-text { + margin-bottom: 1rem; + + h3 a { + color: $black; + } +} + +.legislation-calendar-info p { + font-size: $small-font-size; + color: $text-medium; + margin-bottom: 0; +} + +.legislation-calendar { + background: #E5ECF2; + padding-top: 1rem; + + h5 { + margin-bottom: 0; + color: #61686E; + } + + p { + font-size: $small-font-size; + } +} diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss new file mode 100644 index 000000000..31045f649 --- /dev/null +++ b/app/assets/stylesheets/legislation_process.scss @@ -0,0 +1,205 @@ +// Table of Contents +// +// 01. Utils +// 02. Hero +// 03. Legislation process +// 04. Debate list +// 05. Legislation draft +// + +// 01. Utils +// ----------------- +.grey { + color: #878787; +} + +.grey-heading { + background: #E6E6E6; +} + +.center { + text-align: center; +} + +.right { + text-align: right; +} + +.strong { + font-weight: 700; +} + +// 02. Hero +// ----------------- +.legislation-hero { + padding-top: 1.5rem; + + @include breakpoint(medium) { + padding-top: 3.5rem; + } + + h4 { + color: #878787; + text-transform: uppercase; + font-weight: 400; + } + + ul { + list-style: none; + margin-left: 0; + + li:before { + vertical-align: text-bottom; + padding-right: 0.5rem; + content: "■"; + color: #8AA8BE; + } + } + + .half-gradient { + /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e6e6e6+0,e6e6e6+50,ffffff+50 */ + background: #e6e6e6; /* Old browsers */ + background: -moz-linear-gradient(top, #e6e6e6 0%, #e6e6e6 50%, #ffffff 50%); /* FF3.6-15 */ + background: -webkit-linear-gradient(top, #e6e6e6 0%,#e6e6e6 50%,#ffffff 50%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to bottom, #e6e6e6 0%,#e6e6e6 50%,#ffffff 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ + } + + .center .button { + background: #004A83; + margin-bottom: 0; + } + + .headline { + margin-bottom: 1rem; + } + + .description { + margin-bottom: 1rem; + } + + .button-subscribe { + margin-top: 1.5rem; + + h3 { + margin-bottom: 0; + } + + p { + margin-bottom: 0; + font-size: $small-font-size; + } + + &:hover h3 { + color: white; + } + + @include breakpoint(medium) { + padding: 0.5em 1em; + margin-top: 3rem; + } + } + + @include breakpoint(medium) { + .headline { + margin-bottom: 4rem; + } + + .description { + margin-bottom: 0; + } + } +} + +// 03. Legislation process +// ----------------- +.legislation-process-categories { + list-style: none; + margin-left: 0; + padding-left: 0; + border-bottom: 1px solid $medium-gray; + + li { + cursor: pointer; + margin-left: 3rem; + display: inline-block; + + a, + h4 { + color: #6D6D6D; + margin-bottom: 0; + } + a:hover { + text-decoration: none; + } + } + + .active { + border-bottom: 2px solid $brand; + } + + .active h4 { + // padding-bottom: 0.4rem; + } +} + +// 04. Debate list +// ----------------- +.debate-chooser { + padding: 2rem 3rem; + + .debate-block { + margin-bottom: 2.5rem; + + .debate-type { + text-transform: uppercase; + color: #178DCC; + font-weight: 700; + font-size: $small-font-size; + + .icon-debates { + margin-left: 0.2rem; + } + } + + .debate-title a { + color: $brand; + } + + .debate-meta, + .debate-meta a { + font-size: $small-font-size; + color: #6D6D6D; + + .icon-comments { + margin-right: 0.2rem; + } + } + } + + .debate-info { + padding: 1rem; + background: #F4F4F4; + } +} + +// 05. Legislation draft +// ----------------- +.debate-draft { + padding: 10rem 2rem 15rem 2rem; + display: block; + background: #F2F2F2; + + button { + height: 90px; + + h3 { + margin-bottom: 0; + } + + p { + margin-bottom: 0; + font-size: $small-font-size; + } + } +} diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index a5e1d7df2..79702b138 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -492,7 +492,7 @@ } } -.debate, .proposal, .investment-project { +.debate, .proposal, .investment-project, .legislation { margin: $line-height/4 0; .panel { diff --git a/app/views/sandbox/legislation_debate.html.erb b/app/views/sandbox/legislation_debate.html.erb new file mode 100644 index 000000000..92d018965 --- /dev/null +++ b/app/views/sandbox/legislation_debate.html.erb @@ -0,0 +1,159 @@ +
+
+
+

Colabora en la elaboración de la normativa sobre

+

+ Licencias urbanísticas, declaraciones responsables y comunicaciones previas +

+
+
+ +

Suscríbete al proceso

+

Recibe notificaciones clave sobre el proceso

+ +
+
+ +
+
+

En qué consiste

+

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.

+
+
+

A quién va dirigido

+
    +
  • Ciudadanos con vivienda en propiedad
    • +
  • Profesionales de la construcción y reformas
    • +
  • Empresarios con locales comerciales
    • +
+
+
+

Cómo puedes participar

+
    +
  • Participa en el debate previo para identificar los problemas a solucionar, la necesidad de esta normativa, sus objetivos y posibles soluciones alternativas.
    • +
  • Después del debate el Ayuntamiento presentará un borrador del texto al cual podrás realizar comentarios y alegaciones.
    • +
+
+
+ +
+ + Más información y contexto + +
+
+ +
+ + +
+
+
+
+ +
+
+ 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?

+
+
+ Sin comentarios · 27/11/2016 +
+
+ +
+
+ Debate +
+
+

¿En el ámbito de las autorizaciones urbanísticas, es partidario de que se modifique el papel que juegan las empresas privadas acreditadas (ECU) para que también puedan facilitar las gestiones en las obras que realicen los particulares en sus viviendas u otras actuaciones similares?

+
+
+ Sin comentarios · 27/11/2016 +
+
+ +
+
+ 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?

+
+
+ Sin comentarios · 27/11/2016 +
+
+ +
+
+ Debate +
+
+

¿En el ámbito de las autorizaciones urbanísticas, es partidario de que se modifique el papel que juegan las empresas privadas acreditadas (ECU) para que también puedan facilitar las gestiones en las obras que realicen los particulares en sus viviendas u otras actuaciones similares?

+
+
+ Sin comentarios · 27/11/2016 +
+
+ +
+
+ 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?

+
+
+ Sin comentarios · 27/11/2016 +
+
+ +
+
+ Debate +
+
+

¿En el ámbito de las autorizaciones urbanísticas, es partidario de que se modifique el papel que juegan las empresas privadas acreditadas (ECU) para que también puedan facilitar las gestiones en las obras que realicen los particulares en sus viviendas u otras actuaciones similares?

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

Colabora en la elaboración de la normativa sobre

+

+ Licencias urbanísticas, declaraciones responsables y comunicaciones previas +

+
+
+ +

Suscríbete al proceso

+

Recibe notificaciones clave sobre el proceso

+ +
+
+ +
+
+

En qué consiste

+

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.

+
+
+

A quién va dirigido

+
    +
  • Ciudadanos con vivienda en propiedad
    • +
  • Profesionales de la construcción y reformas
    • +
  • Empresarios con locales comerciales
    • +
+
+
+

Cómo puedes participar

+
    +
  • Participa en el debate previo para identificar los problemas a solucionar, la necesidad de esta normativa, sus objetivos y posibles soluciones alternativas.
    • +
  • Después del debate el Ayuntamiento presentará un borrador del texto al cual podrás realizar comentarios y alegaciones.
    • +
+
+
+ +
+ + Más información y contexto + +
+
+ +
+ + +
+
+
+ +
+

Esta fase del proceso todavía no está abierta

+

Suscríbete al proceso para recibir un aviso en el momento en que se abra.

+
+ +
+ +
+ +
+
+
+
diff --git a/app/views/sandbox/legislation_home.html.erb b/app/views/sandbox/legislation_home.html.erb new file mode 100644 index 000000000..09ea887c1 --- /dev/null +++ b/app/views/sandbox/legislation_home.html.erb @@ -0,0 +1,67 @@ +
+
+
+

+ PROCESOS DESTACADOS +

+
+
+
+ +
+
+
    +

  • Procesos activos

    • +

  • Próximamente

    • +

  • Terminados

    • +
+
+ +
+
+ +
+
+
+
+

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

+
+
+ + +
+ +
+
+

Fechas clave:

+
+
+ +
+
+
Debate previo
+

15 nov 2016 - 15 dic 2016

+
+
+
Publicación borrador
+

1 dic 2016

+
+
+
Alegaciones
+

1 dic 2016 - 15 dic 2016

+
+
+
Publicación resultados
+

15 feb 2017

+
+
+
+ +
+
+