Merge branch 'master' of https://git.loafle.net/overflow/member_webapp

src/app/commons/component/key-value/key-value.component.html

@@ -0,0 +1,7 @@
+<div>
+    <span>{{key}}</span>
+    <a *ngIf="clickable" href="javascript:void(0)" (click)="onClick()">
+        <span>{{value}}</span>
+    </a>
+    <span *ngIf="!clickable">{{value}}</span>
+</div>

src/app/commons/component/key-value/key-value.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'of-key-value',
+  templateUrl: './key-value.component.html'
+})
+export class KeyValueComponent implements OnInit {
+
+  @Input() key: string;
+  @Input() value: string;
+  @Input() clickable = false;
+  @Output() click = new EventEmitter<string>();
+
+  constructor(
+  ) { }
+
+  ngOnInit() {
+  }
+
+  onClick() {
+    this.click.emit(this.value);
+  }
+}

src/app/commons/component/key-value/key-value.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { KeyValueComponent } from './key-value.component';
+import { CommonModule } from '@angular/common';
+import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        PrimeNGModules
+    ],
+    declarations: [
+        KeyValueComponent,
+    ],
+    exports: [
+        KeyValueComponent,
+    ]
+})
+export class KeyValueModule { }

src/packages/infra/component/map/map.component.html

@@ -5,17 +5,53 @@
   </p-dialog>
   <div class="ui-g-12 ui-g-nopad">
     <div class="ui-g">
-      <div class="ui-g-6 ui-g-nopad ui-bottom-space-10">
+      <div class="ui-g-12 ui-md-5 ui-g-nopad ui-bottom-space-10">
         <button pButton type="button" class="ui-button-large ui-button-width-fit" icon="ui-icon-play-arrow" label="Discovery" (click)="showDialog()"></button>
       </div>
-      <div class="ui-g-6 ui-g-nopad" dir="rtl">
+      <div class="ui-g-12 ui-md-7 ui-g-nopad">
-        <button pButton type="button" class="ui-button-secondary ui-button-width-fit" label="Expand all" style="margin-top: 16px;" (click)="expandAll()"></button>
+        <div style="float: right;">
-        <button pButton type="button" class="ui-button-secondary ui-button-width-fit" label="Collapse all" style="margin-top: 16px;" (click)="collapseAll()"></button>
+          <button pButton type="button" class="ui-button-secondary ui-button-width-fit" label="Expand all" style="margin-top: 16px;"
+            (click)="expandAll()"></button>
+          <button pButton type="button" class="ui-button-secondary ui-button-width-fit" label="Collapse all" style="margin-top: 16px;"
+            (click)="collapseAll()"></button>
+        </div>
+        <div style="float: right; margin: 30px 15px 0 0;">
+          <i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up
+          <i class="fa ui-icon-stop ui-status-icon ui-status-fatal"></i>Dwon
+          <i class="fa ui-icon-stop ui-status-icon ui-status-warn"></i>Warn
+          <i class="fa ui-icon-stop ui-status-icon ui-status-error"></i>Error
+        </div>
       </div>
     </div>
   </div>
   <div class="ui-g-12 ui-g-nopad">
-    <p-tree [value]="infraTree" selectionMode="single" [(selection)]="selectedTree" ></p-tree>
+    <p-tree [value]="infraTree" selectionMode="single" [(selection)]="selectedTree">
+
+      <ng-template let-node pTemplate="default">
+        <div>{{node.label}}</div>
+      </ng-template>
+
+      <ng-template let-node pTemplate="infra">
+        <div>{{node.label}}</div>
+      </ng-template>
+
+      <ng-template let-node pTemplate="probe">
+        <div>{{node.label}}</div>
+      </ng-template>
+
+      <ng-template let-node pTemplate="host">
+        <div>{{node.label}}</div>
+      </ng-template>
+
+      <ng-template let-node pTemplate="service">
+        <div>{{node.label}}</div>
+      </ng-template>
+
+      <ng-template let-node pTemplate="sensor">
+        <div><i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>{{node.label}}</div>
+      </ng-template>
+
+    </p-tree>
   </div>
 </div>
 

