#2860 closed defect (fixed)

docs.rtems.org does not work on iPhones or iPads

Reported by: Chris Johns Owned by: Chris Johns
Priority: highest Milestone: Indefinite
Component: doc Version:
Severity: major Keywords:
Cc: Blocked By:
Blocking:

Description

The accordion box collapse does not work on iPhone and iPad.

Attachments (1)

0001-docs.rtems.org-fix-website-in-iPhones-and-iPads.patch (1.6 KB) - added by Sal on Dec 10, 2018 at 7:18:06 PM.
Patch to fix the bug

Download all attachments as: .zip

Change History (11)

comment:1 Changed on May 11, 2017 at 7:31:02 AM by Sebastian Huber

Milestone: 4.124.12.0

comment:2 Changed on Aug 13, 2017 at 11:39:11 PM by Chris Johns

Version: 4.114.12

comment:3 Changed on Oct 10, 2017 at 6:06:29 AM by Sebastian Huber

Component: Documentationdoc

comment:4 Changed on Oct 11, 2017 at 11:12:34 PM by Chris Johns

Status: newaccepted

comment:5 Changed on Nov 9, 2017 at 6:27:14 AM by Sebastian Huber

Milestone: 4.12.05.1

Milestone renamed

comment:6 Changed on Oct 14, 2018 at 12:33:55 AM by Joel Sherrill

Milestone: 5.1Indefinite
Version: 5

comment:7 Changed on Dec 6, 2018 at 3:52:25 PM by Sal

I downloaded the https://docs.rtems.org website with a website downloader and made a local web server to be able to test the changes I make from the computer in an iPad. I used an iPad 2 from 2011 with iOS 9.3.5 to test it so it should work on newer iPhones and iPads too.

Basically what happens is that the code is correct (this is why it works in every other web browser), but relies only on the data-target and data-toggle attributes, which for iPad's and iPhone's Safari web browser don't work very well. Other iOS web browsers (Chrome, Firefox, etc. for iOS) are probably also affected by this bug because Apple only permits to use the Safari browser engine in iOS applications.
Just by adding some CSS (cursor: pointer;) to the element works as expected. This change also shows a pointer cursor when hovering over the accordion you have to click when using a computer which makes it more intuitive instead of just an arrow.

I think that the source code of https://docs.rtems.org is not in any public repository so I can't make a patch, but the code to add is really short and simple. Just add this code at the end of https://docs.rtems.org/static/rtems/css/rtems.css:

[data-toggle~="collapse"] {
    cursor: pointer;
}

The code adds the required CSS to all elements which have the attribute data-toggle="collapse", so it fixes every element and everything works as expected.

comment:8 Changed on Dec 9, 2018 at 11:44:12 PM by Chris Johns

This is awesome.

The docs web site is held in this repo https://git.rtems.org/chrisj/rtems-admin.git/. If you could please make a patch against this repo I can apply it and push it.

Thank you for taking a look and providing a solution.

comment:9 Changed on Dec 10, 2018 at 7:17:15 PM by Sal

Ok, patch done! (attached and sent to devel@)

comment:10 Changed on Dec 13, 2018 at 10:06:58 PM by Chris Johns

Resolution: fixed
Status: acceptedclosed

Pushed the patch to the repo and uploaded the change to docs.rtems.org so it is now live. I have tested the change on IOS and all is working. Thank you for looking into this and fixing it.

Note: See TracTickets for help on using tickets.