[
https://issues.apache.org/jira/browse/COUCHDB-2471?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Robert Kowalski updated COUCHDB-2471:
-------------------------------------
Description:
There are several issues with our current pane-layout and the header, their
width is controlled by resizeColumns.js:
- We are often getting horizontal scrollbars which are quite hard to fix
(https://issues.apache.org/jira/browse/COUCHDB-2234) - as soon as we fix them
the issues return almost immediately after fixing them:
https://issues.apache.org/jira/browse/COUCHDB-2320
- Multipane Layouts and Header in Multipane Layouts are overlapping and this
leads to interesting bugs and workarounds. Examples are:
1. Button not clickable (as it is overlapped by a not visible other header
element of the panes)
2. Buttons to far right or left
3. spending alot of time to position elements in the header which should
basically just float next to each other
4. not being able to use the regular container for the api-url button and
instatiation as we need a special solution for new kinds of layout
Sean prototyped some time ago Fauxton in Angular for a project. I added the
code as it shows how a pure CSS solution can work with multi-pane layouts which
would solve all these problems which slow down development and would also close
the open issues. Additionally we would not have to kind of hotfix so much code
like we did in the past.
Bonus points for adding responsiveness! (we have bootstrap 2.3 included in
Fauxton which has some helpers for responsive grid layouts)
was:
There are several issues with our current pane-layout and the header, their
width is controlled by resizeColumns.js:
- We are often getting horizontal scrollbars which are quite hard to fix
(https://issues.apache.org/jira/browse/COUCHDB-2234) - as soon as we fix them
the issues return almost immediately after fixing them:
https://issues.apache.org/jira/browse/COUCHDB-2320
- Multipane Layouts and Header in Multipane Layouts are overlapping and this
leads to interesting bugs and workarounds. Examples are:
- Button not clickable (as it is overlapped by a not visible other header
element of the panes)
- Buttons to far right or left
- spending alot of time to position elements in the header which should
basically just float next to each other
- not being able to use the regular container for the api-url button and
instatiation as we need a special solution for new kinds of layout
Sean prototyped some time ago Fauxton in Angular for a project. I added the
code as it shows how a pure CSS solution can work with multi-pane layouts which
would solve all these problems which slow down development and would also close
the open issues. Additionally we would not have to kind of hotfix so much code
like we did in the past.
Bonus points for adding responsiveness! (we have bootstrap 2.3 included in
Fauxton which has some helpers for responsive grid layouts)
> Rewrite CSS for Header and Pane-Layout
> --------------------------------------
>
> Key: COUCHDB-2471
> URL: https://issues.apache.org/jira/browse/COUCHDB-2471
> Project: CouchDB
> Issue Type: Bug
> Security Level: public(Regular issues)
> Components: Fauxton
> Reporter: Robert Kowalski
> Attachments: cloudant_dashboard_functional_prototype.zip
>
>
> There are several issues with our current pane-layout and the header, their
> width is controlled by resizeColumns.js:
> - We are often getting horizontal scrollbars which are quite hard to fix
> (https://issues.apache.org/jira/browse/COUCHDB-2234) - as soon as we fix them
> the issues return almost immediately after fixing them:
> https://issues.apache.org/jira/browse/COUCHDB-2320
> - Multipane Layouts and Header in Multipane Layouts are overlapping and this
> leads to interesting bugs and workarounds. Examples are:
> 1. Button not clickable (as it is overlapped by a not visible other header
> element of the panes)
> 2. Buttons to far right or left
> 3. spending alot of time to position elements in the header which should
> basically just float next to each other
> 4. not being able to use the regular container for the api-url button and
> instatiation as we need a special solution for new kinds of layout
> Sean prototyped some time ago Fauxton in Angular for a project. I added the
> code as it shows how a pure CSS solution can work with multi-pane layouts
> which would solve all these problems which slow down development and would
> also close the open issues. Additionally we would not have to kind of hotfix
> so much code like we did in the past.
> Bonus points for adding responsiveness! (we have bootstrap 2.3 included in
> Fauxton which has some helpers for responsive grid layouts)
--
This message was sent by Atlassian JIRA
(v6.3.4#6332)