src/packages/infra/component/map/map.component.ts

@@ -144,21 +144,18 @@ export class MapComponent implements OnInit, AfterContentInit {
     //   for (const itt of this.infraTree) {
 
     //   }
-
-
     // }
 
     for (const sensor of sensorList) {
       const st = {
         label: 'Sensors - ' + sensor.crawler.name,
-        expandedIcon: 'fa-folder-open',
+        type: 'sensor',
-        collapsedIcon: 'fa-folder',
         obj: sensor,
         expanded: true
       };
 
       // FIXME:: target test id ....
-      const tt = this.targetTreeMap.get(3);
+      const tt = this.targetTreeMap.get(4);
       // const tt = this.targetTreeMap.get(sensor.target.id);
       if (tt !== undefined && tt !== null) {
         tt.children.push(st);
@@ -206,6 +203,7 @@ export class MapComponent implements OnInit, AfterContentInit {
 
     const infraTree =  {
       label: 'Infra',
+      type: 'infra',
       expandedIcon: 'fa-folder-open',
       collapsedIcon: 'fa-folder',
       expanded: true,
@@ -216,6 +214,7 @@ export class MapComponent implements OnInit, AfterContentInit {
 
       const tp = {
         label: 'Probe - ' + key,
+        type: 'probe',
         expandedIcon: 'fa-folder-open',
         collapsedIcon: 'fa-folder',
         expanded: this.DEFAULT_EXPANDED.valueOf(),
@@ -228,6 +227,7 @@ export class MapComponent implements OnInit, AfterContentInit {
 
         const th = {
           label: 'Host - ' + ih.ip,
+          type: 'host',
           expandedIcon: 'fa-folder-open',
           collapsedIcon: 'fa-folder',
           expanded: this.DEFAULT_EXPANDED.valueOf(),
@@ -246,6 +246,7 @@ export class MapComponent implements OnInit, AfterContentInit {
           for (let i = 0 ; i < ifsl.length; ++i) {
             const ts = {
               label: 'Service - ' + ifsl[i].vendor.name,
+              type: 'service',
               expandedIcon: 'fa-folder-open',
               collapsedIcon: 'fa-folder',
               expanded: this.DEFAULT_EXPANDED.valueOf(),
@@ -376,18 +377,21 @@ export class MapComponent implements OnInit, AfterContentInit {
 const testInfraList = [
   {
     label: 'Infra',
+    type: 'infra',
     expandedIcon: 'fa-folder-open',
     collapsedIcon: 'fa-folder',
     expanded: true,
     children: [
       {
         label: 'Zone - 192.168.1.0/24',
+        type: 'zone',
         expandedIcon: 'fa-folder-open',
         collapsedIcon: 'fa-folder',
         expanded: true,
         children: [
           {
             label: 'Host - 192.168.1.106 - Snoop Host',
+            type: 'host',
             expandedIcon: 'fa-folder-open',
             collapsedIcon: 'fa-folder',
             expanded: true,

src/packages/member/component/profile/profile.component.html

@@ -1,42 +1,50 @@
+<form [formGroup]="modifyForm" (ngSubmit)="modifyProfile()">
   <div class="ui-g">
     <div class="ui-g-12 ui-md-3">
-    <p-panel [showHeader]="false">
+      <div>
+        <p-card>
           <div class="ui-g">
-        <div class="ui-g-12 ui-inputgroup ui-bottom-space-10">
+            <img class="profile-image ui-img-profile-responsive" src="assets/layout/images/dark-user-bg.png" />
-
+          </div>
-        </div>
+        </p-card>
-
+      </div>
-        <div class="ui-g-12 ui-bottom-space-10">
-          <img class="profile-image" src="assets/layout/images/dark-user-bg.png" />
-        </div>
-      </div>
-    </p-panel>
     </div>
 
+    <div class="ui-g-12 ui-md-9">
       <div class="ui-g form-group">
-    <div class="ui-g-12 ui-md-6 ui-lg-6">
+        <div class="ui-g-12 ui-md-6">
         <span class="md-inputfield">
-        <input type="text" pInputText readonly value="overflow@loafle.com" [readonly]="true">
+          <input type="text" pInputText readonly value="{{member.email}}">
           <label>Email</label>
         </span>
         </div>
-    <div class="ui-g-12 ui-md-6 ui-lg-6">
+        <div class="ui-g-12 ui-md-6">
         <span class="md-inputfield">
-        <input type="text" pInputText readonly value="overflow" >
+          <input type="text" pInputText value="{{member.name}}" >
           <label>Name</label>
         </span>
         </div>
-    <div class="ui-g-12 ui-md-6 ui-lg-6">
+        <div class="ui-g-12 ui-md-6">
         <span class="md-inputfield">
-        <input type="text" pInputText readonly value="loafle" >
+          <input type="text" pInputText value="{{member.companyName}}" >
           <label>Company Name</label>
         </span>
         </div>
-    <div class="ui-g-12 ui-md-6 ui-lg-6">
+        <div class="ui-g-12 ui-md-6">
         <span class="md-inputfield">
-        <input type="text" pInputText readonly value="010-4055-6699" >
+          <input type="text" pInputText  value="{{member.phone}}" >
           <label>Phone</label>
         </span>
         </div>
       </div>
     </div>
+    <div class="ui-g-12" dir="rtl">
+      <button type="submit" [disabled]="selected" class="ui-button ui-button-text-icon-left ui-button-width-fit">
+        <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-person"></span>
+        <span class="ui-button-text ui-c">Save</span>
+      </button>
+    </div>
+  </div>
+</form>
+
+

src/packages/member/component/profile/profile.component.ts

@@ -1,4 +1,13 @@
 import { Component, OnInit } from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import { PagesComponent } from 'app/pages/pages.component';
+
+import * as AuthStore from '../../store/auth';
+import { Member } from '../../model';
+import { AuthSelector } from '../../store';
+import { Store } from '@ngrx/store';
+import {FormBuilder, FormGroup} from '@angular/forms';
+
 
 @Component({
   selector: 'of-member-profile',
@@ -7,9 +16,39 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ProfileComponent implements OnInit {
 
-  constructor() { }
+  member: Member;
+  modifyForm: FormGroup;
+
+  constructor(
+    public app: PagesComponent,
+    private activatedRoute: ActivatedRoute,
+    private router: Router,
+    private store: Store<AuthStore.State>,
+    private formBuilder: FormBuilder,
+  ) {
+  }
+
 
   ngOnInit() {
+    this.store.select(AuthSelector.select('member')).subscribe(
+      (member: Member) => {
+        this.member = member;
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+    this.initForm();
+  }
+
+  initForm() {
+    this.modifyForm = this.formBuilder.group({
+
+    });
+  }
+
+  modifyProfile() {
+    console.log('clicked');
   }
 
 }

src/packages/probe/component/detail/detail.component.html

@@ -3,46 +3,33 @@
   <of-discovery-setting (close)="onDiscoverycloseDialog()"></of-discovery-setting>
 </p-dialog>
 <div *ngIf="probe">
+
   <div class="ui-g form-group">
     <div class="ui-g-12 ui-md-6 ui-lg-4">
-      <span class="md-inputfield">
+      <of-key-value [key]="'Alias'" [value]="probe.displayName"></of-key-value>
-        <input type="text" pInputText readonly value="{{probe.displayName}}">
-        <label>Alias</label>
-      </span>
     </div>
     <div class="ui-g-12 ui-md-6 ui-lg-4">
-      <span class="md-inputfield">
+      <of-key-value [key]="'CIDR'" [value]="probe.cidr"></of-key-value>
-        <input type="text" pInputText readonly value="{{probe.cidr}}">
-        <label>CIDR</label>
-      </span>
     </div>
     <div class="ui-g-12 ui-md-6 ui-lg-4">
-      <span class="md-inputfield">
+      <of-key-value [key]="'Description'" [value]="probe.description"></of-key-value>
-        <input type="text" pInputText readonly value="{{probe.description}}">
-        <label>Description</label>
-      </span>
     </div>
     <div class="ui-g-12 ui-md-6 ui-lg-4">
-      <span class="md-inputfield">
+      <of-key-value [key]="'Key'" [value]="probe.probeKey"></of-key-value>
-        <input type="text" pInputText readonly value="{{probe.probeKey}}">
-        <label>Key</label>
-      </span>
     </div>
     <div class="ui-g-12 ui-md-6 ui-lg-4">
-      <span class="md-inputfield">
+      <of-key-value [key]="'Authrozied at'" [value]="probe.authorizeDate | date: 'dd/MM/yyyy'"></of-key-value>
-        <input type="text" pInputText readonly value="{{probe.authorizeDate | date: 'dd/MM/yyyy'}}">
-        <label>Authrozied at</label>
-      </span>
     </div>
     <div class="ui-g-12 ui-md-6 ui-lg-4">
-      <span class="md-inputfield">
+      <of-key-value [key]="'Authrozied by'" [value]="probe.authorizeMember.name"></of-key-value>
-        <input type="text" pInputText readonly value="{{probe.authorizeMember.name}}">
+    </div>
-        <label>Authrozied by</label>
+    <div class="ui-g-12 ui-md-6 ui-lg-4">
-      </span>
+      <of-key-value [key]="'IP Range'" [value]="IPRange"></of-key-value>
     </div>
   </div>
   <div class="ui-bottom-space-10" dir="rtl">
-    <button class="ui-button-danger ui-button-width-fit" type="button" label="Remove this Probe" icon="ui-icon-close" pButton (click)="onRemoveClick()"></button>
+    <button class="ui-button-danger ui-button-width-fit" type="button" label="Remove this Probe" icon="ui-icon-close" pButton
+      (click)="onRemoveClick()"></button>
     <button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton (click)="onDiscoveryClick()"></button>
   </div>
   <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>

src/packages/probe/component/detail/detail.component.ts

@@ -19,8 +19,7 @@ export class DetailComponent implements OnInit, AfterContentInit {
 
   probe$ = this.detailStore.pipe(select(DetailSelector.select('probe')));
   probe: Probe = null;
-  startIP: string;
+  IPRange: string;
-  endIP: string;
   display = false;
 
   constructor(
@@ -56,13 +55,12 @@ export class DetailComponent implements OnInit, AfterContentInit {
   arrangeInfo() {
     const cidr = new CIDR(this.probe.cidr);
     if (!cidr.isValid()) {
+      return;
     }
-    this.startIP = cidr.addressStart.address;
+    this.IPRange = cidr.addressStart.address + ' ~ ' + cidr.addressEnd.address;
-    this.endIP = cidr.addressEnd.address;
   }
 
   onDiscoveryClick() {
-    // alert('Discovery를 열거라 대훈');
     this.display = true;
   }
 

src/packages/probe/probe.module.ts

@@ -6,9 +6,8 @@ import { ProbeStoreModule } from './probe-store.module';
 import { SERVICES } from './service';
 import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
 import { FormsModule } from '@angular/forms';
-// import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component';
-// import { DiscoveryModule } from '../discovery/discovery.module';
 import { DiscoveryModule } from 'packages/discovery/discovery.module';
+import { KeyValueModule } from 'app/commons/component/key-value/key-value.module';
 
 @NgModule({
   imports: [
@@ -16,7 +15,8 @@ import { DiscoveryModule } from 'packages/discovery/discovery.module';
     PrimeNGModules,
     ProbeStoreModule,
     FormsModule,
-    DiscoveryModule
+    DiscoveryModule,
+    KeyValueModule
   ],
   declarations: [
     COMPONENTS,

src/packages/sensor/component/detail/detail.component.html

@@ -1,4 +1,5 @@
-<h1>Sensor Alias 출력</h1>
+<div *ngIf="sensor">
+    <h1>{{sensor.crawler.name}}</h1>
 
     <div *ngIf="sensor.status.name === 'RUNNING' ; else STOPPED">
         <div class="ui-messages ui-widget ui-corner-all ui-messages-success" style="margin: 0 0 1em 0; display: block">
@@ -30,36 +31,13 @@
     <div class="ui-g">
         <div class="ui-g-12 ui-md-3">
             <div class="ui-g form-group">
-            <div class="ui-g-12">
+                <of-key-value [key]="'ID'" [value]="sensor.id"></of-key-value>
-                <span class="md-inputfield">
+                <of-key-value [key]="'Location'" [value]="sensor.target.displayName" [clickable]="true" (click)="onTargetClick($event)" ></of-key-value>
-                    <input type="text" pInputText readonly value="{{sensor.id}}">
+                <of-key-value [key]="'Description'" [value]="sensor.description"></of-key-value>
-                    <label>ID</label>
+                <of-key-value [key]="'Crawler Type'" [value]="sensor.crawler.name"></of-key-value>
-                </span>
+                <of-key-value [key]="'Sensor Items'" [value]="sensor.itemCount"></of-key-value>
-            </div>
+                <of-key-value [key]="'Created at'" [value]="sensor.createDate | date: 'dd/MM/yyyy'"></of-key-value>
-            <div class="ui-g-12">
+
-                <span class="md-inputfield">
-                    <input type="text" pInputText readonly value="{{sensor.description}}">
-                    <label>Description</label>
-                </span>
-            </div>
-            <div class="ui-g-12">
-                <span class="md-inputfield">
-                    <input type="text" pInputText readonly value="{{sensor.crawler.name}}">
-                    <label>Crawler Type</label>
-                </span>
-            </div>
-            <div class="ui-g-12">
-                <span class="md-inputfield">
-                    <input type="text" pInputText readonly value="{{sensor.itemCount}}">
-                    <label>Items</label>
-                </span>
-            </div>
-            <div class="ui-g-12">
-                <span class="md-inputfield">
-                    <input type="text" pInputText readonly value="{{sensor.createDate | date: 'dd/MM/yyyy'}}">
-                    <label>Created at</label>
-                </span>
-            </div>
             </div>
         </div>
 
@@ -68,5 +46,5 @@
             <of-sensor-item-list></of-sensor-item-list>
         </div>
     </div>
-
     <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
+</div>

src/packages/sensor/component/detail/detail.component.ts

@@ -61,5 +61,8 @@ export class DetailComponent implements OnInit, AfterContentInit {
       }
     });
   }
+
+  onTargetClick(event) {
+  }
 }
 

src/packages/sensor/component/list/list.component.html

@@ -1,15 +1,14 @@
 <h1>Sensors</h1>
 
+<div class="ui-g">
+    <div class="ui-g-12 ui-md-3">
         <div class="ui-bottom-space-10">
             <p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false" [closeOnEscape]="false">
                 <of-sensor-setting [visible]="sensorSettingDisplay" [preTarget]="target" (close)="onSensorSettingClose()"></of-sensor-setting>
             </p-dialog>
         
-    <button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-button-width-fit" (click)="onAddSensor()"></button>
+            <button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-button-large" (click)="onAddSensor()"></button>
         </div>
-
-<div class="ui-g">
-    <div class="ui-g-12 ui-md-3">
         <p-panel [showHeader]="false">
             <div class="ui-g">
                 <h3>Search</h3>
@@ -44,13 +43,17 @@
             </p-header> -->
             <ng-template let-item pTemplate="item">
                 <div style="border-bottom: 1px solid #bdbdbd" class="clearfix car-item">
-                    <div width="48" style="display:inline-block;margin:24px;vertical-align:middle">{{item.target.id}} - {{item.target.displayName}}</div>
+                    <div class="ui-g">
-                    <div class="car-details" style="display:inline-block;vertical-align:middle">
+                        <div class="ui-g-12 ui-md-3 ui-lg-3" style="display:inline-block;margin: auto 0">{{item.target.id}} - {{item.target.displayName}}</div>
+                        <div class="ui-g-10 ui-md-7 ui-lg-8 car-details" style="display:inline-block;margin: auto 0">
                             <div *ngFor="let sensor of item.sensors">
                                 <a href="javascript:void(0)" (click)="onSensorClick(sensor)">{{sensor.crawler.name}} | {{sensor.itemCount}} items | {{sensor.status.name}}</a>
                             </div>
                         </div>
-                    <button type="button" pButton icon="ui-icon-add" style="margin:24px 24px 0 0;float:right" (click)="onAddSensorWithTarget(item.target)"></button>
+                        <div class="ui-g-2 ui-md-2 ui-lg-1">
+                            <button type="button" pButton icon="ui-icon-add" style="margin:auto" (click)="onAddSensorWithTarget(item.target)"></button>
+                        </div>
+                    </div>
                 </div>
             </ng-template>
         </p-dataList>

src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.html

@@ -11,6 +11,7 @@
   <ng-template #info>
     <div>개발자의 배려가 돋보이는 친절한 안내 메시지</div>
   </ng-template>
-
+  <div dir="rtl">
-  <button *ngIf="crawler" type="button" label="Test" icon="ui-icon-send" pButton (click)="testCredentials()"></button>
+    <button *ngIf="crawler" type="button" label="Test" icon="ui-icon-send" pButton class="ui-button-width-fit" (click)="testCredentials()"></button>
+  </div>
 </p-panel>

src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.html

@@ -3,7 +3,7 @@
     (onSelectionChange)="onSelectionChange($event)">
     <ng-template let-crawler pTemplate="item">
       <div class="ui-helper-clearfix">
-        <div style="font-size:14px;float:right;margin:0">{{crawler.name}}</div>
+        <div style="font-size:14px;margin:0">{{crawler.name}}</div>
       </div>
     </ng-template>
   </p-orderList>

src/packages/sensor/sensor.module.ts

@@ -6,6 +6,7 @@ import { COMPONENTS } from './component';
 import { SERVICES } from './service';
 import { SensorStoreModule } from './sensor-store.module';
 import { SensorItemModule } from '../sensor-item/sensor-item.module';
+import { KeyValueModule } from 'app/commons/component/key-value/key-value.module';
 // import { MetaCrawlerModule } from '../meta/crawler/crawler.module';
 // import { MetaSensorDisplayItemModule } from '../meta/sensor-display-item/sensor-display-item.module';
 // import { MetaCrawlerInputItemModule } from '../meta/crawler-input-item/crawler-input.module';
@@ -16,9 +17,10 @@ import { SensorItemModule } from '../sensor-item/sensor-item.module';
         FormsModule,
         SensorStoreModule,
         PrimeNGModules,
-        SensorItemModule
+        SensorItemModule,
         // MetaCrawlerModule,
         // MetaSensorDisplayItemModule,
+        KeyValueModule
     ],
     declarations: [
         COMPONENTS,

src/styles.scss

@@ -52,6 +52,14 @@
     margin-top: 10px;
 }
 
+.ui-top-space--0-5em{
+    margin-top: -0.5em;
+}
+
+.ui-left-space-10{
+    margin-left: 10px;
+}
+
 .ui-float-right{
     float:right;
 }
@@ -88,5 +96,48 @@
         }
     }
     font-size: 0.8em !important;
+}
+
+.ui-status-icon{
+    //margin-top: 3px;
+    //position: static;
+    //display: inline-block;
+    vertical-align: middle;
+    &.ui-status-info {
+        color: #2196F3 !important;
+    }
+
+    &.ui-status-warn {
+        color: #ffc107 !important;
+    }
+
+    &.ui-status-error {
+        color: #e62a10 !important;
+    }
+
+    &.ui-status-fatal {
+        color: #212121 !important;
+    }
+
+    &.ui-status-success {
+        color: #8BC34A !important;
+    }
+}
+
+img.ui-img-profile-responsive {
+    
+    width : 100%;
+    height: auto;
+
+    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
         
     }
+    
+    @media (max-width: 1024px) {
+
+    }
+    
+    @media (max-width: 640px) {
+
+    }
+}