make comment link bigger on mobile

Close #524
lobsters · Aug 8, 2018 · f1760e05a8810fdf02cfd11ca54e9d33f9139b99 · f1760e0
1 parent b835c25
commit f1760e05a8810fdf02cfd11ca54e9d33f9139b99
Unified Split

Showing with 18 additions and 19 deletions.

+15 −15 app/assets/stylesheets/mobile.css

+3 −4 app/views/stories/_listdetail.html.erb
diff --git a/app/assets/stylesheets/mobile.css b/app/assets/stylesheets/mobile.css
@@ -135,43 +135,44 @@
 		padding-bottom: 0.75em;
 		width: 100%;
 	}
-	ol.stories.list li.story div.mobile_comments {
+	ol.stories.list li.story .mobile_comments {
 		background-color: #e8e8e8;
 		display: table-cell !important;
 		font-size: 11pt;
 		min-width: 40px;
 		text-align: center;
+		text-decoration: none;
 		vertical-align: middle;
 	}
-	ol.stories.list li.story div.mobile_comments a:before {
+	ol.stories.list li.story .mobile_comments span:before {
 		border-style: solid;
 		border-width: 0px 6px 3px 0px;
 		border-color: #ccc;
 		border-bottom-right-radius: 13px;
 		bottom: -10px;
 		content: "";
 		display: block;
-		height: 6px;
+		height: 7px;
 		left: 4px;
 		position: absolute;
 		width: 5px;
 		z-index: 10;
 	}
-	ol.stories.list li.story div.mobile_comments a:after {
+	ol.stories.list li.story .mobile_comments span:after {
 		border-bottom-right-radius: 10px;
 		border-color: #ccc;
 		border-style: solid;
 		border-width: 0px 3px 3px 0px;
 		bottom: -10px;
 		content: "";
 		display: block;
-		height: 6px;
+		height: 7px;
 		left: 5px;
 		position: absolute;
 		width: 10px;
 		z-index: 10;
 	}
-	ol.stories.list li.story div.mobile_comments a {
+	ol.stories.list li.story .mobile_comments span {
 		background-color: #ccc;
 		border: 1px solid #ccc;
 		border-radius: 5px;
@@ -182,25 +183,24 @@
 		padding: 2px;
 		position: relative;
 		text-align: center;
-		text-decoration: none;
 	}
-	ol.stories.list li.story div.mobile_comments a:active,
-	ol.stories.list li.story div.mobile_comments a:focus {
+	ol.stories.list li.story .mobile_comments:active span,
+	ol.stories.list li.story .mobile_comments:focus span {
 		outline: 0;
 	}
-	ol.stories.list li.story div.mobile_comments.zero a {
+	ol.stories.list li.story .mobile_comments.zero span {
 		color: gray;
 	}
-	ol.stories.list li.story div.mobile_comments.zero a {
+	ol.stories.list li.story .mobile_comments.zero span {
 		background-color: #d8d8d8;
 		color: #999;
 	}
-	ol.stories.list li.story div.mobile_comments.zero a,
-	ol.stories.list li.story div.mobile_comments.zero a:before,
-	ol.stories.list li.story div.mobile_comments.zero a:after {
+	ol.stories.list li.story .mobile_comments.zero span,
+	ol.stories.list li.story .mobile_comments.zero span:before,
+	ol.stories.list li.story .mobile_comments.zero span:after {
 		border-color: #d8d8d8;
 	}
-	ol.stories.list li.story span.comments_label {
+	ol.stories.list li.story .comments_label {
 		display: none;
 	}

diff --git a/app/views/stories/_listdetail.html.erb b/app/views/stories/_listdetail.html.erb
@@ -182,8 +182,7 @@ class="story <%= story.vote && story.vote[:vote] == 1 ? "upvoted" : "" %>
    </div>
  </div>
 </div>
-<div class="mobile_comments <%= story.comments_count == 0 ? "zero" : "" %>"
-style="display: none;">
-  <a href="<%= story.comments_path %>"><%= story.comments_count %></a>
-</div>
+<a href="<%= story.comments_path %> "class="mobile_comments <%= story.comments_count == 0 ? "zero" : "" %>" style="display: none;">
+  <span><%= story.comments_count %></span>
+</a>
 </li>