Remove usage of fixed positioning for core UI elements (#2284)
* Use flex positioning instead of fixed * Remove expand class * Fix sticky description on video in mobile * Sort CSS properties
This commit is contained in:
vallode
GitHub
parent
5f8e33c6ad
commit
8d5aa4d855
|
|
@ -3,24 +3,15 @@
|
|||
src: url(assets/font/Roboto-Regular.ttf);
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.routerView {
|
||||
margin-left: 200px;
|
||||
margin-top: 80px;
|
||||
transition-property: margin;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
.expand {
|
||||
margin-left: 80px;
|
||||
flex: 1 1 0%;
|
||||
margin: 18px 10px;
|
||||
}
|
||||
|
||||
.banner {
|
||||
|
|
@ -46,9 +37,8 @@ body {
|
|||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
.expand, .routerView {
|
||||
margin-left: 0px;
|
||||
margin-bottom: 80px;
|
||||
.routerView {
|
||||
margin: 68px 8px 68px;
|
||||
}
|
||||
|
||||
.banner {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
<ft-flex-box
|
||||
v-if="showUpdatesBanner || showBlogBanner"
|
||||
class="flexBox routerView"
|
||||
:class="{ expand: !isOpen }"
|
||||
>
|
||||
<ft-notification-banner
|
||||
v-if="showUpdatesBanner"
|
||||
|
|
@ -36,7 +35,6 @@
|
|||
<RouterView
|
||||
ref="router"
|
||||
class="routerView"
|
||||
:class="{ expand: !isOpen }"
|
||||
/>
|
||||
<!-- </keep-alive> -->
|
||||
</transition>
|
||||
|
|
|
|||
|
|
@ -3,11 +3,10 @@
|
|||
height: calc(100vh - 60px);
|
||||
width: 200px;
|
||||
overflow-x: hidden;
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
z-index: 4;
|
||||
margin-top: 60px;
|
||||
position: sticky;
|
||||
left: 0;
|
||||
top: 60px;
|
||||
z-index: 3;
|
||||
box-shadow: 1px -1px 1px -1px var(--primary-shadow-color);
|
||||
background-color: var(--side-nav-color);
|
||||
transition-property: width;
|
||||
|
|
@ -168,6 +167,10 @@
|
|||
}
|
||||
|
||||
.sideNav {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -44,10 +44,6 @@ export default Vue.extend({
|
|||
return this.$store.getters.getSearchSettings
|
||||
},
|
||||
|
||||
isSideNavOpen: function () {
|
||||
return this.$store.getters.getIsSideNavOpen
|
||||
},
|
||||
|
||||
barColor: function () {
|
||||
return this.$store.getters.getBarColor
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,12 +4,13 @@
|
|||
@content
|
||||
|
||||
.topNav
|
||||
position: fixed
|
||||
position: sticky
|
||||
z-index: 4
|
||||
left: 0
|
||||
right: 0
|
||||
top: 0
|
||||
height: 60px
|
||||
width: 100%
|
||||
line-height: 60px
|
||||
background-color: var(--card-bg-color)
|
||||
-webkit-box-shadow: 0px 2px 1px 0px var(--primary-shadow-color)
|
||||
|
|
@ -24,6 +25,9 @@
|
|||
@include top-nav-is-colored
|
||||
background-color: var(--primary-color)
|
||||
|
||||
@media only screen and (max-width: 680px)
|
||||
position: fixed
|
||||
|
||||
.menuIcon // the hamburger button
|
||||
@media only screen and (max-width: 680px)
|
||||
display: none
|
||||
|
|
@ -160,7 +164,3 @@
|
|||
left: 0
|
||||
right: 0
|
||||
margin: 95px 10px 0px
|
||||
|
||||
@media only screen and (min-width: 681px)
|
||||
&.expand
|
||||
margin-left: 100px
|
||||
|
|
|
|||
|
|
@ -90,7 +90,6 @@
|
|||
<ft-search-filters
|
||||
v-show="showFilters"
|
||||
class="searchFilters"
|
||||
:class="{ expand: !isSideNavOpen }"
|
||||
@filterValueUpdated="handleSearchFilterValueChanged"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -619,6 +619,8 @@
|
|||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
color: var(--primary-text-color);
|
||||
background-color: var(--bg-color);
|
||||
--red-500: #f44336;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
=dual-column-template
|
||||
grid-template: "video video sidebar" 0fr "info info sidebar" auto "info info sidebar" auto / 1fr 1fr 1fr
|
||||
grid-template: "video video sidebar" 0fr "info info sidebar" 1fr "info info sidebar" 1fr / 1fr 1fr 1fr
|
||||
|
||||
=theatre-mode-template
|
||||
grid-template: "video video video" auto "info info sidebar" auto "info info sidebar" auto / 1fr 1fr 1fr
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
grid-area: video
|
||||
|
||||
.videoAreaMargin
|
||||
margin: 0px 8px 16px
|
||||
margin: 0 0 16px
|
||||
|
||||
.videoPlayer
|
||||
grid-column: 1
|
||||
|
|
@ -61,11 +61,16 @@
|
|||
margin-top: 10px
|
||||
|
||||
.watchVideo
|
||||
margin: 0px 8px 16px
|
||||
margin: 0 0 16px
|
||||
grid-column: 1
|
||||
|
||||
.infoArea
|
||||
grid-area: info
|
||||
position: relative
|
||||
|
||||
@media only screen and (min-width: 901px)
|
||||
position: sticky
|
||||
top: 76px
|
||||
|
||||
.sidebarArea
|
||||
grid-area: sidebar
|
||||
|
|
@ -83,4 +88,7 @@
|
|||
height: 500px
|
||||
|
||||
.watchVideoRecommendations, .theatreRecommendations
|
||||
margin: 0 0 16px
|
||||
|
||||
@media only screen and (min-width: 901px)
|
||||
margin: 0 8px 16px
|
||||
|
|
|
|||
Loading…
Reference in New Issue