Rails 4.1 + Foundation 5, a możliwość konfigurowania "error_notification"

Zielona szkoła
1

Witam,
konfiguracje mam jak w temacie.

W module danych mam taki wpis:

class Moja_tabela < ActiveRecord::Base
  validates :numer, presence: { message: 'nie może być puste' }
 .....
end

Formularz dodawania/edycji wygląda tak:

<%= simple_form_for(@moja_tabela) do |f| %>
  **<%= f.error_notification %>**

  <div class="form-inputs">

    <div class="row">
      <div class="small-4 left columns">
        <%= f.input :numer, 
              label: "Numer:",
              placeholder: 'podaj kolejny numer' %>

      </div>
    </div>

......

  <div class="form-actions">
    <%= f.submit 'Zapisz', class: "button small radius success" %>
  </div>
  

<% end %>

Gdy nie podam numeru jest wyświetlany komunikat błędu, podświetlany na czerwono label “Numer:” i wyświetlane poniżej pola edycji, maluteńką czcionką “nie może być puste”.

Super, ale chciałbym, by ten komunikat był wyświetlany większą czcionką i nie potrafię poradzić sobie z tym. :frowning:

Gorąco prośba zatem, powiedzcie, gdzie (“foundation_and_overrides.scss”?) i jak można zmienić domyślny rozmiar czcionki tego komunikatu?

2

Jeśli używasz gemu powinien on dodać Ci odpowiedni plik w assetach, innym sposobem jest nadpisanie tego we własnym pliku css na podstawie ścieżki którą możesz zobaczyć np przez Google Chrome Dev Tools.

3

A jaki to miałby być ten plik w tych assetach?
Możesz podać ścieżkę, nazwę i co w tym pliku jest, co można zmienić?

w Gemfile mam:

.....
gem 'foundation-rails'
group :development do
  gem 'rails_layout'
end

gem 'simple_form'

Edit:
W pliku app/assets/stylesheets/scaffolds.css.scss są oczywiście wpisy:

.field_with_errors {
  padding: 2px;
  background-color: red;
  display: table;
}

#error_explanation {
  width: 450px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 0;
  margin-bottom: 20px;
  background-color: #f0f0f0;
  h2 {
    text-align: left;
    font-weight: bold;
    padding: 5px 5px 5px 15px;
    font-size: 12px;
    margin: -7px;
    margin-bottom: 0px;
    background-color: #c00;
    color: #fff;
  }
  ul li {
    font-size: 12px;
    list-style: square;
  }
}

ale o ile dobrze rozumiem, to używane są standardowo, gdy w pliku edycji danych mamy:

<%= form_for(@moja_tabela) do |f| %>
  <% if @moja_tabela.errors.any? %>
    <div id="error_explanation">
      <%= pluralize(@moja_tabela.errors.count, "error") %> 
      Nie moge zapisac danych z powodu:
      <ul>
      <% @moja_tabela.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

a nie konstrukcji:

<%= form_for(@moja_tabela) do |f| %>
  <%= f.error_notification %>

Czy możecie rozwiać tę moją wątpliwość?

Jest też plik: app/assets/stylesheets/foundation_and_overrides.scss
Czy w nim mam szukać elementów, które mogę zmienić? A jeżeli tak, to jakich wpisów mam w nim szukać?

4

Ponieważ jesteś początkujący to polskie nazwy zmiennych można wybaczyć, ale co do nazwy modelu to powinieneś stosować konstrukcję CamelCase a nie underline, tzn:

Moja_tabela - źle
MojaTabela - dobrze

A co do twojego pytania, to sprawdź w jakim tagu znajduje się ten komunikat błędu w wygenerowanym kodzie strony, bo taki komunikat zwykle jest zawarty wewnątrz diva z nazwą klasy, której teraz nie pamiętam. W pliku css musisz dla tej klasy ustawić odpowiednie font-size (w swoim pliku styli) i problem powinien zniknąć

5

Ok, nazwę tabeli zmieniłem na “SlusznaUwagaAleNieToJestMoimProblemem” :wink:

Sądziłem, że wiele osób używa ZURB Foundation i konstrukcja

<%= form_for(@PrzykladowaTabela) do |f| %>
  <%= f.error_notification %>

jest powszechna i nie jestem pierwszą osobą, która pragnie modyfikować sposób wyświetlania komunikatów o błędach.

Hmm…
Pomóżcie, proszę

6

@wafcio napisał Ci dokładnie co masz zrobić. Włącz chrome, odpal inspektora (widok > narzędzia > narzędzia dla progarmistów). W zakładce elements znajdź diva, w którym jest komunikat. Zapamiętaj nazwę klasy tego diva i np. w application.css stwórz odpowiedni styl.

7

chyba bardziej popularny jest Bootstrap Twitter, ale moge się mylić