Adds first styles for prposals list

2015-09-13 16:22:40 +02:00
parent 356f1c29ce
commit 22db866971
8 changed files with 771 additions and 21 deletions
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -10,4 +10,5 @@
@import "admin";
@import "participacion";
@import "debates";
+@import "proposals";
@import "c3";
--- a/app/assets/stylesheets/icons.scss
+++ b/app/assets/stylesheets/icons.scss
@@ -85,7 +85,7 @@
 .icon-stats:before {
  content: "r";
 }
-.icon-initiatives:before {
+.icon-proposals:before {
  content: "h";
 }
 .icon-organizations:before {
--- a/app/assets/stylesheets/proposals.scss
+++ b/app/assets/stylesheets/proposals.scss
@@ -0,0 +1,742 @@
+// 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 {
+  margin-top: rem-calc(24);
+
+  .progress {
+    background-color: rgba(0, 0, 0, 0.1);
+    height: rem-calc(18);
+    margin-bottom: rem-calc(6);
+
+    .meter {
+      background: $proposals;
+    }
+  }
+
+  .button-support {
+    background: $proposals;
+    color: white;
+    display: inline-block;
+    font-size: rem-calc(14);
+    margin-top: rem-calc(12);
+
+    &:hover {
+      background: $proposals-border;
+      color: white;
+      cursor: pointer;
+    }
+
+    &:active {
+      opacity: .75;
+    }
+  }
+
+  // .voted {
+  //   .icon-like {
+  //     @extend .icon-like;
+  //     background: $votes-like;
+  //     border-color: white;
+  //     color: white;
+  //   }
+
+  //   .icon-unlike {
+  //     @extend .icon-unlike;
+  //     background: $votes-unlike;
+  //     border-color: white;
+  //     color: white;
+  //   }
+  // }
+
+  // .no-voted {
+  //   .icon-like, .icon-unlike {
+  //     opacity: .5;
+  //   }
+  // }
+
+  .total-supports {
+    float: right;
+    font-size: rem-calc(14);
+
+    span {
+      color: $text-medium;
+      font-size: rem-calc(12);
+    }
+  }
+
+  .divider {
+    margin: 0 rem-calc(6);
+  }
+
+  .not-logged {
+    background: rgba(22,99,135,.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;
+    }
+  }
+}
+
+// 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 {
+      background: none;
+      clear: both;
+      color: $proposals;
+      display: block;
+      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 {
+      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(-24) 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 {
+      color: $proposals;
+      display: inline-block;
+      line-height: $line-height;
+      margin-left: rem-calc(24);
+      padding-top: rem-calc(12);
+      vertical-align: top;
+
+      @media (min-width: $small-breakpoint) {
+        display: block;
+        float: none;
+        margin-left: 0;
+        padding-top: 0;
+      }
+    }
+
+    @media (min-width: $small-breakpoint) {
+      .like {
+
+        span {
+          display: block;
+          line-height: $line-height/2;
+        }
+      }
+    }
+
+    .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;
+    }
+  }
+
+  .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;
+    }
+  }
+
+  ul, ol {
+
+    li {
+      font-size: rem-calc(13);
+      margin-bottom: rem-calc(12);
+    }
+  }
+
+  .author-photo {
+    line-height: $line-height*2;
+    margin-right: rem-calc(6);
+    vertical-align: middle;
+    width: 32px;
+  }
+
+  .author {
+    color: $text;
+    font-weight: bold;
+  }
+
+  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;
+  }
+
+  .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);
+    }
+
+    @media (min-width: $small-breakpoint  + em-calc(1)) and (max-width:$medium-breakpoint) {
+      .in-favor, .against {
+        text-align: left;
+        width: rem-calc(100);
+      }
+    }
+
+    .divider {
+      display: none;
+    }
+
+    @media (min-width: $medium-breakpoint) {
+      .divider {
+        display: inline-block;
+      }
+    }
+  }
+
+  .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: $debates;
+    font-size: rem-calc(60);
+    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: $debates;
+        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;
+      margin: rem-calc(15) 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: top;
+      }
+    }
+
+    .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;
+
+        @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;
+    padding: 0;
+  }
+}
+
+.flag-disable {
+  color: $text-medium;
+  line-height: rem-calc(24);
+  vertical-align: middle;
+}
+
+.flag-active {
+  @extend .flag-disable;
+  color: $delete;
+}
--- a/app/assets/stylesheets/variables.scss
+++ b/app/assets/stylesheets/variables.scss
@@ -41,6 +41,9 @@ $votes-unlike-act:  #BD6A6A;
 $delete:            #F04124;
 $check:             #46DB91;

