Repository

- https://github.com/codeisneverodd/programmers-coding-test +export default function Footer() { + return ( +

+ Repository +

+ + https://github.com/codeisneverodd/programmers-coding-test +

Issues

- https://github.com/codeisneverodd/programmers-coding-test/issues +

+ Issues +

+ + https://github.com/codeisneverodd/programmers-coding-test/issues +

Contributor

- 김경현 - 김채린 - 손용찬 +

+ Contributor +

+ 김경현 + 김채린 + 손용찬

해당 페이지의 해답을 자신의 저작물에 추가할 수 있지만 반드시 본 Repository의 주소를 명시하여야합니다.

모든 문제의 저작권은 프로그래머스에 있습니다.

- -

+ 해당 페이지의 해답을 자신의 저작물에 추가할 수 있지만 반드시 본{" "} + Repository의 + 주소를 명시하여야합니다. +

모든 문제의 저작권은 프로그래머스에 있습니다.

+ +

- -

+ +

- `; - - template = template.replaceAll("{{__레포지토리주소__}}", "https://github.com/codeisneverodd/programmers-coding-test") - footer.innerHTML = template; - - } \ No newline at end of file + ); +} diff --git a/src/Loading.js b/src/Loading.js new file mode 100644 index 0000000..c0704be --- /dev/null +++ b/src/Loading.js @@ -0,0 +1,13 @@ +import spinnerPath from "./images/spinner.svg"; +import { useRecoilValue } from "recoil"; +import { loadingState } from "./index.js"; + +export default function Loading() { + const loading = useRecoilValue(loadingState); + return loading ? ( +

+ Loading… +

+ ) : null; +} diff --git a/src/SearchBox/.DS_Store b/src/SearchBox/.DS_Store new file mode 100644 index 0000000..0c14567 Binary files /dev/null and b/src/SearchBox/.DS_Store differ diff --git a/src/SearchBox/SearchBox.js b/src/SearchBox/SearchBox.js new file mode 100644 index 0000000..9b4792e --- /dev/null +++ b/src/SearchBox/SearchBox.js @@ -0,0 +1,13 @@ +import SearchInput from "./components/SearchInput"; +import SearchableList from "./components/SearchableList"; +import SearchPhrases from "./components/SearchPhrases"; + +export default function SearchBox() { + return ( + <> + + + + + ); +} diff --git a/src/SearchBox/components/SearchInput.js b/src/SearchBox/components/SearchInput.js index 1f205ee..17753a3 100644 --- a/src/SearchBox/components/SearchInput.js +++ b/src/SearchBox/components/SearchInput.js @@ -1,24 +1,27 @@ -import { CreateFuzzyMatcher } from '../utils/koreanFuzzy.js'; +import { CreateFuzzyMatcher } from "../utils/koreanFuzzy"; -export function SearchInput() { - this.render = () => { - const $searchInput = document.querySelector('.searchInput'); - $searchInput.innerHTML = ` - - `; - const $fileListItem = document.querySelectorAll('.file-list-item'); - - $searchInput.addEventListener('input', event => { - const $searchInputBox = document.getElementById('searchInput'); - const query = $searchInputBox.value; - const regex = CreateFuzzyMatcher(query.toLowerCase()); - for (let i = 0; i < $fileListItem.length; i++) { - if (regex.test($fileListItem[i].textContent.toLowerCase())) { - $fileListItem[i].classList.remove('is-hidden'); - } else { - $fileListItem[i].classList.add('is-hidden'); - } +export default function SearchInput() { + function search(e) { + const query = e.target.value; + const regex = CreateFuzzyMatcher(query.toLowerCase()); + const $fileListItem = document.querySelectorAll(".file-list-item"); + for (let i = 0; i < $fileListItem.length; i++) { + if (regex.test($fileListItem[i].textContent.toLowerCase())) { + $fileListItem[i].classList.remove("is-hidden"); + } else { + $fileListItem[i].classList.add("is-hidden"); } - }); - }; + } + } + + return ( +

+ +

+ ); } diff --git a/src/SearchBox/components/SearchPhrases.js b/src/SearchBox/components/SearchPhrases.js new file mode 100644 index 0000000..ec6b240 --- /dev/null +++ b/src/SearchBox/components/SearchPhrases.js @@ -0,0 +1,11 @@ +export default function SearchPhrases() { + return ( +

+ + 찾는 문제가 없으신가요? +
+ Repository에 풀이를 제보해주세요 + +

+ ); +} diff --git a/src/SearchBox/components/SearchableList.js b/src/SearchBox/components/SearchableList.js index 43898eb..7181eab 100644 --- a/src/SearchBox/components/SearchableList.js +++ b/src/SearchBox/components/SearchableList.js @@ -1,49 +1,60 @@ -//TODO: api 함수 및 상수 분리 -import SearchResult from '../../SearchResult/components/index.js'; -import { getFileList } from '../utils/api.js'; +import { getFileContent, getFileList } from "../utils/api.js"; +import { splitCodeToSolutions } from "../utils/format.js"; +import { useState } from "react"; +import { useSetRecoilState } from "recoil"; +import { solutionState, loadingState } from "../../index.js"; -const POSSIBLE_LEVELS = [1, 2, 3, 4, 5]; -export function SearchableList() { - const $searchableList = document.querySelector('.searchableList'); - this.render = async () => { - $searchableList.innerHTML = ` -

