nifi-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Koji Kawamura (JIRA)" <j...@apache.org>
Subject [jira] [Comment Edited] (NIFI-906) Docs do not display well on mobile/smaller res devices
Date Wed, 29 Jun 2016 23:21:57 GMT

    [ https://issues.apache.org/jira/browse/NIFI-906?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=15355244#comment-15355244
] 

Koji Kawamura edited comment on NIFI-906 at 6/29/16 11:21 PM:
--------------------------------------------------------------

I took a look at the documentation page (https://nifi.apache.org/docs.html). It already uses
foundation.js to provide responsive pages, however it doesn't work on the documentation page,
other pages looks fine.

I think there're two issues:

# NiFi Documentation is embedded as iframe. The iframe hides top-bar menu and footer with
narrower screen like mobile.
# The embedded NiFi Documentation is not responsive.

h3. Possible solution for #1

When I modified css as follows, the top-bar menu and footer was shown correctly. I couldn't
find the css file in nifi project available on Github, though. I assume it's managed somewhere
else.

{code}
/*
    Iframe
*/
/* line 177, ../../../src/scss/app.scss */
div.external-guide {
  position: absolute; // Change this to relative.
  left: 0;
  bottom: 0;
  right: 0;
  top: 2.8125rem; // Remove this.
  z-index: 1; // Remove this.
  background-color: #fff;
}
{code}

h3. Possible solution for #2

Since current web pages are using, I think we can start with foundation.js to use in NiFi
Documentation pages, or flexbox. Once we made the left component listing pane responsive,
it should be easier to see with small displays. I'm going to test with flexbox first.


was (Author: ijokarumawak):
I took a look at the documentation page (https://nifi.apache.org/docs.html). It already uses
foundation.js to provide responsive pages, however it doesn't work on the documentation page,
other pages looks fine.

I think there're two issues:

# NiFi Documentation is embedded as iframe. The iframe hides top-bar menu and footer with
narrower screen like mobile.
# The embedded NiFi Documentation is not responsive.

h3. Possible solution for #1

When I modified css as follows, the top-bar menu and footer was shown correctly. I couldn't
find the css file in nifi project available on Github, though. I assume it's managed somewhere
else.

{code}
/*
    Iframe
*/
/* line 177, ../../../src/scss/app.scss */
div.external-guide {
  position: absolute; // Change this to relative.
  left: 0;
  bottom: 0;
  right: 0;
  top: 2.8125rem; // Remove this.
  z-index: 1; // Remove this.
  background-color: #fff;
}
{code}

h3. Possible solution for #2

Since current web pages are using, I think we can start with foundation.js to use in NiFi
Documentation pages. Once we can make the left component listing pane responsive, it should
be easier with small displays. Thoughts?

> Docs do not display well on mobile/smaller res devices
> ------------------------------------------------------
>
>                 Key: NIFI-906
>                 URL: https://issues.apache.org/jira/browse/NIFI-906
>             Project: Apache NiFi
>          Issue Type: Bug
>          Components: Documentation & Website
>         Environment: Mobile, Small res devices
>            Reporter: Joseph Witt
>
> Tweet from @cyroxx
> @apachenifi Unfortunately, the docs (http://nifi.apache.org/docs.html ) are not mobile-friendly,
makes it hard to read about this interesting project
> https://twitter.com/cyroxx/status/637305973938483200



--
This message was sent by Atlassian JIRA
(v6.3.4#6332)

Mime
View raw message