Merge pull request #69 from silinternational/develop

UX feedback and new Help link for Hub users

Author: longrunningprocess

dictionaries/review.definition.json

@@ -7,10 +7,16 @@
 		"ko": "프로필 검토"
 	},
 	"header": {
-		"en": "Profile review – Are these still accurate?",
-		"es": "Revisión del perfil - ¿Siguen siendo exactos?",
-		"fr": "Examen du profil - Sont-ils toujours exacts?",
-		"ko": "프로필 검토 - 여전히 정확한가?"
+		"en": "Profile review",
+		"es": "Revisión del perfil",
+		"fr": "Examen du profil",
+		"ko": "프로필 검토"
+	},
+	"info": {
+		"en": "Are these still correct?",
+		"es": "¿Siguen siendo correctos?",
+		"fr": "Sont-ils toujours corrects?",
+		"ko": "여전히 맞습니까?"
 	},
 	"mfa_header": {
 		"en": "2-Step Verification",
@@ -61,9 +67,9 @@
 		"ko": "이들 중 일부는 업데이트해야합니다."
 	},
 	"button_continue": {
-		"en": "These are still accurate",
-		"es": "Estos siguen siendo precisos.",
-		"fr": "Ce sont toujours précis",
+		"en": "These are still correct",
+		"es": "Estos siguen siendo correctos",
+		"fr": "Ceux-ci sont toujours corrects",
 		"ko": "이들은 여전히 정확하다."
 	}
 }

dictionaries/selectidp.definition.json

@@ -28,5 +28,11 @@
 		"es": "{IdpName} próximamente",
 		"fr": "{IdpName} à venir",
 		"ko": "{idpName} 곧 제공됨"
+	},
+	"help": {
+		"en": "Help",
+		"es": "Ayuda",
+		"fr": "Aidez-moi",
+		"ko": "도움"
 	}
 }

docker-compose.yml

@@ -87,7 +87,7 @@ services:
       PASSWORD_FORGOT_URL:  "http://example.org"
 
   idp4:  # used for mfa testing
-    image: silintl/ssp-base:develop-5.0
+    image: silintl/ssp-base:develop
     volumes:
       - ./development/cert:/data/vendor/simplesamlphp/simplesamlphp/cert
       - ./development/idp4/authsources.php:/data/vendor/simplesamlphp/simplesamlphp/config/authsources.php
@@ -139,7 +139,7 @@ services:
         MYSQL_PASSWORD: "pass"
 
   broker:
-    image: silintl/idp-id-broker:develop-4.0
+    image: silintl/idp-id-broker:develop
     volumes:
       - ./development/idp4/m991231_235959_insert_mfa_test_users.php:/data/console/migrations/m991231_235959_insert_mfa_test_users.php
     ports:

themes/material/common-head-elements.php

@@ -32,7 +32,7 @@
 $colors = htmlentities($this->configuration->getValue('theme.color-scheme') ?: 'indigo-purple');
 ?>
 <link rel="stylesheet" href="material.<?= $colors ?>.1.2.1.min.css">
-<link rel="stylesheet" href="styles.2.3.3.css">
+<link rel="stylesheet" href="styles.2.3.4.css">
 
 <script async src="material.1.2.1.min.js"></script>
 

themes/material/default/selectidp-links.php

@@ -38,6 +38,12 @@ function clickedAnyway(idpName) {
             }
             ?>
             </span>
+
+            <div class="mdl-layout-spacer"></div>
+
+            <nav class="mdl-navigation">
+                <a class="mdl-navigation__link" href="https://idphelp.sil.org" target="_blank"><?= $this->t('{material:selectidp:help}') ?></a>
+            </nav>
         </div>
     </header>
 

themes/material/profilereview/review.php

@@ -36,16 +36,22 @@ function prettifyDates() {
 
     <main class="mdl-layout__content" layout-children="column">
         <form layout-children="column" method="post">
+            <p>
+                <h2 class="mdl-typography--headline">
+                    <?= $this->t('{material:review:info}') ?>
+                </h2>
+            </p>
+            
             <section layout-children="row-top" >
                 <?php if (count($this->data['mfaOptions']) > 0): ?>
-                <div class="mdl-card mdl-shadow--8dp">
+                <div class="mdl-card fixed-width mdl-shadow--8dp">
                     <div class="mdl-card__title center">
                         <h1 class="mdl-card__title-text">
                             <?= $this->t('{material:review:mfa_header}') ?>
                         </h1>
                     </div>
 
-                    <div class="mdl-card__title center" >
+                    <div class="mdl-card__title" >
                         <ul class="mdl-card__subtitle-text mdl-list">
                             <?php foreach ($this->data['mfaOptions'] as $mfa): ?>
                             <li class="mdl-list__item mdl-list__item--three-line">
@@ -74,14 +80,15 @@ function prettifyDates() {
                 <?php endif; ?>
 
                 <?php if (count($this->data['methodOptions']) > 0): ?>
-                <div class="mdl-card mdl-shadow--8dp">
+                <!-- if there are two cards, remove the right margin so the buttons align with the edge of the card. -->
+                <div class="mdl-card fixed-width mdl-shadow--8dp" style="<?= count($this->data['methodOptions']) == 2 ? 'margin-right: 0px' : '' ?>">
                     <div class="mdl-card__title center">
                         <h1 class="mdl-card__title-text">
                             <?= $this->t('{material:review:methods_header}') ?>
                         </h1>
                     </div>
 
-                    <div class="mdl-card__title center" >
+                    <div class="mdl-card__title" >
                         <ul class="mdl-card__subtitle-text mdl-list">
                             <?php foreach ($this->data['methodOptions'] as $method): ?>
                             <li class="mdl-list__item mdl-list__item--two-line">

www/styles.2.3.3.css www/styles.2.3.4.csswww/styles.2.3.3.css renamed to www/styles.2.3.4.css

@@ -137,6 +137,11 @@ i.material-icons.mdl-typography--display-4 {
   margin: 1em;
 }
 
+/* cards on profile review needed to have consistent width */
+.mdl-card.fixed-width {
+  width: 365px; /* takes into acocunt "... (10 remaining)" for appropriate width */
+}
+
 /* don't want images to be too small on cards */
 .mdl-card__media > img {
   min-width: 20%;