From 2c5a4931bde13b9a96812805084221bea117832f Mon Sep 17 00:00:00 2001
From: Okke Harsta <oharsta@zilverline.com>
Date: Fri, 29 Sep 2023 16:52:59 +0200
Subject: [PATCH] Mobile displays for role cards

---
 README.md                              |  8 +++++++-
 client/src/components/MoreLessText.js  |  8 ++++----
 client/src/components/RoleCard.jsx     |  2 +-
 client/src/components/RoleCard.scss    |  8 +++++++-
 client/src/components/User.js          |  8 ++------
 client/src/index.scss                  |  4 ++--
 client/src/pages/Inviter.scss          | 10 ++++++++++
 welcome/src/components/MoreLessText.js |  8 ++++----
 welcome/src/components/RoleCard.jsx    |  2 +-
 welcome/src/components/RoleCard.scss   |  8 +++++++-
 welcome/src/components/User.js         |  2 +-
 welcome/src/index.scss                 | 21 ++++++++++++++-------
 welcome/src/pages/Proceed.js           |  5 +++--
 13 files changed, 63 insertions(+), 31 deletions(-)

diff --git a/README.md b/README.md
index 8e242f89..6ac6a59f 100644
--- a/README.md
+++ b/README.md
@@ -88,6 +88,12 @@ http://localhost:8080/ui/swagger-ui/index.html
 
 http://localhost:8081/
 
-http://localhost:4000/profile
+http://localhost:4000
 
 http://localhost:3000
+
+### [Institution Admin](#institution-admin)
+
+To become an institution admin in invite, add the following values as `eduPersonEntitlements` using Mujina:
+* urn:mace:surfnet.nl:surfnet.nl:sab:organizationGUID:ad93daef-0911-e511-80d0-005056956c1a
+* urn:mace:surfnet.nl:surfnet.nl:sab:role:SURFconextverantwoordelijke
\ No newline at end of file
diff --git a/client/src/components/MoreLessText.js b/client/src/components/MoreLessText.js
index 8d1ff60c..f756e315 100644
--- a/client/src/components/MoreLessText.js
+++ b/client/src/components/MoreLessText.js
@@ -3,10 +3,10 @@ import "./MoreLessText.scss";
 import I18n from "../locale/I18n";
 import {isEmpty, stopEvent} from "../utils/Utils";
 
