Use flex grid to position changeset discussion subscribe button

This avoids needing any floats. Also remove buttons class from two
locations, since there is a min-width on that class and it affects
the button styling negatively for standalone buttons

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index e2c66190c605c599983d525b399b1a98c8e1cf41..fe36932675dbdd9fac796e97954ee241926396e7 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -860,16 +860,6 @@ tr.turn:hover {
     }
   }
 
-  .comments-header {
-    float: left;
-  }
-
-  .subscribe-buttons {
-    float: left;
-    margin: 0 10px;
-    min-width: 80px;
-  }
-
   .subscribe-buttons input {
     font-size: 90%;
     line-height: 15px;

diff --git a/app/views/browse/changeset.html.erb b/app/views/browse/changeset.html.erb
index 523cb84d6b7815b376b1f35150c05f6d92813be3..6aa0f11fb12a6d3008f292efdfcbbd8a808f05b2 100644 (file)
--- a/app/views/browse/changeset.html.erb
+++ b/app/views/browse/changeset.html.erb
@@ -10,21 +10,25 @@
 
   <%= render :partial => "tag_details", :object => @changeset.tags.except("comment") %>
 
-  <h4 class="comments-header"><%= t(".discussion") %></h4>
-
-  <% if current_user %>
-    <div class="buttons clearfix subscribe-buttons">
-      <form action="#">
-        <% if @changeset.subscribers.exists?(current_user.id) %>
-          <input class="action-button btn btn-sm btn-primary" type="submit" name="unsubscribe" value="<%= t("javascripts.changesets.show.unsubscribe") %>" data-method="POST" data-url="<%= changeset_unsubscribe_url(@changeset) %>" />
-        <% else %>
-          <input class="action-button btn btn-sm btn-primary" type="submit" name="subscribe" value="<%= t("javascripts.changesets.show.subscribe") %>" data-method="POST" data-url="<%= changeset_subscribe_url(@changeset) %>" />
-        <% end %>
-      </form>
+  <div class="row">
+    <div class="col">
+      <h4><%= t(".discussion") %></h4>
     </div>
-  <% end %>
 
-  <div class="clearfix"></div>
+    <% if current_user %>
+      <div class="col-auto">
+        <div class="subscribe-buttons">
+          <form action="#">
+            <% if @changeset.subscribers.exists?(current_user.id) %>
+              <input class="action-button btn btn-sm btn-primary" type="submit" name="unsubscribe" value="<%= t("javascripts.changesets.show.unsubscribe") %>" data-method="POST" data-url="<%= changeset_unsubscribe_url(@changeset) %>" />
+            <% else %>
+              <input class="action-button btn btn-sm btn-primary" type="submit" name="subscribe" value="<%= t("javascripts.changesets.show.subscribe") %>" data-method="POST" data-url="<%= changeset_subscribe_url(@changeset) %>" />
+            <% end %>
+          </form>
+        </div>
+      </div>
+    <% end %>
+  </div>
 
   <% if @comments.length > 0 %>
     <div class='changeset-comments'>
@@ -74,7 +78,7 @@
         <div class="form-group">
           <textarea class="form-control" name="text" cols="40" rows="5"></textarea>
         </div>
-        <div class="buttons clearfix">
+        <div>
           <input type="submit" name="comment" value="<%= t("javascripts.changesets.show.comment") %>" data-changeset-id="<%= @changeset.id %>" data-method="POST" data-url="<%= changeset_comment_url(@changeset) %>" disabled="1" class="btn btn-sm btn-primary" />
         </div>
       </form>