From ff622299e2a685bac935b25ca56d44999cfa9508 Mon Sep 17 00:00:00 2001 From: Berke Aras Date: Wed, 16 Feb 2022 09:58:59 +0100 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=92=84=20Knowledge=20Base=20is=20now?= =?UTF-8?q?=20responsive!?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header/Header/style.scss | 2 +- .../KnowledgeBaseHeader/style.scss | 11 ++++ .../KnowledgeBaseSidebar/index.jsx | 11 +++- .../KnowledgeBaseSidebar/style.scss | 59 +++++++++++++++++++ src/scss/style.scss | 2 + src/views/KnowledgeBase/style.scss | 6 +- src/views/auth/SignIn/style.scss | 2 +- 7 files changed, 88 insertions(+), 5 deletions(-) diff --git a/src/components/Header/Header/style.scss b/src/components/Header/Header/style.scss index e377439..991e010 100644 --- a/src/components/Header/Header/style.scss +++ b/src/components/Header/Header/style.scss @@ -177,7 +177,7 @@ body { } } -@media (max-width: 600px) { +@media (max-width: 650px) { .nav-header { .header__menu-items { display: none; diff --git a/src/components/KnowledgeBase/KnowledgeBaseHeader/style.scss b/src/components/KnowledgeBase/KnowledgeBaseHeader/style.scss index 122b7dd..13d2096 100644 --- a/src/components/KnowledgeBase/KnowledgeBaseHeader/style.scss +++ b/src/components/KnowledgeBase/KnowledgeBaseHeader/style.scss @@ -13,6 +13,7 @@ .checkbox { float: right; padding-top: 5px; + z-index: 0; } button { @@ -21,4 +22,14 @@ a { outline: none; } + + @media (max-width: 768px) { + overflow-y: none; + overflow-x: auto; + white-space: nowrap; + + div.checkbox { + float: none; + } + } } diff --git a/src/components/KnowledgeBase/KnowledgeBaseSidebar/index.jsx b/src/components/KnowledgeBase/KnowledgeBaseSidebar/index.jsx index 8fcf32f..ffeb952 100644 --- a/src/components/KnowledgeBase/KnowledgeBaseSidebar/index.jsx +++ b/src/components/KnowledgeBase/KnowledgeBaseSidebar/index.jsx @@ -1,12 +1,13 @@ import React, { useState, useEffect } from 'react' import { NavLink } from 'react-router-dom' import './style.scss' -import { Folder, Home } from 'react-feather' +import { Folder, Home, ChevronRight } from 'react-feather' import PropTypes from 'prop-types' import { Loader } from 'semantic-ui-react' function KnowledgeBaseSidebar(props) { const [folders, setFolders] = useState([]) + const [sidebarOpen, setSidebarOpen] = useState(false) useEffect(() => { let tokenHeaders = new Headers() @@ -29,15 +30,20 @@ function KnowledgeBaseSidebar(props) { }, []) return ( -
+
{props.isLoading ? (
) : ( <> + { + e.preventDefault(); + setSidebarOpen(!sidebarOpen) + }} className="KnowledgeBaseSidebar-mobile-button"> setSidebarOpen(false)} key="KnowledgeBaseSidebar-home" className={({ isActive }) => (!isActive ? 'KnowledgeBaseSidebar-item' : 'KnowledgeBaseSidebar-item KnowledgeBaseSidebar-item--active')} to="/app/knowledgebase" @@ -51,6 +57,7 @@ function KnowledgeBaseSidebar(props) { return ( setSidebarOpen(false)} title={folder.knowledge_base_folder_description} className={({ isActive }) => (!isActive ? 'KnowledgeBaseSidebar-item' : 'KnowledgeBaseSidebar-item KnowledgeBaseSidebar-item--active')} to={'/app/knowledgebase/' + folder.id} diff --git a/src/components/KnowledgeBase/KnowledgeBaseSidebar/style.scss b/src/components/KnowledgeBase/KnowledgeBaseSidebar/style.scss index 3a7f1f2..20376b5 100644 --- a/src/components/KnowledgeBase/KnowledgeBaseSidebar/style.scss +++ b/src/components/KnowledgeBase/KnowledgeBaseSidebar/style.scss @@ -11,6 +11,8 @@ z-index: 0; padding: 65px 10px 10px; overflow: auto; + z-index: 1; + transition: all .2s; hr { height: 1px; @@ -55,4 +57,61 @@ margin-bottom: 0 !important; } } + + &-mobile-button { + display: none; + height: 40px; + width: 40px; + border-radius: 100px; + background: #f7f7f7; + text-align: center; + cursor: pointer; + transition: all 0.2s; + margin-bottom: 15px; + position: relative; + + svg { + margin: 8px; + transform: none; + transition: all .2s; + } + + &:hover { + color: #2185d0; + background-color: #eeeeee; + transform: scale(0.98); + } + &:active { + transform: scale(0.93); + outline: none !important; + } + } + + &--mobile-open { + width: 90% !important; + max-width: 400px !important; + + .KnowledgeBaseSidebar-mobile-button { + svg { + transform: rotate(180deg) !important; + } + } + } + + @media (max-width: 768px) { + width: 50px; + padding: 65px 5px 5px; + + &:not(&--mobile-open) { + *:not(.KnowledgeBaseSidebar-mobile-button):not(.KnowledgeBaseSidebar-mobile-button *) { + opacity: 0; + pointer-events: none; + touch-action: none; + } + } + + &-mobile-button { + display: inline-block; + } + } } diff --git a/src/scss/style.scss b/src/scss/style.scss index 1a2f46a..0caf689 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -2,6 +2,8 @@ @import 'variables.scss'; * { box-sizing: border-box; + -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-tap-highlight-color: transparent; } html, diff --git a/src/views/KnowledgeBase/style.scss b/src/views/KnowledgeBase/style.scss index 5bb0223..e2fae00 100644 --- a/src/views/KnowledgeBase/style.scss +++ b/src/views/KnowledgeBase/style.scss @@ -5,7 +5,7 @@ body { } .main_content--knowledge-base { - padding: 20px; + padding: 20px !important; position: absolute; top: 51px; right: 0; @@ -76,4 +76,8 @@ body { margin-top: 0; } } + + @media (max-width: 768px) { + width: calc(100% - 50px) !important; + } } diff --git a/src/views/auth/SignIn/style.scss b/src/views/auth/SignIn/style.scss index 3f3f28b..71b0e97 100644 --- a/src/views/auth/SignIn/style.scss +++ b/src/views/auth/SignIn/style.scss @@ -58,7 +58,7 @@ body { background: #fdfdfd !important; } -@media (max-width: 600px) { +@media (max-width: 650px) { .loginContainer { width: 100% !important; } From ee2f76f928d7f54b8326c5bbb6afc5b6fae4cea6 Mon Sep 17 00:00:00 2001 From: Berke Aras Date: Wed, 16 Feb 2022 10:00:40 +0100 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20Run=20Prettier?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../KnowledgeBase/KnowledgeBaseHeader/style.scss | 2 +- .../KnowledgeBase/KnowledgeBaseSidebar/index.jsx | 14 ++++++++++---- .../KnowledgeBase/KnowledgeBaseSidebar/style.scss | 4 ++-- src/scss/style.scss | 2 +- 4 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/components/KnowledgeBase/KnowledgeBaseHeader/style.scss b/src/components/KnowledgeBase/KnowledgeBaseHeader/style.scss index 13d2096..c39db4f 100644 --- a/src/components/KnowledgeBase/KnowledgeBaseHeader/style.scss +++ b/src/components/KnowledgeBase/KnowledgeBaseHeader/style.scss @@ -26,7 +26,7 @@ @media (max-width: 768px) { overflow-y: none; overflow-x: auto; - white-space: nowrap; + white-space: nowrap; div.checkbox { float: none; diff --git a/src/components/KnowledgeBase/KnowledgeBaseSidebar/index.jsx b/src/components/KnowledgeBase/KnowledgeBaseSidebar/index.jsx index ffeb952..79953d8 100644 --- a/src/components/KnowledgeBase/KnowledgeBaseSidebar/index.jsx +++ b/src/components/KnowledgeBase/KnowledgeBaseSidebar/index.jsx @@ -37,10 +37,16 @@ function KnowledgeBaseSidebar(props) {
) : ( <> - { - e.preventDefault(); - setSidebarOpen(!sidebarOpen) - }} className="KnowledgeBaseSidebar-mobile-button"> + { + e.preventDefault() + setSidebarOpen(!sidebarOpen) + }} + className="KnowledgeBaseSidebar-mobile-button" + > + + setSidebarOpen(false)} diff --git a/src/components/KnowledgeBase/KnowledgeBaseSidebar/style.scss b/src/components/KnowledgeBase/KnowledgeBaseSidebar/style.scss index 20376b5..2fb2df2 100644 --- a/src/components/KnowledgeBase/KnowledgeBaseSidebar/style.scss +++ b/src/components/KnowledgeBase/KnowledgeBaseSidebar/style.scss @@ -12,7 +12,7 @@ padding: 65px 10px 10px; overflow: auto; z-index: 1; - transition: all .2s; + transition: all 0.2s; hr { height: 1px; @@ -73,7 +73,7 @@ svg { margin: 8px; transform: none; - transition: all .2s; + transition: all 0.2s; } &:hover { diff --git a/src/scss/style.scss b/src/scss/style.scss index 0caf689..b8675d0 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -2,7 +2,7 @@ @import 'variables.scss'; * { box-sizing: border-box; - -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; }