Mailing-List: contact commits-help@nifi.apache.org; run by ezmlm
Precedence: bulk
Reply-To: dev@nifi.apache.org
Date: Wed, 29 Jun 2016 23:21:57 +0000 (UTC)
From: "Koji Kawamura (JIRA)" <jira@apache.org>
To: commits@nifi.apache.org
Message-ID: <JIRA.12860315.1440780958000.48.1467242517870@Atlassian.JIRA>
In-Reply-To: <JIRA.12860315.1440780958000@Atlassian.JIRA>
References: <JIRA.12860315.1440780958000@Atlassian.JIRA> <JIRA.12860315.1440780958047@arcas>
Subject: [jira] [Comment Edited] (NIFI-906) Docs do not display well on
 mobile/smaller res devices
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 7bit
archived-at: Wed, 29 Jun 2016 23:22:00 -0000


    [ 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)