-export const MoreLessText = ({txt, type = "full"}) => {
+export const MoreLessText = ({txt, cutOffNumber = 190, type = "full"}) => {
 
-    const [showMore, setShowMore] = useState(!isEmpty(txt) && txt.length > 190
-        && txt.substring(190).indexOf(" ") > -1);
+    const [showMore, setShowMore] = useState(!isEmpty(txt) && txt.length > cutOffNumber
+        && txt.substring(cutOffNumber).indexOf(" ") > -1);
     const [showLess, setShowLess] = useState(false);
 
     const toggleShowMore = e => {
@@ -16,7 +16,7 @@ export const MoreLessText = ({txt, type = "full"}) => {
         setShowLess(isShowingMore);
     }
 
-    const txtToDisplay = isEmpty(txt) ? txt : txt.substring(0, 190 + txt.substring(190).indexOf(" "));
+    const txtToDisplay = isEmpty(txt) ? txt : txt.substring(0, cutOffNumber + txt.substring(cutOffNumber).indexOf(" "));
 
     return (
         <span className={`more-less-txt description ${type}`}>
diff --git a/client/src/components/RoleCard.jsx b/client/src/components/RoleCard.jsx
index ee2e21bf..e5b4faf3 100644
--- a/client/src/components/RoleCard.jsx
+++ b/client/src/components/RoleCard.jsx
@@ -23,7 +23,7 @@ export const RoleCard = ({role, index, invitationSelected, invitationSelectCallb
             <section className={"user-role-info"}>
                 <p>{application.data.metaDataFields[`name:${I18n.locale}`]} ({application.data.metaDataFields[`OrganizationName:${I18n.locale}`]})</p>
                 <h3>{role.name}</h3>
-                <MoreLessText txt={role.description}/>
+                <MoreLessText txt={role.description} cutOffNumber={80}/>
             </section>
             {isEmpty(invitationSelected) && <div className={"launch"}>
                     <Button txt={I18n.t("inviter.details")} onClick={() => navigate(`/roles/${role.id}`)}/>
diff --git a/client/src/components/RoleCard.scss b/client/src/components/RoleCard.scss
index 34af166c..65a8ba4a 100644
--- a/client/src/components/RoleCard.scss
+++ b/client/src/components/RoleCard.scss
@@ -49,8 +49,9 @@
         display: flex;
         align-items: center;
 
-        @media (max-width: 680px) {
+        @media (max-width: $medium) {
             flex-direction: column;
+            align-items: flex-start;
         }
 
         .sds--checkbox-container {
@@ -73,6 +74,11 @@
         .launch {
             margin-left: auto;
 
+            button {
+                min-width: 140px;
+                margin-left: 15px;
+            }
+
             @media (max-width: 680px) {
                 margin: 20px auto 0 0;
             }
diff --git a/client/src/components/User.js b/client/src/components/User.js
index 77742139..75e573c2 100644
--- a/client/src/components/User.js
+++ b/client/src/components/User.js
@@ -7,10 +7,10 @@ import I18n from "../locale/I18n";
 import Logo from "./Logo";
 import {Card, CardType} from "@surfnet/sds";
 import {isEmpty} from "../utils/Utils";
-import {RoleMetaData} from "./RoleMetaData";
 import {deriveRemoteApplicationAttributes, providerInfo} from "../utils/Manage";
 import {ReactComponent as SearchIcon} from "@surfnet/sds/icons/functional-icons/search.svg";
 import {MoreLessText} from "./MoreLessText";
+import {RoleCard} from "./RoleCard";
 
 export const User = ({user, other}) => {
     const searchRef = useRef();
@@ -78,11 +78,7 @@ export const User = ({user, other}) => {
         const children =
             <div key={index} className={"user-role"}>
                 <Logo src={logo} alt={"provider"} className={"provider"}/>
-                <section className={"user-role-info"}>
-                    <h3>{role.name}</h3>
-                    <MoreLessText txt={role.description}/>
-                    <RoleMetaData role={role} user={user} provider={provider}/>
-                </section>
+                <RoleCard role={role} index={index} key={index}/>
             </div>;
         return (
             <Card cardType={CardType.Big} children={children}/>
diff --git a/client/src/index.scss b/client/src/index.scss
index 9f520f8c..7a2b4b5a 100644
--- a/client/src/index.scss
+++ b/client/src/index.scss
@@ -21,9 +21,9 @@ body:after {
 $min-width-pixels: 620px;
 
 .sds--card--big {
-    min-width: $min-width-pixels;
+    width: $min-width-pixels;
     @media (max-width: 680px) {
-        min-width: initial;
+        width: 90vw;
     }
 }
 
diff --git a/client/src/pages/Inviter.scss b/client/src/pages/Inviter.scss
index 5ce5189c..79f71555 100644
--- a/client/src/pages/Inviter.scss
+++ b/client/src/pages/Inviter.scss
@@ -35,9 +35,18 @@
             display: grid;
             grid-template-columns:  repeat(3, 1fr);
             margin-bottom: 40px;
+            @media (max-width: $medium) {
+                gap: 20px;
+            }
+
             button {
                 grid-column-start: 2;
+                @media (max-width: $medium) {
+                    grid-column-start: 1;
+                    grid-column: span 2;
+                }
             }
+
             .history {
                 grid-column-start: 3;
                 display: flex;
@@ -48,6 +57,7 @@
 
             }
         }
+
         .sub-info {
             margin-bottom: 15px;
         }
diff --git a/welcome/src/components/MoreLessText.js b/welcome/src/components/MoreLessText.js
index 2bf098b6..ea1ebd93 100644
--- a/welcome/src/components/MoreLessText.js
+++ b/welcome/src/components/MoreLessText.js
@@ -3,10 +3,10 @@ import "./MoreLessText.scss";
 import I18n from "../locale/I18n";
 import {isEmpty, stopEvent} from "../utils/Utils";
 
-export const MoreLessText = ({txt}) => {
+export const MoreLessText = ({txt, cutOffNumber = 190}) => {
 
-    const [showMore, setShowMore] = useState(!isEmpty(txt) && txt.length > 190
-        && txt.substring(190).indexOf(" ") > -1);
+    const [showMore, setShowMore] = useState(!isEmpty(txt) && txt.length > cutOffNumber
+        && txt.substring(cutOffNumber).indexOf(" ") > -1);
     const [showLess, setShowLess] = useState(false);
 
     const toggleShowMore = e => {
@@ -16,7 +16,7 @@ export const MoreLessText = ({txt}) => {
         setShowLess(isShowingMore);
     }
 
-    const txtToDisplay = isEmpty(txt) ? txt : txt.substring(0, 190 + txt.substring(190).indexOf(" "));
+    const txtToDisplay = isEmpty(txt) ? txt : txt.substring(0, cutOffNumber + txt.substring(cutOffNumber).indexOf(" "));
     return (
         <span className={"more-less-txt description"}>
             {showMore ? txtToDisplay : txt}
diff --git a/welcome/src/components/RoleCard.jsx b/welcome/src/components/RoleCard.jsx
index 7bee23e9..f50165e5 100644
--- a/welcome/src/components/RoleCard.jsx
+++ b/welcome/src/components/RoleCard.jsx
@@ -15,7 +15,7 @@ export const RoleCard = ({role, index, isNew = false, skipLaunch= false}) => {
             <section className={"user-role-info"}>
                 <p>{application.data.metaDataFields[`name:${I18n.locale}`]} ({application.data.metaDataFields[`OrganizationName:${I18n.locale}`]})</p>
                 <h3>{role.name}</h3>
-                <MoreLessText txt={role.description}/>
+                <MoreLessText txt={role.description} cutOffNumber={120}/>
             </section>
             {!skipLaunch && <div className={"launch"}>
                 <Button txt={I18n.t("proceed.launch")} onClick={() => {
diff --git a/welcome/src/components/RoleCard.scss b/welcome/src/components/RoleCard.scss
index 5831865f..3fa80ac4 100644
--- a/welcome/src/components/RoleCard.scss
+++ b/welcome/src/components/RoleCard.scss
@@ -13,6 +13,11 @@
             position: absolute;
             top: -16px;
             left: -22px;
+
+            @media (max-width: $medium) {
+                left: -10px;
+            }
+
         }
 
         @keyframes glow {
@@ -40,8 +45,9 @@
         display: flex;
         align-items: center;
 
-        @media (max-width: 680px) {
+        @media (max-width: $medium) {
             flex-direction: column;
+            align-items: flex-start;
         }
 
         img, svg {
diff --git a/welcome/src/components/User.js b/welcome/src/components/User.js
index 903b4d97..c876342c 100644
--- a/welcome/src/components/User.js
+++ b/welcome/src/components/User.js
@@ -9,7 +9,7 @@ export const User = ({user, invitationRoles = []}) => {
     const renderUserRole = (userRole, index) => {
         const role = userRole.role;
         return (
-            <RoleCard role={role} index={index}/>
+            <RoleCard role={role} key={index} index={index}/>
         );
     }
     const rolesToExclude = invitationRoles.map(invitationRole => invitationRole.role.id);
diff --git a/welcome/src/index.scss b/welcome/src/index.scss
index 747ca14f..70a15bbc 100644
--- a/welcome/src/index.scss
+++ b/welcome/src/index.scss
@@ -1,20 +1,27 @@
 @import "styles/tooltip";
 @import "styles/forms";
+@import "styles/vars";
 
 $min-width-pixels: 620px;
 
-.sds--toaster{
-    min-width: $min-width-pixels;
+.sds--toaster {
+    width: $min-width-pixels;
     margin: 25px 0;
-    @media (max-width: 680px) {
-        min-width: initial;
+    @media (max-width: $medium) {
+        width: 90vw;
     }
 }
 
 .sds--card--big {
-    min-width: $min-width-pixels;
-    @media (max-width: 680px) {
-        min-width: initial;
+    width: $min-width-pixels;
+    @media (max-width: $medium) {
+        width: 90vw;
     }
 }
 
+.sds--modal--container.full {
+    @media (max-width: $medium) {
+        width: 90vw;
+    }
+
+}
\ No newline at end of file
diff --git a/welcome/src/pages/Proceed.js b/welcome/src/pages/Proceed.js
index ff734c2f..0d2ef49e 100644
--- a/welcome/src/pages/Proceed.js
+++ b/welcome/src/pages/Proceed.js
@@ -23,6 +23,7 @@ export const Proceed = () => {
     const [showModal, setShowModal] = useState(true);
 
     useEffect(() => {
+
         if (isEmpty(user)) {
             login(config);
         } else if (isEmpty(invitation)) {
@@ -46,7 +47,7 @@ export const Proceed = () => {
     const renderInvitationRole = (invitationRole, index, isNew, skipLaunch=false) => {
         const role = invitationRole.role;
         return (
-            <RoleCard role={role} index={index} isNew={isNew} skipLaunch={skipLaunch}/>
+            <RoleCard role={role} key={index} index={index} isNew={isNew} skipLaunch={skipLaunch}/>
         );
     }
 
@@ -73,7 +74,7 @@ export const Proceed = () => {
                              large={true}
                              children={toasterChildren}/>
                     {reloadedInvitation.roles.map((invitationRole, index) => renderInvitationRole(invitationRole, index, true))}
-                    <User user={user} invitationRoles={invitation.roles}/>
+                    <User user={user} invitationRoles={reloadedInvitation.roles}/>
                 </div>
 
             </>