nikolai-shabalin / grid-overlay Goto Github PK

View Code? Open in Web Editor NEW

5.0 5.0 0.0 1.06 MB

google chrome extensions для наложения сетки на любой сайт

License: GNU Affero General Public License v3.0

HTML 1.88% JavaScript 94.67% CSS 3.45%

grid-overlay's Introduction

Привет

Меня зовут Коля. Я что-то делаю для интернета.

Списки

Библиотеки

Статьи

grid-overlay's People

Contributors

Stargazers

Watchers

grid-overlay's Issues

Нет навигации с помощью tab по чекбоксам

Чтобы воспроизвести просто табай по инпутам.

Всё из-за того, что используются ненативные инпуты

Сохранять состояния между каждым открытием попапа

открываю попап расширения
пользуюсь, настраиваю сетку
закрываю попап
открываю попап расширения снова
сетка строится заново по дефолтным настройкам

Нужно научится сохранять состояние между каэжым открытием

Локализация на итальянский

Dictionary

russian	english	Italian
Количество колонок	columns
Ширина колонки	column width
Ширина гаттеров	gutter width
Цвет колонки	column color
Цвет гаттера	gutter color
Прозрачность	opacity
Резиновый	fluid
Макс. ширина	max width

Так как попап уехал из панели хрома в тело страницы, то можно сделать драг всего попапа по странице. Это будет удобно если попап перекрывает какие-то важные части сайта, но при этом не хочется его скрывать (почему-то).

Новые позиции можно сохранять и при очередном открытие, показывать попап с новыми позициями.

Удалить классы с элементов. Перенести все стили в inline

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

Пока можно сделать тупо

удалить все классы с дивов всех элементов content.js
все стили генериьть js инлайново

Вертикальный ритм

Есть смысл добавить вертикальный ритм

Попросить дизайнера отрисовать popup
реализовать

Добавить readme

У приложения есть неочевидные функции взаимодействия. Их стоило бы описать.
Также написать, что вообще из себя представляет приложение. Обычно пару скриншотов достаточно

При клике на label "Резиновый" не чекается чекбокс

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

Починить colorpicker

Сейчас colorpicker не может выйти за пределы popup. Возможно и не сможет, тогда нужно переместить colorpicker в центр попапа или расширить popup для colorpicker

Добавить иконку для магазина google chrome

При установке из магазина google chrome нет иконки.

Для начала стоит выяснить размеры и попросить у дизайнера отрисовать

Локализация на английский язык

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

Может случится так, что цифры в колонке могут занять больши контента, чем должна быть колонка

описание

Может получится так, что цифры в колонках могут занимать места больше, чем должна быть ширина колонки.

как обнаружить баг

открыть сайт в 320px
выбрать резиновый макет
выбрать 36 колонок

Стилизовать чекбокс

Чекбокс, который включает резиновый макет сейчас стандартный браузерный, не красиво

Добавить changelog

При каждом открытие сетка создается заново

Нужно научится сохранять состояние между открытиями

Добавить "code of conduct"

Вместо чекбокса "резиновый " сделать свитчер

Потребуется дизайнер

Пресеты

Можно сделать выпадающий список (селект) с пресетами

960 - 12 60 20
Кельник - 36 0 fluid
8пиксельная сетка https://designpub.ru/https-medium-com-simberev-8pt-grid-for-web-f05fccc956ab
- но только, когда появится вертикальный ритм (#21)

Поискать ещё популярных сеток.

Сами пресеты это объекты, которые просто будет добавлять.

Пресеты будут сохраняться при закрытие расширения, так как скорее всего тебе нужно сохранить контекст

Таскание поля вбок для изменения значения внутри поля

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

наводим курсор над полем
кликаем и не отпускаем
если ведем курсор в левую сторону, то цифра внутри поля уменьшается, в правую увеличивается

Добавить лицензию

для начала разобраться, что вообще существует и зачем это нужно

GNU AGPLv3
GNU LGPLv3
Mozilla Public License 2.0
The MIT License
Apache License 2.0
The Unlicense

Перерисовать иконку для панели расширений

Если присмотреться, то средняя линия, которая режет яйцо не по центру. Это из-за того, что яйцо имеет четный размер ширины.

Например, есть блок в 200px шириной, нужно по центру нарисовать однопиксельную линию. Если рисовать линию на сотом пикселе, то будет казаться, что линия идёт левее и по идеи надо рисовать двухпиксельную линию. Тут всё тоже самое размер картинки намного меньше 32*32, вроде.

В общем, попростому нужно сделать картинку с нечетной шириной, а на деле вообще всё перерисовать.