fix : 레이아웃에 즐겨찾기 영역 추가

2 years ago · b23c13710f
parent edb081e827
commit b23c13710f
7 changed files with 55 additions and 16 deletions
--- a/src/main/webapp/WEB-INF/jsp/framework/layouts/tiles/biz/layout-tiles-biz-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/framework/layouts/tiles/biz/layout-tiles-biz-main.jsp
@ -24,7 +24,7 @@
 </head>
 <body>

-    <div class="layoutWrapper hamberger-open">
+    <div class="layoutWrapper">

        <%@include file="header.jsp"%>

@ -40,6 +40,16 @@
            <t:insertAttribute name="content"/>
        </main>

+        <aside>
+            <div id="fastMenu" class="fastmenu-close">
+                <div class="text-center mt-2">
+                    <button type="button" id="favorites" class="btn btn-xs btn-square btn-outline-dark h-px-30 text-orange" title="즐겨찾기">
+                        <i class="bx bx-star"></i>
+                    </button>
+                </div>
+            </div>
+        </aside>
+
        <%@include file="footer.jsp"%>
    </div>
    <!-- //wrap -->
--- a/src/main/webapp/WEB-INF/templates/layout/layout_main.html
+++ b/src/main/webapp/WEB-INF/templates/layout/layout_main.html
@ -9,7 +9,7 @@
  <!-- <body> start -->
  <body>

-    <div class="layoutWrapper hamberger-open">
+    <div class="layoutWrapper">

    <!-- <Header> start -->
    <Header>
--- a/src/main/webapp/resources/biz/common/css/bizMain.css
+++ b/src/main/webapp/resources/biz/common/css/bizMain.css
@ -135,3 +135,12 @@
    letter-spacing: -0.6px;
    padding: 6px 10px 5px 10px;
 }
+
+
+.fastmenu-close {
+    width: 3rem;
+}
+
+.fastmenu-open {
+    width: 16.25rem;
+}
--- a/src/main/webapp/resources/biz/common/js/defaultUI.js
+++ b/src/main/webapp/resources/biz/common/js/defaultUI.js
@ -6,12 +6,22 @@ $(document).ready(function(){

        if(eHasClass==true){
            $( "header, button.hamberger").removeClass('active');
-            document.querySelector('.layoutWrapper').classList.replace('hamberger-open', 'hamberger-close');
            document.querySelector('#sneatMenu').classList.add("menu-collapsed");
        }else{
            $( "header, button.hamberger").addClass('active');
            document.querySelector('#sneatMenu').classList.remove("menu-collapsed");
-            document.querySelector('.layoutWrapper').classList.replace('hamberger-close', 'hamberger-open');
+        }
+    });
+
+    $( "#favorites" ).on( "click", function() {
+        var e= $('#fastMenu');
+
+        var eHasClass=e.hasClass('fastmenu-open');
+
+        if(eHasClass==true){
+            document.querySelector('#fastMenu').classList.replace('fastmenu-open', 'fastmenu-close');
+        }else{
+            document.querySelector('#fastMenu').classList.replace('fastmenu-close', 'fastmenu-open');
        }
    });

--- a/src/main/webapp/resources/biz/layout/css/root.css
+++ b/src/main/webapp/resources/biz/layout/css/root.css
@ -1,35 +1,36 @@
 /* CSS그리드 */
 div.layoutWrapper {
    display: grid;
+    grid-template-columns: fit-content(16.25rem) auto fit-content(16.25rem);
    grid-template-rows : 2.2rem minmax(27rem,54rem) 2.2rem;
    grid-auto-flow: column;
    grid-column-gap: 10px;
    height: 100%;
-}
-div.layoutWrapper.hamberger-open {
-    grid-template-columns: 16.25rem auto;
    transition: all 1s;
 }

-div.layoutWrapper.hamberger-close {
-    grid-template-columns: fit-content(16.25rem) auto;
-    transition: all 1s;
-}

 div.layoutWrapper > nav {
-    grid-row: 1 / 4;
-    grid-column: 1 / 2;
+    grid-area : 1 / 1 / 4 / 2;
    background-color: #ffffff;
 }
 div.layoutWrapper > header {
-    grid-column: 2 / 3;
+    grid-area : 1 / 2 / 2 / 4;
    display: flex;
    align-items: center;
    height: 100%;
 }
 div.layoutWrapper > main {
-    grid-column: 2 / 3;
+    margin-right: 3rem;
+    grid-area : 2 / 2 / 3 / 4;
 }
+
 div.layoutWrapper > footer {
-    grid-column: 2 / 3;
+    grid-area : 3 / 2 / 4 / 4;
+}
+
+div.layoutWrapper > aside {
+    border: 1px solid black;
+    z-index:1;
+    grid-area :  2 / 3 / 3 / 4;
 }
--- a/src/main/webapp/resources/framework/css/common/xit-core-extend.css
+++ b/src/main/webapp/resources/framework/css/common/xit-core-extend.css
@ -95,6 +95,10 @@
    --bs-btn-hover-bg:#676767;
 }

+.btn-square {
+    aspect-ratio: 1 / 1 !important;
+}
+
 .btn-search {
    --bs-btn-color: #fff;
    --bs-btn-bg: #44539e;
--- a/src/main/webapp/resources/framework/css/common/xit-core.css
+++ b/src/main/webapp/resources/framework/css/common/xit-core.css
@ -11836,6 +11836,11 @@ button.list-group-item-gray.active {
    color: #fff !important;
 }

+.text-orange {
+    --bs-text-opacity: 1;
+    color: orange !important;
+}
+
 .text-body {
    --bs-text-opacity: 1;
    color: #697a8d !important;