update ui

977de2ba · minseok.park · 9c530b05 · 977de2ba · 977de2ba · 977de2ba
Commit 977de2ba authored Oct 19, 2024 by minseok.park
12 changed files
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -65,7 +65,7 @@ body {
 .navbar-brand {
  display: flex;
  flex: auto;
-  padding: 0 2rem;
+  padding: 0 1rem;
  align-items: center;
  justify-content: space-between;
 }
@@ -253,7 +253,7 @@ body {
  background-color: rgb(255, 255, 255);
  z-index: 100;
  flex-direction: column;
-  padding: 1rem 1.5rem;
+  padding: 1rem;
  color: rgb(0, 114, 206);
  box-shadow: rgba(0, 0, 0, 0.16) 0 6px 9px 0;
  border-top: 1px solid rgb(0, 114, 206);
@@ -301,24 +301,23 @@ body {
 .product-link {
  cursor: pointer;
  font-size: 16px;
-  padding: 10px 2rem;
+  padding: 10px 1.5rem;
 }
 @media screen and (max-width: 768.5px) {
-  .navbar-brand .navbar-item.search {
-    padding-left: 0;
-    padding-right: 0;
-  }
  .mobile-menu-item > a {
    width: 100%;
    justify-content: center;
  }
+  #search-input {
+    width: 100%;
+  }
 }
 @media screen and (min-width: 769px) {
  #search-input {
-    width: 250px;
+    width: 100%;
  }
 }
@@ -335,6 +334,10 @@ body {
  .navbar-menu {
    display: none;
  }
+  .navbar-brand .navbar-item.search {
+    display: none;
+  }
 }
 @media screen and (min-width: 1024px) {

--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -39,8 +39,10 @@
  /* background: var(--nav-background); */
  background: var(--color-white);
  position: relative;
-  top: var(--toolbar-height);
+  /* top: var(--toolbar-height); */
-  height: var(--nav-height);
+  top: 0;
+  /* height: var(--nav-height); */
+  height: 100vh;
  border-right: 1px solid var(--color-blue-30);
 }

--- a/src/css/toc.css
+++ b/src/css/toc.css
@@ -100,7 +100,7 @@
  background: var(--color-blue-10);
 }