+$proposals:         #FFA42D;
+$proposals-border:  #CC8425;
+
 // 03. Forms
 // - - - - - - - - - - - - - - - - - - - - - - - - -

--- a/app/views/proposals/_votes.html.erb
+++ b/app/views/proposals/_votes.html.erb
@@ -1,19 +1,19 @@
 <% voted_classes = css_classes_for_proposal_vote(@proposal_votes, proposal) %>
-<div class="votes">
-  <div class="in-favor inline-block">
-    <%= link_to vote_proposal_path(proposal, value: 'yes'),
-        class: "like #{voted_classes[:in_favor]}", title: t('votes.agree'), method: "post", remote: true do %>
-      <i class="icon-like"></i>
-      <span><%= percentage('total_votes', proposal) %></span>
-    <% end %>
+<div class="supports">
+
+  <div class="progress small-12 radius">
+    <span class="meter" style="width: 10%;"></span>
  </div>

-  <span class="divider"></span>
-
-  <span class="total-votes">
-    <%= t("proposals.proposal.votes", count: proposal.total_votes) %>
+  <span class="total-supports">
+    <%= t("proposals.proposal.supports", count: proposal.total_votes) %>&nbsp;<span><%= t("proposals.proposal.supports_necessary") %></span>
  </span>

+  <%= link_to vote_proposal_path(proposal, value: 'yes'), class: "button button-support tiny radius expand #{voted_classes[:in_favor]}",
+      title: t('proposals.proposal.support'), method: "post", remote: true do %>
+        <%= t("proposals.proposal.support") %>
+  <% end %>
+
  <% if user_signed_in? && current_user.organization? %>
  <div class="organizations-votes" style='display:none'>
    <p>
--- a/app/views/proposals/index.html.erb
+++ b/app/views/proposals/index.html.erb
@@ -6,7 +6,7 @@

 <section role="main">
  <div class="wrap row">
-    <div id="proposals" class="Proposals-list small-12 medium-9 column">
+    <div id="proposals" class="proposals-list small-12 medium-9 column">

      <div class="filters">
        <div class="small-12 medium-7 column">
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -158,14 +158,16 @@ en:
        other: " containing '%{search_term}'"
    proposal:
      proposal: Proposal
+      support: "Support"
      comments:
        zero: No comments
        one: 1 Comment
        other: "%{count} Comments"
-      votes:
-        zero: No votes
-        one: 1 vote
-        other: "%{count} votes"
+      supports:
+        zero: No supports
+        one: 1 support
+        other: "%{count} supports"
+      supports_necessary: "/ 53.726"
    form:
      proposal_title: Proposal title
      proposal_question: Proposal question
--- a/config/locales/es.yml
+++ b/config/locales/es.yml
@@ -158,14 +158,16 @@ es:
        other: " que contienen '%{search_term}'"
    proposal:
      proposal: Propuesta
+      support: "Apoyar"
      comments:
        zero: Sin comentarios
        one: 1 Comentario
        other: "%{count} Comentarios"
-      votes:
-        zero: Sin votos
-        one: 1 voto
-        other: "%{count} votos"
+      supports:
+        zero: Sin apoyos
+        one: 1 apoyo
+        other: "%{count} apoyos"
+      supports_necessary: "/ 53.726"
    form:
      proposal_title: Título de la propuesta
      proposal_question: Pregunta de la propuesta