[PATCH] docs.rtems.org: fix website in iPhones and iPads

Marçal Comajoan Cara mcomajoancara at gmail.com
Mon Dec 10 17:58:52 UTC 2018


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

Basically what happened is that the code was correct (this is why it worked
in every other web browser), but relied 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) were 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.

To test the changes I used an iPad 2 from 2011 with iOS 9.3.5 so it
should work on newer iPhones and iPads too.

Closes #2860.

This work was part of GCI 2018.
---
 docs/docs.rtems.org/static/rtems/css/rtems.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/docs.rtems.org/static/rtems/css/rtems.css b/docs/docs.rtems.org/static/rtems/css/rtems.css
index 985e7f3..f6a0f08 100644
--- a/docs/docs.rtems.org/static/rtems/css/rtems.css
+++ b/docs/docs.rtems.org/static/rtems/css/rtems.css
@@ -94,3 +94,7 @@ col-md-9, h1 {
     line-height: 1;
     border: 0px;
 }
+
+[data-toggle~="collapse"] {
+    cursor: pointer;
+}
-- 
2.17.1



More information about the devel mailing list