diff --git a/.gitignore b/.gitignore index ad46b30..70d2d01 100644 --- a/.gitignore +++ b/.gitignore @@ -59,3 +59,5 @@ typings/ # next.js build output .next + +local \ No newline at end of file diff --git a/.stickler.yml b/.stickler.yml index 89a662c..1073208 100644 --- a/.stickler.yml +++ b/.stickler.yml @@ -3,3 +3,5 @@ linters: config: "stylelint.config.js" eslint: config: "./eslint.config" + ignore: + - "dist/*.js" diff --git a/dist/css/display.css b/dist/css/display.css new file mode 100644 index 0000000..1a77f4d --- /dev/null +++ b/dist/css/display.css @@ -0,0 +1,46 @@ + +[class*="d-none"] { + display: none; +} + +[class~="d-flex"] { + display: flex; +} + +[class~="row"] { + flex-direction: row; +} + +[class~="col"] { + flex-direction: column; +} + +[class~="jc-sb"] { + justify-content: space-between; +} + +[class~="jc-fe"] { + justify-content: flex-end; +} + +[class~="ai-c"] { + align-items: center; +} + +[class~="order-0"] { + order: 0; +} + +[class~="order-1"] { + order: 1; +} + +[class~="order-2"] { + order: 2; +} + +@media (min-width: 780px) { + [class~="d-flex-md"] { + display: flex; + } +} diff --git a/dist/css/main.css b/dist/css/main.css new file mode 100644 index 0000000..c4e0459 --- /dev/null +++ b/dist/css/main.css @@ -0,0 +1,454 @@ +@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700"); + +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-thumb { + cursor: pointer; + background: #000; +} + +/* Palette generated by Material Palette - materialpalette.com/deep-purple/grey */ + +:root { + --dark-primary-color: #512da8; + --default-primary-color: #673ab7; + --light-primary-color: #d1c4e9; + --text-primary-color: #fff; + --accent-color: #9e9e9e; + --primary-text-color: #212121; + --secondary-text-color: #757575; + --divider-color: #bdbdbd; +} + +* { + font-family: "Montserrat", sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; + outline: none; + color: var(--primary-text-color); + background: #fff; + border-color: var(--divider-color); +} + +body { + font-size: 14px; + overflow-x: hidden; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: bold; + line-height: inherit; + margin-bottom: 4px; + text-transform: capitalize; +} + +h1 { + color: #252525; + font-size: 2em; + line-height: 50px; +} + +h2 { + color: #353535; + font-size: 1.8em; +} + +h3 { + font-size: 1.5em; + color: #454545; +} + +h4 { + color: #555; + font-size: 1em; +} + +p { + color: #353535; + font-size: 14px; + font-weight: normal; + line-height: 24px; + margin: 0 0 10px; +} + +li { + list-style-type: none; +} + +html { + -webkit-font-smoothing: antialiased; +} + +a { + color: #252525; + -webkit-transition: 0.5s; + transition: 0.5s; + text-decoration: none; +} + +button { + cursor: pointer; + background: none; + border: none; + width: fit-content; +} + +h3 a { + color: #454545; +} + +footer h2 { + font-size: 20px; +} + +footer a, +footer p { + color: #909090; +} + +button:hover, +button:active, +button:focus { + color: #ce3232; +} + +a:hover, +a:active, +a:focus { + color: #ce3232; +} + +img { + width: 100%; + vertical-align: middle; +} + +section { + padding: 0; +} + +#content { + padding: 4px; +} + +.main-nav { + flex-wrap: wrap; + margin: 8px; +} + +.main-nav .brand-logo, +.main-nav .nav-menu { + width: 50%; +} + +.main-nav .nav-list { + width: 100%; + text-align: center; +} + +.main-nav-list-item { + width: 100%; + padding: 4px; +} + +.todo-list { + margin-top: 8px; +} + +.todo-list-item { + margin-bottom: 16px; +} + +.todo-section { + margin: auto; + padding: 8px; +} + +.todo-section-header { + padding: 8px; +} + +.today-date { + width: fit-content; + text-align: center; + padding: 4px; + white-space: nowrap; + font-size: 1.6em; +} + +.add-todo, +.add-project { + margin: auto; + will-change: transform, opacity; + width: 56px; + height: 56px; + padding: 0; + border: none; + border-radius: 50%; + box-shadow: + 0 3px 5px -1px rgba(0, 0, 0, 0.2), + 0 6px 10px 0 rgba(0, 0, 0, 0.14), + 0 1px 18px 0 rgba(0, 0, 0, 0.12); + color: #fff; + background-color: #eee; +} + +.svg-add { + background-color: #eee; + height: 32px; + width: 32px; +} + +.svg-menu { + width: 24px; + height: 24px; +} + +.svg-rating { + width: 16px; + height: 16px; +} + +.button:hover, +.button:hover .svg-add { + background-color: #512da8; + color: #fff; +} + +.todo-section-header .show-project-nav { + font-size: 10px; + padding: 4px; + height: max-content; + border: 1px solid #512da8; + border-radius: 4px; + font-weight: bold; + margin-right: 8px; +} + +.projects-modal { + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgb(0, 0, 0); + background-color: rgba(0, 0, 0, 0.4); +} + +.projects { + position: relative; + margin-top: 16px; + padding: 8px; + width: 60%; + min-height: 100vh; + text-align: center; + background-color: #eee; + box-shadow: + 0 3px 1px -2px rgba(0, 0, 0, 0.2), + 0 2px 2px 0 rgba(0, 0, 0, 0.14), + 0 1px 5px 0 rgba(0, 0, 0, 0.12); +} + +.projects * { + background-color: #eee; +} + +.project-list-item { + padding: 4px; +} + +.project-list-item .button { + width: 100%; +} + +.main-nav-list-item .button { + width: 100%; + padding: 8px; + font-size: 14px; + font-weight: bold; +} + +.projects .add-project { + width: 48px; + height: 48px; +} + +.projects .add-project .svg-add { + width: 24px; + height: 24px; +} + +ul.project-list { + margin-bottom: 8px; +} + +.todo-card { + padding: 4px; + background-color: #eee; + box-shadow: + 0 3px 1px -2px rgba(0, 0, 0, 0.2), + 0 2px 2px 0 rgba(0, 0, 0, 0.14), + 0 1px 5px 0 rgba(0, 0, 0, 0.12); +} + +.todo-card * { + background-color: #eee; +} + +.todo-header > *, +.todo-description, +.todo-due-date, +.todo-control-panel { + margin: 4px; +} + +.todo-control-panel [class*="svg-"] { + width: 18px; + height: 18px; +} + +.todo-control-panel .button, +.project-list .button { + box-shadow: + 0 3px 1px -2px rgba(0, 0, 0, 0.2), + 0 2px 2px 0 rgba(0, 0, 0, 0.14), + 0 1px 5px 0 rgba(0, 0, 0, 0.12); + transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); + will-change: box-shadow; + padding: 4px 16px; + font-size: 0.8em; + border-radius: 2px; +} + +.todo-priority { + width: 80px; +} + +.svg-rating path { + fill: var(--text-primary-color); + stroke: #000; + stroke-opacity: 0.3; +} + +.svg-add path { + fill: #512da8; + stroke: #512da8; +} + +.button:hover path { + fill: #fff; + stroke: #fff; +} + +.button:hover svg { + background: #512da8; +} + +.todo-priority:hover path { + fill: yellow; + stroke: yellow; + stroke-opacity: 1; +} + +.todo-control-panel [class*="svg-"] path { + opacity: 0.3; + transition: opacity 0.3s; +} + +.todo-control-panel .button:hover path { + opacity: 1; + transition: opacity 0.3s; +} + +.todo-priority:hover .svg-rating:nth-of-type(1) path { + fill: rgb(255, 255, 0); + fill-opacity: 0.4; +} + +.todo-priority:hover .svg-rating:nth-of-type(2) path { + fill: rgb(255, 255, 0); + fill-opacity: 0.5; +} + +.todo-priority:hover .svg-rating:nth-of-type(3) path { + fill: rgb(255, 255, 0); + fill-opacity: 0.8; +} + +.todo-priority:hover .svg-rating:nth-of-type(4) path { + fill: rgb(255, 255, 0); + fill-opacity: 0.9; +} + +.todo-priority:hover .svg-rating:nth-of-type(5) path { + fill: rgb(255, 255, 0); + fill-opacity: 1; +} + +.todo-priority .svg-rating:hover ~ .svg-rating path { + fill: var(--text-primary-color); + stroke: #000; + stroke-opacity: 1; +} + +.todo-priority .svg-rating { + background: rgb(0, 0, 0); + background: rgba(0, 0, 0, 0.3); +} + +@media (min-width: 780px) { + .show-project-nav { + display: none; + } + + .projects-modal { + position: sticky; + width: 30%; + height: 100%; + overflow: auto; + background: none; + margin: 56px 8px 8px 8px; + } + + .projects { + position: relative; + margin-top: 16px; + padding: 8px; + width: 100%; + height: 100%; + min-height: 100vh; + } + + .main-nav { + flex-wrap: nowrap; + } + + .main-nav .brand-logo { + width: 30%; + } + + .main-nav .nav-menu { + display: none; + } + + .main-nav .nav-list { + width: 60%; + text-align: center; + } + + .main-nav-list-item { + width: unset; + padding: 4px; + } +} diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000..0b6bfea --- /dev/null +++ b/dist/index.html @@ -0,0 +1,862 @@ + + + + + + + + + + + + + + RESTAURANT PAGE + + + + + + + + +
+ + +
+ +
+
+ +