- `; - const $fileListContainer = document.querySelector('.file-list-container'); - await fillList(); - async function fillList() { - const fileList = {}; - for (const level of POSSIBLE_LEVELS) { - fileList[level] = await getFileList(level); - delete fileList[level][0]; - } - $fileListContainer.innerHTML = ` - ${POSSIBLE_LEVELS.map( - level => ` -

[level ${level}]

${file.name - .slice(0, file.name.length - 3) - .replaceAll('-', ' ')}

`, - ).join('')} - `; +export default function SearchableList() { + let [fileListHTML, changeState] = useState(""); + const setSolutionInfo = useSetRecoilState(solutionState); + const setLoadingState = useSetRecoilState(loadingState); + + // TODO: ``부분 수정 필요.. + (async function fillList() { + const POSSIBLE_LEVELS = [1, 2, 3, 4, 5]; + const fileList = {}; + for (const level of POSSIBLE_LEVELS) { + fileList[level] = await getFileList(level); + delete fileList[level][0]; } + changeState( + (fileListHTML = POSSIBLE_LEVELS.map( + (level) => ` +

[level ${level}]

${file.name + .slice(0, file.name.length - 3) + .replaceAll("-", " ")}

` + ).join("")) + ); + setLoadingState(false); + })(); - $fileListContainer.addEventListener('click', e => { - if (e.target.tagName !== 'LI') return; - const level = e.target.parentNode.classList[1].slice(-1); - const fileName = e.target.classList[1]; - const $searchResult = new SearchResult({ - level, - fileName, - }); - $searchResult.render(); + async function showResult(e) { + if (e.target.tagName !== "LI") return; + const level = e.target.parentNode.classList[1].slice(-1); + const fileName = e.target.classList[1]; + const solution = splitCodeToSolutions(await getFileContent(level, fileName)); + setSolutionInfo({ + level: level, + fileName: fileName, + solution: solution, }); - }; + } + + return ( +

+ ); } diff --git a/src/SearchBox/components/index.js b/src/SearchBox/components/index.js deleted file mode 100644 index d46ae2c..0000000 --- a/src/SearchBox/components/index.js +++ /dev/null @@ -1,18 +0,0 @@ -import { SearchInput } from './SearchInput.js'; -import { SearchableList } from './SearchableList.js'; - -export default function SearchBox() { - const $searchBox = document.querySelector('.searchBox'); - this.render = async () => { - $searchBox.innerHTML = ` -

찾는 문제가 없으신가요?
Repository에 풀이를 제보해주세요

