Responsive User Profile Panel

index.html

<div ng-app="userProfile" ng-controller="Ctrl">
  <md-card>
    <md-toolbar>
      <div class="md-toolbar-tools">
        <h2>
          <span>Lecturer profile</span>
        </h2>
        <span flex></span>
        <md-button class="md-icon-button" ng-if="viewMode" ng-click="switchMode()">
          <md-tooltip>
            Edit Profile
          </md-tooltip>
          <md-icon>mode_edit</md-icon>
        </md-button>
        <md-button class="md-icon-button" ng-if="!viewMode" ng-click="switchMode(); saveChanges()">
          <md-tooltip>
            Save Changes
          </md-tooltip>
          <md-icon>save</md-icon>
        </md-button>
        <md-menu>
          <md-button class="md-icon-button" ng-click="$mdOpenMenu($event)">
            <md-tooltip>
              More Options
            </md-tooltip>
            <md-icon>more_vert</md-icon>
          </md-button>
          <md-menu-content>
            <md-menu-item>
              <md-button ng-click="deleteUser()">
                <md-icon>delete</md-icon>
                Delete User
              </md-button>
            </md-menu-item>
            <md-menu-item>
              <md-button ng-click="resetPassword()">
                <md-icon>replay</md-icon>
                Reset Password
              </md-button>
            </md-menu-item>
          </md-menu-content>
        </md-menu>
      </div>
    </md-toolbar>
    <md-card-content layout-sm="column" layout-gt-sm="row">
      <div class="user" layout-sm layout-gt-sm="column">
        <img src="https://lh3.googleusercontent.com/-W2XryVdi-lA/U6tSAh3SsbI/AAAAAAAAFGY/ZHJiUEcR_Zs/w480-h480/avatar%2Bmaterial%2Bdesign.png" alt="user avatar" class="user-avatar" />
        <md-button class="md-icon-button user-avatar-edit" ng-click="browserAvatar()">
          <md-icon>photo_camera</md-icon>
        </md-button>
        <form name="userBasicInfoForm" layout="column" layout-align="start" layout-align-sm="center start" flex>
          <md-input-container class="user-input-container">
            <label>Name</label>
            <textarea name="userName" required class="user-name" ng-model="user.name" ng-disabled="viewMode" flex></textarea>
            <div ng-messages="userBasicInfoForm.userName.$error">
              <div ng-message="required">This is required.</div>
            </div>
          </md-input-container>
          <md-input-container class="user-input-container">
            <label>Title</label>
            <input name="userTitle" required class="user-title" ng-model="user.title" ng-disabled="viewMode"></input>
            <div ng-messages="userBasicInfoForm.userTitle.$error">
              <div ng-message="required">This is required.</div>
            </div>
          </md-input-container>
        </form>
      </div>
      <form name="userDetailsForm" flex>
        <div layout="column" layout-gt-sm="row">
          <md-input-container flex>
            <label>Department</label>
            <input required name="userDepartment" ng-model="user.department" ng-disabled="viewMode"></input>
            <div ng-messages="userDetailsForm.userDepartment.$error">
              <div ng-message="required">This is required.</div>
            </div>
          </md-input-container>
          <md-input-container flex>
            <label>Location</label>
            <textarea name="userLocation" required ng-model="user.location" ng-disabled="viewMode"></textarea>
            <div ng-messages="userDetailsForm.userLocation.$error">
              <div ng-message="required">This is required.</div>
            </div>
          </md-input-container>
        </div>
        <div layout="column" layout-gt-sm="row">
          <md-input-container flex>
            <label>Company</label>
            <input name="userCompany" required ng-model="user.company" ng-disabled="viewMode"></input>
            <div ng-messages="userDetailsForm.userCompany.$error">
              <div ng-message="required">This is required.</div>
            </div>
          </md-input-container>
          <md-input-container flex>
            <label>Manager</label>
            <input name="userManager" required ng-model="user.manager" ng-disabled="viewMode"></input>
            <div ng-messages="userDetailsForm.userManager.$error">
              <div ng-message="required">This is required.</div>
            </div>
          </md-input-container>
        </div>
        <div layout="column" layout-gt-sm="row">
          <md-input-container flex>
            <label>Work Phone</label>
            <input type="tel" name="userWorkPhone" required ng-model="user.workPhone" ng-disabled="viewMode"></input>
            <div ng-messages="userDetailsForm.userWorkPhone.$error">
              <div ng-message="required">This is required.</div>
            </div>
          </md-input-container>
          <md-input-container flex>
            <label>Mobile Phone</label>
            <input type="tel" ng-model="user.mobilePhone" ng-disabled="viewMode"></input>
          </md-input-container>
        </div>
        <md-input-container>
          <label>Alias</label>
          <input type="email" name="userAlias" ng-model="user.alias" ng-disabled="viewMode"></input>
            <div ng-messages="userDetailsForm.userAlias.$error">
              <div ng-message="email">Email address is invalid</div>
            </div>
        </md-input-container>
        <md-input-container>
          <label>Other Email</label>
          <input type="email" name="userOtherEmail" ng-model="user.otherEmail" ng-disabled="viewMode"></input>
            <div ng-messages="userDetailsForm.userOtherEmail.$error">
              <div ng-message="email">Email address is invalid</div>
            </div>
        </md-input-container>
      </form>
    </md-card-content>
  </md-card>
