Remove id selectors for mobile photo show page

closes #7279
This commit is contained in:
Steffen van Bergerem 2017-01-15 00:40:48 +01:00 committed by Benjamin Neff
parent f11d51746d
commit de789267fc
4 changed files with 26 additions and 36 deletions

View file

@ -43,7 +43,7 @@ body {
.stream-element.unread { background-color: $gray; } .stream-element.unread { background-color: $gray; }
.stream-element.read { background-color: $gray-darker; } .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; } .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'; @import 'mobile/mobile';

View file

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

View file

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

View file

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