-.sidebar .chat-btn {
+.chat-btn {
  cursor: pointer;
  display: flex;
  justify-content: center;
@@ -115,7 +115,7 @@
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
 }
-.sidebar .chat-btn:hover {
+.chat-btn:hover {
  transition: transform 0.2s ease-in-out;
  background-color: #005bb5;
  transform: scale(1.1);

--- a/src/css/toolbar.css
+++ b/src/css/toolbar.css
@@ -13,22 +13,46 @@
  color: inherit;
 }
+.mobile-toolbar {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .nav-toggle {
-  background: url(../img/menu.svg) no-repeat 50% 47.5%;
-  background-size: 49%;
  border: none;
  outline: none;
  line-height: inherit;
  padding: 0;
-  height: var(--toolbar-height);
+  width: 35px;
-  width: var(--toolbar-height);
+  height: 35px;
-  margin-right: -0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+.nav-toggle:active {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.mobile-toolbar .field {
+  width: 100%;
+}
+.mobile-toolbar .field input {
+  width: 100%;
 }
 @media screen and (min-width: 1024px) {
-  .nav-toggle {
+  .mobile-toolbar {
    display: none;
  }
+  /* .nav-toggle {
+    display: none;
+  } */
 }
 .nav-toggle.is-active {
@@ -54,12 +78,6 @@
  /* padding-right: 0.5rem; */
 }
-@media screen and (min-width: 1024px) {
-  .edit-this-page {
-    display: block;
-  }
-}
 .toolbar .edit-this-page a {
  color: var(--toolbar-muted-color);
 }
@@ -68,3 +86,9 @@
  color: var(--color-bwg-main);
  font-weight: 600;
 }
+@media screen and (min-width: 1024px) {
+  .edit-this-page {
+    display: block;
+  }
+}
--- a/src/js/01-nav.js
+++ b/src/js/01-nav.js
@@ -162,15 +162,15 @@
  function showNav (e) {
    if (navToggle.classList.contains('is-active')) return hideNav(e)
-    trapEvent(e)
+    // trapEvent(e)
-    var html = document.documentElement
+    // var html = document.documentElement
-    html.classList.add('is-clipped--nav')
+    // html.classList.add('is-clipped--nav')
    navToggle.classList.add('is-active')
    navContainer.classList.add('is-active')
-    var bounds = nav.getBoundingClientRect()
+    // var bounds = nav.getBoundingClientRect()
-    var expectedHeight = window.innerHeight - Math.round(bounds.top)
+    // var expectedHeight = window.innerHeight - Math.round(bounds.top)
-    if (Math.round(bounds.height) !== expectedHeight) nav.style.height = expectedHeight + 'px'
+    // if (Math.round(bounds.height) !== expectedHeight) nav.style.height = expectedHeight + 'px'
-    html.addEventListener('click', hideNav)
+    // html.addEventListener('click', hideNav)
  }
  function hideNav (e) {

--- a/src/js/08-chat.js
+++ b/src/js/08-chat.js
@@ -2,13 +2,13 @@
 ;(function () {
  'use strict'
-  const chatButton = document.querySelector('.sidebar .chat-btn')
+  const chatButton = document.querySelector('.chat-btn')
-  const chat = document.querySelector('.sidebar .chat')
+  const chat = document.querySelector('.chat')
-  const chatIcon = document.querySelector('.sidebar .chat-btn svg')
+  const chatIcon = document.querySelector('.chat-btn svg')
  const chatTextArea = document.getElementById('chat-input')
  const sendButton = document.getElementById('send-btn')
  const stopButton = document.getElementById('stop-btn')
-  const chatBody = document.querySelector('.sidebar .chat .chat-body')
+  const chatBody = document.querySelector('.chat .chat-body')
  const expandButton = document.querySelector('#expand-btn svg')
  const productButton = document.getElementById('model-toggle')
  const productList = document.getElementById('model-popover')

--- a/src/partials/chat.hbs
+++ b/src/partials/chat.hbs
+  <div class="chat-btn">
+    <svg id="chat-icon" data-slot="icon" fill="#fff" stroke-width="1.5" stroke="#0072ce" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="32" height="32">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M7.188 10a.312.312 0 1 1-.625 0 .312.312 0 0 1 .625 0Zm0 0h-.313m3.438 0a.312.312 0 1 1-.625 0 .312.312 0 0 1 .625 0Zm0 0h-.313m3.437 0a.312.312 0 1 1-.625 0 .312.312 0 0 1 .625 0Zm0 0h-.312M17.5 10c0 3.797-3.353 6.875-7.5 6.875a8.735 8.735 0 0 1-2.292-.303 5.368 5.368 0 0 1-3.639 1.576 5.364 5.364 0 0 1-.428-.059 4.025 4.025 0 0 0 .88-1.818c.081-.409-.12-.806-.422-1.098C3.273 13.484 2.5 11.825 2.5 10c0-3.797 3.353-6.875 7.5-6.875s7.5 3.078 7.5 6.875Z"></path>
+    </svg>
+  </div>
+  <div class="chat">
+    <div class="chat-head">
+      <i class="chat-logo"></i>
+      <div class="chat-logo-title-contents">
+        <span class="chat-logo-title">SWLab</span>
+        <span class="chat-logo-title sub">Bankware Global</span>
+      </div>
+      <div id="expand-btn">
+        <svg data-slot="icon" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="30" height="30">
+          <path d="m13.28 7.78 3.22-3.22v2.69a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.69l-3.22 3.22a.75.75 0 0 0 1.06 1.06ZM2 17.25v-4.5a.75.75 0 0 1 1.5 0v2.69l3.22-3.22a.75.75 0 0 1 1.06 1.06L4.56 16.5h2.69a.75.75 0 0 1 0 1.5h-4.5a.747.747 0 0 1-.75-.75ZM12.22 13.28l3.22 3.22h-2.69a.75.75 0 0 0 0 1.5h4.5a.747.747 0 0 0 .75-.75v-4.5a.75.75 0 0 0-1.5 0v2.69l-3.22-3.22a.75.75 0 1 0-1.06 1.06ZM3.5 4.56l3.22 3.22a.75.75 0 0 0 1.06-1.06L4.56 3.5h2.69a.75.75 0 0 0 0-1.5h-4.5a.75.75 0 0 0-.75.75v4.5a.75.75 0 0 0 1.5 0V4.56Z"></path>
+        </svg>
+      </div>
+      <div class="model">
+        <div class="backdrop"></div>
+        <button id="model-toggle">전체</button>
+        <ul id="model-popover">
+          <li>전체</li>
+          <li>BXM</li>
+          <li>BXCM</li>
+          <li>BXCP</li>
+          <li>BXI</li>
+        </ul>
+        <div class="tooltip">
+          <svg class="w-[22px] h-[22px] text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+            <path stroke="#7d7d7d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
+          </svg>
+          <span class="tooltip-text">제품 선택 시 더 정확한 매뉴얼 가이드를 제공해드립니다.</span>
+        </div>
+      </div>
+    </div>
+    <div class="chat-body"></div>
+    <form class="chat-area">
+      <textarea id="chat-input" placeholder="무엇을 도와드릴까요?"></textarea>
+      <div class="chat-btn-area">
+        <div id="send-btn" class="active">
+          <svg data-slot="icon" fill="none" stroke-width="3" stroke="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="20" height="20">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path>
+          </svg>
+        </div>
+        <div id="stop-btn">
+          <svg data-slot="icon" fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="18" height="18">
+            <path clip-rule="evenodd" fill-rule="evenodd" d="M4.5 7.5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-9a3 3 0 0 1-3-3v-9Z"></path>
+          </svg>
+        </div>
+      </div>
+    </form>
+  </div>
--- a/src/partials/header-content.hbs
+++ b/src/partials/header-content.hbs
@@ -8,7 +8,7 @@
          <span class="navbar-title sub">Bankware Global</span>
        </div>
      </a>
-      {{#if env.SITE_SEARCH_PROVIDER}}
+      {{!-- {{#if env.SITE_SEARCH_PROVIDER}} --}}
      <div class="navbar-item search hide-for-print">
        <div id="search-field" class="field">
          {{!-- <input id="search-input" type="text" placeholder="Search the docs"{{#if page.home}} autofocus{{/if}}> --}}
@@ -16,7 +16,7 @@
          <i></i>
        </div>
      </div>
-      {{/if}}
+      {{!-- {{/if}} --}}
      <button class="nav-mobile-menu-toggle" aria-controls="topbar-nav" aria-expanded="false" aria-label="Toggle main menu">
        <svg stroke="currentColor" fill="#0072ce" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
          <path fill="none" d="M0 0h24v24H0z"></path>

--- a/src/partials/main.hbs
+++ b/src/partials/main.hbs
@@ -6,6 +6,7 @@
 {{else}}
 {{> toc}}
 {{> article}}
+{{> chat}}
 {{/if}}
  </div>
 {{> footer}}

--- a/src/partials/nav-toggle.hbs
+++ b/src/partials/nav-toggle.hbs
-<button class="nav-toggle"></button>
+<div class="mobile-toolbar">
+  <button class="nav-toggle">
+    <svg stroke="#0072ce" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="30px" width="30px" xmlns="http://www.w3.org/2000/svg">
+      <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
+      <line x1="15" x2="15" y1="3" y2="21"></line>
+      <path d="m8 9 3 3-3 3"></path>
+    </svg>
+  </button>
+  {{!-- {{#if env.SITE_SEARCH_PROVIDER}} --}}
+  <div id="search-field" class="field">
+    {{!-- <input id="search-input" type="text" placeholder="Search the docs"{{#if page.home}} autofocus{{/if}}> --}}
+    <input id="search-input" type="text">
+    <i></i>
+  </div>
+  {{!-- {{/if}} --}}
+</div>
--- a/src/partials/nav.hbs
+++ b/src/partials/nav.hbs
 <div class="nav-container"{{#if page.component}} data-component="{{page.component.name}}" data-version="{{page.version}}"{{/if}}>
  <aside class="nav">
    <div class="panels">
-{{!-- {{> page-versions}} --}}
+      {{!-- <button>
-{{> nav-explore}}
+        <svg stroke="#0072ce" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="30px" width="30px" xmlns="http://www.w3.org/2000/svg">
-{{> nav-menu}}
+          <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
+          <path d="M9 3v18"></path>
+          <path d="m16 15-3-3 3-3"></path>
+        </svg>
+      </button> --}}
+      {{> nav-explore}}
+      {{> nav-menu}}
    </div>
  </aside>
 </div>
--- a/src/partials/toc.hbs
+++ b/src/partials/toc.hbs
 <aside class="toc sidebar" data-title="{{{or page.attributes.toctitle 'Contents'}}}" data-levels="{{{or page.attributes.toclevels 2}}}">
  <div class="toc-menu"></div>
-  <div class="chat-btn">
+  {{!-- <div class="chat-btn">
    <svg id="chat-icon" data-slot="icon" fill="#fff" stroke-width="1.5" stroke="#0072ce" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="32" height="32">
      <path stroke-linecap="round" stroke-linejoin="round" d="M7.188 10a.312.312 0 1 1-.625 0 .312.312 0 0 1 .625 0Zm0 0h-.313m3.438 0a.312.312 0 1 1-.625 0 .312.312 0 0 1 .625 0Zm0 0h-.313m3.437 0a.312.312 0 1 1-.625 0 .312.312 0 0 1 .625 0Zm0 0h-.312M17.5 10c0 3.797-3.353 6.875-7.5 6.875a8.735 8.735 0 0 1-2.292-.303 5.368 5.368 0 0 1-3.639 1.576 5.364 5.364 0 0 1-.428-.059 4.025 4.025 0 0 0 .88-1.818c.081-.409-.12-.806-.422-1.098C3.273 13.484 2.5 11.825 2.5 10c0-3.797 3.353-6.875 7.5-6.875s7.5 3.078 7.5 6.875Z"></path>
    </svg>
@@ -51,5 +51,5 @@
        </div>
      </div>
    </form>
-  </div>
+  </div> --}}
 </aside>