Remove id selectors for mobile photo show page

closes #7279

app/assets/stylesheets/color_themes/dark/mobile.scss

@@ -43,7 +43,7 @@ body {
   .stream-element.unread { background-color: $gray; }
   .stream-element.read { background-color: $gray-darker; }
 
-  #show_content .photo { border-color: $border-grey; }
+  .photos .photo { border-color: $border-grey; }
 
   .header-full-width { border-bottom: 1px solid $border-grey; }
 
@@ -60,6 +60,6 @@ body {
     }
   }
 }
-// scss-lint:enable IdSelector, SelectorFormat, NestingDepth, SelectorDepth
+// scss-lint:enable SelectorFormat, NestingDepth, SelectorDepth
 
 @import 'mobile/mobile';

app/assets/stylesheets/mobile/mobile.scss

@@ -269,11 +269,8 @@ footer {
   font-size: 14px;
 }
 
-#show_content {
+.photos {
   padding-bottom: 24px;
-  border-bottom: 1px solid #bbb;
-  font-size: larger;
-  text-align: center;
 
   img:not(.avatar) {
     max-width: 100%;
@@ -287,37 +284,30 @@ footer {
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
     border-color: #DDDDDD #BBBBBB #AAAAAA;
     border-bottom-width: 0px;
-    margin-top: 12px;
     min-height: 100px;
-    line-height: 5;
   }
+}
+
+.photo-controls .arrow {
+  bottom: -.2em;
+  font-size: 10em;
+  position: fixed;
+  text-decoration: none;
+  text-shadow: 0 0 3px $white;
+  z-index: 1;
 
-  .controls {
-    font: {
-      size: smaller; };
+  &.left {
+    left: -.2em;
   }
 
-  &.photos {
-    border-bottom: 0 !important;
+  &.right {
+    right: -.2em;
+    text-align: right;
   }
-}
 
-#photo_controls {
-  .arrow {
-    font-size: 10em;
-    text-decoration: none;
-    text-shadow: 0 0 3px $white;
-    position: fixed;
-    bottom: -0.2em;
-    z-index: 1;
-    &.left {
-      left: -0.2em;
-    }
-    &.right {
-      right: -0.2em;
-      text-align: right;
-    }
-    .entypo-chevron-left, .entypo-chevron-right { margin-right: 0; }
+  .entypo-chevron-left,
+  .entypo-chevron-right {
+    margin-right: 0;
   }
 }
 

app/views/photos/show.mobile.haml

@@ -5,7 +5,7 @@
 :css
   footer{display: none;}
 
-#show_content.photos
+.photos
   .photo
     = image_tag photo.url(:scaled_full)
   .stream-element.photo_mobile
@@ -24,7 +24,7 @@
                 = timeago(photo.created_at)
 
 -if additional_photos && additional_photos.length > 1
-  #photo_controls
+  .photo-controls
     - if previous_photo != additional_photos.last
       = link_to(content_tag(:i, nil, id: "arrow-left", class: "entypo-chevron-left"),
                 person_photo_path(previous_photo.author, previous_photo),

features/mobile/multiphoto.feature

@@ -17,7 +17,7 @@ Feature: viewing photos on the mobile main page
     When I press "Share"
     And I go to the stream page
     And I click on selector "img.stream-photo"
-    Then I should see a "img" within "#show_content"
+    Then I should see a "img" within ".photos"
     And I should not see a "#arrow-right" within "#main"
     And I should not see a "#arrow-left" within "#main"