Merge pull request #71 from SoftStackFactory/45-profile-portrait-responsive

45 profile portrait responsive

Author: khoadnguyen

src/pages/profile/profile.html

@@ -21,39 +21,46 @@
 
     <ion-row justify-content-center>
       <ion-col col-12 col-md-4 col-xl-2 text-center>
-        <ion-icon name="contact"></ion-icon>
+        <ion-icon id="pic-con" name="contact"></ion-icon>
       </ion-col>
     </ion-row>
 
-    <ion-row justify-content-center>
-      <ion-col class='name' col-12 col-md-4 col-xl-2 text-center>
+    <ion-row class="section"justify-content-center>
+      <ion-col class='name' col-12 text-center>
         Peter Horton
       </ion-col>    
     </ion-row>
 
-    <ion-row justify-content-center>
-      <ion-col col-5 align-self-center>
+    <ion-row class="section" justify-content-center>
+      <ion-col  class="user-info-colum" align-self-center>
         <ion-list>
           <ion-item>
-            <ion-label color="dark">Name</ion-label>
-            <ion-input placeholder="Peter Horton" text-center></ion-input>
-          </ion-item>
+           
+            <ion-label class= "label"color="dark">Name</ion-label>
+             <div class="user-info" item-content text-center><p  text-center>Peter Horton<p></div>
+             </ion-item>
           <ion-item>
-            <ion-label color="dark">Email</ion-label>
-            <ion-input placeholder="peterh@mail.com" text-center></ion-input>
+            <ion-label class= "label" color="dark">Email</ion-label>
+            <div class="user-info" item-content text-center><p>phorton@gmail.com<p></div>
           </ion-item>
         </ion-list>
       </ion-col>
     </ion-row>
 
-    <ion-row>
-      <ion-col col-2 push-4>
-        <button ion-button outline color="dark">Edit Profile</button>
+    <!-- <ion-row  justify-content-center>
+      <ion-col col-3  >
+        <button ion-button class="buttons" outline color="dark">Edit Profile</button>
       </ion-col>
-      <ion-col col-2 push-5>
-        <button ion-button outline color="dark">Logout</button>
+      <ion-col col-3 >
+        <button ion-button outline class="buttons" color="dark">Logout</button>
       </ion-col>
-    </ion-row>
+    </ion-row> -->
 
   </ion-grid>
+  <div class="buttons-div">
+  <button ion-button class="buttons1" outline color="dark">Edit Profile</button>
+
+  <button ion-button outline class="buttons1" color="dark">Logout</button>
+  </div>
+  
 </ion-content>

src/pages/profile/profile.scss

@@ -18,5 +18,69 @@ page-profile {
     .name {
         font-size: 30px;
     }
+    .section {
+        margin-top: 20px;
+    }
+    .label, user-info {
+        font-size: 20px;
+        color: black;
+         overflow: hidden; 
+         text-overflow: clip;
+         padding: 10px;
+    }
+    .label {
+        margin: auto;
+        min-width: 100px;
+    }
+
+    .user-info {
+        margin-left: 20%;
+        position: relative;
+    }
+    .user-info-colum {
+       width: 80%; 
+       margin: auto;
+       max-width: 500px;
+    }
+    .buttons {
+       
+        //display: block;
+       // margin: 10px;
+    } 
+    .buttons-div {
+        display: flex;
+        justify-content: center;
+    }
+    .buttons1 {
+        width: 100px;
+        margin: 10px 10px auto 10px;
+    }
+   
+    @media screen and (min-width: 768px) {
+        .name {
+            font-size: 50px;
+        }
+        label, user-info {
+            font-size: 40px;
+        }
+        ion-icon {
+            font-size: 250px;
+            margin-bottom: -30px;  
+        }
+        .section {
+            margin-top: 40px;
+        }
+        .user-info-colum {
+            width: 40%; 
+            max-width: 500px;
+        }
+        .buttons1 {
+            width: 140px;
+            height: 50px;
+           margin: 20px 20px auto 20px;
+           font-size: 20px;
+           
+        }
+    }
 
 }