Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - re-arrange style files + fix app-name padding

Browse Source
This commit is contained in:
Sam 2021-08-04 09:10:00 +02:00
parent ce58cf922e
commit 40355a0af5
7 changed files with 151 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
fittrackee_client/src/App.vue
View File

@ -19,81 +19,5 @@
</script>
<style lang="scss">
/* pt-sans-regular - latin */
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: url('assets/fonts/pt-sans-v9-latin-regular.eot'); /* IE9 Compat Modes */
src: local('PT Sans'), local('PTSans-Regular'),
url('assets/fonts/pt-sans-v9-latin-regular.eot?#iefix')
format('embedded-opentype'),
/* IE6-IE8 */ url('assets/fonts/pt-sans-v9-latin-regular.woff2')
format('woff2'),
/* Super Modern Browsers */
url('assets/fonts/pt-sans-v9-latin-regular.woff') format('woff'),
/* Modern Browsers */ url('assets/fonts/pt-sans-v9-latin-regular.ttf')
format('truetype'),
/* Safari, Android, iOS */
url('assets/fonts/pt-sans-v9-latin-regular.svg#PTSans') format('svg'); /* Legacy iOS */
}
/* pt-sans-italic - latin */
@font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 400;
src: url('assets/fonts/pt-sans-v9-latin-italic.eot'); /* IE9 Compat Modes */
src: local('PT Sans Italic'), local('PTSans-Italic'),
url('assets/fonts/pt-sans-v9-latin-italic.eot?#iefix')
format('embedded-opentype'),
/* IE6-IE8 */ url('assets/fonts/pt-sans-v9-latin-italic.woff2')
format('woff2'),
/* Super Modern Browsers */
url('assets/fonts/pt-sans-v9-latin-italic.woff') format('woff'),
/* Modern Browsers */ url('assets/fonts/pt-sans-v9-latin-italic.ttf')
format('truetype'),
/* Safari, Android, iOS */
url('assets/fonts/pt-sans-v9-latin-italic.svg#PTSans') format('svg'); /* Legacy iOS */
}
/* pt-sans-700 - latin */
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 700;
src: url('assets/fonts/pt-sans-v9-latin-700.eot'); /* IE9 Compat Modes */
src: local('PT Sans Bold'), local('PTSans-Bold'),
url('assets/fonts/pt-sans-v9-latin-700.eot?#iefix')
format('embedded-opentype'),
/* IE6-IE8 */ url('assets/fonts/pt-sans-v9-latin-700.woff2')
format('woff2'),
/* Super Modern Browsers */ url('assets/fonts/pt-sans-v9-latin-700.woff')
format('woff'),
/* Modern Browsers */ url('assets/fonts/pt-sans-v9-latin-700.ttf')
format('truetype'),
/* Safari, Android, iOS */
url('assets/fonts/pt-sans-v9-latin-700.svg#PTSans') format('svg'); /* Legacy iOS */
}
body {
margin: 0;
}
#app {
font-family: 'PT Sans', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
background: #eaeaea;
margin: 0;
min-height: 100vh;
}
a {
color: #40578a;
text-decoration: none;
}
@import '~@/scss/base';
</style>

8
fittrackee_client/src/components/Footer.vue
View File

@ -35,6 +35,8 @@
</template>
<style scoped lang="scss">
@import '~@/scss/base';
#footer {
display: flex;
@ -42,8 +44,8 @@
position: absolute;
width: 100%;
background: white;
color: #8b8c8c;
background: var(--footer-background-color);
color: var(--footer-color);
font-size: 0.9em;
a {
@ -64,7 +66,7 @@
}
}
@media screen and (max-width: 550px) {
@media screen and (max-width: $small-limit) {
.footer-items {
font-size: 0.85em;

76
fittrackee_client/src/components/NavBar.vue
View File

@ -1,32 +1,34 @@
<template>
<div id="nav">
<div class="nav-app-name">
<span class="nav-item app-name">FitTrackee</span>
</div>
<div class="nav-icon-open" :class="{ 'menu-open': isMenuOpen }">
<i class="fa fa-bars hamburger-icon" @click="openMenu()"></i>
</div>
<div class="nav-items" :class="{ 'menu-open': isMenuOpen }">
<div class="nav-items-close">
<span class="app-name">FitTrackee</span>
<i
class="fa fa-close close-icon nav-item"
:class="{ 'menu-closed': !isMenuOpen }"
@click="closeMenu()"
></i>
<div class="container">
<div class="nav-app-name">
<span class="nav-item app-name">FitTrackee</span>
</div>
<div class="nav-items-app-menu" @click="closeMenu()">
<router-link class="nav-item" to="/">Dashboard</router-link>
<span class="nav-item">Workout</span>
<span class="nav-item">Statistics</span>
<span class="nav-item">Admin</span>
<span class="nav-item">Add Workout</span>
<div class="nav-icon-open" :class="{ 'menu-open': isMenuOpen }">
<i class="fa fa-bars hamburger-icon" @click="openMenu()"></i>
</div>
<div class="nav-items-user-menu">
<span class="nav-item">User</span>
<span class="nav-item">Logout</span>
<span class="nav-item">Register</span>
<span class="nav-item">Login</span>
<div class="nav-items" :class="{ 'menu-open': isMenuOpen }">
<div class="nav-items-close">
<span class="app-name">FitTrackee</span>
<i
class="fa fa-close close-icon nav-item"
:class="{ 'menu-closed': !isMenuOpen }"
@click="closeMenu()"
></i>
</div>
<div class="nav-items-app-menu" @click="closeMenu()">
<router-link class="nav-item" to="/">Dashboard</router-link>
<span class="nav-item">Workout</span>
<span class="nav-item">Statistics</span>
<span class="nav-item">Admin</span>
<span class="nav-item">Add Workout</span>
</div>
<div class="nav-items-user-menu">
<span class="nav-item">User</span>
<span class="nav-item">Logout</span>
<span class="nav-item">Register</span>
<span class="nav-item">Login</span>
</div>
</div>
</div>
</div>
@ -51,21 +53,24 @@
</script>
<style scoped lang="scss">
@import '~@/scss/base';
#nav {
align-items: center;
background: white;
background: var(--nav-bar-background-color);
display: flex;
padding: 15px 70px;
padding: 15px 10px;
a {
&.router-link-exact-active {
color: rgba(0, 0, 0, 0.7);
color: var(--nav-bar-link-active);
}
}
.app-name {
font-size: 1.2em;
font-weight: bold;
margin-right: 10px;
line-height: 12px;
}
.fa {
@ -95,7 +100,7 @@
}
}
@media screen and (max-width: 1000px) {
@media screen and (max-width: $medium-limit) {
.hamburger-icon {
display: block;
}
@ -110,6 +115,7 @@
.close-icon {
display: block;
margin-right: 18px;
}
.close-icon.menu-closed {
display: none;
@ -129,7 +135,7 @@
bottom: 0;
left: 0;
background: white;
background: var(--nav-bar-background-color);
.nav-items-close,
.nav-items-app-menu,
@ -145,16 +151,10 @@
justify-content: space-between;
.app-name {
padding: 10px;
padding: 19px 25px;
}
}
}
}
}
@media screen and (max-width: 1000px) {
#nav {
padding: 10px;
}
}
</style>

