[bug-fix] replace semantic accordion with amp accordion // #161

brillout · brillout · commit a69218242004 · 2018-10-09T18:59:11.000+02:00
diff --git a/reframe/browser/browserInit.js b/reframe/browser/browserInit.js
@@ -1,7 +1,6 @@
 import browserConfig from '@brillout/browser-config';
 
 import './jquery-global'; // see https://stackoverflow.com/a/39820703/1855917
-import './thirdparty/semantic-ui-2.3.2/accordion.min';
 import './thirdparty/semantic-ui-2.3.2/progress.min';
 
 initBrowser();
diff --git a/reframe/index.html b/reframe/index.html
@@ -25,6 +25,10 @@
               href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
               integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
               crossorigin="anonymous">
+
+        <script async src="https://cdn.ampproject.org/v0.js"></script>
+        <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
+
         !HEAD
     </head>
     <body>
diff --git a/reframe/views/profile/rightpanel/RightPanel.js b/reframe/views/profile/rightpanel/RightPanel.js
@@ -8,6 +8,7 @@ import CreateYourProfile from './CreateYourProfile';
 import ProfileBeingCreated from './ProfileBeingCreated';
 import {Contrib} from './contrib/Contrib';
 import {getShownContribs} from './contrib/getContribInfo';
+import {AccordionListContainer} from '../../utils/Accordion';
 
 const RightPanel = props => {
   // Use these queues to avoid filling up the event loop:
@@ -76,9 +77,9 @@ const RightPanel = props => {
 
   return (
     <div className="col-9 pl-2 pr-0">
-      <div style={{fontSize: '14px'}}>
+      <AccordionListContainer style={{fontSize: '14px'}}>
         {repos}
-      </div>
+      </AccordionListContainer>
       {
         props.contribs &&
         <div className="text-gray" style={{textAlign: 'right'}}>
diff --git a/reframe/views/utils/Accordion.js b/reframe/views/utils/Accordion.js
@@ -2,6 +2,7 @@ import React from 'react';
 import '../../browser/thirdparty/semantic-ui-2.3.2/accordion.min.css';
 import './Accordion.css';
 
+export {AccordionListContainer};
 export {Accordion};
 export {AccordionHead}
 export {AccordionBody};
@@ -12,16 +13,20 @@ export {stopPropagationOnLinks}
 const AccordionBadgerIcon = () => <div className="badger-accordion__header-icon"/>;
 const AccordionIcon = () => <span><i className="dropdown icon-vertical-align text-gray mx-1"></i></span>;
 
+const AccordionListContainer = (props) => (
+  React.createElement('amp-accordion', {animate: true, ...props})
+);
+
 const AccordionHead = ({className, ...props}) => (
   <div
-    className={"ui title "+className}
+    className={className}
     ref={stopPropagationOnLinks}
     {...props}
   />
 );
 const AccordionBody = ({className, ...props}) => (
   <div
-    className={"ui content "+className}
+    className={className}
     {...props}
   />
 );
@@ -41,14 +46,14 @@ class Accordion extends React.Component {
   }
 
   setupSemanticUi() {
-    this.props.pushToFunctionQueue(1, () => $(this.semanticAccordion.current).accordion());
+ // this.props.pushToFunctionQueue(1, () => $(this.semanticAccordion.current).accordion());
   }
 
   render() {
     const {className="", pushToFunctionQueue, ...props} = this.props;
     return (
-      <div
-        className={"ui accordion "+className}
+      <section
+        className={className}
         ref={this.semanticAccordion}
         {...props}
       />
