maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[deploy] Replace Cover Image <div> Tags With <img> Tags (#7396)

Browse source 
* Replace cover image div tag with img tag in articles/show
  * Make cover images more semantic with img tag and src
  * Keep img styling for now

* Replace divs with inline img in _main_stories_feed.html.erb
  * Remove div in favor img tag to make more semantic
  * Add extra line at file end in _main_stories_feed.html.erb
  * Reword img alt text in articles/show.html.erb

* Remove unnecessary styling for cover images from stylesheets
  * Remove background image styling for main feed article
  * Remove background image styling for article show page
  * Adjust padding for main feed article
  * Adjust padding for article show page
  * Add 100% width to main feed article

* Adjust styling for article show pages
  * Add height to article show CSS
  * Adjust article show padding to be 0
  * Revert div to img change in _main_stories_feed.html.erb
  * Revert styling changes for articles.scss

* Add original styling back to article-show.scss
  * Add original styling for article show pages back
  * Hopefully avoid conflicts due to caching by keeping code

* Adjust team delightful TODO to be more explicit and readily accessible

* Update app/assets/stylesheets/article-show.scss

Co-authored-by: Ben Halpern <bendhalpern@gmail.com>
This commit is contained in:
Julianna Tetreault 2020-04-20 16:01:08 -06:00 • committed by GitHub
parent f5c94391b7
commit 21cd5a3f72
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/assets/stylesheets/article-show.scss
View file

@ -53,15 +53,20 @@ article {
padding: 0 0;
position: relative;
/* TODO[team-delightful]: Remove background and background-size a few days post merge to avoid caching conflicts */
.image {
position: relative;
width: 100%;
margin: auto;
max-width: 1024px;
z-index: 2;
background: transparent no-repeat center center;
background-size: cover;
z-index: 2;
padding-top: 42%;
height: 42vw;
@media screen and (min-width: 880px) {
height: 370px;
}
@media screen and (min-width: 950px) {
border-top-left-radius: 2px;

3
app/views/articles/show.html.erb
View file

@ -131,8 +131,7 @@
<% if @article.video.present? %>
<%= render "articles/video_player", meta_tags: true, article: @article %>
<% elsif @article.main_image.present? %>
<div class="image image-final" style="background-color:<%= @article.main_image_background_hex_color %>;background-image:url(<%= cloud_cover_url(@article.main_image) %>)">
</div>
<img src="<%= cloud_cover_url(@article.main_image) %>" class="image image-final" style="background-color:<%= @article.main_image_background_hex_color %>;" />
<% else %>
<div class="blank-space"></div>
<% end %>

2
app/views/stories/_main_stories_feed.html.erb
View file

@ -72,4 +72,4 @@
<% end %>
<div class="single-article-small-pic" id="article-index-hidden-div" style="display:none"></div>
<% end %>
</div>
</div>