search

keboola / indigo-ui

Indigo UI library, its CSS and React components. Also Styleguide app showing usages of this library.
https://indigo.keboola.com
MIT License
5 stars 0 forks source link

responsivity of sidebar #253

Closed janmichek closed 5 years ago

janmichek commented 5 years ago

Podivam se na to

ujovlado commented 5 years ago

Jo, kukni to ... z mojho pohladu je to tam dvojmo a pritom staci par riadkov. Ked si zduplikujem sidebar.less a diffnem to s tymto PR, uz to vyzera lepsie. Pravdepodobne to tam ostalo z predch uprav.

diff ```diff --- /home/vlado/workspace/keboola/indigo-ui/src/indigo/less/sidebar.less 2018-09-18 15:41:58.993504765 +0200 +++ /home/vlado/.PhpStorm2018.2/config/scratches/scratch.less 2018-09-18 15:20:20.720177508 +0200 @@ -51,7 +51,7 @@ position: absolute; top: 24px; right: 20px; - @media all and (max-height: 750px) { + @media all and (max-height: 770px) { top: 18px; right: 16px; } @@ -68,24 +68,6 @@ padding: 6px; width: 98%; - - - .kbc-search { - color: #7f8188; - - .kbc-icon-search { - top: 10px; - } - - input { - background: #292d38; - color: #FFFFFF; - border-color: #252933; - box-shadow: @box-shadow-dark; - margin-bottom: 12px; - } - } - li { &.dropdown-header { @@ -128,6 +110,10 @@ overflow-y: scroll; } + .kbc-project-select-results { + margin-top: 12px; + } + .kbc-project-select-new { margin: 0 -8px; padding: 10px 8px 0; @@ -175,7 +161,7 @@ line-height: 34px; } - @media all and (max-height: 750px) { + @media all and (max-height: 770px) { > a { padding: 0 14px; } @@ -230,7 +216,7 @@ } } -@media all and (max-height: 750px) { +@media all and (max-height: 770px) { .kbc-user img { display: none; @@ -265,10 +251,13 @@ font-size: 11px; } + + +//TEMP STYLES /* * Sidebar */ - +/* stylelint-disable no-duplicate-selectors */ .kbc-sidebar { background: #282d38; color: #fff; @@ -318,7 +307,7 @@ position: absolute; top: 24px; right: 20px; - @media all and (max-height: 750px) { + @media all and (max-height: 770px) { top: 18px; right: 16px; } @@ -442,7 +431,7 @@ line-height: 34px; } - @media all and (max-height: 750px) { + @media all and (max-height: 770px) { > a { padding: 0 14px; } @@ -497,7 +486,7 @@ } } -@media all and (max-height: 750px) { +@media all and (max-height: 770px) { .kbc-user img { display: none; ```
janmichek commented 5 years ago

Aha, uz jsem se zorientoval, je to zmateny, vysvetlim.

ujovlado commented 5 years ago

Ty prechodny reseni delam tak ze zkopiruju celej blok. Nevybyram ovlivneny styly. Pro me je to o dost min prace, nemusim resit specificitu selectoru, no-brainer Po nasazeni se muzou odstranit temp styly. Radka 256 a niz.

toto chapem, jasne ... tuna mam ale pocit, ze to netreba, lebo to je proste zduplikovane. 3x zmena z 750px -> 770px, kukni si ten diff. Potom kbc-search, to este caka na merge connection - zaroven je blbos to v jednej casti vyhodit a v druhej nechat. No a este je tam kbc-project-select-results ... co myslim mozeme vyhodit (nejaky pozostatok?)

Tento PR mal mat imho zmenu na 3 riadky

ujovlado commented 5 years ago

samozrejme myslim 3 riadky, vzhladom na ten diff, co vidim.

janmichek commented 5 years ago

ted tam jsou zmeneny jen ty breakpointy. Obecne mi to pripada jako overkill pro tuhle malou zmenu se srat s temp resenim, ale budiz. Je to tam

ujovlado commented 5 years ago

Ja to stale nechapem asi ... ved ked si zmenil len breakpointy (3 riadky), preco ked si pozrem diff v tomto PR, tak tam vidim +260 riadkov?

janmichek commented 5 years ago

Nevim, mozna se to obejde bez docasnyho reseni. Nechtel jsem to moc zkoumat, tak jsem to udelal automaticky, na jisto.

ujovlado commented 5 years ago

No to sa ti snazim vysvetlit uz 2h :)

ujovlado commented 5 years ago

Tak som este vyhodil veci, co som spominal tu: https://github.com/keboola/indigo-ui/pull/253#issuecomment-422413468