Merge pull request #594 from AyuntamientoMadrid/refactor_css

Refactor css

app/assets/stylesheets/application.scss

@@ -4,7 +4,6 @@
 @import "icons";
 @import "variables";
 @import "admin";
-@import "participacion";
+@import "layout";
-@import "debates";
+@import "participation";
-@import "proposals";
 @import "c3";

app/assets/stylesheets/layout.scss

@@ -17,6 +17,8 @@
 // 15. Social
 // 16. Pages
 // 17. Verification
+// 18. Comments
+// 19. Flags
 //
 
 // 01. Variables
@@ -442,7 +444,7 @@ header {
 }
 
 .contain-to-grid {
-  background: rgba(0,0,0,.5);
+  background: #112E51;
 }
 
 .top-bar {
@@ -772,15 +774,14 @@ footer {
 // 06. Tags
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
-.tags {
+.tags, .tag-cloud {
 
   a {
     background: $border;
-    border-radius: rem-calc(30);
+    border-radius: rem-calc(6);
     color: #4d4d4d;
     display: inline-block;
     font-size: rem-calc(13);
-    font-weight: bold;
     line-height: rem-calc(22);
     margin-bottom: rem-calc(8);
     padding: 0 rem-calc(8);
@@ -794,7 +795,6 @@ footer {
 }
 
 .tag-cloud {
-  @extend .tags;
 
   h3 {
     border-top: 2px solid $brand;
@@ -944,14 +944,13 @@ form {
     margin: rem-calc(12) 0 rem-calc(12) rem-calc(6);
   }
 
-  .note {
+  .note, .note-marked {
     display: block;
     font-size: rem-calc(13);
     margin-bottom: rem-calc(12);
   }
 
   .note-marked {
-    @extend .note;
     background: yellow;
     display: inline-block;
 
@@ -1137,16 +1136,12 @@ label.error, label.error a {
   }
 }
 
-img.avatar, img.admin-avatar, img.moderator-avatar {
+img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
   border-radius: rem-calc(1000);
   position: relative;
 }
 
-img.initialjs-avatar {
+.author-deleted, .user-deleted {
-  @extend .avatar;
-}
-
-.author-deleted {
   background-color: rgba(255,255,255,.5);
   color: rgba(0,0,0,.4);
   font-size: rem-calc(40);
@@ -1156,7 +1151,6 @@ img.initialjs-avatar {
 }
 
 .user-deleted {
-  @extend .author-deleted;
   top: -9px;
 }
 
@@ -1197,7 +1191,7 @@ img.initialjs-avatar {
 // 11. Filters & search
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
-.filters {
+.filters, .search-results {
 
   h2 {
     display: inline-block;
@@ -1248,10 +1242,6 @@ img.initialjs-avatar {
   }
 }
 
-.search-results {
-  @extend .filters;
-}
-
 .search-form {
 
   h3 {
@@ -1378,6 +1368,7 @@ table {
   }
 
   &:hover {
+    background: white;
     color: #40A2D1;
   }
 }
@@ -1417,6 +1408,7 @@ table {
   }
 
   &:hover {
+    background: white;
     color: #354F88;
   }
 }
@@ -1456,6 +1448,7 @@ table {
   }
 
   &:hover {
+    background: white;
     color: #CE3E26;
   }
 }
@@ -1498,27 +1491,72 @@ table {
   }
 
   .social-share-button-twitter {
-    @extend .social-share-button-twitter;
     background: none;
     color: white;
     height: rem-calc(24);
+    position: relative;
     width: rem-calc(48);
+
+    &:before {
+      content: "f";
+      font-family: "icons" !important;
+      font-size: rem-calc(24);
+      left: 50%;
+      line-height: $line-height*2;
+      margin-left: rem-calc(-11);
+      position: absolute;
+      top: 0;
+    }
+
+    &:hover {
+      color: #40A2D1;
+    }
   }
 
   .social-share-button-facebook {
-    @extend .social-share-button-facebook;
     background: none;
     color: white;
     height: rem-calc(24);
+    position: relative;
     width: rem-calc(48);
+
+    &:before {
+      content: "A";
+      font-family: "icons" !important;
+      font-size: rem-calc(24);
+      left: 50%;
+      line-height: $line-height*2;
+      margin-left: rem-calc(-11);
+      position: absolute;
+      top: 0;
+    }
+
+    &:hover {
+      color: #354F88;
+    }
   }
 
   .social-share-button-google_plus {
-    @extend .social-share-button-google_plus;
     background: none;
     color: white;
     height: rem-calc(24);
+    position: relative;
     width: rem-calc(48);
+
+    &:before {
+      content: "B";
+      font-family: "icons" !important;
+      font-size: rem-calc(24);
+      left: 50%;
+      line-height: $line-height*2;
+      margin-left: rem-calc(-11);
+      position: absolute;
+      top: 0;
+    }
+
+    &:hover {
+      color: #CE3E26;
+    }
   }
 }
 
@@ -1727,3 +1765,170 @@ table {
     }
   }
 }
+
+// 18. Comments
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+.comments {
+  background: $white;
+  background-repeat: repeat-x;
+  padding-top: rem-calc(24);
+  padding-bottom: rem-calc(96);
+
+  h2 {
+    margin: 0;
+    font-weight: bold;
+
+    span {
+      font-size: rem-calc(18);
+      font-weight: normal;
+      opacity: .8;
+    }
+  }
+
+  .comment {
+    margin: rem-calc(6) 0;
+
+    p {
+      margin-bottom: 0;
+    }
+
+    .comment-votes {
+      color: $text-medium;
+      font-weight: lighter;
+      line-height: rem-calc(24);
+      margin: rem-calc(10) rem-calc(12) rem-calc(6) 0;
+
+      a {
+        color: $text-light;
+        display: inline-block;
+        vertical-align: top;
+
+        &:hover {
+          color: $text-medium;
+        }
+      }
+
+      [class^="icon-"] {
+        font-size: rem-calc(20);
+        vertical-align: middle;
+      }
+    }
+
+    .comment-body {
+      margin-left: rem-calc(42);
+
+      p {
+        font-size: rem-calc(14);
+      }
+
+      .reply {
+        background: white;
+        border: 1px solid $border;
+        font-size: rem-calc(12);
+        margin: rem-calc(6) 0;
+        padding: rem-calc(6);
+
+        .divider {
+          color: $text-light;
+        }
+      }
+
+      .comment-user {
+        margin-top: rem-calc(6);
+        padding: rem-calc(6) 0;
+        overflow: hidden;
+
+        @each $n in ("1", "2", "3","4", "5") {
+          &.level-#{$n} {
+            @if $n == "5" {
+              background: $comment-level-5;
+              padding: rem-calc(6) rem-calc(12);
+            }
+            @elseif $n == "1" {
+              background: none;
+              padding: rem-calc(6) rem-calc(12);
+            }
+            @else {
+              background: $comment-official;
+              padding: rem-calc(6) rem-calc(12);
+            }
+          }
+        }
+
+        &.is-author {
+          background: $comment-author;
+          padding: rem-calc(6) rem-calc(12);
+        }
+
+        &.is-admin, &.is-moderator {
+          background: $comment-admin;
+          padding: rem-calc(6) rem-calc(12);
+        }
+
+        &.level-5 {
+          background: $comment-level-5;
+          padding: rem-calc(6) rem-calc(12);
+        }
+      }
+    }
+
+    .is-deleted {
+      background: $deleted;
+      margin-left: rem-calc(42);
+      padding: rem-calc(6) rem-calc(12);
+    }
+
+    .comment-children {
+      border-left: 1px dashed $border;
+      margin-left: rem-calc(42);
+      padding-left: rem-calc(6);
+
+      @media only screen and (max-width: 40em) {
+        margin-left: rem-calc(16);
+      }
+    }
+
+    .comment-info {
+      color: $text-light;
+      font-size: rem-calc(13);
+      font-weight: lighter;
+      margin-top: rem-calc(6);
+      vertical-align: middle;
+
+      span.user-name {
+        color: $text;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.faded {
+  opacity: 0.4;
+}
+
+// 19. Flags
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+.flag-content {
+
+  .button {
+    background: none;
+    margin-bottom: 0;
+    padding: 0;
+  }
+}
+
+.flag-disable, .flag-active {
+  line-height: rem-calc(24);
+  vertical-align: middle;
+}
+
+.flag-disable {
+  color: $text-medium;
+}
+
+.flag-active {
+  color: $delete;
+}

app/assets/stylesheets/proposals.scss

@@ -1,776 +0,0 @@
-// Table of Contents
-//
-// 01. Debates
-// 02. Index
-//  02.1. Featured
-//  02.2. List
-// 03. Show
-// 04. New
-// 05. Comments
-// 06. Flags
-//
-
-// 01. Proposals
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-.button-proposal {
-  background: $proposals;
-
-  &:hover {
-    background: $proposals-border;
-  }
-}
-
-@mixin supports {
-  background: $proposals;
-  border-top: 1px solid $proposals-border;
-  margin: 0 rem-calc(-12);
-  padding: rem-calc(14) rem-calc(12);
-  position: relative;
-
-  .progress {
-    background-color: rgba(255,255,255,.8);
-    height: rem-calc(12);
-    margin-bottom: rem-calc(6);
-    margin-top: rem-calc(4);
-
-    .meter {
-      background: $votes-like;
-    }
-  }
-
-  .percentage {
-    font-size: rem-calc(10);
-    color: $brand;
-    vertical-align: top;
-    position: absolute;
-    top: 17px;
-    right: 18px;
-  }
-
-  abbr {
-    color: white;
-
-    &[title] {
-      border-bottom: 1px dotted white;
-    }
-  }
-
-  .button-support {
-    background: white;
-    color: $proposals;
-    display: inline-block;
-    font-size: rem-calc(14);
-    margin-top: rem-calc(12);
-
-    &:hover {
-      background: $proposals-border;
-      color: white;
-      cursor: pointer;
-    }
-
-    &:active {
-      opacity: .75;
-    }
-  }
-
-  .total-supports {
-    color: white;
-    text-align: center;
-    font-size: rem-calc(14);
-
-    span {
-      display: block;
-      font-size: rem-calc(11);
-      opacity: .75;
-    }
-  }
-
-  .divider {
-    margin: 0 rem-calc(6);
-  }
-
-  .not-logged {
-    background: rgba(255,164,45,.9);
-    color: white;
-    height: 100%;
-    left: 0;
-    line-height: $line-height*2;
-    padding-top: rem-calc(12);
-    position: absolute;
-    text-align: center;
-    top: 0;
-    width: 100%;
-    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#222222', endColorstr='#222222'); /* IE */
-
-    a {
-      color: white;
-      text-decoration: underline;
-    }
-  }
-
-  .anonymous-votes, .organizations-votes {
-    background: $warning-bg;
-    color: $warning-color;
-    height: 100%;
-    left: 0;
-    line-height: $line-height;
-    padding-top: rem-calc(12);
-    position: absolute;
-    text-align: center;
-    top: 0;
-    width: 100%;
-
-    p {
-      color: $warning-color;
-      margin: 0 rem-calc(12);
-      text-align: left;
-    }
-
-    a {
-      color: $warning-color;
-      font-weight: bold;
-      text-decoration: underline;
-    }
-  }
-
-  .supported {
-    color: white;
-    margin-top: rem-calc(12);
-  }
-}
-
-// 02. Index
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// 02.1. Featured
-// - - - - - - - - - - - - -
-
-.proposal-featured {
-
-  .panel {
-    background: white;
-    border: 1px solid;
-    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
-    border-radius: rem-calc(3);
-    margin-bottom: rem-calc(24);
-    padding: rem-calc(24) rem-calc(12) 0 rem-calc(12);
-
-    .proposal-content {
-      min-height: rem-calc(353);
-    }
-
-    .label-proposal {
-      background: none;
-      clear: both;
-      color: $proposals;
-      display: block;
-      font-size: rem-calc(12);
-      font-weight: bold;
-      text-transform: uppercase;
-      padding-left: 0;
-      padding-top: 0;
-    }
-
-    .icon-proposals {
-      color: $proposals;
-      font-size: rem-calc(36);
-      line-height: $line-height;
-      position: absolute;
-      right: rem-calc(18);
-      top: rem-calc(12);
-    }
-
-    h3 {
-      font-weight: bold;
-      margin: rem-calc(8) 0 0 0;
-      min-height: rem-calc(65);
-
-      a {
-        clear: both;
-        color: $text;
-        display: block;
-        font-size: rem-calc(16);
-        line-height: $line-height;
-        text-transform: lowercase;
-
-        &:first-letter {
-          text-transform: uppercase;
-        }
-      }
-    }
-
-    .proposal-info {
-      color: $text-medium;
-      font-weight: lighter;
-      margin-bottom: 0;
-
-      .icon-comments {
-        font-size: rem-calc(16);
-        vertical-align: top;
-      }
-
-      a {
-        color: $text-medium;
-      }
-    }
-
-    .proposal-description {
-      color: $text;
-      font-size: rem-calc(13);
-      height: rem-calc(156);
-      line-height: $line-height;
-      margin-bottom: rem-calc(12);
-      margin-top: rem-calc(24);
-      overflow: hidden;
-      position: relative;
-
-      a {
-        color: $text;
-      }
-
-      ul, ol {
-
-        li {
-          font-size: rem-calc(13);
-          margin-bottom: rem-calc(12);
-        }
-      }
-    }
-
-    .truncate {
-      background: image-url('truncate.png');
-      background-repeat: repeat-x;
-      bottom: 0;
-      height: 24px;
-      position: absolute;
-      width: 100%;
-    }
-
-    p {
-      color: $text;
-      font-size: rem-calc(14);
-      line-height: $line-height;
-      margin-bottom: rem-calc(12);
-
-      &.debate-info {
-        font-size: rem-calc(13);
-      }
-    }
-  }
-
-  .supports {
-    @include supports;
-  }
-}
-
-// 02.2. List
-// - - - - - - - - - - - - -
-
-.proposals-list {
-
-  @media (min-width: $small-breakpoint) {
-    margin-bottom: rem-calc(48);
-  }
-}
-
-.proposal {
-  @extend .proposal-featured;
-  margin-bottom: 0;
-  margin-top: 0;
-
-  .panel {
-    border-radius: 0;
-    box-shadow: 0px 1px 3px 0 $border;
-    margin-bottom: rem-calc(12);
-    min-height: rem-calc(192);
-    padding-top: rem-calc(12);
-
-    @media (min-width: $small-breakpoint) {
-      margin-bottom: rem-calc(-1);
-      padding-bottom: rem-calc(12);
-    }
-
-    .label-proposal {
-      line-height: $line-height;
-      padding-bottom: 0;
-    }
-
-    h3 {
-      margin-top: 0;
-      min-height: rem-calc(48);
-    }
-
-    .proposal-content {
-      margin: 0;
-      min-height: rem-calc(180);
-
-      .tags {
-        display: block;
-      }
-    }
-
-    .icon-proposals {
-      font-size: rem-calc(18);
-      left: rem-calc(88);
-      top: 0;
-    }
-
-    .proposal-description {
-      height: rem-calc(72);
-      margin-top: 0;
-    }
-  }
-
-  .supports {
-    border: 1px solid $proposals-border;
-    margin: 0 rem-calc(-12);
-
-    @media (min-width: $small-breakpoint) {
-      border-top-left-radius: 3px;
-      border-bottom-left-radius: 3px;
-      margin: 0 rem-calc(-25) 0 rem-calc(12);
-    }
-
-    &:after {
-      content: none;
-      position: absolute;
-      display: block;
-      border-style: solid;
-      border-color: #664212 transparent transparent transparent;
-      bottom: rem-calc(-14);
-      border-left-width: 0;
-      border-right-color: transparent;
-      right: rem-calc(-1);
-      border-width: 1em 1em 0 0;
-
-      @media (min-width: $small-breakpoint) {
-        content: "";
-      }
-    }
-
-    .total-supports {
-      display: inline-block;
-      line-height: $line-height;
-      padding-top: rem-calc(12);
-      vertical-align: top;
-
-      @media (min-width: $small-breakpoint) {
-        display: block;
-        float: none;
-        margin-left: 0;
-        padding-top: 0;
-      }
-    }
-
-    .not-logged {
-      line-height: $line-height;
-      padding-top: rem-calc(24);
-    }
-
-    .anonymous-votes, .organizations-votes {
-      padding-top: rem-calc(24);
-    }
-
-    .divider {
-      display: none;
-    }
-
-    @media (min-width: $medium-breakpoint) {
-      .divider {
-        display: inline-block;
-      }
-    }
-  }
-}
-
-// 03. Show
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-.proposal-show {
-  padding-top: rem-calc(12);
-
-  .back {
-    @include back;
-  }
-
-  .icon-angle-left {
-   @extend .back;
-  }
-
-  h1 {
-    clear: both;
-    font-size: rem-calc(30);
-    font-weight: bold;
-    margin: 0;
-    text-transform: lowercase;
-
-    &:first-letter {
-      text-transform: uppercase;
-    }
-  }
-
-  h4 {
-    margin: rem-calc(12) 0;
-  }
-
-  .edit-proposal {
-    margin-bottom: 0;
-  }
-
-  .proposal-info {
-    clear: both;
-    color: $text-medium;
-    font-weight: lighter;
-    line-height: $line-height*2;
-    text-align: justify;
-
-    a {
-        color: $text-medium;
-    }
-
-    p {
-      font-size: rem-calc(15);
-      line-height: $line-height;
-      margin-bottom: 0;
-    }
-  }
-
-  .proposal-description {
-    font-size: rem-calc(15);
-    line-height: rem-calc(30);
-  }
-
-  ul, ol {
-    margin: rem-calc(12) 0;
-
-    li {
-      font-size: rem-calc(15);
-      margin-bottom: rem-calc(15);
-    }
-  }
-
-  .author-photo {
-    line-height: $line-height*2;
-    margin-right: rem-calc(6);
-    vertical-align: middle;
-    width: 32px;
-  }
-
-  .author {
-    color: $text;
-    font-weight: bold;
-  }
-
-  aside {
-
-    h3 {
-      border-top: 2px solid $brand;
-      display: inline-block;
-      font-size: rem-calc(16);
-      margin: -1px 0 rem-calc(12);
-      padding-top: rem-calc(6);
-      text-transform: uppercase;
-    }
-  }
-
-  blockquote {
-    margin-top: rem-calc(12);
-    padding-top: 0;
-    font-size: rem-calc(15);
-    line-height: rem-calc(30);
-  }
-
-  .document-link {
-    border: 1px solid $border;
-    display: block;
-    margin-top: rem-calc(12);
-    padding: rem-calc(12);
-    position: relative;
-
-    a {
-      padding-left: rem-calc(24);
-    }
-
-    :before {
-      color: #007BB7;
-      content: "G";
-      font-family: "icons" !important;
-      font-size: rem-calc(24);
-      left: rem-calc(6);
-      padding-top: rem-calc(3);
-      position: absolute;
-      top: 0;
-    }
-  }
-
-  .video-link {
-    @extend .document-link;
-
-    :before {
-      color: #CC181E;
-      content: "D";
-    }
-  }
-
-  .supports {
-    @include supports;
-    border: 0;
-    border-radius: 0;
-    margin: 0;
-
-    .total-supports {
-      display: block;
-      float: none;
-      line-height: $line-height;
-    }
-
-    .not-logged {
-      line-height: $line-height;
-      padding: rem-calc(24);
-    }
-  }
-
-  .leave-comment {
-    display: inline-block;
-    margin-top: rem-calc(24);
-  }
-
-  .tags {
-    display: block;
-    margin: rem-calc(24) 0;
-
-    a {
-      margin-right: rem-calc(6);
-    }
-  }
-}
-
-.bullet {
-  color: $border;
-}
-
-// 04. New
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-.proposal-new {
-  background: white;
-  padding-top: rem-calc(24);
-
-  .back {
-    @include back;
-  }
-
-  h1 {
-    clear: both;
-    font-size: rem-calc(36);
-    font-weight: bold;
-    line-height: $line-height*2;
-    margin-bottom: rem-calc(24);
-  }
-
-  .icon-proposals {
-    color: $proposals;
-    font-size: rem-calc(50);
-    line-height: $line-height;
-    opacity: .5;
-  }
-
-  h2 {
-    clear: both;
-    font-size: rem-calc(20);
-    font-weight: bold;
-    line-height: $line-height;
-    margin: 0;
-  }
-
-  .recommendations {
-    list-style-type: none;
-    margin-left: 0;
-    margin-top: rem-calc(24);
-
-    li {
-      font-size: rem-calc(12);
-      margin: rem-calc(12) 0;
-
-      &:before {
-        color: $proposals;
-        content: "l ";
-        font-family: "icons" !important;
-      }
-    }
-  }
-}
-
-.proposal-edit {
-  @extend .proposal-new;
-}
-
-// 05. Comments
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-.comments {
-  background: $white;
-  background-repeat: repeat-x;
-  padding-top: rem-calc(24);
-  padding-bottom: rem-calc(96);
-
-  h2 {
-    margin: 0;
-    font-weight: bold;
-
-    span {
-      font-size: rem-calc(18);
-      font-weight: normal;
-      opacity: .8;
-    }
-  }
-
-  .comment {
-    margin: rem-calc(6) 0;
-
-    p {
-      margin-bottom: 0;
-    }
-
-    .comment-votes {
-      color: $text-medium;
-      font-weight: lighter;
-      line-height: rem-calc(24);
-      margin: rem-calc(10) rem-calc(12) rem-calc(6) 0;
-
-      a {
-        color: $text-light;
-        display: inline-block;
-        vertical-align: top;
-
-        &:hover {
-          color: $text-medium;
-        }
-      }
-
-      [class^="icon-"] {
-        font-size: rem-calc(20);
-        vertical-align: middle;
-      }
-    }
-
-    .comment-body {
-      margin-left: rem-calc(42);
-
-      p {
-        font-size: rem-calc(14);
-      }
-
-      .reply {
-        background: white;
-        border: 1px solid $border;
-        font-size: rem-calc(12);
-        margin: rem-calc(6) 0;
-        padding: rem-calc(6);
-
-        .divider {
-          color: $text-light;
-        }
-      }
-
-      .comment-user {
-        margin-top: rem-calc(6);
-        padding: rem-calc(6) 0;
-        overflow: hidden;
-
-        @each $n in ("1", "2", "3","4", "5") {
-          &.level-#{$n} {
-            @if $n == "5" {
-              background: $comment-level-5;
-              padding: rem-calc(6) rem-calc(12);
-            }
-            @elseif $n == "1" {
-              background: none;
-              padding: rem-calc(6) rem-calc(12);
-            }
-            @else {
-              background: $comment-official;
-              padding: rem-calc(6) rem-calc(12);
-            }
-          }
-        }
-
-        &.is-author {
-          background: $comment-author;
-          padding: rem-calc(6) rem-calc(12);
-        }
-
-        &.is-admin {
-          background: $comment-admin;
-          padding: rem-calc(6) rem-calc(12);
-        }
-
-        &.is-moderator {
-          @extend .is-admin;
-        }
-
-        &.level-5 {
-          background: $comment-level-5;
-          padding: rem-calc(6) rem-calc(12);
-        }
-      }
-    }
-
-    .is-deleted {
-      background: $deleted;
-      margin-left: rem-calc(42);
-      padding: rem-calc(6) rem-calc(12);
-    }
-
-    .comment-children {
-      border-left: 1px dashed $border;
-      margin-left: rem-calc(42);
-      padding-left: rem-calc(6);
-
-      @media only screen and (max-width: 40em) {
-        margin-left: rem-calc(16);
-      }
-    }
-
-    .comment-info {
-      color: $text-light;
-      font-size: rem-calc(13);
-      font-weight: lighter;
-      margin-top: rem-calc(6);
-      vertical-align: middle;
-
-      span.user-name {
-        color: $text;
-        font-weight: bold;
-      }
-    }
-  }
-}
-
-.faded {
-  opacity: 0.4;
-}
-
-// 06. Flags
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-.flag-content {
-
-  .button {
-    background: none;
-    margin-bottom: 0;
-    padding: 0;
-  }
-}
-
-.flag-disable {
-  color: $text-medium;
-  line-height: rem-calc(24);
-  vertical-align: middle;
-}
-
-.flag-active {
-  @extend .flag-disable;
-  color: $delete;
-}

app/views/layouts/_header.html.erb

@@ -32,7 +32,16 @@
         <li class="name">
           <%= link_to root_path do %>
             <%= image_tag('header_logo_madrid.png', class: 'show-for-medium-up left', size: '96x96') %>
-            <%= t("layouts.header.open_gov", open: "#{t('layouts.header.open')}").html_safe %> <span>|</span> <span class="logo-site"><%= t("layouts.header.participation") %></span>
+            <%= t("layouts.header.open_gov", open: "#{t('layouts.header.open')}").html_safe %> <span>|</span>
+            <span class="logo-site">
+              <% if transparency_page? %>
+                <%= t("layouts.header.transparency") %>
+              <% elsif opendata_page? %>
+                <%= t("layouts.header.open_data") %>
+              <% else %>
+                <%= t("layouts.header.participation") %>
+              <% end %>
+            </span>
           <% end %>
         </li>
       </ul>

config/locales/en.yml

@@ -10,7 +10,9 @@ en:
       external_link_blog_url: "/blog"
       open_gov: "%{open} government"
       open: "Open"
-      participation: Participation
+      participation: "Participation"
+      transparency: "Transparency"
+      open_data: "Open data"
       open_city_title: "The city you want, it will be the city you want."
       open_city_slogan_html:
         "Start listening to Madrid.
@@ -118,7 +120,7 @@ en:
         one: 1 Comment
         other: "%{count} Comments"
       login_to_comment: "You need to %{signin} or %{signup} to comment."
-      edit_debate_link: Edit
+      edit_debate_link: "Edit debate"
       share: Share
       flag: "This debate has been flag as innapropiate for some users."
     edit:
@@ -209,7 +211,7 @@ en:
         one: 1 Comment
         other: "%{count} Comments"
       login_to_comment: "You need to %{signin} or %{signup} to comment."
-      edit_proposal_link: Edit
+      edit_proposal_link: "Edit proposal"
       share: Share
       flag: "This proposal has been flag as innapropiate for some users."
     edit:

config/locales/es.yml

@@ -10,7 +10,9 @@ es:
       external_link_blog_url: "/blog"
       open_gov: "Gobierno %{open}"
       open: "abierto"
-      participation: Participación
+      participation: "Participación"
+      transparency: "Transparencia"
+      open_data: "Datos abiertos"
       open_city_title: "La ciudad que quieres será la ciudad que quieras."
       open_city_slogan_html:
         "Existen ciudades gobernadas directamente por sus habitantes, que <b>debaten</b> sobre temas que les preocupan, <b>proponen</b> ideas para mejorar
@@ -118,7 +120,7 @@ es:
         one: 1 Comentario
         other: "%{count} Comentarios"
       login_to_comment: "Necesitas %{signin} o %{signup} para comentar."
-      edit_debate_link: Editar
+      edit_debate_link: "Editar debate"
       share: Compartir
       flag: "Este debate ha sido marcado como inapropiado por varios usuarios."
     edit:
@@ -209,7 +211,7 @@ es:
         one: 1 Comentario
         other: "%{count} Comentarios"
       login_to_comment: "Necesitas %{signin} o %{signup} para comentar."
-      edit_proposal_link: Editar
+      edit_proposal_link: "Editar propuesta"
       share: Compartir
       flag: "Esta propuesta ha sido marcada como inapropiada por varios usuarios."
     edit:

spec/features/debates_spec.rb

@@ -184,7 +184,7 @@ feature 'Debates' do
     expect(page).not_to have_link('click me')
     expect(page.html).to_not include "<script>alert('hey')</script>"
 
-    click_link 'Edit'
+    click_link 'Edit debate'
 
     expect(current_path).to eq edit_debate_path(Debate.last)
     expect(page).not_to have_link('click me')

spec/features/proposals_spec.rb

@@ -253,7 +253,7 @@ feature 'Proposals' do
     expect(page).not_to have_link('click me')
     expect(page.html).to_not include "<script>alert('hey')</script>"
 
-    click_link 'Edit'
+    click_link 'Edit proposal'
 
     expect(current_path).to eq edit_proposal_path(Proposal.last)
     expect(page).not_to have_link('click me')