+ +

+
+
    +
  • +
    +
    +

    + Nulla posuere sollicitudin aliquam ultrices sagittis. +

    +
    + + + + + + + + + + + + + + + +
    +
    +

    + Due: +

    +
    + + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

    +
    +
    • +
  • +
    +
    +

    + Nulla posuere sollicitudin aliquam ultrices sagittis. +

    +
    + + + + + + + + + + + + + + + +
    +
    +

    + Due: +

    +
    + + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

    +
    +
    • +
  • +
    +
    +

    + Nulla posuere sollicitudin aliquam ultrices sagittis. +

    +
    + + + + + + + + + + + + + + + +
    +
    +

    + Due: +

    +
    + + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

    +
    +
    • +
  • +
    +
    +

    + Nulla posuere sollicitudin aliquam ultrices sagittis. +

    +
    + + + + + + + + + + + + + + + +
    +
    +

    + Due: +

    +
    + + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

    +
    +
    • +
  • +
    +
    +

    + Nulla posuere sollicitudin aliquam ultrices sagittis. +

    +
    + + + + + + + + + + + + + + + +
    +
    +

    + Due: +

    +
    + + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

    +
    +
    • +
  • +
    +
    +

    + Nulla posuere sollicitudin aliquam ultrices sagittis. +

    +
    + + + + + + + + + + + + + + + +
    +
    +

    + Due: +

    +
    + + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

    +
    +
    • +
  • +
    +
    +

    + Nulla posuere sollicitudin aliquam ultrices sagittis. +

    +
    + + + + + + + + + + + + + + + +
    +
    +

    + Due: +

    +
    + + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

    +
    +
    • +
  • +
    +
    +

    + Nulla posuere sollicitudin aliquam ultrices sagittis. +

    +
    + + + + + + + + + + + + + + + +
    +
    +

    + Due: +

    +
    + + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

    +
    +
    • +
  • +
    +
    +

    + Nulla posuere sollicitudin aliquam ultrices sagittis. +

    +
    + + + + + + + + + + + + + + + +
    +
    +

    + Due: +

    +
    + + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

    +
    +
    • +
  • +
    +
    +

    + Nulla posuere sollicitudin aliquam ultrices sagittis. +

    +
    + + + + + + + + + + + + + + + +
    +
    +

    + Due: +

    +
    + + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

    +
    +
    • +
