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-20 17:35:36 +09:00
parent 42a78a213b
commit 2f669d986f
5 changed files with 39 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/pages/account/settings/settings-page.component.html
View File

@ -2,7 +2,6 @@
<div class="ui-g"> <div class="ui-g">
<div class="ui-g-12"> <div class="ui-g-12">
<div class="card no-margin"> <div class="card no-margin">
<h1>totp</h1>
<of-settings-totp></of-settings-totp> <of-settings-totp></of-settings-totp>
</div> </div>
</div> </div>

29
src/packages/member/component/settings/totp/config/config-setting.component.html
View File

@ -12,30 +12,33 @@
</p-card> </p-card>
</div> </div>
<div class="ui-g-6"> <div class="ui-g-6">
<p-card> <p-card>
<p><b>안드로이드 회원</b>은 구글 플레이 스토어 또는 핸드폰 브라우저를 통해 "구글 인증기(OTP)" 검색 후 다운로드 해주세요.</p> <p><b>안드로이드 회원</b>은 구글 플레이 스토어 또는 핸드폰 브라우저를 통해 "구글 인증기(OTP)" 검색 후 다운로드 해주세요.</p>
<button type="button" pButton label="Google Play" icon="fa-check"></button> <button type="button" pButton label="Google Play" icon="fa-check"></button>
</p-card> </p-card>
</div> </div>
</div> </div>
<div class="ui-g-12"> <div class="ui-g-12">
<h2>Key & Backup Code</h2> <h2>Key & Backup Code</h2>
<div class="ui-bottom-space-10" *ngIf="totp">{{totp.key}}, {{totp.uri}}</div> <div class="ui-g-3" *ngIf="totp">
<div class="ui-bottom-space-10" *ngIf="totp"> <qrcode [qrdata]="totp.uri" [size]="150" [level]="'M'"></qrcode>
<qrcode [qrdata]="totp.uri" [size]="128" [level]="'M'"></qrcode>
</div> </div>
<form fxLayout="column" fxLayoutAlign="start stretch" [formGroup]="totpForm" (ngSubmit)="totpRegistClick()">
<input type="text" <div class="ui-g-9">
id="code" class="input" <div style="height: 80px;"></div>
placeholder="Please enter your code" <div class="ui-bottom-space-10" *ngIf="totp">{{totp.key}}, {{totp.uri}}</div>
formControlName="code" required matInput> <span class="md-inputfield">
</form> <input type="text" id="code" autocomplete="off" placeholder="Please enter your code" formControlName="code"
required class="ui-inputtext ui-corner-all ui-state-default ui-widget" [formGroup]="totpForm" (ngSubmit)="totpRegistClick()">
</span>
</div>
<!--QR Code print & Key Print--> <!--QR Code print & Key Print-->
</div> </div>
<div class="ui-g-12" dir="rtl"> <div class="ui-g-12" dir="rtl">
<button type="button" class="ui-button-width-fit ui-button-secondary" pButton icon="fa-close" (click)="onCancel()" label="No"></button> <button type="button" class="ui-button-width-fit ui-button-secondary" pButton icon="fa-close" (click)="onCancel()" label="No"></button>
<button type="button" class="ui-button-width-fit" pButton icon="fa-check" (click)="totpSettingDisplay=false" label="Yes"></button> <button type="button" class="ui-button-width-fit" pButton icon="fa-check" (click)="totpSettingDisplay=false" label="Yes"></button>
</div> </div>
</div> </div>
<!--<p-panel>--> <!--<p-panel>-->

1
src/packages/member/component/settings/totp/totp.component.html
View File

@ -1,3 +1,4 @@
<h1>Settings</h1>
<p-dialog header="{{headerItem}}" [modal]="true" [width]="800" [(visible)]="totpSettingDisplay" [showHeader]="true" [closeOnEscape]="false"> <p-dialog header="{{headerItem}}" [modal]="true" [width]="800" [(visible)]="totpSettingDisplay" [showHeader]="true" [closeOnEscape]="false">
<of-config-setting [selectedItem]="selectedItem" (close)="onTotpSettingClose()"></of-config-setting> <of-config-setting [selectedItem]="selectedItem" (close)="onTotpSettingClose()"></of-config-setting>
</p-dialog> </p-dialog>

14
src/packages/probe/component/detail/detail.component.html
View File

