diff --git a/.gitignore b/.gitignore index 038dd68b..5e024fd9 100644 --- a/.gitignore +++ b/.gitignore @@ -16,3 +16,4 @@ tmp/ dist coverage __coverage__ +csak-timelog.json diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 00000000..1db3b6de --- /dev/null +++ b/.vscode/tasks.json @@ -0,0 +1,12 @@ +{ + // See https://go.microsoft.com/fwlink/?LinkId=733558 + // for the documentation about the tasks.json format + "version": "2.0.0", + "tasks": [ + { + "type": "npm", + "script": "dev", + "problemMatcher": [] + } + ] +} \ No newline at end of file diff --git a/_scripts/webpack.renderer.config.js b/_scripts/webpack.renderer.config.js index c2db410e..2063d767 100644 --- a/_scripts/webpack.renderer.config.js +++ b/_scripts/webpack.renderer.config.js @@ -60,7 +60,10 @@ const config = { options: { // eslint-disable-next-line implementation: require('sass'), - }, + sassOptions: { + indentedSyntax: true + } + } }, ], }, diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css index 12a26bde..46c15355 100644 --- a/src/renderer/components/ft-input/ft-input.css +++ b/src/renderer/components/ft-input/ft-input.css @@ -14,12 +14,12 @@ margin-bottom: 10px; font: 16px; height: 45px; - color: var(--teritary-text-color); - border-bottom: 1px solid var(--teritary-text-color); + color: var(--secondary-text-color); + border-bottom: 1px solid var(--secondary-text-color); } .ft-input-component ::-webkit-input-placeholder { - color: var(--teritary-text-color); + color: var(--tertiary-text-color); } .search .ft-input { @@ -57,7 +57,7 @@ } .inputAction:active { - background-color: var(--teritary-text-color); + background-color: var(--tertiary-text-color); -moz-transition: background 0.2s ease-in; -o-transition: background 0.2s ease-in; transition: background 0.2s ease-in; diff --git a/src/renderer/components/ft-list-dropdown/ft-list-dropdown.css b/src/renderer/components/ft-list-dropdown/ft-list-dropdown.css index cbe33e1c..d61933a9 100644 --- a/src/renderer/components/ft-list-dropdown/ft-list-dropdown.css +++ b/src/renderer/components/ft-list-dropdown/ft-list-dropdown.css @@ -38,7 +38,7 @@ padding-left: 15px; padding-right: 15px; cursor: pointer; - color: var(--teritary-text-color); + color: var(--tertiary-text-color); background-color: var(--secondary-card-bg-color); } @@ -52,7 +52,7 @@ padding-left: 15px; padding-right: 15px; cursor: pointer; - color: var(--teritary-text-color); + color: var(--tertiary-text-color); background-color: var(--secondary-card-bg-color); -webkit-transition: background 0.2s ease-out; -moz-transition: background 0.2s ease-out; diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css index 4946f86b..f6cbe2ab 100644 --- a/src/renderer/components/ft-select/ft-select.css +++ b/src/renderer/components/ft-select/ft-select.css @@ -65,7 +65,7 @@ border-left: 6px solid transparent; border-right: 6px solid transparent; pointer-events: none; - color: var(--teritary-text-color); + color: var(--tertiary-text-color); } @@ -78,7 +78,7 @@ left: 0; top: 10px; transition: 0.2s ease all; - color: var(--teritary-text-color); + color: var(--tertiary-text-color); } /* active state */ diff --git a/src/renderer/components/top-nav/top-nav.css b/src/renderer/components/top-nav/top-nav.css deleted file mode 100644 index a2529042..00000000 --- a/src/renderer/components/top-nav/top-nav.css +++ /dev/null @@ -1,194 +0,0 @@ -.topNav { - background-color: var(--card-bg-color); - width: 100%; - height: 60px; - line-height: 60px; - position: fixed; - top: 0; - left: 0; - z-index: 4; - -webkit-box-shadow: 0px 2px 1px 0px var(--primary-shadow-color); -} - -.topNavBarColor { - background-color: var(--primary-color); -} - -.menuIcon { - position: absolute; - top: 10px; - left: 10px; -} - -.navIcon { - font-size: 20px; - padding: 10px; - cursor: pointer; - color: var(--primary-text-color); - border-radius: 200px 200px 200px 200px; - -webkit-border-radius: 200px 200px 200px 200px; - -webkit-transition: background 0.2s ease-out; - -moz-transition: background 0.2s ease-out; - -o-transition: background 0.2s ease-out; - transition: background 0.2s ease-out; -} - -.topNavBarColor .navIcon { - color: var(--text-with-main-color); -} - -.navIcon:hover { - background-color: var(--side-nav-hover-color); - -moz-transition: background 0.2s ease-in; - -o-transition: background 0.2s ease-in; - transition: background 0.2s ease-in; -} - -.topNavBarColor .navIcon:hover { - background-color: var(--primary-color-hover); -} - -.navIcon:active { - background-color: var(--teritary-text-color); - -moz-transition: background 0.2s ease-in; - -o-transition: background 0.2s ease-in; - transition: background 0.2s ease-in; -} - -.topNavBarColor .menuIcon:active { - background-color: var(--primary-color-active) -} - -.navBackIcon { - position: absolute; - top: 10px; - left: 50px; -} - -.navForwardIcon { - position: absolute; - top: 10px; - left: 85px; -} - -.navSearchIcon { - position: absolute; - top: 10px; - display: none; -} - -.logoIcon { - background-image: var(--logo-icon); - background-repeat: no-repeat; - background-position: right top; - background-size: 25px; - position: absolute; - top: 20px; - left: 140px; - width: 25px; - height: 25px; -} - -.logoIconBarColor { - background-image: var(--logo-icon-bar-color); -} - -.logoText { - background-image: var(--logo-text); - background-repeat: no-repeat; - background-position: right top; - background-size: 100px; - position: absolute; - top: 9px; - left: 175px; - width: 100px; - height: 40px; -} - -.logoTextBarColor { - background-image: var(--logo-text-bar-color); -} - -.searchContainer { - margin: 0 auto; - width: 500px; - position: relative; -} - -.searchInput { - width: 450px; -} - -.navFilterIcon { - position: absolute; - top: 10px; - right: 10px; -} - -.searchFilters { - margin-left: 270px; - margin-right: 20px; - margin-top: 10px; - margin-bottom: 20px; - transition-property: margin; - transition-duration: 150ms; - transition-timing-function: ease-in-out; -} - -.expand { - margin-left: 100px; -} - -@media only screen and (max-width: 680px) { - .menuIcon { - display: none; - } - - .navBackIcon { - left: 45px; - } - - .navForwardIcon { - left: 80px; - } - - .navSearchIcon { - display: block; - left: 120px; - } - - .logoIcon { - left: 10px; - } - - .logoText { - display: none; - } - - .searchContainer { - position: fixed; - display: none; - width: 100%; - top: 60px; - background-color: var(--side-nav-color); - } - - .topNavBarColor .searchContainer { - background-color: var(--primary-color-hover); - } - - .searchInput { - width: 80%; - margin: 0 auto; - } - - .navFilterIcon { - right: 0px; - } - - .searchFilters { - margin-top: 130px; - margin-left: 10px; - margin-right: 10px; - } -} diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js index 32e27d71..44f72859 100644 --- a/src/renderer/components/top-nav/top-nav.js +++ b/src/renderer/components/top-nav/top-nav.js @@ -35,7 +35,7 @@ export default Vue.extend({ const searchContainer = $('.searchContainer').get(0) if (width > 680) { - searchContainer.style.display = 'block' + searchContainer.style.display = '' } else { searchContainer.style.display = 'none' } @@ -68,8 +68,8 @@ export default Vue.extend({ toggleSearchContainer: function () { const searchContainer = $('.searchContainer').get(0) - if (searchContainer.style.display === 'none' || searchContainer.style.display === '') { - searchContainer.style.display = 'block' + if (searchContainer.style.display === 'none') { + searchContainer.style.display = '' } else { searchContainer.style.display = 'none' } diff --git a/src/renderer/components/top-nav/top-nav.sass b/src/renderer/components/top-nav/top-nav.sass new file mode 100644 index 00000000..4040bcb3 --- /dev/null +++ b/src/renderer/components/top-nav/top-nav.sass @@ -0,0 +1,134 @@ +@mixin top-nav-is-colored + @at-root + .topNavBarColor &, .topNavBarColor#{&} + @content + +.topNav + position: fixed + z-index: 4 + left: 0 + right: 0 + top: 0 + height: 60px + line-height: 60px + background-color: var(--card-bg-color) + -webkit-box-shadow: 0px 2px 1px 0px var(--primary-shadow-color) + display: flex + align-items: center + align-content: center + + @media only screen and (min-width: 961px) + display: grid + grid-template-columns: 1fr 440px 1fr + + @include top-nav-is-colored + background-color: var(--primary-color) + +.menuIcon // the hamburger button + @media only screen and (max-width: 680px) + display: none + +.navIcon // all icons in the top navigation + font-size: 20px + padding: 10px + cursor: pointer + color: var(--primary-text-color) + border-radius: 50% + transition: background 0.2s ease-out + width: 1em + height: 1em + + @include top-nav-is-colored + color: var(--text-with-main-color) + + &:hover + background-color: var(--primary-color-hover) + + &:hover + background-color: var(--side-nav-hover-color) + transition: background 0.2s ease-in + + &:active + background-color: var(--tertiary-text-color) + transition: background 0.2s ease-in + + @include top-nav-is-colored + background-color: var(--primary-color-active) + +.side // parts of the top nav either side of the search bar + display: flex + align-items: center + + .navSearchIcon + @media only screen and (min-width: 681px) + display: none + + .logo // parts that make up the logo + display: flex + align-items: center + padding: 0px 25px 0px 10px + + .logoIcon + background-image: var(--logo-icon) + background-repeat: no-repeat + background-position: right top + background-size: 25px + width: 25px + height: 25px + + @include top-nav-is-colored + background-image: var(--logo-icon-bar-color) + + .logoText + margin-left: 5px + position: relative + top: -3px + background-image: var(--logo-text) + background-repeat: no-repeat + background-position: right top + background-size: 100px + width: 100px + height: 40px + + @media only screen and (max-width: 680px) + display: none + + @include top-nav-is-colored + background-image: var(--logo-text-bar-color) + +.middle // the middle part of the top nav which contains the search bar + max-width: 440px + flex: 1 + + .searchContainer + display: flex + align-items: center + + @media only screen and (max-width: 680px) + position: fixed + left: 0 + right: 0 + top: 60px + background-color: var(--side-nav-color) + + @include top-nav-is-colored + background-color: var(--primary-color-hover) + + .searchInput + flex: 1 + + .searchFilters + position: absolute + left: 0 + right: 0 + margin: 10px 20px 20px 220px + transition: margin 150ms ease-in-out + + @media only screen and (max-width: 680px) + left: 0 + right: 0 + margin: 95px 10px 0px + + @media only screen and (min-width: 681px) + &.expand + margin-left: 100px diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue index 6f06bda6..685c86b5 100644 --- a/src/renderer/components/top-nav/top-nav.vue +++ b/src/renderer/components/top-nav/top-nav.vue @@ -3,54 +3,59 @@ class="topNav" :class="{ topNavBarColor: barColor }" > - - - - -
-
-
- + + + +