Radar 2.0 (TechLabs-Berlin#30)

* re-initialize directories

* add logos and favicon

* add svg icons

* implement default layout

* add FAQ page

* implement base header and footer

* implement timeline component

* implement new Nuxt configuration and packages

* update gitignore

* implement index

* add classes to navbar links

* implement media page

* create wrapper component for boxes

* adjust timeline styles

* add content

* implement index timeline and adjust overall styles

* implement newsletter page

* chore: install deps

* adjust timeline styles and icons

* remove current event from future events

* make future events always on

* implement events resources

* adjust events display

* make it responsive

* fix date display

Co-authored-by: Daniel da Rocha <[email protected]>

.eslintrc.js

@@ -2,22 +2,19 @@ module.exports = {
  root: true,
  env: {
  browser: true,
- node: true
+ node: true,
  },
  parserOptions: {
- parser: 'babel-eslint'
+ parser: 'babel-eslint',
  },
  extends: [
  '@nuxtjs',
  'prettier',
  'prettier/vue',
  'plugin:prettier/recommended',
- 'plugin:nuxt/recommended'
- ],
- plugins: [
- 'prettier'
+ 'plugin:nuxt/recommended',
  ],
+ plugins: ['prettier'],
  // add your custom rules here
- rules: {
- }
+ rules: {},
 }

.gitignore

@@ -88,6 +88,4 @@ sw.*
 
 # Vim swap files
 *.swp
-
-# OneSignal SDK
-static/OneSignal*
+.dccache

.prettierrc

@@ -1,5 +1,4 @@
 {
  "semi": false,
- "arrowParens": "always",
  "singleQuote": true
 }

.vscode/settings.json

@@ -0,0 +1,19 @@
+{
+ "workbench.colorCustomizations": {
+ "activityBar.activeBackground": "#fb507f",
+ "activityBar.activeBorder": "#49f906",
+ "activityBar.background": "#fb507f",
+ "activityBar.foreground": "#15202b",
+ "activityBar.inactiveForeground": "#15202b99",
+ "activityBarBadge.background": "#49f906",
+ "activityBarBadge.foreground": "#15202b",
+ "statusBar.background": "#fa1e5a",
+ "statusBar.foreground": "#e7e7e7",
+ "statusBarItem.hoverBackground": "#fb507f",
+ "titleBar.activeBackground": "#fa1e5a",
+ "titleBar.activeForeground": "#e7e7e7",
+ "titleBar.inactiveBackground": "#fa1e5a99",
+ "titleBar.inactiveForeground": "#e7e7e799"
+ },
+ "peacock.color": "#FA1E5A"
+}

README.md

@@ -1,21 +1,4 @@
-# TechLabs Semester Radar
-
-> The TechLabs Berlin semester radar is a web app that provides our Techies with an overview of all the activities & milestones in their TechLabs semester. On the Radar, they can see all the information they need at a glance.
-
-## Resources
-
-- [TechLabs Semester Radar Page ](https://bln.techlabs.org/timeline) 
-- [Slack Channel](https://techlabs-community.slack.com/) 
-
-
-## About Radar
-> The Radar is built as a static single page app (SPA) with Nuxt.js using Vue.js as the frontend framework.
- For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
-
- <a href="https://bln.techlabs.org/timeline">
- <img src="assets/radar-image.png" alt="Radar Screen Shot" width="500" height="auto">
- </a>
-
+# radar_new
 
 ## Build Setup
 
@@ -26,21 +9,12 @@ $ npm install
 # serve with hot reload at localhost:3000
 $ npm run dev
 
-```
-
-
-## Contributing
-
-We appreciate any contribution and are happy to get in touch. If you see a problem, 
-please [open an issue](https://github.com/TechLabs-Berlin/radar/issues/new) in this repository. 
-For write access to this repository, please send a message on our [Slack Channel](https://techlabs-community.slack.com/)
-
-To contribute code, we use a Pull Request workflow:
-1. Create a branch with your proposed changes and [open a Pull Request](https://github.com/TechLabs-Berlin/radar/compare)
-2. We work with you for review and merge your code into the `main` branch.
-
-## License
-
-The `TechLabs-Berlin/radar` project is [licensed MIT](LICENSE.txt). Learn more about MIT license on [_choosealicense.com_](https://choosealicense.com/licenses/mit/).
+# build for production and launch server
+$ npm run build
+$ npm run start
 
+# generate static project
+$ npm run generate
+```
 
+For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).

assets/css/custom.scss

@@ -0,0 +1,39 @@
+body,
+html,
+#__nuxt,
+#__layout {
+ @apply h-full antialiased text-gray-700 bg-gray-50;
+}
+
+.nuxt-link-exact-active {
+ @apply text-pink-600 font-bold relative;
+}
+.nuxt-link-exact-active::after {
+ @apply bg-pink-600;
+
+ content: '';
+ width: 100%;
+ height: 4px;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+ transition: opacity 0.5s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+ opacity: 0;
+}
+
+.title-with-lines {
+ @apply w-full mb-8 text-xs font-bold tracking-wide uppercase flex flex-none;
+}
+.title-with-lines::before,
+.title-with-lines::after {
+ content: '';
+ flex-grow: 1;
+ margin: 0 1rem;
+ background: linear-gradient(to right, #464646, #464646);
+ background-size: 100% 1px;
+ background-position: 0% 50%;
+ background-repeat: repeat-x;
+}

assets/css/tailwind.css

@@ -0,0 +1,7 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+
+@import './custom.scss';
+@import './vue-tippy.scss';
+
+@import "tailwindcss/utilities";

assets/css/vue-tippy.scss

@@ -0,0 +1,11 @@
+.tippy-tooltip.tl-theme {
+ @apply px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl shadow-xl text-gray-700 text-sm;
+}
+
+.tippy-tooltip.tl-theme[data-animatefill] {
+ background-color: transparent;
+}
+
+.tippy-tooltip.tl-theme .tippy-backdrop {
+ @apply bg-gray-50;
+}