@ -7,25 +7,25 @@
<div *ngIf="probe"> <div *ngIf="probe">
<div class="ui-g form-group"> <div class="ui-g form-group">
<div class="ui-g-12 ui-md-6 ui-lg-4 ui-key-value ui-bottom-border-1"> <div class="ui-g-12 ui-md-6 ui-lg-4 ui-key-value ui-bottom-border-1 ui-nopad">
<of-key-value [key]="'Alias'" [value]="probe.displayName"></of-key-value> <of-key-value [key]="'Alias'" [value]="probe.displayName"></of-key-value>
</div> </div>
<div class="ui-g-12 ui-md-6 ui-lg-4 ui-key-value ui-bottom-border-1"> <div class="ui-g-12 ui-md-6 ui-lg-4 ui-key-value ui-bottom-border-1 ui-nopad">
<of-key-value [key]="'CIDR'" [value]="probe.cidr"></of-key-value> <of-key-value [key]="'CIDR'" [value]="probe.cidr"></of-key-value>
</div> </div>
<div class="ui-g-12 ui-md-6 ui-lg-4 ui-key-value ui-bottom-border-1"> <div class="ui-g-12 ui-md-6 ui-lg-4 ui-key-value ui-bottom-border-1 ui-nopad">
<of-key-value [key]="'Description'" [value]="probe.description"></of-key-value> <of-key-value [key]="'Description'" [value]="probe.description"></of-key-value>
</div> </div>
<div class="ui-g-12 ui-md-6 ui-lg-4 ui-key-value ui-bottom-border-1"> <div class="ui-g-12 ui-md-6 ui-lg-4 ui-key-value ui-bottom-border-1 ui-nopad">
<of-key-value [key]="'Key'" [value]="probe.probeKey"></of-key-value> <of-key-value [key]="'Key'" [value]="probe.probeKey"></of-key-value>
</div> </div>
<div class="ui-g-12 ui-md-6 ui-lg-4 ui-key-value ui-bottom-border-1"> <div class="ui-g-12 ui-md-6 ui-lg-4 ui-key-value ui-bottom-border-1 ui-nopad">
<of-key-value [key]="'Authrozied at'" [value]="probe.authorizeDate | date: 'dd/MM/yyyy'"></of-key-value> <of-key-value [key]="'Authrozied at'" [value]="probe.authorizeDate | date: 'dd/MM/yyyy'"></of-key-value>
</div> </div>
<div class="ui-g-12 ui-md-6 ui-lg-4 ui-key-value ui-bottom-border-1"> <div class="ui-g-12 ui-md-6 ui-lg-4 ui-key-value ui-bottom-border-1 ui-nopad">
<of-key-value [key]="'Authrozied by'" [value]="probe.authorizeMember.name"></of-key-value> <of-key-value [key]="'Authrozied by'" [value]="probe.authorizeMember.name"></of-key-value>
</div> </div>
<div class="ui-g-12 ui-md-6 ui-lg-4 ui-key-value ui-bottom-border-1"> <div class="ui-g-12 ui-md-6 ui-lg-4 ui-key-value ui-bottom-border-1 ui-nopad">
<of-key-value [key]="'IP Range'" [value]="IPRange"></of-key-value> <of-key-value [key]="'IP Range'" [value]="IPRange"></of-key-value>
</div> </div>
</div> </div>

21
src/styles.scss
View File

@ -152,25 +152,34 @@ img.ui-img-profile-responsive {
.ui-key-value { .ui-key-value {
of-key-value{ of-key-value{
width: 100%; width: 100%;
min-width: 250px;
margin: 0 -5px;
} }
div { div {
width: 100%; width: 100%;
margin: 0.25em 0.15em; margin: 0;
padding: 0;
} }
span { span {
font-weight: bold; font-weight: bold;
width: 30% ; width: 105px ;
//display: inline-block; display: inline-block;
padding: 5px;
margin: 0;
text-align: right; text-align: right;
//background: red;
} }
span::after { span::after {
content: " : "; content: " : ";
} }
span.ng-star-inserted { span.ng-star-inserted, a.ng-star-inserted>span {
font-weight: normal; font-weight: normal;
text-align: left; text-align: left;
width: 70%; display: inline-block;
padding: 5px;
margin: 0;
width: 50%;
//background: blue;
} }
span.ng-star-inserted::after, a.ng-star-inserted>span::after { span.ng-star-inserted::after, a.ng-star-inserted>span::after {
content: " "; content: " ";