Изменение порядка элементов с помощью CSS Grid
Документация неясно, как это сделать, но этот источник выглядит следующим образом:
def add_index(table_name, column_name, options = {})
index_name, index_type, index_columns = add_index_options(table_name, column_name, options)
execute "CREATE #{index_type} INDEX #{quote_column_name(index_name)} ON #{quote_table_name(table_name)} (#{index_columns})"
end
Итак, если ваша [quote_column_name в вашей базе данных является реализацией по умолчанию (которая ничего не делает), тогда это может сработать:
add_index "users", ['lower(email)'], :name => "index_users_on_lower_email_index", :unique => true
Вы замечаете, что вы пробовали этот, но он не работал (добавив, что к вашему вопросу может быть хорошей идеей). Похоже, ActiveRecord просто не понимает индексы по вычисленному значению. Я могу подумать об уродливом взломе, который будет выполнен, но он уродлив:
- Добавьте столбец
email_lc. - Добавьте
before_validationилиbefore_save - Поместите свой уникальный индекс на
email_lc.
Это довольно уродливо, и вы можете почувствовать грязный для этого, но это лучшее, что я могу придумать прямо сейчас.
1 ответ
CSS Grid предоставляет несколько методов для достижения вашего макета, включая размещение на основе строк , областей сетки и свойство order . Ниже я приведу примеры первых двух.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px;
grid-gap: .5em;
padding: .5em;
border: 1px solid black;
}
@media ( max-width: 600px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: 50px 50px;
}
#b {
grid-row: 1;
}
}
/* non-essential decorative styles */
#a { background-color: lightgreen; }
#b { background-color: orange; }
#a, #b { display: flex; align-items: center; justify-content: center; font-size: 1.5em; }<div class="container">
<div id="a">A</div>
<div id="b">B</div>
</div> grid-template-areas
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px;
grid-gap: .5em;
padding: .5em;
border: 1px solid black;
grid-template-areas: " a b ";
}
#a { grid-area: a; }
#b { grid-area: b; }
@media ( max-width: 600px) {
.container {
grid-template-areas: " b " " a ";
grid-template-columns: 1fr;
grid-template-rows: 50px 50px;
}
}
/* non-essential decorative styles */
#a { background-color: lightgreen; }
#b { background-color: orange; }
#a, #b { display: flex; align-items: center; justify-content: center; font-size: 1.5em; }<div class="container">
<div id="a">A</div>
<div id="b">B</div>
</div>