Merge pull request #32 from xatellite/feature/olp-51-add-feedback-button

Feature/olp 51 add feedback button
xatellite · Jul 23, 2023 · 347eaa3 · 347eaa3
2 parents 92a2fa4 + 090f5da
commit 347eaa3
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 4 deletions.
diff --git a/openlineplanner/src/App.vue b/openlineplanner/src/App.vue
@@ -13,6 +13,9 @@ import { RouterView } from "vue-router";
 import PageHeader from "@/components/PageHeader.vue";
 import PageFooter from "@/components/PageFooter.vue";
 import "@fontsource/poppins";
+import "@fontsource/poppins/400.css";
+import "@fontsource/poppins/500.css";
+import "@fontsource/poppins/600.css";
 import "@fontsource/poppins/700.css";
 import { useUIStore } from './stores/ui';
 

diff --git a/openlineplanner/src/components/GithubCorner.vue b/openlineplanner/src/components/GithubCorner.vue
@@ -29,9 +29,18 @@
         id="path6"
       />
     </svg>
+    Check on Github
   </a>
 </template>
 <style lang="scss" scoped>
+
+.github-corner {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--c-text-inverted--alt);
+}
+
 .corner {
   fill: #ffffff;
   margin-top: 2px;

diff --git a/openlineplanner/src/components/PageFooter.vue b/openlineplanner/src/components/PageFooter.vue
@@ -1,13 +1,15 @@
 <template>
   <div class="footer">
-    <span>OpenLinePlanner is a product for all!</span>
+    <span class="footer__left">OpenLinePlanner is a product for all! <GithubCorner /></span>
     <span class="footer__center">{{version}} - {{ majorName }}</span>
     <span class="footer__right">Launched by @xatellite, Supported by FH St. Pölten</span>
   </div>
 </template>
 
 <script>
+import GithubCorner from './GithubCorner.vue';
 export default {
+  components: { GithubCorner },
   setup() {
     return {
       version: import.meta.env.VITE_VERSION,
@@ -40,6 +42,12 @@ export default {
     text-align: center;
   }
 
+  &__left {
+    display: flex;
+    align-items: center;
+    gap: $space-sm;
+  }
+
   &__right {
     text-align: right;
   }

diff --git a/openlineplanner/src/components/PageHeader.vue b/openlineplanner/src/components/PageHeader.vue
@@ -17,7 +17,6 @@
       <router-link to="/project" id="nav-project" class="page-header__navigation__item"
         >Project</router-link
       >
-      <GithubCorner />
     </nav>
     <div class="page-header__settings">
       <button @click="uiStore.toggleMode" class=" button--transparent">
@@ -92,7 +91,19 @@ export default {
   }
 
   .router-link-active {
-    border-bottom: 5px solid var(--c-accent-three);
+    position: relative;
+    // border-bottom: 5px solid var(--c-accent-three);
+
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: -4px;
+      left: 0;
+      width: 100%;
+      height: 5px;
+      border-radius: 5px;
+      background-color: var(--c-accent-three);
+    }
   }
 
   .mobile-nav {
@@ -110,9 +121,10 @@ export default {
 
   &__navigation {
     display: flex;
+    align-items: center;
     gap: $space-md;
     margin-left: $space-lg;
-    font-weight: bold;
+    font-weight: 600;
 
     @media (max-width: 700px), (max-height: 600px) {
       display: none;
@@ -121,12 +133,19 @@ export default {
         text-align: center;
         padding: $space-sm;
         border-bottom: 1px solid var(--c-button-border);
+        width: 100%;
       }
 
       .router-link-active {
         display: none;
       }
     }
+
+    &__button {
+      width: auto;
+      height: auto;
+      padding: 4px $space-sm;
+    }
   }
 
   @media (max-width: 700px), (max-height: 600px) {

diff --git a/openlineplanner/src/views/ProjectView.vue b/openlineplanner/src/views/ProjectView.vue
@@ -28,6 +28,7 @@
         </div>
       </div>
       <SavesList />
+      <a href="mailto:hi@xatellite.space?subject=%5BOpenLinePlanner%5D%20Feedback" class="button project__feedback button--accent">Problems? Ideas? Send Feedback!</a>
     </div>
     <InteractiveMap />
   </main>
@@ -95,5 +96,9 @@ export default {
     margin: $space-sm 0;
     align-items: center;
   }
+  &__feedback {
+    width: 100%;
+    margin-top: $space-ssm;
+  }
 }
 </style>