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-05-16 17:14:43 +09:00
parent 3a91566893
commit f49c5d816b
7 changed files with 329 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/layout/images/login/login_img_01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

28
src/packages/member/component/reset-password/modify-password.component.html
View File

@ -1,8 +1,10 @@
<div class="ui-g">
<div class="ui-g-12 ui-md-9 ui-lg-7">
<form [formGroup]="modifyPwForm" (ngSubmit)="modifyPw()"> <form [formGroup]="modifyPwForm" (ngSubmit)="modifyPw()">
<table class="login-table"> <table class="login-table">
<tr> <tr>
<td> <td>
<div class="card login-panel ui-fluid"> <div class="login-panel ui-fluid">
<div class="ui-g"> <div class="ui-g">
<div class="ui-g-12"> <div class="ui-g-12">
<img src="assets/layout/images/overFlow_CI_blue_185.png"> <img src="assets/layout/images/overFlow_CI_blue_185.png">
@ -44,3 +46,27 @@
</tr> </tr>
</table> </table>
</form> </form>
</div>
<div class="ui-g-12 ui-md-3 ui-lg-5 login-descript">
<table class="login-table">
<tr>
<td>
<div class="login-panel ui-fluid">
<div class="ui-g">
<div class="ui-g-12">
<img src="assets/layout/images/login/login_img_01.png">
<p><br>
overFlow는 여러분의 서버에 발생하는<br>
변화를 항상 지켜보고 있습니다.<br><br>
서버에 발생하는 모든 변화를 세분화 하여<br>
실시간으로 알려 드립니다.
</p>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>

27
src/packages/member/component/reset-password/reset-password.component.html
View File

@ -1,8 +1,10 @@
<div class="ui-g">
<div class="ui-g-12 ui-md-9 ui-lg-7">
<form [formGroup]="resetPassword" (ngSubmit)="sendResetPassword()"> <form [formGroup]="resetPassword" (ngSubmit)="sendResetPassword()">
<table class="login-table"> <table class="login-table">
<tr> <tr>
<td> <td>
<div class="card login-panel ui-fluid"> <div class="login-panel ui-fluid">
<div class="ui-g"> <div class="ui-g">
<div class="ui-g-12"> <div class="ui-g-12">
<!--img src="assets/layout/images/logo-ultima.svg" --> <!--img src="assets/layout/images/logo-ultima.svg" -->
@ -33,4 +35,27 @@
</tr> </tr>
</table> </table>
</form> </form>
</div>
<div class="ui-g-12 ui-md-3 ui-lg-5 login-descript">
<table class="login-table">
<tr>
<td>
<div class="login-panel ui-fluid">
<div class="ui-g">
<div class="ui-g-12">
<img src="assets/layout/images/login/login_img_01.png">
<p><br>
overFlow는 여러분의 서버에 발생하는<br>
변화를 항상 지켜보고 있습니다.<br><br>
서버에 발생하는 모든 변화를 세분화 하여<br>
실시간으로 알려 드립니다.
</p>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>

28
src/packages/member/component/signin/signin.component.html
View File

@ -1,8 +1,10 @@
<div class="ui-g">
<div class="ui-g-12 ui-md-9 ui-lg-7">
<form [formGroup]="signinForm" (ngSubmit)="signin()"> <form [formGroup]="signinForm" (ngSubmit)="signin()">
<table class="login-table"> <table class="login-table">
<tr> <tr>
<td> <td>
<div class="card login-panel ui-fluid"> <div class="login-panel ui-fluid">
<div class="ui-g"> <div class="ui-g">
<div class="ui-g-12"> <div class="ui-g-12">
<img src="assets/layout/images/overFlow_CI_blue_185.png"> <img src="assets/layout/images/overFlow_CI_blue_185.png">
@ -32,3 +34,27 @@
</tr> </tr>
</table> </table>
</form> </form>
</div>
<div class="ui-g-12 ui-md-3 ui-lg-5 login-descript">
<table class="login-table">
<tr>
<td>
<div class="login-panel ui-fluid">
<div class="ui-g">
<div class="ui-g-12">
<img src="assets/layout/images/login/login_img_01.png">
<p><br>
overFlow는 여러분의 서버에 발생하는<br>
변화를 항상 지켜보고 있습니다.<br><br>
서버에 발생하는 모든 변화를 세분화 하여<br>
실시간으로 알려 드립니다.
</p>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>

36
src/packages/member/component/signup/signup.component.html
View File

