KevinMidboe/seasoned
1
0
Fork 0
Code Issues 12 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

Lift mobile navigation some for chin height

Browse Source
This commit is contained in:
Kevin
2022-01-09 16:23:29 +01:00
parent 74b96225c6
commit 2665a27803
6 changed files with 106 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/App.vue
View File

@@ -1,37 +1,32 @@
<template>
<div id="app">
<!-- Header and hamburger navigation -->
<navigation></navigation>
<!-- Header with search field -->
<!-- TODO move this to the navigation component -->
<header class="header">
<search-input v-model="query"></search-input>
</header>
<search-input v-model="query"></search-input>
<!-- Movie popup that will show above existing rendered content -->
<movie-popup v-if="moviePopupIsVisible" :id="popupID" :type="popupType"></movie-popup>
<movie-popup
v-if="moviePopupIsVisible"
:id="popupID"
:type="popupType"
></movie-popup>
<darkmode-toggle />
<!-- Display the component assigned to the given route (default: home) -->
<router-view class="content" :key="$route.fullPath"></router-view>
</div>
</template>
<script>
import Vue from 'vue'
import Navigation from '@/components/Navigation'
import MoviePopup from '@/components/MoviePopup'
import SearchInput from '@/components/SearchInput'
import DarkmodeToggle from '@/components/ui/darkmodeToggle'
import Vue from "vue";
import Navigation from "@/components/Navigation";
import MoviePopup from "@/components/MoviePopup";
import SearchInput from "@/components/SearchInput";
import DarkmodeToggle from "@/components/ui/darkmodeToggle";
export default {
name: 'app',
name: "app",
components: {
Navigation,
MoviePopup,
@@ -40,39 +35,42 @@ export default {
},
data() {
return {
query: '',
query: "",
moviePopupIsVisible: false,
popupID: 0,
popupType: 'movie'
}
popupType: "movie"
};
},
created(){
let that = this
created() {
let that = this;
Vue.prototype.$popup = {
get isOpen() {
return that.moviePopupIsVisible
return that.moviePopupIsVisible;
},
open: (id, type) => {
this.popupID = id || this.popupID
this.popupType = type || this.popupType
this.moviePopupIsVisible = true
console.log('opened')
this.popupID = id || this.popupID;
this.popupType = type || this.popupType;
this.moviePopupIsVisible = true;
console.log("opened");
},
close: () => {
this.moviePopupIsVisible = false
console.log('closed')
this.moviePopupIsVisible = false;
console.log("closed");
}
}
console.log('MoviePopup registered at this.$popup and has state: ', this.$popup.isOpen)
};
console.log(
"MoviePopup registered at this.$popup and has state: ",
this.$popup.isOpen
);
}
}
};
</script>
<style lang="scss" scoped>
@import "./src/scss/media-queries";
@import "./src/scss/variables";
.content {
@include tablet-min{
@include tablet-min {
width: calc(100% - 95px);
margin-top: $header-size;
margin-left: 95px;
@@ -86,38 +84,42 @@ export default {
@import "./src/scss/variables";
@import "./src/scss/media-queries";
*{
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body{
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-family: "Roboto", sans-serif;
line-height: 1.6;
background: $background-color;
color: $text-color;
transition: background-color .5s ease, color .5s ease;
&.hidden{
transition: background-color 0.5s ease, color 0.5s ease;
&.hidden {
overflow: hidden;
}
}
h1,h2,h3 {
transition: color .5s ease;
h1,
h2,
h3 {
transition: color 0.5s ease;
}
a:any-link {
color: inherit;
}
input, textarea, button{
font-family: 'Roboto', sans-serif;
input,
textarea,
button {
font-family: "Roboto", sans-serif;
}
figure{
figure {
padding: 0;
margin: 0;
}
img{
img {
display: block;
// max-width: 100%;
height: auto;
@@ -127,16 +129,16 @@ img{
overflow: hidden;
}
.wrapper{
.wrapper {
position: relative;
}
.header{
.header {
position: fixed;
z-index: 15;
display: flex;
flex-direction: column;
@include tablet-min{
@include tablet-min {
width: calc(100% - 170px);
margin-left: 95px;
border-top: 0;
@@ -146,14 +148,16 @@ img{
}
// router view transition
.fade-enter-active, .fade-leave-active {
.fade-enter-active,
.fade-leave-active {
transition-property: opacity;
transition-duration: 0.25s;
}
.fade-enter-active {
transition-delay: 0.25s;
}
.fade-enter, .fade-leave-active {
opacity: 0
.fade-enter,
.fade-leave-active {
opacity: 0;
}
</style>

15
src/components/Navigation.vue
View File

@@ -104,7 +104,7 @@ export default {
bottom: 0;
left: 0;
width: 100%;
height: 50px;
height: var(--header-size);
z-index: 10;
display: block;
color: $text-color;
@@ -117,20 +117,25 @@ export default {
height: 100vh;
}
&__logo {
width: 55px;
width: 95px;
height: $header-size;
display: flex;
align-items: center;
justify-content: center;
background: $background-nav-logo;
@include tablet-min {
width: 95px;
@include mobile-only {
align-items: flex-start;
padding-top: 0.5rem;
width: 55px;
}
&-image {
width: 35px;
height: 31px;
fill: $green;
transition: transform 0.5s ease;
@include tablet-min {
width: 45px;
height: 40px;
@@ -145,7 +150,7 @@ export default {
position: fixed;
width: 55px;
height: 50px;
bottom: 0;
bottom: 1.5rem;
right: 0;
cursor: pointer;
z-index: 10;

53
src/components/SearchInput.vue
View File

@@ -1,28 +1,28 @@
<template>
<div>
<div class="search">
<input
ref="input"
type="text"
placeholder="Search for movie or show"
aria-label="Search input for finding a movie or show"
autocorrect="off"
autocapitalize="off"
tabindex="1"
v-model="query"
@input="handleInput"
@click="focus = true"
@keydown.escape="handleEscape"
@keyup.enter="handleSubmit"
@keydown.up="navigateUp"
@keydown.down="navigateDown"
/>
<svg class="search-icon" fill="currentColor" @click="handleSubmit">
<use xlink:href="#iconSearch"></use>
</svg>
</div>
<!-- <div> -->
<div class="search">
<input
ref="input"
type="text"
placeholder="Search for movie or show"
aria-label="Search input for finding a movie or show"
autocorrect="off"
autocapitalize="off"
tabindex="1"
v-model="query"
@input="handleInput"
@click="focus = true"
@keydown.escape="handleEscape"
@keyup.enter="handleSubmit"
@keydown.up="navigateUp"
@keydown.down="navigateDown"
/>
<svg class="search-icon" fill="currentColor" @click="handleSubmit">
<use xlink:href="#iconSearch"></use>
</svg>
</div>
<!--
<transition name="fade">
<div class="dropdown" v-if="!disabled && focus && query.length > 0">
<div class="filter">
@@ -73,7 +73,7 @@
</seasoned-button>
</div>
</transition>
</div>
</div> -->
</template>
<script>
@@ -347,7 +347,7 @@ hr {
display: flex;
position: fixed;
flex-wrap: wrap;
z-index: 5;
z-index: 16;
border: 0;
background-color: $background-color-secondary;
@@ -364,10 +364,12 @@ hr {
input {
display: block;
height: calc($header-size - 1.5rem);
width: 100%;
padding: 13px 0 13px 45px;
outline: none;
margin: 0;
margin-bottom: auto;
border: 0;
background-color: $background-color-secondary;
font-weight: 300;
@@ -376,6 +378,7 @@ hr {
transition: background-color 0.5s ease, color 0.5s ease;
@include tablet-min {
height: calc($header-size);
padding: 13px 30px 13px 60px;
}
}

2
src/components/ui/darkmodeToggle.vue
View File

@@ -46,7 +46,7 @@ export default {
z-index: 10;
@include mobile-only {
margin-bottom: 3.5rem;
margin-bottom: 5rem;
}
-webkit-user-select: none;

13
src/scss/main.scss
View File

@@ -1,11 +1,10 @@
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently */
}
.end-section {
@@ -47,4 +46,4 @@
&-absolute {
position: absolute;
}
}
}

14
src/scss/variables.scss
View File

@@ -18,12 +18,12 @@
--background-nav-logo: #081c24;
--color-green: #01d277;
--color-green-90: rgba(1, 210, 119, .9);
--color-green-70: rgba(1, 210, 119, .73);
--color-green-90: rgba(1, 210, 119, 0.9);
--color-green-70: rgba(1, 210, 119, 0.73);
--color-teal: #091c24;
--color-black: #081c24;
--white: #fff;
--white-70: rgba(255,255,255,0.7);
--white-70: rgba(255, 255, 255, 0.7);
--color-warning: rgba(241, 188, 53, 0.7);
--color-warning-highlight: #f1bc35;
@@ -31,7 +31,7 @@
--color-success-text: #fff;
--color-success-highlight: rgb(0, 100, 66);
--color-error: rgba(220, 48, 35, 0.8);
--color-error-highlight: #DC3023;
--color-error-highlight: #dc3023;
--header-size: 75px;
}
@@ -55,7 +55,7 @@
@include mobile-only {
:root {
--header-size: 50px;
--header-size: calc(50px + 1.5rem);
}
}
@@ -67,9 +67,9 @@ $green-90: var(--color-green-90);
$green-70: var(--color-green-70);
$teal: #091c24;
$black: #081c24;
$black-80: rgba(0,0,0,0.8);
$black-80: rgba(0, 0, 0, 0.8);
$white: #fff;
$white-80: rgba(255,255,255,0.8);
$white-80: rgba(255, 255, 255, 0.8);
$text-color: var(--text-color) !default;
$text-color-70: var(--text-color-70) !default;