+ +
+
+
+ + + diff --git a/dist/main.js b/dist/main.js new file mode 100644 index 0000000..5abb3b0 --- /dev/null +++ b/dist/main.js @@ -0,0 +1,100 @@ +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) { +/******/ return installedModules[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); +/******/ } +/******/ }; +/******/ +/******/ // define __esModule on exports +/******/ __webpack_require__.r = function(exports) { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ +/******/ // create a fake namespace object +/******/ // mode & 1: value is a module id, require it +/******/ // mode & 2: merge all properties of value into the ns +/******/ // mode & 4: return value when already ns object +/******/ // mode & 8|1: behave like require +/******/ __webpack_require__.t = function(value, mode) { +/******/ if(mode & 1) value = __webpack_require__(value); +/******/ if(mode & 8) return value; +/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; +/******/ var ns = Object.create(null); +/******/ __webpack_require__.r(ns); +/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); +/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); +/******/ return ns; +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; +/******/ +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = "./src/index.js"); +/******/ }) +/************************************************************************/ +/******/ ({ + +/***/ "./src/index.js": +/*!**********************!*\ + !*** ./src/index.js ***! + \**********************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +eval("const toggleNavMenu = (targetClass, toggleClass) => {\n const targetElement = document.querySelector(targetClass);\n const toggleElement = document.querySelector(toggleClass);\n const toggleHideClass = () => toggleElement.classList.toggle('d-none');\n targetElement.addEventListener('click', toggleHideClass);\n toggleElement.addEventListener('click', toggleHideClass);\n};\n\nconst toggleProjectMenu = (targetClass, toggleClass) => {\n const targetElement = document.querySelector(targetClass);\n const toggleElement = document.querySelector(toggleClass);\n const toggleHideClass = ({ target, currentTarget }) => {\n if (target !== currentTarget) { return; }\n toggleElement.classList.toggle('d-none');\n };\n targetElement.addEventListener('click', toggleHideClass);\n toggleElement.addEventListener('click', toggleHideClass);\n};\n\ntoggleNavMenu('.nav-menu', '.nav-list');\ntoggleProjectMenu('.show-project-nav', '.projects-modal');\n\n\n//# sourceURL=webpack:///./src/index.js?"); + +/***/ }) + +/******/ }); \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..4085888 --- /dev/null +++ b/src/index.js @@ -0,0 +1,21 @@ +const toggleNavMenu = (targetClass, toggleClass) => { + const targetElement = document.querySelector(targetClass); + const toggleElement = document.querySelector(toggleClass); + const toggleHideClass = () => toggleElement.classList.toggle('d-none'); + targetElement.addEventListener('click', toggleHideClass); + toggleElement.addEventListener('click', toggleHideClass); +}; + +const toggleProjectMenu = (targetClass, toggleClass) => { + const targetElement = document.querySelector(targetClass); + const toggleElement = document.querySelector(toggleClass); + const toggleHideClass = ({ target, currentTarget }) => { + if (target !== currentTarget) { return; } + toggleElement.classList.toggle('d-none'); + }; + targetElement.addEventListener('click', toggleHideClass); + toggleElement.addEventListener('click', toggleHideClass); +}; + +toggleNavMenu('.nav-menu', '.nav-list'); +toggleProjectMenu('.show-project-nav', '.projects-modal');