@ -6,11 +6,14 @@
</p-dialog> </p-dialog>
<div class="ui-g">
<div class="ui-g-12 ui-md-9 ui-lg-7">
<form [formGroup]="signupForm" (ngSubmit)="signup()"> <form [formGroup]="signupForm" (ngSubmit)="signup()">
<table class="login-table"> <table class="login-table">
<tr> <tr>
<td> <td>
<div class="card login-panel ui-fluid"> <div class="login-panel ui-fluid">
<div class="ui-g"> <div class="ui-g">
<div class="ui-g-12"> <div class="ui-g-12">
<img src="assets/layout/images/overFlow_CI_blue_185.png"> <img src="assets/layout/images/overFlow_CI_blue_185.png">
@ -77,10 +80,15 @@
</div> </div>
<div class="ui-g-12 ui-g-padding-15"> <div class="ui-g-12 ui-g-padding-15">
<p class="font-s">
<p-checkbox name="groupname" value="val1" label="이용약관과 개인정보 정책에 동의 합니다." [(ngModel)]="selectedValues"></p-checkbox>
</p>
<a href="javascript:void(0)" (click)="termsDisplayOpen()">Terms Of Use</a> <a href="javascript:void(0)" (click)="termsDisplayOpen()">Terms Of Use</a>
| |
<a href="javascript:void(0)" (click)="policyDisplayOpen()">Privacy Policy</a> <a href="javascript:void(0)" (click)="policyDisplayOpen()">Privacy Policy</a>
</div> </div>
<div class="ui-g-12 ui-no-pad">
<div class="recaptcha-align">
<div class="content-section implementation"> <div class="content-section implementation">
<recaptcha <recaptcha
@ -89,6 +97,8 @@
(scriptError)="onScriptError()" (scriptError)="onScriptError()"
></recaptcha> ></recaptcha>
</div> </div>
</div>
</div>
<div class="ui-g-12 ui-g-padding-15"> <div class="ui-g-12 ui-g-padding-15">
<button type="submit" [disabled]="!signupForm.valid" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left"> <button type="submit" [disabled]="!signupForm.valid" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
<span class="ui-button-icon-left ui-c fa fa-fw ui-icon-person"></span> <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-person"></span>
@ -103,3 +113,27 @@
</tr> </tr>
</table> </table>
</form> </form>
</div>
<div class="ui-g-12 ui-md-3 ui-lg-5 login-descript">
<table class="login-table">
<tr>
<td>
<div class="login-panel ui-fluid">
<div class="ui-g">
<div class="ui-g-12">
<img src="assets/layout/images/login/login_img_01.png">
<p><br>
overFlow는 여러분의 서버에 발생하는<br>
변화를 항상 지켜보고 있습니다.<br><br>
서버에 발생하는 모든 변화를 세분화 하여<br>
실시간으로 알려 드립니다.
</p>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>

11
src/packages/target/component/detail/detail.component.html
View File

@ -5,7 +5,6 @@
<div class="ui-g"> <div class="ui-g">
<div class="ui-g-12"> <div class="ui-g-12">
<div class="ui-inputgroup"> <div class="ui-inputgroup">
<span class="md-inputfield"> <span class="md-inputfield">
<input #input type="text" pInputText value="{{infra.target.displayName}}" (keypress)="onDisplayNameChangeKeypress($event, input.value)"> <input #input type="text" pInputText value="{{infra.target.displayName}}" (keypress)="onDisplayNameChangeKeypress($event, input.value)">
@ -13,7 +12,8 @@
</span> </span>
<button pButton label="Save" type="button" (click)="onDisplayNameChange(input.value)"></button> <button pButton label="Save" type="button" (click)="onDisplayNameChange(input.value)"></button>
</div> </div>
</div>
<div class="ui-g-12">
<p-panel [showHeader]="false"> <p-panel [showHeader]="false">
<div class="ui-key-value"> <div class="ui-key-value">
<span>Status</span> <span>Status</span>
@ -26,9 +26,6 @@
<of-key-value [key]="'Sensors'" [value]="infra.target.sensorCount" class="ui-key-value"></of-key-value> <of-key-value [key]="'Sensors'" [value]="infra.target.sensorCount" class="ui-key-value"></of-key-value>
</p-panel> </p-panel>
</div> </div>
</div>
<div class="ui-g">
<div class="ui-g-12"> <div class="ui-g-12">
<div class="ui-g"> <div class="ui-g">
<div class="ui-g-12 ui-md-5 ui-g-nopad"> <div class="ui-g-12 ui-md-5 ui-g-nopad">
@ -47,8 +44,8 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="ui-g-12">
<p-table [value]="sensors" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true"> <p-table [value]="sensors" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>

21
src/styles.scss
View File

@ -3,7 +3,8 @@
//auth style //auth style
.login-body { .login-body {
//background: url("../images/login/login.png") top left no-repeat #f7f7f7; //background: url("../images/login/login.png") top left no-repeat #f7f7f7;
background: url("/assets/layout/images/login11.jpg") center no-repeat #f7f7f7 !important; //background: url("/assets/layout/images/login11.jpg") center no-repeat #f7f7f7 !important;
background: #ffffff;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
min-height: 100vh !important; min-height: 100vh !important;
@ -13,11 +14,18 @@
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.login-body { .login-body {
//background: url("../images/login/login2x.png") top left no-repeat #f7f7f7; //background: url("../images/login/login2x.png") top left no-repeat #f7f7f7;
background: url("/assets/layout/images/login11.jpg") top left no-repeat #f7f7f7 !important; //background: url("/assets/layout/images/login11.jpg") top left no-repeat #f7f7f7 !important;
background: #ffffff;
} }
} }
.login-descript{
background: #203976;
color: #ffffff;
}
.login-panel { .login-panel {
margin: 0 !important; margin: 0 !important;
width: 450px !important;
min-height: 300px !important;
.ui-g { .ui-g {
.ui-g-12 { .ui-g-12 {
a { a {
@ -27,11 +35,17 @@
a:hover{ a:hover{
color: rgb(18, 86, 233); color: rgb(18, 86, 233);
} }
.recaptcha-align{
margin: 0 auto;
}
} }
.ui-g-12.ui-g-padding-15 { .ui-g-12.ui-g-padding-15 {
padding: 15px 40px !important; padding: 15px 40px !important;
} }
} }
.ui-message{
text-align: left;
}
} }
.login-table { .login-table {
@ -302,3 +316,6 @@
body .ui-progressbar .ui-progressbar-value { body .ui-progressbar .ui-progressbar-value {
height: 0 !important; height: 0 !important;
} }
.font-s{
font-size: 80%;
}