From 417757c4b091eea0c99f999500011c0c7e08c643 Mon Sep 17 00:00:00 2001
From: Alberto Garcia Cabeza <alberto@decabeza.es>
Date: Sat, 12 Sep 2015 18:05:33 +0200
Subject: [PATCH] Fixes add flags on mobile devices

---
 app/assets/stylesheets/debates.scss       | 15 ++++++--
 app/views/comments/_flag_actions.html.erb | 46 ++++++++++++-----------
 app/views/debates/_flag_actions.html.erb  | 42 +++++++++++----------
 3 files changed, 58 insertions(+), 45 deletions(-)

diff --git a/app/assets/stylesheets/debates.scss b/app/assets/stylesheets/debates.scss
index 9a59761d2..a2acbea13 100644
--- a/app/assets/stylesheets/debates.scss
+++ b/app/assets/stylesheets/debates.scss
@@ -305,11 +305,12 @@
   .panel {
     border-radius: 0;
     box-shadow: 0px 1px 3px 0 $border;
-    margin-bottom: rem-calc(4);
+    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);
     }
 
@@ -373,7 +374,6 @@
 
     .total-votes {
       display: inline-block;
-      float: none;
       line-height: $line-height;
       margin-left: rem-calc(24);
       padding-top: rem-calc(12);
@@ -381,6 +381,7 @@
 
       @media (min-width: $small-breakpoint) {
         display: block;
+        float: none;
         line-height: $line-height*2;
         margin-left: 0;
         padding-top: 0;
@@ -399,7 +400,7 @@
 
     .not-logged {
       line-height: $line-height;
-      padding-top: rem-calc(36);
+      padding-top: rem-calc(24);
     }
 
     .anonymous-votes, .organizations-votes {
@@ -752,6 +753,14 @@
 // 06. Flags
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
+.flag-content {
+
+  .button {
+    background: none;
+    padding: 0;
+  }
+}
+
 .flag-disable {
   color: $text-medium;
   line-height: rem-calc(24);
diff --git a/app/views/comments/_flag_actions.html.erb b/app/views/comments/_flag_actions.html.erb
index c056204e7..007ab90b4 100644
--- a/app/views/comments/_flag_actions.html.erb
+++ b/app/views/comments/_flag_actions.html.erb
@@ -1,23 +1,25 @@
-<% if show_flag_action? comment %>
-  <span class="divider">&nbsp;|&nbsp;</span>
-  <a id="flag-expand-comment-<%= comment.id %>" data-dropdown="flag-drop-comment-<%= comment.id %>" aria-controls="flag-drop-comment-<%= comment.id %>" aria-expanded="false" title="<%= t('shared.flag') %>">
-    &nbsp;<i class="icon-flag flag-disable"></i>&nbsp;&nbsp;
-  </a>
-  <ul id="flag-drop-comment-<%= comment.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
-    <li>
-      <%= link_to t("shared.flag"), flag_comment_path(comment), method: :put, remote: true, id: "flag-comment-#{comment.id}" %>
-    </li>
-  </ul>
-<% end %>
+<span class="flag-content">
+  <% if show_flag_action? comment %>
+    <span class="divider">&nbsp;|&nbsp;</span>
+    <a class="button" id="flag-expand-comment-<%= comment.id %>" data-dropdown="flag-drop-comment-<%= comment.id %>" aria-controls="flag-drop-comment-<%= comment.id %>" aria-expanded="false" title="<%= t('shared.flag') %>">
+      &nbsp;<i class="icon-flag flag-disable"></i>&nbsp;&nbsp;
+    </a>
+    <ul id="flag-drop-comment-<%= comment.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
+      <li>
+        <%= link_to t("shared.flag"), flag_comment_path(comment), method: :put, remote: true, id: "flag-comment-#{comment.id}" %>
+      </li>
+    </ul>
+  <% end %>
 
-<% if show_unflag_action? comment %>
-  <span class="divider">&nbsp;|&nbsp;</span>
-  <a id="unflag-expand-comment-<%= comment.id %>" data-dropdown="unflag-drop-comment-<%= comment.id %>" aria-controls="unflag-drop-comment-<%= comment.id %>" aria-expanded="false" title="<%= t('shared.unflag') %>">
-    &nbsp;<i class="icon-flag flag-active"></i>&nbsp;&nbsp;
-  </a>
-  <ul id="unflag-drop-comment-<%= comment.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
-    <li>
-      <%= link_to t("shared.unflag"), unflag_comment_path(comment), method: :put, remote: true, id: "unflag-comment-#{comment.id}" %>
-    </li>
-  </ul>
-<% end %>
+  <% if show_unflag_action? comment %>
+    <span class="divider">&nbsp;|&nbsp;</span>
+    <a class="button" id="unflag-expand-comment-<%= comment.id %>" data-dropdown="unflag-drop-comment-<%= comment.id %>" aria-controls="unflag-drop-comment-<%= comment.id %>" aria-expanded="false" title="<%= t('shared.unflag') %>">
+      &nbsp;<i class="icon-flag flag-active"></i>&nbsp;&nbsp;
+    </a>
+    <ul id="unflag-drop-comment-<%= comment.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
+      <li>
+        <%= link_to t("shared.unflag"), unflag_comment_path(comment), method: :put, remote: true, id: "unflag-comment-#{comment.id}" %>
+      </li>
+    </ul>
+  <% end %>
+</span>
diff --git a/app/views/debates/_flag_actions.html.erb b/app/views/debates/_flag_actions.html.erb
index 20f147df9..9456d82d2 100644
--- a/app/views/debates/_flag_actions.html.erb
+++ b/app/views/debates/_flag_actions.html.erb
@@ -1,21 +1,23 @@
-<% if show_flag_action? debate %>
-  <a id="flag-expand-debate-<%= debate.id %>" data-dropdown="flag-drop-debate-<%= debate.id %>" aria-controls="flag-drop-debate-<%= debate.id %>" aria-expanded="false" title="<%= t('shared.flag') %>">
-    &nbsp;<i class="icon-flag flag-disable"></i>&nbsp;&nbsp;
-  </a>
-  <ul id="flag-drop-debate-<%= debate.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
-    <li>
-      <%= link_to t('shared.flag'), flag_debate_path(debate), method: :put, remote: true, id: "flag-debate-#{ debate.id }" %>
-    </li>
-  </ul>
-<% end %>
+<span class="flag-content">
+  <% if show_flag_action? debate %>
+    <a class="button" id="flag-expand-debate-<%= debate.id %>" data-dropdown="flag-drop-debate-<%= debate.id %>" aria-controls="flag-drop-debate-<%= debate.id %>" aria-expanded="false" title="<%= t('shared.flag') %>">
+      &nbsp;<i class="icon-flag flag-disable"></i>&nbsp;&nbsp;
+    </a>
+    <ul id="flag-drop-debate-<%= debate.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
+      <li>
+        <%= link_to t('shared.flag'), flag_debate_path(debate), method: :put, remote: true, id: "flag-debate-#{ debate.id }" %>
+      </li>
+    </ul>
+  <% end %>
 
-<% if show_unflag_action? debate %>
-  <a id="unflag-expand-debate-<%= debate.id %>" data-dropdown="unflag-drop-debate-<%= debate.id %>" aria-controls="unflag-drop-debate-<%= debate.id %>" aria-expanded="false" title="<%= t('shared.unflag') %>">
-    &nbsp;<i class="icon-flag flag-active"></i>&nbsp;&nbsp;
-  </a>
-  <ul id="unflag-drop-debate-<%= debate.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
-    <li>
-      <%= link_to t('shared.unflag'), unflag_debate_path(debate), method: :put, remote: true, id: "unflag-debate-#{ debate.id }" %>
-    </li>
-  </ul>
-<% end %>
+  <% if show_unflag_action? debate %>
+    <a class="button" id="unflag-expand-debate-<%= debate.id %>" data-dropdown="unflag-drop-debate-<%= debate.id %>" aria-controls="unflag-drop-debate-<%= debate.id %>" aria-expanded="false" title="<%= t('shared.unflag') %>">
+      &nbsp;<i class="icon-flag flag-active"></i>&nbsp;&nbsp;
+    </a>
+    <ul id="unflag-drop-debate-<%= debate.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
+      <li>
+        <%= link_to t('shared.unflag'), unflag_debate_path(debate), method: :put, remote: true, id: "unflag-debate-#{ debate.id }" %>
+      </li>
+    </ul>
+  <% end %>
+</span>