</div>

responsive-user-profile-panel.markdown

Responsive User Profile Panel

Try this demo also on mobile and tablet.

Forked from Tim Guo's Pen Responsive User Profile Panel.

A Pen by Agidza on CodePen.

License.

script.js

angular.module('userProfile', ['ngMaterial', 'ngMessages'])
  .controller('Ctrl', function($scope) {
    $scope.viewMode = true;
  
    // Switch between view mode and edit mode
    $scope.switchMode = function() {
      return $scope.viewMode = !$scope.viewMode;
    };
  
    // Save the changes
    $scope.saveChanges = function() {
      /*Validate the input
      Save the changes*/
    };
  
    // User data
    $scope.user = {
      name: 'Adam Luxor',
      title: 'VP of User Experience',
      department: 'Product',
      location: 'Atlanta',
      company: 'BetterCloud',
      manager: 'Emily Morgan',
      workPhone: '404-555-1212',
      mobilePhone: '404-555-6789',
      alias: 'adam.luxor@companyname.com',
      otherEmail: 'adaml@someothercompany.com'
    }
  });

scripts

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>

style.less

/*LESS Vars*/
@transition: .25s cubic-bezier(.25,.8,.25, 1);

/*Styles for user profile panel*/
.user {
  position: relative;
  transition: @transition;
}
.user-avatar {
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.user-avatar-edit {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: rgba(0,0,0,.54) !important;
  opacity: 0;
  transition: opacity @transition;
  md-icon {
    color: rgba(255,255,255,.87);
  }
}
.user-avatar:hover {
  transition: @transition;
}
.user-avatar-edit:hover,
.user-avatar:hover + .user-avatar-edit {
  opacity: 1;
}
.user-name {
  font-size: 24px;
}
.user-title {
  color: rgba(0,0,0,.38);
  font-weight: 500;
  margin-top: 0;
}
.user-input-container {
  box-sizing: border-box;
  width: 100%;
}
.user-name,
.user-title {
  background-image: none !important;
  &.md-input[disabled] {
    color: rgba(0,0,0,.87);
  }
}
@media (max-width: 599px) {
  .user {
    padding-right: 0;
    margin-bottom: 16px;
  }
  .user-avatar {
    width: 120px;
    height: 120px;
    margin-right: 16px;
  }
  .user-avatar-edit {
    top: 36px;
    left: 30px;
  }
  .md-toolbar-tools > md-menu {
    padding: 0;
  }
}
@media (max-width: 959px) and (min-width: 600px) {
  .user {
    padding-right: 24px;
  }
  .user-avatar {
    width: 200px;
    height: 200px;
    margin-bottom: 16px;
  }
  .user-avatar-edit {
    top: 76px;
    left: 70px;
  }
  .user-input-container {
    padding-left: 8px;
    width: 200px;
  }
}
@media (min-width: 960px) {
  .user {
    padding-right: 24px;
  }
  .user-avatar {
    width: 260px;
    height: 260px;
  }
  .user-avatar-edit {
    top: 106px;
    left: 100px;
  }
  .user-input-container {
    width: 250px;
    text-overflow: ellipsis;
    padding-left: 24px;
  }
}

// Scaffolding
body {
  background: #f2f2f2;
  padding: 16px;
}

styles

<link href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic" rel="stylesheet" />