Merge pull request #67 from silinternational/profile-review-tweak

Profile review tweak

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": "이들은 여전히 정확하다."
 	}
 }

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/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%;