consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Legislation process debate markup

Browse Source
This commit is contained in:
Martín González
2016-12-05 16:17:22 +01:00
committed by Amaia Castro
parent bbacd4546b
commit 23211337ef
5 changed files with 229 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
app/assets/stylesheets/legislation_process.scss
View File

@@ -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;

3
app/assets/stylesheets/participation.scss
View File

@@ -294,7 +294,8 @@
.debate-show,
.proposal-show,
.investment-project-show {
.investment-project-show,
.debate-quiz {
p {
word-wrap: break-word;

7
app/views/sandbox/legislation_debate.html.erb
View File

@@ -75,13 +75,12 @@
<div class="row">
<div class="small-12 medium-9 column">
<div class="debate-list">
<div class="debate-block">
<div class="debate-type">
Debate <span class="icon-debates" aria-hidden="true"></span>
</div>
<div class="debate-title">
<h4><a href="#">¿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?</a></h4>
<h4><a href="legislation_debate_quiz.html">¿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?</a></h4>
</div>
<div class="debate-meta">
<span class="icon-comments" aria-hidden="true"></span> <span class="debate-comments"><a href="#">Sin comentarios</a></span> · <span class="debate-date">27/11/2016
@@ -147,13 +146,13 @@
<span class="icon-comments" aria-hidden="true"></span> <span class="debate-comments"><a href="#">Sin comentarios</a></span> · <span class="debate-date">27/11/2016
</div>
</div>
</div>
</div>
<div class="small-12 medium-3 column">
<div class="debate-info">Realiza tus aportaciones al debate previo participando en los siguientes temas.</div>
</div>
</div>
</div>
</div>
</div>

57
app/views/sandbox/legislation_debate_quiz.html.erb Normal file
View File

@@ -0,0 +1,57 @@
<section class="debate-quiz">
<div class="quiz-header row small-collapse">
<div class="small-12 medium-9 column">
<div class="quiz-title">
<p class="quiz-header-title">Proceso de legislación colaborativa</p>
<h4><a href="legislation_debate.html">Licencias urbanísticas, declaraciones responsables y comunicaciones previas</a></h4>
</div>
</div>
<div class="small-12 medium-3 column">
<a class="quiz-next-link" href="#"><div class="quiz-next">Siguiente pregunta <span class="icon-angle-right" aria-hidden="true"></span></div></a>
</div>
</div>
<div class="row">
<div class="small-12 medium-9 column">
<h3 class="quiz-question">¿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?</h3>
<div class="debate-questions">
<form class="controls-stacked">
<label class="active control radio">
<input id="quiz-1" name="radio" type="radio">
<span class="control-indicator"></span>
Sí
</label>
<label class="control radio">
<input id="quiz-2" name="radio" type="radio">
<span class="control-indicator"></span>
No
</label>
<label class="control radio">
<input id="quiz-3" name="radio" type="radio">
<span class="control-indicator"></span>
No tengo información suficiente
</label>
</form>
</div>
</div>
<aside class="small-12 medium-3 column">
<div id="social-share" class="sidebar-divider"></div>
<h3>Compartir</h3>
<div class="social-share-full">
<div class="social-share-button" data-title="Soluta sed sapiente dolores. #consul_dev" data-img="" data-url="" data-desc="" data-via="">
<a rel="nofollow " data-site="twitter" class="ssb-icon ssb-twitter" onclick="return SocialShareButton.share(this);" title="Compartir en Twitter" href="#"><span class="sr-only">twitter</span></a>
<a rel="nofollow " data-site="facebook" class="ssb-icon ssb-facebook" onclick="return SocialShareButton.share(this);" title="Compartir en Facebook" href="#"><span class="sr-only">facebook</span></a>
<a rel="nofollow " data-site="google_plus" class="ssb-icon ssb-google_plus" onclick="return SocialShareButton.share(this);" title="Compartir en Google+" href="#"><span class="sr-only">google_plus</span></a>
</div>
</div>
</div>
</div>
</section>
<hr />
<div class="row">
<div class="small-12 column">
COMENTARIOS
</div>
</div>

4
app/views/sandbox/legislation_home.html.erb
View File

@@ -24,13 +24,13 @@
<div class="column row legislation-text">
<div class="small-12 medium-8 column">
<div class="legislation-text">
<h3><a href="/proposals/6-soluta-sed-sapiente-dolores">Licencias urbanísticas, declaraciones responsables y comunicaciones previas</a></h3>
<h3><a href="legislation_debate.html">Licencias urbanísticas, declaraciones responsables y comunicaciones previas</a></h3>
<p>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</p>
</div>
</div>
<div id="proposal_6_votes" class="small-12 medium-4 column">
<a class="button button-legislation big expanded" title="Apoyar esta propuesta" data-remote="true" rel="nofollow" data-method="post" href="/proposals/6-soluta-sed-sapiente-dolores/vote?value=yes">
<a class="button button-legislation big expanded" title="Apoyar esta propuesta" href="legislation_debate.html">
<span class="icon-comments"></span>&nbsp; Ver últimas aportaciones
</a>
</div>