fix: align card footer items and move avatar over card section

openedx · Oct 17, 2023 · 661374f · 661374f
1 parent 7356674
commit 661374f
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 9 deletions.
diff --git a/src/profile/ProfilePluginPage.jsx b/src/profile/ProfilePluginPage.jsx
@@ -133,6 +133,7 @@ class ProfilePluginPage extends React.Component {
       <Plugin fallbackComponent={<Fallback />}>
         <Card className="mb-2">
           <Card.Header
+            className="pb-5"
             subtitle={(
               <Hyperlink destination={`http://localhost:1995/u/${this.props.params.username}`}>
                 View public profile
@@ -155,21 +156,22 @@ class ProfilePluginPage extends React.Component {
               )
             }
           />
-          <Card.Section className="text-center">
+          <Card.Section className="text-center" muted="true">
             <Avatar
-              size="lg"
+              size="xl"
+              className="profile-plugin-avatar"
               src={profileImage.src}
               alt="Profile image"
             />
-            <h1 className="h3 mb-0 font-weight-bold">{this.props.params.username}</h1>
+            <h1 className="h2 mb-0 font-weight-bold">{this.props.params.username}</h1>
             <Country
               country={country}
               visibilityCountry={visibilityCountry}
               formId="country"
               {...commonFormProps}
             />
           </Card.Section>
-          <Card.Footer>
+          <Card.Footer className="p-0">
             <Card.Section className="pgn-icons-cell-vertical">
               <Icon src={VerifiedUser} />
               <p>
@@ -178,13 +180,13 @@ class ProfilePluginPage extends React.Component {
             </Card.Section>
             <Card.Section className="pgn-icons-cell-vertical">
               <Icon src={HistoryEdu} />
-              <span>
+              <p>
                 {intl.formatMessage(get(
                   eduMessages,
                   `profile.education.levels.${levelOfEducation}`,
                   eduMessages['profile.education.levels.o'],
                 ))}
-              </span>
+              </p>
             </Card.Section>
           </Card.Footer>
         </Card>

diff --git a/src/profile/forms/Country.jsx b/src/profile/forms/Country.jsx
@@ -133,7 +133,7 @@ class Country extends React.Component {
           content={intl.formatMessage(messages['profile.country.label'])}
         /> */}
         <Icon src={LocationOn} />
-        <p className="h5">{countryMessages[country]}</p>
+        <p className="h5 mt-1 ml-1">{countryMessages[country]}</p>
       </div>
       //     ),
       //   }}

diff --git a/src/profile/index.scss b/src/profile/index.scss
@@ -167,14 +167,23 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    text-align: center;
     margin: 1px;
-    width: 150px;
-    height: 100px;
   }
   .pgn-icons-cell-horizontal {
     display: flex;
     flex-direction: row;
+    justify-content: center;
     margin: 1px;
   }
 
+  .profile-plugin-avatar {
+    @include media-breakpoint-up(xs) {
+      max-width: 12rem;
+      margin-right: 0;
+      margin-top: -4rem;
+      margin-bottom: 1rem;
+    }
+  }
+
 }