Hartl Rails Tutorial листинг 11.25 - CSS для микросообщений не обновляется

Question

Работая над Rails Tutorial, я столкнулся с проблемами в листинге 11.25. После обновления CSS в соответствии с листингом в моем локально размещенном приложении среды разработки (для вошедшего в систему, активированного пользователя) не отображаются изменения микросообщений отобранных пользователей - отступы по-прежнему неправильные и т. Д. /users/1 все еще выглядит так (скриншот). Что мне нужно сделать, чтобы применить CSS?

У меня не было проблем до этого момента. Все тесты проходят зеленый. Я использую только драгоценные камни, предложенные в учебнике. Я выполнил следующие шаги по устранению неисправностей:

1. Я перезагружал сервер WEBrick несколько раз
2. Закрыл и открыл мой браузер. (в Chrome для Linux, 47.0.2526.111 (64-разрядная версия))
3. Пробовал другой браузер (последний Firefox)
4. Очистил кеш Chrome
5. Перезагрузил мой компьютер

/app/views/users/show.html.erb:

<% provide(:title, @user.name) %>
<div class="row">
  <aside class="col-md-4">
    <section class="user_info">
      <h1>
        <%= gravatar_for @user %>
        <%= @user.name %>
      </h1>
    </section>
  </aside>
  <div class="col-md-8">
    <% if @user.microposts.any? %>
      <h3>Microposts (<%= @user.microposts.count %>)</h3>
      <ol class="microposts">
        <%= render @microposts %>
      </ol>
      <%= will_paginate @microposts %>
    <% end %>
  </div>
</div>

/app/views/microposts/_micropost.html.erb:

<li id="micropost-<%= micropost.id %>">
  <%= link_to gravatar_for(micropost.user, size: 50), micropost.user %>
  <span class="user"><%= link_to micropost.user.name, micropost.user %></span>
  <span class="content"><%= micropost.content %></span>
  <span class="timestamp">
    Posted <%= time_ago_in_words(micropost.created_at) %> ago.
  </span>
</li>

app/assets/stylesheets/custom.css.scss:

.microposts {
  list-style: none;
  padding: 0;
  li {
    padding: 10px 0;
    border-top: 1px solid #e8e8e8;
  }
  .user {
    margin-top: 5em;
    padding-top: 0;
  }
  .content {
    display: block;
    margin-left: 60px;
    img {
      display: block;
      padding: 5px 0;
    }
  }
  .timestamp {
    color: $gray-light;
    display: block;
    margin-left: 60px;
  }
  .gravatar {
    float: left;
    margin-right: 10px;
    margin-top: 5px;
  }
}

aside {
  textarea {
    height: 100px;
    margin-bottom: 5px;
  }
}

span.picture {
  margin-top: 10px;
  input {
    border: 0;
  }
}

app/models/micropost.rb:

class Micropost < ActiveRecord::Base
  belongs_to :user
  default_scope -> { order(created_at: :desc) }
  validates :user_id, presence: true
  validates :content, presence: true, length: { maximum: 140 }
end

app/controllers/users_controller.rb:

class UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
    @microposts = @user.microposts.paginate(page: params[:page])
  end
end

Answer 1

У меня тоже была эта проблема. Проблема в вашем коде здесь:

приложение / просмотров /microposts/_micropost.html.erb

<%= link_to gravatar_for(micropost.user), micropost.user %>

CSS настроен так, как если бы вы выполнили упражнение 1 в главе 7. Либо завершите это дополнительное упражнение, либо увеличьте отступ в вашем CSS-файле для микросообщений. Я не помню точно, какой отступ должен был быть увеличен, но попробуйте сначала:

.microposts {
  list-style: none;
  padding: 0;
  li {
    padding: 10px 0;
    border-top: 1px solid #e8e8e8;
  }

Также обратите внимание: вот простой способ отладки проблем CSS. Используя Chrome в качестве браузера, перейдите в меню гамбургеров в правом верхнем углу браузера и выберите "Дополнительные инструменты" > "Инструменты разработчика". Затем нажмите кнопку в верхнем левом углу инструмента разработчика:

Теперь вы можете использовать мышь, чтобы выбрать любую часть страницы. Найдите ту часть страницы, которая вызывает вашу проблему, и нажмите на нее. Теперь в правой части панели инструментов разработчика в разделе "Стили" вы можете найти все CSS, которые применяются к выбранному вами элементу. Вы даже можете изменить значения прямо в инструменте разработчика и видеть, как он обновляется в реальном времени на вашем экране. Так что в вашем случае, поиграйте с отступами, пока у вас не будет нужной высоты. Затем вы можете вернуться в свой код и внести в него изменения, перезагрузить страницу, и она должна работать.