- `; - const searchInput = new SearchInput(); - const searchableList = new SearchableList(); - - await searchableList.render(); - searchInput.render(); - }; -} diff --git a/src/SearchBox/utils/api.js b/src/SearchBox/utils/api.js index ae7e4c6..9514291 100644 --- a/src/SearchBox/utils/api.js +++ b/src/SearchBox/utils/api.js @@ -1,6 +1,14 @@ const GET_FILE_LIST_BASE_URL = `https://api.github.com/repos/codeisneverodd/programmers-coding-test/contents/`; -export const getFileList = async level => { +const GET_FILE_CONTENT_BASE_URL = `https://raw.githubusercontent.com/codeisneverodd/programmers-coding-test/main/`; + +export const getFileList = async (level) => { const url = GET_FILE_LIST_BASE_URL + `level-${level}`; const response = await fetch(url); return await response.json(); }; + +export const getFileContent = async (level, fileName) => { + const url = GET_FILE_CONTENT_BASE_URL + `/level-${level}/${fileName}`; + const response = await fetch(url); + return await response.text(); +}; diff --git a/Section/SearchResult/utils/format.js b/src/SearchBox/utils/format.js similarity index 52% rename from Section/SearchResult/utils/format.js rename to src/SearchBox/utils/format.js index deea01b..d6eed35 100644 --- a/Section/SearchResult/utils/format.js +++ b/src/SearchBox/utils/format.js @@ -2,10 +2,6 @@ export function splitCodeToSolutions(code) { if (code === undefined) return []; const splitter = /\/\/[ ]*정답/; const solutions = code.split(splitter); - const formattedSolutions = solutions.map(solution => '//' + solution); + const formattedSolutions = solutions.map((solution) => "//" + solution); return formattedSolutions.slice(1); } - -export function formattedFileName(fileName) { - return fileName.replace(/\-/g, ' ').replace('.js', ''); -} diff --git a/src/SearchResult/SearchResult.js b/src/SearchResult/SearchResult.js new file mode 100644 index 0000000..dc38d9b --- /dev/null +++ b/src/SearchResult/SearchResult.js @@ -0,0 +1,48 @@ +import { formattedFileName } from "./utils/format.js"; +import { copyText } from "./utils/copyText.js"; +import { useState } from "react"; +import { useRecoilState, useSetRecoilState, useRecoilValue } from "recoil"; +import { solutionState, solutionNoState } from "../index.js"; + +export default function SearchResult() { + const [{ fileName, solution }] = useRecoilState(solutionState); + const solutionNo = useRecoilValue(solutionNoState); + const setSolutionNo = useSetRecoilState(solutionNoState); + let [copyMessage, changeCopyMessage] = useState(); + + function copyCode(e) { + const src = e.target.previousElementSibling; + copyText(src); + changeCopyMessage((copyMessage = " 📋 클립보드에 복사됨!")); + setTimeout(() => { + changeCopyMessage((copyMessage = "")); + }, 1000); + } + + function showdifferentSolution(e) { + if (e.target.innerHTML === "이전 해설" && solutionNo > 0) setSolutionNo((no) => no - 1); + if (e.target.innerHTML === "다음 해설" && solutionNo < solution.length - 1) + setSolutionNo((no) => no + 1); + } + + return ( +

+ + +

{formattedFileName(fileName)}

{solution[solutionNo]}

+ + {copyMessage} +

