Update

_src/admin/js/admin.js

@@ -14,7 +14,7 @@ APP.init = function(){
  * 메뉴관련 초기화
  ***********************************************************************************/
 APP.initMenu = function(){
-    $('#nav .main-navigation li').each(function(){
+    $('[data-main-navigation] li').each(function(){
        var $this = $(this);
        var menuCode = $this.data('active');
 

_src/admin/js/modules/datagrid.js

@@ -31,13 +31,21 @@ function GRID (element, addOptions) {
         paging: {
             pageSize: 30,
             showNavigationButtons: true
+        },pager: {
+            showNavigationButtons: true,
+            showPageSizeSelector: true,
+            allowedPageSizes: [10, 15, 20, 30, 50, 100],
+            infoText: "{0}페이지 / 총 {1} 페이지 (검색결과 : {2}건)",
+            showInfo: true,
+            visible: true
         },
         selection : {
             mode: 'single',
-            selectAllMode : 'page'
+            selectAllMode : 'page',
+            showCheckBoxesMode: "always"
         },
         scrolling: {
-            showScrollbar: 'onHover'
+            showScrollbar: 'always'
         },
         focusedRowEnabled: true,
         columns: null,
@@ -53,6 +61,15 @@ function GRID (element, addOptions) {
             allowAdding: false,
             allowDeleting: false
         },
+        columnFixing: {
+            enabled: true,
+            texts: {
+                fix: '열 고정',
+                leftPosition: '왼쪽에 고정',
+                rightPosition: '오른쪽에 고정',
+                unfix:'열 고정 해제'
+            }
+        },
         onRowClick: function(e) {
             self.OnRowSingleClick(e.data);
         },

_src/admin/scss/common/_layout.scss

@@ -8,19 +8,13 @@ body {
     min-width:0;
   }
 }
-$header-height : 50px;
-$nav-height : 40px;
-
+$header-height : 0px;
+$nav-height : 44px;
+/*
 #header {
   position:relative;
   @include display-flex();
   height:$header-height;
-
-  //background: #5399ea; /* Old browsers */
-  //background: -moz-linear-gradient(left, #5399ea 0%, #5ec0cc 100%); /* FF3.6-15 */
-  //background: -webkit-linear-gradient(left, #5399ea 0%,#5ec0cc 100%); /* Chrome10-25,Safari5.1-6 */
-  //background: linear-gradient(to right, #5399ea 0%,#5ec0cc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-  //filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5399ea', endColorstr='#5ec0cc',GradientType=1 ); /* IE6-9 */
   background:#282828;
   padding:0 30px;
   z-index:101;
@@ -222,6 +216,180 @@ $nav-height : 40px;
     }
   }
 }
+*/
+
+#nav {
+  .nav-menu {
+    flex:1;
+    @include display-flex;
+    align-items: center;
+
+    .logo {
+      width:50px;
+      height:44px;
+      border-color:transparent !important;
+      background-color:#354d91 !important;
+      color:#fff;
+      padding:13px;
+      text-align:center;
+      &:after {
+        content:'';
+      }
+      i {
+        margin-right:0;
+      }
+    }
+
+    &,
+    ul {
+      list-style:none;
+      padding:0;
+      margin:0;
+      background-color:#282828;
+
+      a,
+      span {
+        font-size:12px;
+        padding:13px;
+        user-select: none;
+        color:#b4b4b4;
+        display:block;
+      }
+
+      li {
+        display:block;
+        white-space: nowrap;
+
+        &.open,
+        &:hover {
+          > a,
+          > span {
+            text-decoration: none;
+            cursor:pointer;
+          }
+        }
+
+        &.divider {
+          height:1px;
+          border:0 none;
+          background-color:#ddd;
+          margin:3px 0;
+        }
+      }
+    }
+
+    > li {
+      display:block;
+      position:relative;
+
+      > a,
+      > span{
+        white-space: nowrap;
+        word-wrap:normal;
+        padding-right:30px;
+        position:relative;
+
+        i {
+          margin-right:5px;
+        }
+        &:hover {
+          color:#fff;
+        }
+
+        &:after {
+          content:'\f107';
+          font-family: "Font Awesome 5 Pro" !important;
+          position:absolute;
+          right:10px;
+          top:50%;
+          transform: translateY(-50%);
+        }
+      }
+
+      &.active {
+        > span {
+          color:#fff;
+        }
+      }
+
+      > ul {
+        display:none;
+        position:absolute;
+        top:44px;
+        left:-1px;
+        width:auto;
+        border:1px solid #a0a0a0;
+        border-top:0 none;
+        min-width:calc(100% + 2px);
+        padding:2px;
+        box-shadow: 0 6px 12px rgba(0,0,0,.175);
+
+        a,
+        span {
+          padding:6px 10px;
+          color:#282828;
+
+          &:hover {
+            background-color:#354D91;
+            color:#fff;
+          }
+        }
+
+        > li {
+          position:relative;
+
+          > ul {
+            display:none;
+            position:absolute;
+            top:0;
+            left:calc(100% + 1px);
+            border:1px solid #a0a0a0;
+            min-width:100%;
+            background-color:#fff;
+            box-shadow: 0 6px 12px rgba(0,0,0,.175);
+          }
+
+          >span {
+            padding-right:15px;
+
+            &:after {
+              content:'\f105';
+              font-family: "Font Awesome 5 Pro" !important;
+              position:absolute;
+              right:5px;
+              top:50%;
+              transform: translateY(-50%);
+            }
+          }
+
+          &:hover {
+            > a, span {
+              background-color:#354D91;
+              color:#fff;
+
+            }
+            > ul {
+              display:block;
+            }
+          }
+        }
+      }
+
+      &.open {
+        > a, span {
+          color:#282828;
+          background-color:#fff;;
+          z-index:3;
+        }
+        > ul {
+          display:block;
+          background-color:#fff;
+        }
+      }
+    }
+
+  }
+}
 
 #contents {
   padding:30px;
@@ -230,18 +398,18 @@ $nav-height : 40px;
 }
 
 .page-header {
-  margin-bottom:15px;
+  margin-bottom:10px;
   border-bottom: 1px solid #ddd;
-  padding-bottom: 5px;
 
   .iframe & {
     margin-top:0;
   }
 
   .page-title {
-    font-size:23px;
+    font-size:18px;
     font-weight:500;
     color:#282828;
+    line-height:1em;
 
     small {
       color:#767676;

_src/admin/scss/components/_buttons.scss

@@ -9,6 +9,8 @@
   border: 1px solid transparent;
   @include button-size( $input-btn-padding-y , $input-btn-padding-x, $input-btn-font-size, $input-btn-line-height, $input-btn-border-radius );
   @include transition();
+  transition: all .2s ease;
+  box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
 
   &:hover {
     color: $body-color;

_src/admin/scss/components/_form.scss

@@ -208,7 +208,7 @@ textarea.form-control[data-autosize] {
   .right {
     display: table-cell;
     vertical-align: bottom;
-    padding: 0 5px 10px 5px;
+    padding: 0 0px 10px 0px;
 
     h1, h2, h3, h4, h5, h6 {
       line-height: 26px;

package.json

@@ -15,18 +15,18 @@
   "devDependencies": {
     "ax5ui-toast": "^1.4.126",
     "gulp": "^4.0.2",
-    "gulp-clean-css": "^3.9.4",
+    "gulp-clean-css": "^4.2.0",
     "gulp-concat": "^2.6.1",
     "gulp-minify": "^3.1.0",
-    "gulp-sass": "^3.2.1",
+    "gulp-sass": "^4.0.2",
     "gulp-size": "^3.0.0",
-    "gulp-sourcemaps": "^2.6.4"
+    "gulp-sourcemaps": "^2.6.5"
   },
   "dependencies": {
     "ax5core": "^1.4.126",
     "ax5ui-mask": "^1.4.126",
     "ax5ui-modal": "^1.4.126",
-    "clipboard": "^2.0.1",
-    "devextreme": "19.1.4"
+    "clipboard": "^2.0.4",
+    "devextreme": "^19.1.6"
   }
 }

wheeparam/views/themes/admin/theme.php

@@ -16,25 +16,12 @@ $this->site->add_js('https://unpkg.com/devextreme-intl@19.1/dist/devextreme-intl
 </head>
 <body>
 <script>var menuActive="<?=$this->active?>";</script>
-
-<header id="header">
-    <a class="logo" href="<?=base_url('admin')?>">Administrator</a>
-    <div class="top-navs"></div>
-    <div class="right-actions">
-        <div class="dropdown btn-user">
-            <button type="button" class="btn-top-action" data-toggle="dropdown"><i class="fas fa-user"></i> <?=$this->member->info('nickname')?>님</button>
-            <ul class="dropdown-menu pull-right">
-                <li><a href="<?=base_url('members/logout')?>?reurl=<?=current_full_url()?>">로그아웃</a></li>
-            </ul>
-        </div>
-    </div>
-</header>
-
 <nav id="nav">
-    <ul class="main-navigation">
-        <li>
-            <a href="javascript:;"><i class="fal fa-wrench"></i><span>사이트 관리</span></a>
-            <ul>
+    <ul class="nav-menu" data-main-navigation>
+        <li><a class="logo" href="<?=base_url('/admin')?>"><i class="fal fa-home"></i></a></li>
+        <li class="dropdown">
+            <span data-toggle="dropdown"><i class="fal fa-wrench"></i>사이트 관리</span>
+            <ul class="dropdown-menu">
                 <li data-active="management/popup"><a href="<?=base_url('admin/management/popup')?>">팝업 관리</a></li>
                 <li data-active="management/banner"><a href="<?=base_url('admin/management/banner')?>">배너 관리</a></li>
                 <li data-active="management/menu"><a href="<?=base_url('admin/management/menu')?>">메뉴 관리</a></li>
@@ -42,9 +29,9 @@ $this->site->add_js('https://unpkg.com/devextreme-intl@19.1/dist/devextreme-intl
                 <li data-active="management/qna"><a href="<?=base_url('admin/management/qna')?>">Q&A 관리</a></li>
             </ul>
         </li>
-        <li>
-            <a href="javascript:;"><i class="fal fa-users"></i><span>회원 관리</span></a>
-            <ul>
+        <li class="dropdown">
+            <span data-toggle="dropdown"><i class="fal fa-users"></i>회원 관리</span>
+            <ul class="dropdown-menu">
                 <li data-active="members/lists"><a href="<?=base_url('admin/members/lists')?>">회원 목록</a></li>
                 <li data-active="members/add"><a href="<?=base_url('admin/members/add')?>">회원 등록</a></li>
                 <li data-active="members/log"><a href="<?=base_url('admin/members/log')?>">회원 로그인 기록</a></li>
@@ -53,27 +40,21 @@ $this->site->add_js('https://unpkg.com/devextreme-intl@19.1/dist/devextreme-intl
                 <?php endif;?>
             </ul>
         </li>
-
-        <?php if(USE_BOARD OR IS_TEST) : ?>
-            <li>
-                <a href="javascript:;"><i class="fal fa-th-large"></i><span>게시판 관리</span></a>
-                <ul>
-                    <li data-active="board/lists"><a href="<?=base_url('admin/board/lists')?>">게시판 관리</a></li>
-                    <li class="divider"></li>
-                    <?php
-                    $board_list = $this->boardlib->getNewPostBoards();
-                    foreach($board_list as $row): ?>
-                        <li data-active="board/<?=$row['brd_key']?>"><a href="<?=base_url('admin/board/posts/'.$row['brd_key'])?>"><?=$row['brd_title']?><?=$row['new_cnt']>0?" <span class='badge'>{$row['new_cnt']}</span>":''?></a></li>
-                    <?php endforeach;?>
-                </ul>
-            </li>
-
-        <?php endif;?>
-
-
-        <li>
-            <a href="javascript:;"><i class="fal fa-chart-bar"></i><span>방문 통계</span></a>
-            <ul>
+        <li class="dropdown">
+            <span data-toggle="dropdown"><i class="fal fa-th-large"></i>게시판 관리</span>
+            <ul class="dropdown-menu">
+                <li data-active="board/lists"><a href="<?=base_url('admin/board/lists')?>">게시판 관리</a></li>
+                <li class="divider"></li>
+                <?php
+                $board_list = $this->boardlib->getNewPostBoards();
+                foreach($board_list as $row): ?>
+                    <li data-active="board/<?=$row['brd_key']?>"><a href="<?=base_url('admin/board/posts/'.$row['brd_key'])?>"><?=$row['brd_title']?><?=$row['new_cnt']>0?" <span class='badge'>{$row['new_cnt']}</span>":''?></a></li>
+                <?php endforeach;?>
+            </ul>
+        </li>
+        <li class="dropdown">
+            <span data-toggle="dropdown"><i class="fal fa-chart-bar"></i>방문 통계</span>
+            <ul class="dropdown-menu">
                 <li data-active="statics/visit"><a href="<?=base_url('admin/statics/visit')?>">사용자 접속 로그</a></li>
                 <li data-active="statics/keyword"><a href="<?=base_url('admin/statics/keyword')?>">키워드별 통계</a></li>
                 <li data-active="statics/times"><a href="<?=base_url('admin/statics/times')?>">방문 시간별 통계</a></li>
@@ -83,10 +64,9 @@ $this->site->add_js('https://unpkg.com/devextreme-intl@19.1/dist/devextreme-intl
                 <li data-active="statics/os"><a href="<?=base_url('admin/statics/os')?>">OS별 통계</a></li>
             </ul>
         </li>
-
-        <li>
-            <a href="javascript:;"><i class="fal fa-cog"></i><span>환경 설정</span></a>
-            <ul>
+        <li class="dropdown">
+            <span data-toggle="dropdown"><i class="fal fa-cog"></i>환경 설정</span>
+            <ul class="dropdown-menu">
                 <li data-active="setting/basic"><a href="<?=base_url('admin/setting/basic')?>">사이트 기본 설정</a></li>
                 <li data-active="setting/localize"><a href="<?=base_url('admin/setting/localize')?>">다국어 설정</a></li>
                 <li data-active="setting/apis"><a href="<?=base_url('admin/setting/apis')?>">소셜/API 설정</a></li>
@@ -98,8 +78,11 @@ $this->site->add_js('https://unpkg.com/devextreme-intl@19.1/dist/devextreme-intl
                 <?php endif;?>
             </ul>
         </li>
-
     </ul>
+
+    <div class="nav-right">
+
+    </div>
 </nav>
 
 <article id="contents">