Арсений Матыцин

Это по-другому работает, на сервере надо проверять приехали ли что в файле.

И если нет, то не менять значение в БД или (если данные автоматически заливаются по полям модели) перезаписывать значение.

В любой непонятной ситуации бери кусок кода, который не работает и проверяй его отдельно.
https://codepen.io/i-am-studio_ru/pen/RwWXPpE

Что скорее всего просто укажет на то, что проблему искать надо не в этом куске кода, который работает, а в стилях, скриптах, которые конфликтуют в проекте.

Нус в общем Роман ответил в комментариях по делу, разве что я бы порекомендовал проверять подстроку, так как request.path может содержать вложенную директорию, к примеру, а проверка в духе if '/' in request.path (не помню точно, умеет ли в такие проверки Jinja2, но если что можно функцию набросать).

Но тут будет другая проблема, что есть пути частично совпадают, тогда проверка будет провдена в обоих случаях, поэтому ИМХО, лучше поднимать из шаблона, который наследует или прямо из функции, которая запускает рендер идентификатор, проверка которого и будет в шаблоне в этой навигации.

Скажем в роутах:

...
render_template('template', current='home')

И в самих шаблонах:

<nav class="navigation block">
    <a class="nav-link {% if current == 'home' %}active{% endif %}" href="/">Главная</a>

Изменять поведение ячеек и строк.

К слову, запрос в поисковике так и называется «адаптивные таблицы».

span → position: relative + z-index: 1+
:after → z-index: 0

Прикрути визивиг или используй генератор объекта (читай JSON).

1. Дополнительные строки в таблице (которые открывать по клику), геморрно и тебе придется считать на JS размер 3х строк, чтобы под них кинуть плашку с тенью.
2. 8-й TD с обтеканием. И принудительным отображением не как ячейка таблицы (старый добрый хак для адаптивных таблиц). Очень давно не применял, поэтому могу ошибаться на счет исполнения, гугл поможет.
3. Не использовать таблицы.

Переставлять элементы нельзя, они прилетают с бэка в неизвестном порядке.

Прямо во время вывода и выводить их в свои места. Это явный двумерный массив. Который ты спокойно выведешь, как только поймешь, как с ним работать. Если быть точнее, двумерная проходка, к двумерному массиву можно и стоило бы привести для сортировки.

Приведу грубый пример на псевдокоде:

cols1 = []
cols2 = []
cols3 = []

for(i = 0; i < x; i++) { // Где x = размер самого большого массива
for(j = 0; j < 3; j++) { // Потому что колонок 3
if j == 0:
     print(cols1[i])
...

Естественно, надо предусмотреть пустые вхождения-заглушки, или заранее прописать классы для n+ элемента, чтобы они вставали в свою колонку, при это не фиксирую жестко их строку. Все элементарно.

1. Прочитать, как создавать формы для файлов.
2. Написать на PHP функцию (с доступом по урлу, так как вписывается в action формы), которая будет принимать файл и сохранять его.
3. Получившийся адрес (куда пикча сохранена) писать в базу. Искать в поисковике что-то в духе «Как записать в БД php»

4. Сразу смотреть в сторону обеспечения безопасности хотя бы на уровне разрешенных расширений файлов.

1. Таблица без бордеров.
2. «Таблица» в виде строк на flex-ах.
3. «Таблица» в формате grid.

Только ты ты получишь гибкое представление для изменяемых значений. «Строки» в «таблицах» могут быть 2-ячеистые, чтобы да, с помощью before цеплять тире.

Повторяющиеся элементы выводятся с помощью циклов, на уровне бэкенда или фронтенда.

У тебя в руках скорее всего либо реально очень старый сайт, который писали руками с копированием, либо просто результат работы бэкенда.

В php это выглядело бы как-то так:

...
foreach (&items as $item) { ?>
[HTML-тело карточки товара со вставленными параметрами вида $item->title]

Могут быть как прямые выводы на ЯП, так и с помощью шаблонизатора.

Итого, если у тебя проект с бэкендом, или фронтом, которые позволяет рисовать в цикле из базы или файла, используй язык. А если нужно просто 1 раз занести список, то можно это сделать в файле и обратить к генератору статики, например Jekyll.

1. Есть JS-фрейморки, которые упрощают жизни в постройке такого, например Vue (в проекте же может быть использован React или Angular).
2. Форма должна иметь id (value) для БД и значение для пользователя (внутри тега option), для адекватного обмена данными и записи связей в БД. В референсе, кстати, эмуляция динамическая, сам selet со значениями скрыт.
3. На уровне данных для JS → объект, на уровне БД → связи один ко многим.

Кстати, так как марки автомобилей заранее известны, то это можно даже не заносить в базу, а хранить просто в объекте в конфигах, но по правде говоря вариант так себе, в базе проще объявления вязать по ID с марками.

Речь же о графическом редакторе, эдаком визивиге для заданного набора параметров. С ними все просто, рисуются с помощью JS и в нормальном подходе к разработке параметры, которые ты задаешь во всплывающих формах (дизайн не важен, речь о сути элемента интерфейса) сохраняется в объекте, к примеру:

{
    block: {
        borderColor: 'red',
        borderWidth: '15'
....

Который в дальнейшем преобразуется в стили, инлайновые или отдельным файлом, тут как бэк написан.
В редакторах сайтов, таких, как тильда и юкоз (насколько я помню) оно еще и отображается сразу.

Есть подобные редакторы и на WP, например в Unyson-е: принцип тот же, оформление попроще, блоками.

Таких редакторов много, у этого, к примеру, можно сразу посмотреть сконфигурированный объект.

Другая же категория → надстройка над сайтом, их задача — жестко, через important-ы поменять стили здесь и сейчас. Иногда, переключить тему, де-факто вызвать функцию бэка, которая это сделает, визуально же ты увидишь кубики с цветами.

1. В одну строку события (onsubmit) можно передать через точку с запятой несколько вызовов (как классы).
2. Не уверен, что после return-а будет работать, вообще на кой он тут, тут же прямо вызов функции, перед ней не нужны ретурны, и как результат можно прямо в функцию зашить вызов функции Я.Метрики.

Крайне кривая верстка и нежизнеспособная. В ее рамках можно сделать так.

Fytch ответил про обязательный атрибут верстки.

А я дополню: никто в здравом уме не зумит сайт, для отладки используется дебаггер (f12). А для управления адаптивом включают эмуляцию устройств (там же в дебаггере).

Максим Ленский продемонстировал ответ на вопрос. Маску для картинки: она встраивается в документ и применяется по необходимости.

А для того, чтобы не при использовании разных картинок углы скашивались всегда одинаково, необходимо дописать скрипт, который будет генерировать этот path маски на базе условий, умноженных на соотношение размеров изображения.

1. Не стоит вешать на body стили, обнуление отступа → максимум. Данный хак— выстрел себе в ногу при бездумном использовании. Тем более overflow:hidden;
2. Использовать абсолютное\фиксированное позиционирование для красного блока.
3. Использовать обертку на флексбоксах, которая распределит содержимое тела страницы на красный блок и остальное с flex-grow:[1 или больше] по странице.

4. Или банально убрать выстрелы себе в ноги таким образом.

У меня перегруженный пример есть, но с комментариями. Это то, что тебе нужно, я думаю.