+ ); +} diff --git a/src/SearchResult/components/index.js b/src/SearchResult/components/index.js deleted file mode 100644 index 9201722..0000000 --- a/src/SearchResult/components/index.js +++ /dev/null @@ -1,84 +0,0 @@ -import { getFileContent } from "../utils/api.js"; -import { formattedFileName, splitCodeToSolutions } from "../utils/format.js"; -import { copyText } from "../utils/copyText.js"; - -export default function SearchResult({ level, fileName }) { - let page = 0; - this.render = async () => { - const $searchResult = document.querySelector('.searchResult'); - $searchResult.innerHTML = ` -

- - -

- -

- `; - const $fileTitle = document.querySelector('.file-title'); - const $code = document.querySelector('.code'); - const solutions = splitCodeToSolutions( - await getFileContent(level, fileName), - ); - setCurrentResult(); - addCopyEvent(); - addNavEvent(); - - function setCurrentResult() { - $fileTitle.innerHTML = formattedFileName(fileName); - $code.innerHTML = solutions[page]; - if(solutions.length > 1){ - const $btnNextSolution = document.querySelector('.btnNextSolution-inactive') - $btnNextSolution.className = 'btnNextSolution' - } - } - - function addCopyEvent() { - const $copyBtn = document.querySelector('.btn-copy'); - $copyBtn.addEventListener('click', e => { - const src = e.target.previousElementSibling; - copyText(src); - const isCopied = document.querySelector('.isCopied'); - isCopied.textContent = ' 📋 클립보드에 복사됨!'; - setTimeout(() => { - isCopied.textContent = ''; - }, 1000); - }); - } - - function addNavEvent() { - const $navigator = document.querySelector('.solutionNavigator'); - const btnPrevSolution = document.querySelector( - '.btnPrevSolution-inactive', - ); - const btnNextSolution = document.querySelector('.btnNextSolution'); - if (page === 0) { - btnPrevSolution.className = 'btnPrevSolution-inactive'; - } - $navigator.addEventListener('click', e => { - const $clickedButton = e.target.closest('button'); - - if ($clickedButton.className.includes('btnPrevSolution')) { - if (page > 0) { - page -= 1; - $code.innerHTML = solutions[page]; - } - } - if ($clickedButton.className.includes('btnNextSolution')) { - if (page < solutions.length - 1) { - page += 1; - $code.innerHTML = solutions[page]; - } - } - page !== 0 - ? (btnPrevSolution.className = 'btnPrevSolution') - : (btnPrevSolution.className = 'btnPrevSolution-inactive'); - page === solutions.length - 1 - ? (btnNextSolution.className = 'btnNextSolution-inactive') - : (btnNextSolution.className = 'btnNextSolution'); - }); - } - }; -} diff --git a/src/SearchResult/utils/api.js b/src/SearchResult/utils/api.js deleted file mode 100644 index e2cdee0..0000000 --- a/src/SearchResult/utils/api.js +++ /dev/null @@ -1,6 +0,0 @@ -const GET_FILE_CONTENT_BASE_URL = `https://raw.githubusercontent.com/codeisneverodd/programmers-coding-test/main/`; -export const getFileContent = async (level, fileName) => { - const url = GET_FILE_CONTENT_BASE_URL + `/level-${level}` + `/${fileName}`; - const response = await fetch(url); - return await response.text(); -}; diff --git a/src/SearchResult/utils/format.js b/src/SearchResult/utils/format.js index deea01b..e241805 100644 --- a/src/SearchResult/utils/format.js +++ b/src/SearchResult/utils/format.js @@ -1,11 +1,3 @@ -export function splitCodeToSolutions(code) { - if (code === undefined) return []; - const splitter = /\/\/[ ]*정답/; - const solutions = code.split(splitter); - const formattedSolutions = solutions.map(solution => '//' + solution); - return formattedSolutions.slice(1); -} - export function formattedFileName(fileName) { - return fileName.replace(/\-/g, ' ').replace('.js', ''); + return fileName.replace(/-/g, " ").replace(".js", ""); } diff --git a/images/favicon-16x16.png b/src/images/favicon-16x16.png similarity index 100% rename from images/favicon-16x16.png rename to src/images/favicon-16x16.png diff --git a/images/favicon-32x32.png b/src/images/favicon-32x32.png similarity index 100% rename from images/favicon-32x32.png rename to src/images/favicon-32x32.png diff --git a/images/favicon.ico b/src/images/favicon.ico similarity index 100% rename from images/favicon.ico rename to src/images/favicon.ico diff --git a/images/github.png b/src/images/github.png similarity index 100% rename from images/github.png rename to src/images/github.png diff --git a/images/programmers.png b/src/images/programmers.png similarity index 100% rename from images/programmers.png rename to src/images/programmers.png diff --git a/images/spinner.svg b/src/images/spinner.svg similarity index 100% rename from images/spinner.svg rename to src/images/spinner.svg diff --git a/src/index.js b/src/index.js index f57403a..c4a9d04 100644 --- a/src/index.js +++ b/src/index.js @@ -1,14 +1,32 @@ import React from "react"; import ReactDOM from "react-dom/client"; +import { RecoilRoot, atom } from "recoil"; import App from "./App"; +export const solutionState = atom({ + key: "solutionState", + default: { + level: 1, + fileName: "", + solution: [], + }, +}); -const root = ReactDOM.createRoot(document.getElementById('root')); +export const solutionNoState = atom({ + key: "solutionNoState", + default: 0, +}); + +export const loadingState = atom({ + key: "loadingState", + default: true, +}); + +const root = ReactDOM.createRoot(document.getElementById("root")); root.render( -

🔍 프로그래머스 해설 은행

- + + + ); - diff --git a/src/styles/style.css b/src/styles/style.css new file mode 100644 index 0000000..49176c4 --- /dev/null +++ b/src/styles/style.css @@ -0,0 +1,304 @@ +* { + box-sizing: border-box; +} + +body { + background: #ffffff; + color: black; +} + +h1 { + text-align: center; + margin: 30px 0 60px 0; + padding: 20px 0; + color: black; + border-bottom: 4px solid #2155cd; +} + +.loading { + display: flex; + flex-direction: column; + margin: 50px auto; + align-items: center; + color: #0aa1dd; + font-size: 18px; +} + +.app { + display: flex; + width: 1170px; + margin: 0 auto; + justify-content: center; +} + +.app .searchBox #searchInput { + width: 320px; + height: 50px; + background-color: #ffffff; + color: black; + font-size: 18px; + font-weight: 700; + border: 3px solid #2155cd; + border-radius: 15px; + outline: none; + padding: 0 10px; +} + +.app .searchBox .searchableList { + width: 320px; +} + +.app .searchBox .searchableList .file-list-container { + max-height: 858px; + overflow: auto; + margin: 12px 0; + border-radius: 15px; +} + +.app .searchBox .searchableList .file-list-container::-webkit-scrollbar { + width: 20px; +} + +.app .searchBox .searchableList .file-list-container::-webkit-scrollbar-track { + background-color: #e8f9fd; + border-radius: 0 15px 15px 0; +} + +.app .searchBox .searchableList .file-list-container::-webkit-scrollbar-thumb { + border-radius: 15px; + background: #2155cd; + box-shadow: inset 2px 2px 5px 0 rgba(255, 255, 255, 0.4); +} + +.app .searchBox .searchableList .file-list { + background-color: #e8f9fd; + position: relative; + top: 0; + padding: 10px; + margin: 0; + border-bottom: 1px solid #2155cd; + outline: none; + color: black; + font-size: 18px; + font-weight: 700; +} + +.app .searchBox .searchableList .file-list .levelTitle { + color: #2155cd; + font-size: 22px; + font-weight: 700; + cursor: default; +} + +.app .searchBox .searchableList .file-list .file-list-item { + cursor: pointer; +} + +.app .searchBox .searchableList .file-list li { + padding: 5px; + list-style: none; +} + +.app .searchBox .searchableList .file-list:last-child { + border: none; +} + +.app .searchBox .searchableList .is-hidden { + display: none !important; +} + +.app .searchBox .searchPhrases { + width: 320px; + text-align: center; + font-size: 20px; + font-weight: 600; + font-family: fantasy; + color: #3c6382; + margin: 20px 0; +} + +.app .searchBox .searchPhrases > a { + text-decoration-line: none; + color: inherit; +} + +.app .searchResult { + margin-left: 50px; + width: 800px; +} + +.app .searchResult .solutionNavigator { + display: flex; + float: right; + position: relative; + top: 55px; +} + +.app .searchResult .solutionNavigator button:first-child { + border-radius: 50px 15px 15px 50px; + background: linear-gradient(90deg, #0aa1dd, #2155cd); +} + +.app .searchResult .solutionNavigator button:last-child { + border-radius: 15px 50px 50px 15px; + background: linear-gradient(90deg, #2155cd, #0aa1dd); +} + +.app .searchResult .solutionNavigator > button { + width: 150px; + height: 50px; + text-align: center; + line-height: 50px; + margin: 5px; + font-size: 25px; + font-weight: 700; + border: 0; + color: #ffffff; +} + +.app .searchResult .solutionNavigator .btnPrevSolution, +.app .searchResult .solutionNavigator .btnNextSolution { + cursor: pointer; +} + +.app .searchResult .solutionNavigator .btnPrevSolution-inactive, +.app .searchResult .solutionNavigator .btnNextSolution-inactive { + opacity: 0.4; + cursor: not-allowed; +} + +.app .searchResult .file-title { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + background-color: #e8f9fd; + height: 50px; + line-height: 50px; + font-size: 30px; + font-weight: 700; + position: relative; + border: 0; + border-radius: 15px; + outline: none; + color: black; +} + +.app .searchResult .wrapCode { + position: relative; +} + +.app .searchResult .wrapCode .code { + background-color: #e8f9fd; + padding: 10px; + margin-top: 70px; + width: 100%; + max-height: 800px; + overflow: auto; + border: 0; + border-radius: 15px; + outline: none; + color: black; + font-size: 20px; + font-family: Verdana, Geneva, Tahoma, sans-serif; +} + +.app .searchResult .wrapCode .code::-webkit-scrollbar { + width: 20px; +} + +.app .searchResult .wrapCode .code::-webkit-scrollbar-track { + background-color: #e8f9fd; + border-radius: 15px; +} + +.app .searchResult .wrapCode .code::-webkit-scrollbar-thumb { + border-radius: 15px; + background: #2155cd; + box-shadow: inset 2px 2px 5px 0 rgba(255, 255, 255, 0.4); +} + +.app .searchResult .wrapCode .btn-copy { + width: 190px; + height: 50px; + text-align: center; + line-height: 50px; + margin: 5px; + font-size: 25px; + font-weight: 700; + border: 0; + background: linear-gradient(180deg, #2155cd, #0aa1dd); + color: #ffffff; + position: absolute; + top: -65px; + left: -5px; + border-radius: 15px; + cursor: pointer; +} + +.app .searchResult .wrapCode .isCopied { + position: absolute; + top: -60px; + left: 204px; + width: 200px; + line-height: 50px; + color: black; + font-size: 18px; + font-weight: 700; + background-color: transparent; + padding: 0 6px; + border-radius: 15px; +} + +.app #footerBox { + position: absolute; + top: 1200px; + min-width: 1200px; + width: 100%; + background: #82ccdd; + padding: 10px; + font-size: 18px; + font-weight: 550; + font-family: fantasy; + overflow: hidden; +} + +.app #footerBox .footer .footerTitle { + color: #2155cd; + cursor: default; +} + +.app #footerBox .footer div { + display: flex; + position: relative; + justify-content: center; +} + +.app #footerBox .footer div .footerTitle { + margin-right: 10px; +} + +.app #footerBox .footer div a { + padding: 0 5px; + text-decoration-line: none; + color: inherit; +} + +.app #footerBox .copyRight { + position: absolute; + right: 0px; + bottom: 0px; +} + +.app #footerBox .copyRight a { + font-size: 0; +} + +.app #footerBox .copyRight .footerLogo { + height: 50px; + max-width: 50px; + margin: 0 10px 8px 4px; + overflow: hidden; + font-size: 14px; + cursor: pointer; +} diff --git a/styles/style.css.map b/src/styles/style.css.map similarity index 100% rename from styles/style.css.map rename to src/styles/style.css.map diff --git a/styles/style.scss b/src/styles/style.scss similarity index 73% rename from styles/style.scss rename to src/styles/style.scss index 464d128..5ad0ac4 100644 --- a/styles/style.scss +++ b/src/styles/style.scss @@ -62,29 +62,29 @@ h1 { padding: 0 10px; } .searchableList { - width:320px; + width: 320px; .file-list-container { - max-height:858px; + max-height: 858px; overflow: auto; - margin:12px 0; + margin: 12px 0; border-radius: 15px; } - .file-list-container::-webkit-scrollbar { - width: 20px; - } - .file-list-container::-webkit-scrollbar-track { - background-color: $bg-color; - border-radius: 0 15px 15px 0; - } - .file-list-container::-webkit-scrollbar-thumb { - border-radius: 15px; - background: $bg-btn2; - box-shadow: inset 2px 2px 5px 0 rgba(#ffffff, 0.4); - } + .file-list-container::-webkit-scrollbar { + width: 20px; + } + .file-list-container::-webkit-scrollbar-track { + background-color: $bg-color; + border-radius: 0 15px 15px 0; + } + .file-list-container::-webkit-scrollbar-thumb { + border-radius: 15px; + background: $bg-btn2; + box-shadow: inset 2px 2px 5px 0 rgba(#ffffff, 0.4); + } .file-list { background-color: $bg-color; position: relative; - top:0; + top: 0; padding: 10px; margin: 0; border-bottom: 1px solid $bg-btn2; @@ -107,24 +107,24 @@ h1 { } } .file-list:last-child { - border:none; + border: none; } .is-hidden { display: none !important; } } .searchPhrases { - width:320px; + width: 320px; text-align: center; font-size: 20px; font-weight: 600; - font-family:fantasy; - color:#3c6382; + font-family: fantasy; + color: #3c6382; margin: 20px 0; - > a { - text-decoration-line: none; - color: inherit; - } + > a { + text-decoration-line: none; + color: inherit; + } } } //searchResult @@ -188,7 +188,7 @@ h1 { padding: 10px; margin-top: 70px; width: 100%; - max-height:800px; + max-height: 800px; overflow: auto; border: 0; border-radius: 15px; @@ -197,18 +197,18 @@ h1 { font-size: 20px; font-family: Verdana, Geneva, Tahoma, sans-serif; } - .code::-webkit-scrollbar { - width:20px; - } - .code::-webkit-scrollbar-track { - background-color: $bg-color; - border-radius: 15px; - } - .code::-webkit-scrollbar-thumb { - border-radius: 15px; - background: $bg-btn2; - box-shadow: inset 2px 2px 5px 0 rgba(#ffffff, 0.4); - } + .code::-webkit-scrollbar { + width: 20px; + } + .code::-webkit-scrollbar-track { + background-color: $bg-color; + border-radius: 15px; + } + .code::-webkit-scrollbar-thumb { + border-radius: 15px; + background: $bg-btn2; + box-shadow: inset 2px 2px 5px 0 rgba(#ffffff, 0.4); + } .btn-copy { width: 190px; height: 50px; @@ -242,51 +242,51 @@ h1 { } } //footer - #footerBox{ - position:absolute; - top:1200px; - min-width:1200px; - width:100%; + #footerBox { + position: absolute; + top: 1200px; + min-width: 1200px; + width: 100%; background: $bg-footer; - padding:10px; + padding: 10px; font-size: 18px; font-weight: 550; - font-family:fantasy; - overflow:hidden; - .footer { - .footerTitle { - color:$bg-btn2; - cursor:default; - } - div { - display: flex; - position: relative; - justify-content: center; + font-family: fantasy; + overflow: hidden; + .footer { .footerTitle { - margin-right:10px; + color: $bg-btn2; + cursor: default; } - a{ - padding: 0 5px; - text-decoration-line: none; - color: inherit; + div { + display: flex; + position: relative; + justify-content: center; + .footerTitle { + margin-right: 10px; + } + a { + padding: 0 5px; + text-decoration-line: none; + color: inherit; + } } } - } - .copyRight { - position: absolute; - right:0px; - bottom:0px; - a{ - font-size: 0; - } - .footerLogo { - height:50px; - max-width:50px; - margin:0 10px 8px 4px; - overflow: hidden; - font-size: 14px; - cursor:pointer; + .copyRight { + position: absolute; + right: 0px; + bottom: 0px; + a { + font-size: 0; + } + .footerLogo { + height: 50px; + max-width: 50px; + margin: 0 10px 8px 4px; + overflow: hidden; + font-size: 14px; + cursor: pointer; + } } } } -} \ No newline at end of file diff --git a/styles/style.css b/styles/style.css deleted file mode 100644 index d86c995..0000000 --- a/styles/style.css +++ /dev/null @@ -1,227 +0,0 @@ -* { - box-sizing: border-box; } - -body { - background: #ffffff; - color: black; } - -h1 { - text-align: center; - margin: 30px 0 60px 0; - padding: 20px 0; - color: black; - border-bottom: 4px solid #2155cd; } - -.loading { - display: flex; - flex-direction: column; - margin: 50px auto; - align-items: center; - color: #0aa1dd; - font-size: 18px; } - -.app { - display: flex; - width: 1170px; - margin: 0 auto; - justify-content: center; } - .app .searchBox #searchInput { - width: 320px; - height: 50px; - background-color: #ffffff; - color: black; - font-size: 18px; - font-weight: 700; - border: 3px solid #2155cd; - border-radius: 15px; - outline: none; - padding: 0 10px; } - .app .searchBox .searchableList { - width: 320px; } - .app .searchBox .searchableList .file-list-container { - max-height: 858px; - overflow: auto; - margin: 12px 0; - border-radius: 15px; } - .app .searchBox .searchableList .file-list-container::-webkit-scrollbar { - width: 20px; } - .app .searchBox .searchableList .file-list-container::-webkit-scrollbar-track { - background-color: #e8f9fd; - border-radius: 0 15px 15px 0; } - .app .searchBox .searchableList .file-list-container::-webkit-scrollbar-thumb { - border-radius: 15px; - background: #2155cd; - box-shadow: inset 2px 2px 5px 0 rgba(255, 255, 255, 0.4); } - .app .searchBox .searchableList .file-list { - background-color: #e8f9fd; - position: relative; - top: 0; - padding: 10px; - margin: 0; - border-bottom: 1px solid #2155cd; - outline: none; - color: black; - font-size: 18px; - font-weight: 700; } - .app .searchBox .searchableList .file-list .levelTitle { - color: #2155cd; - font-size: 22px; - font-weight: 700; - cursor: default; } - .app .searchBox .searchableList .file-list .file-list-item { - cursor: pointer; } - .app .searchBox .searchableList .file-list li { - padding: 5px; - list-style: none; } - .app .searchBox .searchableList .file-list:last-child { - border: none; } - .app .searchBox .searchableList .is-hidden { - display: none !important; } - .app .searchBox .searchPhrases { - width: 320px; - text-align: center; - font-size: 20px; - font-weight: 600; - font-family: fantasy; - color: #3c6382; - margin: 20px 0; } - .app .searchBox .searchPhrases > a { - text-decoration-line: none; - color: inherit; } - .app .searchResult { - margin-left: 50px; - width: 800px; } - .app .searchResult .solutionNavigator { - display: flex; - float: right; - position: relative; - top: 55px; } - .app .searchResult .solutionNavigator button:first-child { - border-radius: 50px 15px 15px 50px; - background: linear-gradient(90deg, #0aa1dd, #2155cd); } - .app .searchResult .solutionNavigator button:last-child { - border-radius: 15px 50px 50px 15px; - background: linear-gradient(90deg, #2155cd, #0aa1dd); } - .app .searchResult .solutionNavigator > button { - width: 150px; - height: 50px; - text-align: center; - line-height: 50px; - margin: 5px; - font-size: 25px; - font-weight: 700; - border: 0; - color: #ffffff; } - .app .searchResult .solutionNavigator .btnPrevSolution, - .app .searchResult .solutionNavigator .btnNextSolution { - cursor: pointer; } - .app .searchResult .solutionNavigator .btnPrevSolution-inactive, - .app .searchResult .solutionNavigator .btnNextSolution-inactive { - opacity: 0.4; - cursor: not-allowed; } - .app .searchResult .file-title { - display: flex; - align-items: center; - justify-content: center; - text-align: center; - background-color: #e8f9fd; - height: 50px; - line-height: 50px; - font-size: 30px; - font-weight: 700; - position: relative; - border: 0; - border-radius: 15px; - outline: none; - color: black; } - .app .searchResult .wrapCode { - position: relative; } - .app .searchResult .wrapCode .code { - background-color: #e8f9fd; - padding: 10px; - margin-top: 70px; - width: 100%; - max-height: 800px; - overflow: auto; - border: 0; - border-radius: 15px; - outline: none; - color: black; - font-size: 20px; - font-family: Verdana, Geneva, Tahoma, sans-serif; } - .app .searchResult .wrapCode .code::-webkit-scrollbar { - width: 20px; } - .app .searchResult .wrapCode .code::-webkit-scrollbar-track { - background-color: #e8f9fd; - border-radius: 15px; } - .app .searchResult .wrapCode .code::-webkit-scrollbar-thumb { - border-radius: 15px; - background: #2155cd; - box-shadow: inset 2px 2px 5px 0 rgba(255, 255, 255, 0.4); } - .app .searchResult .wrapCode .btn-copy { - width: 190px; - height: 50px; - text-align: center; - line-height: 50px; - margin: 5px; - font-size: 25px; - font-weight: 700; - border: 0; - background: linear-gradient(180deg, #2155cd, #0aa1dd); - color: #ffffff; - position: absolute; - top: -65px; - left: -5px; - border-radius: 15px; - cursor: pointer; } - .app .searchResult .wrapCode .isCopied { - position: absolute; - top: -60px; - left: 204px; - width: 200px; - line-height: 50px; - color: black; - font-size: 18px; - font-weight: 700; - background-color: transparent; - padding: 0 6px; - border-radius: 15px; } - .app #footerBox { - position: absolute; - top: 1200px; - min-width: 1200px; - width: 100%; - background: #82ccdd; - padding: 10px; - font-size: 18px; - font-weight: 550; - font-family: fantasy; - overflow: hidden; } - .app #footerBox .footer .footerTitle { - color: #2155cd; - cursor: default; } - .app #footerBox .footer div { - display: flex; - position: relative; - justify-content: center; } - .app #footerBox .footer div .footerTitle { - margin-right: 10px; } - .app #footerBox .footer div a { - padding: 0 5px; - text-decoration-line: none; - color: inherit; } - .app #footerBox .copyRight { - position: absolute; - right: 0px; - bottom: 0px; } - .app #footerBox .copyRight a { - font-size: 0; } - .app #footerBox .copyRight .footerLogo { - height: 50px; - max-width: 50px; - margin: 0 10px 8px 4px; - overflow: hidden; - font-size: 14px; - cursor: pointer; } - -/*# sourceMappingURL=style.css.map */