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

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

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

33
src/styles.scss
View File

@ -112,11 +112,29 @@
color: #8BC34A !important;
}
}
.ui-img-profile{
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;
img.ui-img-profile-responsive {
width : 100%;
height: auto;
img {
object-fit: cover;
width:220px;
height:220px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
@ -130,6 +148,7 @@ img.ui-img-profile-responsive {
}
}
.ui-sensors-datalist {
.ui-sensors{
.ui-sensor{
@ -232,3 +251,9 @@ img.ui-img-profile-responsive {
}
}
}
.ui-button-photo-add {
vertical-align: text-bottom;
float: right;
margin-top: -30px;
margin-right: -5px;
}