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

15
src/components/Navigation.vue
View File

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

53
src/components/SearchInput.vue
View File

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

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

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

13
src/scss/main.scss
View File

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

14
src/scss/variables.scss
View File

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