tesses50
/
freetube
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix search filters and add comments

This commit is contained in:
Cadence Ember 2020-03-27 03:17:59 +13:00
parent 229e169bbf
commit 01caaf2f34
No known key found for this signature in database
GPG Key ID: 128B99B1B74A6412
2 changed files with 18 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/renderer/components/top-nav/top-nav.sass
View File

@ -1,5 +1,3 @@
@use "sass:selector"
@mixin top-nav-is-colored @mixin top-nav-is-colored
@at-root @at-root
.topNavBarColor &, .topNavBarColor#{&} .topNavBarColor &, .topNavBarColor#{&}
@ -22,11 +20,14 @@
@include top-nav-is-colored @include top-nav-is-colored
background-color: var(--primary-color) background-color: var(--primary-color)
.menuIcon .menuIcon // the hamburger menu button
@include top-nav-is-colored @include top-nav-is-colored
background-color: var(--primary-color-active) background-color: var(--primary-color-active)
.navIcon @media only screen and (max-width: 680px)
display: none
.navIcon // all icons in the top navigation
font-size: 20px font-size: 20px
padding: 10px padding: 10px
cursor: pointer cursor: pointer
@ -50,7 +51,7 @@
background-color: var(--tertiary-text-color) background-color: var(--tertiary-text-color)
transition: background 0.2s ease-in transition: background 0.2s ease-in
.side .side // parts of the top nav either side of the search bar
display: flex display: flex
align-items: center align-items: center
@ -58,7 +59,7 @@
@media only screen and (min-width: 681px) @media only screen and (min-width: 681px)
display: none display: none
.logo .logo // parts that make up the logo
display: flex display: flex
align-items: center align-items: center
padding: 0px 25px 0px 10px padding: 0px 25px 0px 10px
@ -71,11 +72,9 @@
width: 25px width: 25px
height: 25px height: 25px
@include top-nav-is-colored
.logoIconBarColor
background-image: var(--logo-icon-bar-color) background-image: var(--logo-icon-bar-color)
.logoText .logoText
margin-left: 5px margin-left: 5px
position: relative position: relative
@ -90,23 +89,19 @@
@media only screen and (max-width: 680px) @media only screen and (max-width: 680px)
display: none display: none
.logoTextBarColor @include top-nav-is-colored
background-image: var(--logo-text-bar-color) background-image: var(--logo-text-bar-color)
.middle .middle // the middle part of the top nav which contains the search bar
.searchContainer .searchContainer
display: flex display: flex
align-items: center align-items: center
@include top-nav-is-colored
background-color: var(--primary-color-hover)
@media only screen and (max-width: 680px) @media only screen and (max-width: 680px)
position: fixed position: fixed
left: 0 left: 0
right: 0 right: 0
top: 60px top: 60px
display: none
background-color: var(--side-nav-color) background-color: var(--side-nav-color)
.searchInput .searchInput
@ -117,7 +112,9 @@
.searchFilters .searchFilters
position: absolute position: absolute
margin: 10px 20px 20px 270px left: 0
right: 0
margin: 10px 20px 20px 220px
transition: margin 150ms ease-in-out transition: margin 150ms ease-in-out
@media only screen and (max-width: 680px) @media only screen and (max-width: 680px)
@ -125,11 +122,5 @@
right: 0 right: 0
margin: 95px 10px 0px margin: 95px 10px 0px
// ? &.expand
.expand
margin-left: 100px margin-left: 100px
// unsure where to group this selector instead
@media only screen and (max-width: 680px)
.menuIcon
display: none

4
src/renderer/components/top-nav/top-nav.vue
View File

@ -5,7 +5,7 @@
> >
<div class="side"> <div class="side">
<font-awesome-icon <font-awesome-icon
class=" menuIcon navIcon" class="menuIcon navIcon"
icon="bars" icon="bars"
@click="toggleSideNav" @click="toggleSideNav"
/> />
@ -27,11 +27,9 @@
<div class="logo"> <div class="logo">
<div <div
class="logoIcon" class="logoIcon"
:class="{ logoIconBarColor: barColor }"
/> />
<div <div
class="logoText" class="logoText"
:class="{ logoTextBarColor: barColor }"
/> />
</div> </div>
</div> </div>