34
fittrackee_client/src/scss/base.scss Normal file
View File

@ -0,0 +1,34 @@
@import 'colors';
@import 'fonts';
@import 'vars';
body {
margin: 0;
}
#app {
font-family: 'PT Sans', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: var(--app-color);
background-color: var(--app-background-color);
margin: 0;
min-height: 100vh;
}
a {
color: var(--app-a-color);
text-decoration: none;
}
.container {
display: flex;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
max-width: $container-width;
width: 100%;
}

11
fittrackee_client/src/scss/colors.scss Normal file
View File

@ -0,0 +1,11 @@
:root {
--app-background-color: #eaeaea;
--app-color: #2c3e50;
--app-a-color: #40578a;
--nav-bar-background-color: #FFFFFF;
--nav-bar-link-active: #485b6e;
--footer-background-color: #FFFFFF;
--footer-color: #8b8c8c;
}

56
fittrackee_client/src/scss/fonts.scss Normal file
View File

@ -0,0 +1,56 @@
/* pt-sans-regular - latin */
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: url('~@/assets/fonts/pt-sans-v9-latin-regular.eot'); /* IE9 Compat Modes */
src: local('PT Sans'), local('PTSans-Regular'),
url('~@/assets/fonts/pt-sans-v9-latin-regular.eot?#iefix')
format('embedded-opentype'),
/* IE6-IE8 */ url('~@/assets/fonts/pt-sans-v9-latin-regular.woff2')
format('woff2'),
/* Super Modern Browsers */
url('~@/assets/fonts/pt-sans-v9-latin-regular.woff') format('woff'),
/* Modern Browsers */ url('~@/assets/fonts/pt-sans-v9-latin-regular.ttf')
format('truetype'),
/* Safari, Android, iOS */
url('~@/assets/fonts/pt-sans-v9-latin-regular.svg#PTSans') format('svg'); /* Legacy iOS */
}
/* pt-sans-italic - latin */
@font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 400;
src: url('~@/assets/fonts/pt-sans-v9-latin-italic.eot'); /* IE9 Compat Modes */
src: local('PT Sans Italic'), local('PTSans-Italic'),
url('~@/assets/fonts/pt-sans-v9-latin-italic.eot?#iefix')
format('embedded-opentype'),
/* IE6-IE8 */ url('~@/assets/fonts/pt-sans-v9-latin-italic.woff2')
format('woff2'),
/* Super Modern Browsers */
url('~@/assets/fonts/pt-sans-v9-latin-italic.woff') format('woff'),
/* Modern Browsers */ url('~@/assets/fonts/pt-sans-v9-latin-italic.ttf')
format('truetype'),
/* Safari, Android, iOS */
url('~@/assets/fonts/pt-sans-v9-latin-italic.svg#PTSans') format('svg'); /* Legacy iOS */
}
/* pt-sans-700 - latin */
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 700;
src: url('~@/assets/fonts/pt-sans-v9-latin-700.eot'); /* IE9 Compat Modes */
src: local('PT Sans Bold'), local('PTSans-Bold'),
url('~@/assets/fonts/pt-sans-v9-latin-700.eot?#iefix')
format('embedded-opentype'),
/* IE6-IE8 */ url('~@/assets/fonts/pt-sans-v9-latin-700.woff2')
format('woff2'),
/* Super Modern Browsers */ url('~@/assets/fonts/pt-sans-v9-latin-700.woff')
format('woff'),
/* Modern Browsers */ url('~@/assets/fonts/pt-sans-v9-latin-700.ttf')
format('truetype'),
/* Safari, Android, iOS */
url('~@/assets/fonts/pt-sans-v9-latin-700.svg#PTSans') format('svg'); /* Legacy iOS */
}

6
fittrackee_client/src/scss/vars.scss Normal file
View File

@ -0,0 +1,6 @@
/*
* === MEDIA QUERIES ===
*/
$container-width: 1140px;
$medium-limit: 1000px;
$small-limit: 500px;