Merge pull request #17 from cloudrac3r/refactor-top-bar

Refactor top bar

.gitignore

@@ -16,3 +16,4 @@ tmp/
 dist
 coverage
 __coverage__
+csak-timelog.json

.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": []
+		}
+	]
+}

_scripts/webpack.renderer.config.js

@@ -60,7 +60,10 @@ const config = {
             options: {
               // eslint-disable-next-line
               implementation: require('sass'),
-            },
+              sassOptions: {
+                indentedSyntax: true
+              }
+            }
           },
         ],
       },

src/renderer/components/ft-input/ft-input.css

@@ -14,12 +14,12 @@
     margin-bottom: 10px;
     font: 16px;
     height: 45px;
-    color: var(--teritary-text-color);
+    color: var(--secondary-text-color);
-    border-bottom: 1px solid var(--teritary-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;

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;

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 */

src/renderer/components/top-nav/top-nav.css

@@ -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;
-  }
-}

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 === '') {
+      if (searchContainer.style.display === 'none') {
-        searchContainer.style.display = 'block'
+        searchContainer.style.display = ''
       } else {
         searchContainer.style.display = 'none'
       }

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

src/renderer/components/top-nav/top-nav.vue

@@ -3,54 +3,59 @@
     class="topNav"
     :class="{ topNavBarColor: barColor }"
   >
-    <font-awesome-icon
+    <div class="side">
-      class=" menuIcon navIcon"
+      <font-awesome-icon
-      icon="bars"
+        class="menuIcon navIcon"
-      @click="toggleSideNav"
+        icon="bars"
-    />
+        @click="toggleSideNav"
-    <font-awesome-icon
-      class="navBackIcon navIcon"
-      icon="arrow-left"
-      @click="historyBack"
-    />
-    <font-awesome-icon
-      class="navForwardIcon navIcon"
-      icon="arrow-right"
-      @click="historyForward"
-    />
-    <font-awesome-icon
-      class="navSearchIcon navIcon"
-      icon="search"
-      @click="toggleSearchContainer"
-    />
-    <div
-      class="logoIcon"
-      :class="{ logoIconBarColor: barColor }"
-    />
-    <div
-      class="logoText"
-      :class="{ logoTextBarColor: barColor }"
-    />
-    <div class="searchContainer">
-      <ft-input
-        placeholder="Search / Go to URL"
-        class="searchInput"
-        :is-search="true"
-        @click="goToSearch"
       />
       <font-awesome-icon
-        class="navFilterIcon navIcon"
+        class="navBackIcon navIcon"
-        icon="filter"
+        icon="arrow-left"
-        @click="showFilters = !showFilters"
+        @click="historyBack"
+      />
+      <font-awesome-icon
+        class="navForwardIcon navIcon"
+        icon="arrow-right"
+        @click="historyForward"
+      />
+      <font-awesome-icon
+        class="navSearchIcon navIcon"
+        icon="search"
+        @click="toggleSearchContainer"
+      />
+      <div class="logo">
+        <div
+          class="logoIcon"
+        />
+        <div
+          class="logoText"
+        />
+      </div>
+    </div>
+    <div class="middle">
+      <div class="searchContainer">
+        <ft-input
+          placeholder="Search / Go to URL"
+          class="searchInput"
+          :is-search="true"
+          @click="goToSearch"
+        />
+        <font-awesome-icon
+          class="navFilterIcon navIcon"
+          icon="filter"
+          @click="showFilters = !showFilters"
+        />
+      </div>
+      <ft-search-filters
+        v-show="showFilters"
+        class="searchFilters"
+        :class="{ expand: !isSideNavOpen }"
       />
     </div>
-    <ft-search-filters
+    <div class="side" />
-      v-show="showFilters"
-      class="searchFilters"
-      :class="{ expand: !isSideNavOpen }"
-    />
   </div>
 </template>
 
 <script src="./top-nav.js" />
-<style scoped src="./top-nav.css" />
+<style scoped lang="sass" src="./top-nav.sass" />

src/renderer/components/watch-video-info/watch-video-info.css

@@ -82,7 +82,7 @@
   right: 15px;
   bottom: 0px;
   font-size: 12px;
-  color: var(--teritary-text-color);
+  color: var(--tertiary-text-color);
 }
 
 .videoOptions {

src/renderer/themes.css

@@ -1,7 +1,7 @@
 .light {
   --primary-text-color: #212121;
   --secondary-text-color: #424242;
-  --teritary-text-color: #757575;
+  --tertiary-text-color: #757575;
   --primary-input-color: rgba(0, 0, 0, 0.50);
   --primary-shadow-color: rgba(232, 232, 232, 1);
   --title-color: #3f7ac6;
@@ -19,8 +19,8 @@
 
 .dark {
   --primary-text-color: #EEEEEE;
-  --secondary-text-color: #E0E0E0;
+  --secondary-text-color: #ddd;
-  --teritary-text-color: #F5F5F5;
+  --tertiary-text-color: #888;
   --primary-input-color: rgba(0, 0, 0, 0.50);
   --primary-shadow-color: rgba(0, 0, 0, 0.75);
   --title-color: #EEEEEE;
@@ -39,7 +39,7 @@
 .gray {
   --primary-text-color: #EEEEEE;
   --secondary-text-color: #E0E0E0;
-  --teritary-text-color: #F5F5F5;
+  --tertiary-text-color: #F5F5F5;
   --primary-input-color: rgba(0, 0, 0, 0.50);
   --primary-shadow-color: rgba(0, 0, 0, 0.75);
   --title-color: #EEEEEE;

src/renderer/views/Channel/Channel.css

@@ -47,7 +47,7 @@
 
 .channelSubCount {
   position: absolute;
-  color: var(--teritary-text-color);
+  color: var(--tertiary-text-color);
   top: 50px;
   left: 120px;
 }