통합검색 - 수정중

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html

@@ -19,7 +19,7 @@
           (search)="onSearch($event)"
         >
         </ucap-integrated-search-form>
-        <div class="organization-option">
+        <div class="organization-option selectbox">
           <mat-form-field>
             <mat-label>{{ 'search.fieldCompany' | translate }}</mat-label>
             <mat-select
@@ -137,16 +137,16 @@
           </mat-form-field>
         </div>
       </div>
-      <div style="position: relative;">
+      <div class="content-area">
         <div
           *ngIf="searchingProcessing$ | async"
           style="position: absolute; width: 100%; z-index: 101;"
         >
           <mat-progress-bar mode="indeterminate"></mat-progress-bar>
         </div>
-      </div>
-      <div class="contents-table">
-        <div fxFlex="0 0 auto" class="table-box">
+
+        <div class="contents-table" fxFlex="1 1 100%" fxLayout="column">
+          <div class="table-box">
             <ucap-organization-detail-table
               [loginRes]="loginRes"
               [presence$]="presenceSubject.asObservable()"
@@ -241,8 +241,9 @@
             </mat-accordion>
           </div>
         </div>
-      <div class="footer-fix search-result-footer">
-        <ul>
+      </div>
+      <div class="btn-box">
+        <ul class="">
           <li>
             <button mat-flat-button (click)="onCancel()" class="mat-primary">
               {{ 'search.clearAndColse' | translate }}

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.scss

@@ -10,3 +10,59 @@
     color: #444444;
   }
 }
+
+ucap-integrated-search-form {
+  position: relative;
+  display: inline-flex;
+  .search-container {
+    width: 20%;
+  }
+}
+.organization-option {
+  position: relative;
+  display: inline-flex;
+  width: 70%;
+}
+.content-area {
+  display: flex;
+  height: calc(100% - 140px);
+}
+
+.contents-table {
+  position: relative;
+  flex-direction: column;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 100%;
+  max-width: 100%;
+  height: 100%;
+  overflow: hidden;
+  .table-box {
+    position: relative;
+    width: 100%;
+    height: calc(100% - 60px);
+    overflow: hidden;
+    display: flex;
+  }
+  .footer-fix {
+    display: flex;
+    flex: 1 1 auto;
+    bottom: 0;
+    width: 100%;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+}
+.btn-box {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  ul {
+    display: flex;
+    flex-flow: row;
+    li {
+      display: inline-flex;
+      margin-left: 4px;
+    }
+  }
+}

projects/ucap-webmessenger-ui/src/assets/scss/partials/_search-frame.scss

@@ -118,3 +118,16 @@ $search-font-size: 14px;
     }
   }
 }
+.search-area {
+  .selectbox {
+    display: inline-flex;
+    width: 70%;
+    padding-left: 20px;
+    line-height: 1.4em;
+    .mat-form-field {
+      font-size: 0.88rem;
+      color: #333333;
+      flex: 1 1 auto;
+    }
+  }
+}