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

main
이범준 2 years ago
parent edb081e827
commit b23c13710f

@ -24,7 +24,7 @@
</head> </head>
<body> <body>
<div class="layoutWrapper hamberger-open"> <div class="layoutWrapper">
<%@include file="header.jsp"%> <%@include file="header.jsp"%>
@ -40,6 +40,16 @@
<t:insertAttribute name="content"/> <t:insertAttribute name="content"/>
</main> </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"%> <%@include file="footer.jsp"%>
</div> </div>
<!-- //wrap --> <!-- //wrap -->

@ -9,7 +9,7 @@
<!-- <body> start --> <!-- <body> start -->
<body> <body>
<div class="layoutWrapper hamberger-open"> <div class="layoutWrapper">
<!-- <Header> start --> <!-- <Header> start -->
<Header> <Header>

@ -135,3 +135,12 @@
letter-spacing: -0.6px; letter-spacing: -0.6px;
padding: 6px 10px 5px 10px; padding: 6px 10px 5px 10px;
} }
.fastmenu-close {
width: 3rem;
}
.fastmenu-open {
width: 16.25rem;
}

@ -6,12 +6,22 @@ $(document).ready(function(){
if(eHasClass==true){ if(eHasClass==true){
$( "header, button.hamberger").removeClass('active'); $( "header, button.hamberger").removeClass('active');
document.querySelector('.layoutWrapper').classList.replace('hamberger-open', 'hamberger-close');
document.querySelector('#sneatMenu').classList.add("menu-collapsed"); document.querySelector('#sneatMenu').classList.add("menu-collapsed");
}else{ }else{
$( "header, button.hamberger").addClass('active'); $( "header, button.hamberger").addClass('active');
document.querySelector('#sneatMenu').classList.remove("menu-collapsed"); 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');
} }
}); });

@ -1,35 +1,36 @@
/* CSS그리드 */ /* CSS그리드 */
div.layoutWrapper { div.layoutWrapper {
display: grid; 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-template-rows : 2.2rem minmax(27rem,54rem) 2.2rem;
grid-auto-flow: column; grid-auto-flow: column;
grid-column-gap: 10px; grid-column-gap: 10px;
height: 100%; height: 100%;
}
div.layoutWrapper.hamberger-open {
grid-template-columns: 16.25rem auto;
transition: all 1s; transition: all 1s;
} }
div.layoutWrapper.hamberger-close {
grid-template-columns: fit-content(16.25rem) auto;
transition: all 1s;
}
div.layoutWrapper > nav { div.layoutWrapper > nav {
grid-row: 1 / 4; grid-area : 1 / 1 / 4 / 2;
grid-column: 1 / 2;
background-color: #ffffff; background-color: #ffffff;
} }
div.layoutWrapper > header { div.layoutWrapper > header {
grid-column: 2 / 3; grid-area : 1 / 2 / 2 / 4;
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; height: 100%;
} }
div.layoutWrapper > main { div.layoutWrapper > main {
grid-column: 2 / 3; margin-right: 3rem;
grid-area : 2 / 2 / 3 / 4;
} }
div.layoutWrapper > footer { 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;
} }

@ -95,6 +95,10 @@
--bs-btn-hover-bg:#676767; --bs-btn-hover-bg:#676767;
} }
.btn-square {
aspect-ratio: 1 / 1 !important;
}
.btn-search { .btn-search {
--bs-btn-color: #fff; --bs-btn-color: #fff;
--bs-btn-bg: #44539e; --bs-btn-bg: #44539e;

@ -11836,6 +11836,11 @@ button.list-group-item-gray.active {
color: #fff !important; color: #fff !important;
} }
.text-orange {
--bs-text-opacity: 1;
color: orange !important;
}
.text-body { .text-body {
--bs-text-opacity: 1; --bs-text-opacity: 1;
color: #697a8d !important; color: #697a8d !important;

Loading…
Cancel
Save