overflow_cloud/member_webapp
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

design

Browse Source
This commit is contained in:
sunny 2018-04-26 21:27:36 +09:00
parent 282b02a0a7
commit da0d397c34
2 changed files with 42 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/packages/member/component/profile/profile.component.html
View File

@ -1,36 +1,35 @@
<form [formGroup]="modifyForm" (ngSubmit)="modifyProfile()"> <form [formGroup]="modifyForm" (ngSubmit)="modifyProfile()">
<div class="ui-g"> <div class="ui-g">
<div class="ui-g-12 ui-md-3"> <div class="ui-g-12 ui-md-4 ui-img-profile">
<div> <div class="ui-img-profile-box">
<p-card> <div class="ui-g">
<div class="ui-g"> <img class="profile-image " src="assets/layout/images/dark-user-bg.png" />
<img class="profile-image ui-img-profile-responsive" src="assets/layout/images/dark-user-bg.png" /> </div>
</div> <button type="button" class="ui-button-photo-add" pButton icon="ui-icon-account-box" (click)="onAddSensorWithTarget(item.target)"></button>
</p-card>
</div> </div>
</div> </div>
<div class="ui-g-12 ui-md-9"> <div class="ui-g-12 ui-md-8">
<div class="ui-g form-group"> <div class="ui-g form-group">
<div class="ui-g-12 ui-md-6"> <div class="ui-g-12">
<span class="md-inputfield"> <span class="md-inputfield">
<input type="text" pInputText readonly value="{{member.email}}"> <input type="text" pInputText readonly value="{{member.email}}">
<label>Email</label> <label>Email</label>
</span> </span>
</div> </div>
<div class="ui-g-12 ui-md-6"> <div class="ui-g-12">
<span class="md-inputfield"> <span class="md-inputfield">
<input type="text" pInputText value="{{member.name}}" > <input type="text" pInputText value="{{member.name}}" >
<label>Name</label> <label>Name</label>
</span> </span>
</div> </div>
<div class="ui-g-12 ui-md-6"> <div class="ui-g-12">
<span class="md-inputfield"> <span class="md-inputfield">
<input type="text" pInputText value="{{member.companyName}}" > <input type="text" pInputText value="{{member.companyName}}" >
<label>Company Name</label> <label>Company Name</label>
</span> </span>
</div> </div>
<div class="ui-g-12 ui-md-6"> <div class="ui-g-12">
<span class="md-inputfield"> <span class="md-inputfield">
<input type="text" pInputText value="{{member.phone}}" > <input type="text" pInputText value="{{member.phone}}" >
<label>Phone</label> <label>Phone</label>
@ -45,6 +44,4 @@
</button> </button>
</div> </div>
</div> </div>
</form> </form>

35
src/styles.scss
View File

@ -112,12 +112,30 @@
color: #8BC34A !important; color: #8BC34A !important;
} }
} }
.ui-img-profile{
img.ui-img-profile-responsive { min-width: 250px !important;
@media (max-width: 640px) {
text-align: center;
}
}
.ui-img-profile-box {
width: 244px !important;
padding: 12px;
box-sizing: border-box;
display: block;
background-color: #ffffff;
border: 1px solid #bdbdbd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin: auto;
width : 100%; img {
height: auto; object-fit: cover;
width:220px;
height:220px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
} }
@ -130,6 +148,7 @@ img.ui-img-profile-responsive {
} }
} }
.ui-sensors-datalist { .ui-sensors-datalist {
.ui-sensors{ .ui-sensors{
.ui-sensor{ .ui-sensor{
@ -231,4 +250,10 @@ img.ui-img-profile-responsive {
} }
} }
} }
}
.ui-button-photo-add {
vertical-align: text-bottom;
float: right;
margin-top: -30px;
margin-right: -5px;
} }