Comments (12)
А за счет чего появляется анимация?
from cms.
@maxsite Ширина меняется.
from cms.
Это я вижу. :-) Какой код так делает?
from cms.
Прописано же для всех полей в forms.less transition: all linear 0.2s;
Остальное делает js: добавляет-удаляет класс на форму, анимация работает.
Меня вот только смущает появление поля в мобильной версии ("смарты"). Может, пусть оно там будет всегда на виду?
Кстати, ты не думал подобрать другой вариант мобильного меню? Как по мне, через select как-то не очень...
from cms.
Ясно, а то я всю голову уже сломал. :-) С label здорово придумал — сразу фокус получается.
Со стилями надо разобраться. У тебя получается родительский (динамический) .slided-input и через него ты по сути и управляешь поведением вложенного input.my-search (через width в стилях). В таком варианте нужно прописывать правила для .f_search .my-search {} и .slided-input .my-search {}. А можно просто управлять видимостью .my-search, без дополнительного .slided-input? Смысл в общем-то просто отказаться от дополнительных стилей: сделать на уровне .visible без успользования свойства width.
По мобильной версии пока не думай. Мне кажется, что на планшетах и ниже поиск можно скрыть или сделать так чтобы была икока на ссылку отдельной страницы search.
from cms.
Со стилями надо разобраться. У тебя получается родительский (динамический) .slided-input и через него ты по сути и управляешь поведением вложенного input.my-search (через width в стилях). В таком варианте нужно прописывать правила для .f_search .my-search {} и .slided-input .my-search {}. А можно просто управлять видимостью .my-search, без дополнительного .slided-input?
Тут проблема в том, что для полей есть стили по-умолчанию в form.less. Если просто опираться на селектор .my-search, т. е. прописывать .my-search {...}, то дефолтные стили не перебить. Если только использовать несколько классов, наподобие БЭМ. В первоначальном варианте у поля будет, например .my-search.my-search--hidden
. По клику к нему будет добавляться .my-search--visible
. Этот класс будет отвечать за показ поля.
...сделать на уровне .visible без успользования свойства width.
Ты хочешь сделать показ поля именно на js, без использования css? А какой в этом смысл?
from cms.
Получилась какая-то солянка со стилями. У нас есть form.less (пусть остается) и my-template.less. Всё нужно делать в последнем. Вариант с БЭМ мне нравится больше — пусть будет лишний класс, и его можно описать в my-template.less, не вводя дополнительные сущности. Только определять не .my-search.my-search--hidden
, а .my-search--hidden
. Если так получится, то можно будет использовать предопределенные стили их хелперов unicss.
from cms.
Смотри. Нам надо описать первоначальное состояние поля, оно скрыто. Если это повесить на один класс типа
.my-search--hidden {
padding-left: 0;
padding-right: 0;
width: 0;
}
то он не перебьет
input[type="search"] {
padding: 4px 6px;
}
из form.less.
Варианты:
- Использовать два класса, как писал выше
- Использовать
input[type="search"].my-search--hidden {}
- Использовать id. Задать более вменяемое, чем "sss" ))
from cms.
Не указал input.my-search--hidden
. Но мы же вроде не используем элементы в селекторах...
from cms.
Вопрос же только в padding. У нас он задан с important. То есть будет так:
.my-search--hidden {
.pad0-rl;
.w0;
}
from cms.
Если так, то да. Давай я попробую внести изменения и обновить пулл-реквест. В top1.php останется только скрипт. Лишнее, что было (указывал там еще media-query) тоже уберу.
from cms.
Ок.
from cms.
Related Issues (20)
- Предложение о создании плагина импорта/экспорта БД для maxsite HOT 3
- Изменить порядок сортировки комментариев к записи HOT 1
- С 1 января сайт перестал работать HOT 1
- Вывод записей по тегу в конце контента PAGE HOT 1
- Stored-Cross-Site-Scripting (XSS)-vulnerabilities(authenticated)--1 HOT 1
- Stored-Cross-Site-Scripting (XSS)(authenticated) --2 HOT 1
- Multiple Arbitrary File Deletion vulnerabilities HOT 1
- Remote Code Execution Vulnerability In MaxSite CMS v180 HOT 1
- You don't have permission to access /admin/plugin_ushki on this server. HOT 2
- Stored-Cross-Site-Scripting (XSS)(authenticated) HOT 2
- Arbitrary File Read (Authenticated)
- Remote Code Execution vulnerability exists in maxsite CMS (Latest Version) HOT 1
- Stored-Cross-Site-Scripting (XSS) HOT 2
- Доброго времени. Та же самая проблема, версия MaxSite CMS Version 102.3. HOT 1
- Add SECURITY.md HOT 1
- Не работает залипание второго меню и виджета в сайтбаре HOT 2
- Здравствуйте можно ли включить поддержку картинок в формате webp HOT 1
- mso_slug некорректно обрабатывает румынские символы с диакритиками в верхнем регистре
- Лінк на телеграм чат застарілий ( HOT 1
- Админка грузится вечно + решение проблемы HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cms.