diff --git a/.firebaserc b/.firebaserc new file mode 100644 index 0000000..8516752 --- /dev/null +++ b/.firebaserc @@ -0,0 +1,5 @@ +{ + "projects": { + "default": "s2-move" + } +} diff --git a/build/logo.png b/build/logo.png deleted file mode 100644 index f3d2503..0000000 Binary files a/build/logo.png and /dev/null differ diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index 2e7d9fa..20c2e54 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -52,27 +52,27 @@ module.exports = { include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] }, { - test: /\.(png|jpe?g|gif)(\?.*)?$/, + test: /\.(png|svg|jpe?g|gif)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, - { - test: /\.svg$/, - loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x - options: { - // optional [svgo](https://github.com/svg/svgo) options - svgo: { - plugins: [ - {removeDoctype: true}, - {removeComments: true}, - {cleanupIDs: false} - ] - } - } - }, + // { + // test: /\.svg$/, + // loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x + // options: { + // // optional [svgo](https://github.com/svg/svgo) options + // svgo: { + // plugins: [ + // {removeDoctype: true}, + // {removeComments: true}, + // {cleanupIDs: false} + // ] + // } + // } + // }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', diff --git a/firebase.json b/firebase.json new file mode 100644 index 0000000..2c33c29 --- /dev/null +++ b/firebase.json @@ -0,0 +1,16 @@ +{ + "hosting": { + "public": "dist", + "ignore": [ + "firebase.json", + "**/.*", + "**/node_modules/**" + ], + "rewrites": [ + { + "source": "**", + "destination": "/index.html" + } + ] + } +} diff --git a/index.html b/index.html index fa46be6..c4b8851 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + Move App diff --git a/package-lock.json b/package-lock.json index ad6e270..8db407a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16570,6 +16570,11 @@ "integrity": "sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA==", "dev": true }, + "v-click-outside": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/v-click-outside/-/v-click-outside-1.0.4.tgz", + "integrity": "sha1-TiG48JpDSiCPWaFGOZfeFQxBS54=" + }, "vali-date": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/vali-date/-/vali-date-1.0.0.tgz", @@ -16705,6 +16710,11 @@ "integrity": "sha512-e+ThJMYmZg4D9UnrLcr6LQxGu6YlcxkrmZGPCyIN4malcNhdeGGKxmFuM5y6ICMJJxQywLfT8MM1rYZr4LpeLw==", "dev": true }, + "vue-js-modal": { + "version": "1.3.12", + "resolved": "https://registry.npmjs.org/vue-js-modal/-/vue-js-modal-1.3.12.tgz", + "integrity": "sha512-mT/RzGa1n63XoQ60L5JO6jFXG7A0Tmdk7n+5w7L33PtxcwtYV6gkasW29JTWA02Ifddmii+ZW4jcXmxgXcBbKw==" + }, "vue-loader": { "version": "13.7.0", "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-13.7.0.tgz", @@ -16865,6 +16875,16 @@ "integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==", "dev": true }, + "vuetify": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-1.0.10.tgz", + "integrity": "sha512-1YK5GXbpA5b35/zRXtYrjUnp7UcfDeu4aRjbFM8FZN60rwEinRkpS2w4S9uIcRkmWEE/mZYEQ3imGI2uVpKnrg==" + }, + "vuex": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz", + "integrity": "sha512-wLoqz0B7DSZtgbWL1ShIBBCjv22GV5U+vcBFox658g6V0s4wZV9P4YjCNyoHSyIBpj1f29JBoNQIqD82cR4O3w==" + }, "watchpack": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.4.0.tgz", diff --git a/package.json b/package.json index 8ed1b0c..bb8c645 100644 --- a/package.json +++ b/package.json @@ -21,9 +21,13 @@ "style-loader": "^0.20.1", "svg-pan-zoom": "^3.5.3", "svg-url-loader": "^2.3.1", + "v-click-outside": "^1.0.4", "vue": "^2.5.2", + "vue-js-modal": "^1.3.12", "vue-resource": "^1.3.6", - "vue-router": "^3.0.1" + "vue-router": "^3.0.1", + "vuetify": "^1.0.10", + "vuex": "^3.0.1" }, "devDependencies": { "autoprefixer": "^7.1.2", @@ -35,7 +39,7 @@ "babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-vue-jsx": "^3.5.0", "babel-preset-env": "^1.3.2", - "babel-preset-stage-2": "^6.22.0", + "babel-preset-stage-2": "^6.24.1", "chalk": "^2.0.1", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.28.9", diff --git a/src/App.vue b/src/App.vue index fb51e36..11fa3aa 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,14 +13,14 @@ export default { components: { "appDashboard": Dashboard } -} +} diff --git a/src/api/desks.js b/src/api/desks.js new file mode 100644 index 0000000..52df461 --- /dev/null +++ b/src/api/desks.js @@ -0,0 +1,18 @@ +/* Fetching desks from the API (Firebase) --> to mock client-server processing */ + +const desks = {} + +import axios from "axios"; +export default { + + getDesks(desks, {commit}) { + return axios.get("https://s2-move.firebaseio.com/desks.json") + .then(res => { + this.desks = res.data + commit("setDesks", this.desks); + // promise to update user + commit('updateUser'); + }) + .catch(error => console.log(error)) + } +} \ No newline at end of file diff --git a/src/api/users.js b/src/api/users.js new file mode 100644 index 0000000..7697ce9 --- /dev/null +++ b/src/api/users.js @@ -0,0 +1,23 @@ +/* Fetching users from the API (Firebase) --> to mock client-server processing */ + +// const users = {} +const userList = [] + +import axios from "axios"; + +export default { + getUsers(users, {commit}) { + return axios.get("https://s2-move.firebaseio.com/users.json") + .then(res => { + let users = res.data + for (let key in users) { + const user = users[key] + user.idRef = key + userList.push(user) + } + commit("setUsers", userList) + //promise to update users + }) + .catch(error => console.log(error)) + } +} diff --git a/src/assets/icons/account-group.png b/src/assets/icons/account-group.png deleted file mode 100644 index 09e516e..0000000 Binary files a/src/assets/icons/account-group.png and /dev/null differ diff --git a/src/assets/icons/calendar.png b/src/assets/icons/calendar.png deleted file mode 100644 index 06e9ad2..0000000 Binary files a/src/assets/icons/calendar.png and /dev/null differ diff --git a/src/assets/icons/cellphone-iphone.png b/src/assets/icons/cellphone-iphone.png deleted file mode 100644 index 02d12bb..0000000 Binary files a/src/assets/icons/cellphone-iphone.png and /dev/null differ diff --git a/src/assets/icons/city.png b/src/assets/icons/city.png deleted file mode 100644 index 573ab15..0000000 Binary files a/src/assets/icons/city.png and /dev/null differ diff --git a/src/assets/icons/email-outline.png b/src/assets/icons/email-outline.png deleted file mode 100644 index 90590f3..0000000 Binary files a/src/assets/icons/email-outline.png and /dev/null differ diff --git a/src/assets/icons/lightbulb-on-outline.png b/src/assets/icons/lightbulb-on-outline.png deleted file mode 100644 index 233b9ac..0000000 Binary files a/src/assets/icons/lightbulb-on-outline.png and /dev/null differ diff --git a/src/assets/icons/phone-classic.png b/src/assets/icons/phone-classic.png deleted file mode 100644 index 7b1e43a..0000000 Binary files a/src/assets/icons/phone-classic.png and /dev/null differ diff --git a/src/assets/icons/slack.png b/src/assets/icons/slack.png deleted file mode 100644 index 5151f98..0000000 Binary files a/src/assets/icons/slack.png and /dev/null differ diff --git a/src/assets/icons/wikipedia.png b/src/assets/icons/wikipedia.png deleted file mode 100644 index 78db9ed..0000000 Binary files a/src/assets/icons/wikipedia.png and /dev/null differ diff --git a/src/assets/images/S2logo_purple_white.png b/src/assets/images/S2logo_purple_white.png deleted file mode 100644 index 33b3d04..0000000 Binary files a/src/assets/images/S2logo_purple_white.png and /dev/null differ diff --git a/src/components/Auth.vue b/src/components/Auth.vue index 9f480d6..0ace2ce 100644 --- a/src/components/Auth.vue +++ b/src/components/Auth.vue @@ -1,11 +1,14 @@ - +@import "../../styles/css/auth.component.css" + \ No newline at end of file diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue index 715e8b2..8b8f595 100644 --- a/src/components/Dashboard.vue +++ b/src/components/Dashboard.vue @@ -1,24 +1,52 @@ + + diff --git a/src/components/Header.vue b/src/components/Header.vue index 06e304f..52cbd18 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -1,25 +1,40 @@ + + diff --git a/src/components/Menu.vue b/src/components/Menu.vue index e69de29..12e449c 100644 --- a/src/components/Menu.vue +++ b/src/components/Menu.vue @@ -0,0 +1,159 @@ + + + + + diff --git a/src/components/Profile.vue b/src/components/Profile.vue index c74c36f..7cafc83 100644 --- a/src/components/Profile.vue +++ b/src/components/Profile.vue @@ -1,20 +1,89 @@ - \ No newline at end of file diff --git a/src/components/Search.vue b/src/components/Search.vue index 018bea5..42762ff 100644 --- a/src/components/Search.vue +++ b/src/components/Search.vue @@ -1,13 +1,122 @@ + + + + diff --git a/src/components/maps/HamburgOttensen.vue b/src/components/maps/HamburgOttensen.vue index fa15dc6..82fae45 100644 --- a/src/components/maps/HamburgOttensen.vue +++ b/src/components/maps/HamburgOttensen.vue @@ -1,9 +1,141 @@ + + diff --git a/src/main.js b/src/main.js index 9e13429..bbce3f6 100644 --- a/src/main.js +++ b/src/main.js @@ -1,30 +1,39 @@ -import Vue from 'vue' +import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './App' import router from './routes'; -import { config } from "../helpers/firebaseconfig.js" -import firebase from "firebase" -import firebaseui from "firebaseui" +import vClickOutside from 'v-click-outside'; +import VModal from 'vue-js-modal'; +import { config } from "../helpers/firebaseconfig.js"; +import { store } from "./store/store" +import firebase from "firebase"; +import firebaseui from "firebaseui"; Vue.use(VueRouter); +Vue.use(vClickOutside); +Vue.use(VModal); + // routes will always returns index.html -// history mode allows us not display the # before a path(outcome will be localhost:8080/user, rather than localhost:8080/#/user) +// history mode allows us note display the # before a path(outcome will be localhost:8080/user, rather than localhost:8080/#/user) new Vue({ router, + store, created(){ firebase.initializeApp(config); firebase.auth().onAuthStateChanged((user) => { if(!user) { this.$router.push("/login") } else if (user) { + var userEmail = user.email; this.$router.push("/dashboard") } }) }, el: "#app", + store: store, render: h => h(App) }); diff --git a/src/routes.js b/src/routes.js index d2ccfa7..3c3a668 100644 --- a/src/routes.js +++ b/src/routes.js @@ -8,6 +8,7 @@ import Login from "./components/Login.vue" import Header from "./components/Header.vue" import Profile from "./components/Profile.vue" import Search from "./components/Search.vue" +import Menu from "./components/Menu.vue" //## Maps diff --git a/src/store/store.js b/src/store/store.js new file mode 100644 index 0000000..bb55105 --- /dev/null +++ b/src/store/store.js @@ -0,0 +1,212 @@ +import Vue from "vue"; +import Vuex from "vuex"; +import users from "@/api/users"; +import desks from "@/api/desks"; +import firebase from 'firebase'; + +Vue.use(Vuex); + +export const store = new Vuex.Store({ + state: { + users: {}, + searchTerm: '', + selectedUser: {}, + hideMenu: true, + filteredUsers: {}, + desks: {}, + authUser:{} // firebase user object + }, + getters: { + getFilteredUsers(state) { + return state.filteredUsers = Object.values(state.users).filter(user => { + var fullName = `${user.fName} ${user.lName}`; + //search by name + return fullName.toLowerCase().includes(state.searchTerm.toLowerCase()) + //search by email + || user.gmailAcc.toLowerCase().includes(state.searchTerm.toLowerCase()) + // search by team + || user.team.toLowerCase().includes(state.searchTerm.toLowerCase()) + }) + }, + getSearchTerm(state) { + return state.searchTerm; + }, + getSelectedUser(state) { + return state.selectedUser; + }, + getUsers(state) { + return state.users; + console.log(state.users) + }, + getDesks(state) { + return state.desks; + }, + getListVisibility(state) { + return state.searchTerm.length >=2 && Object.keys(state.selectedUser).length == 0; + }, + getAuthUser(state){ + return state.authUser; + } + }, + actions: { + fetchUsers({commit}) { + return users.getUsers(users, {commit}); + }, + fetchDesks({commit}) { + return desks.getDesks(desks, {commit}); + }, + checkUpdatedUser({commit, state}){ + return new Promise((resolve, reject) => { + Object.keys(state.users).forEach(user =>{ + if(user.deskref){ + commit("updateAuthUser"); + } else { + reject("No desk assigned.") + } + }); + }); + }, + //check if user is logged in + checkUserStatus({ commit, state }){ + return new Promise((resolve, reject) => { + firebase.auth().onAuthStateChanged((user) =>{ + if(user){ + commit("setAuthUser", user); + commit("updateUser", user); //only after auth user is caught, update users from database + resolve(user); + } else { + reject("User not logged in") + } + }); + }); + }, + updateTerm({ commit }, searchTerm) { + commit("updateTerm", searchTerm); + }, + selectUser({ commit }, selectedUser) { + commit("selectUser", selectedUser); + // console.log("Hello, this is selectUser", selectedUser) + }, + fetchFilteredUsers({commit}, filteredUsers) { + commit("fetchFilteredUsers", filteredUsers); + }, + fetchDesks({commit}) { + return desks.getDesks(desks, {commit}); + }, + checkUserStatus({ commit, state }){ + return new Promise((resolve, reject) => { + firebase.auth().onAuthStateChanged((user) => { + if(user){ + commit("setAuthUser", user); + commit("updateUser", user); //only after auth user is caught, get users from database + resolve(user); + } else { + reject("User not logged in") + } + }); + }); + }, + // fetchAuthUser({commit, state}){ + // return currentUser.getCurrentUser({users, commit}); + // }, + fetchCurrentUser({commit}, currentUser){ + commit("fetchCurrentUser", currentUser); + // console.log("this is fetchCurrentUser action", currentUser) + } + }, + mutations: { + setUsers(state, users) { + state.users = users; + // console.log("This is setUsers", users) + }, + setDesks(state, desks) { + state.desks = desks; + // console.log("This is setDesks", desks) + }, + setAuthUser( state, authUser ){ + state.authUser = authUser; + console.log("setAuthUser", authUser) + }, + updateUser(state) { + //assign deskref to user object. Waits for desks and users axios request + Object.values(state.users).forEach(user => { + if(user.desk) { + let desk = state.desks[user.desk]; + if (desk) { + user.deskref = desk; + } + //integrates the database user info into the authUser object + if (state.authUser && state.authUser.email == user.gmailAcc){ + state.authUser.userref = user; + } + + // integrates the authent. Google user to user in users object + if (state.authUser.email == user.gmailAcc){ + user.authUserRef = state.authUser; + } + } + }); + //adds userref to desks + Object.values(state.desks).forEach(desk => { + if(desk.user) { + let user = state.users[desk.user]; + if (user) { + desk.userref = user; + } + } + }); + }, + setSearchTerm(state) { + state.selectedUser = { }; + }, + updateTerm(state, searchTerm) { + state.searchTerm = searchTerm; + }, + selectUser(state, selectedUser) { + state.selectedUser = selectedUser; + }, + toggleMenu(state) { + state.hideMenu=!state.hideMenu; + }, + fetchFilteredUsers(state) { + state.filteredUsers = fetchFilteredUsers; + }, + updateUser(state) { + //assign deskref to user object. Waits for desks and users axios request + return Object.values(state.users).forEach(user => { + if(user.desk) { + let desk = state.desks[user.desk]; + if (desk) { + user.deskref = desk; + } + } + // if authent. user, add reference to users + if (state.authUser.email == user.gmailAcc) { + user.authUserRef = state.authUser; + } + }) + }, + setAuthUser(state, authUser){ + state.authUser = authUser; + // console.log("setAuthUser", authUser) + }, + //to add authuser reference to auth user + fetchAuthUser(state){ + return Object.values(state.users).forEach(user => { + if(user.authUserRef){ + let userRef = state.users[user]; + authUser.userRef = userRef; + } + }) + console.log("updateAuthUser", authUser) + }, + fetchCurrentUser(state) { + return state.currentUser = Object.values(state.users).filter(user => { + if (state.authUser.email == user.gmailAcc){ + state.currentUser = user; + } + }) + console.log("fetchCurrentUser mutation", currentUser) + } + } +}) diff --git a/static/data/person.json b/static/data/person.json index 4b06bb1..28f7424 100644 --- a/static/data/person.json +++ b/static/data/person.json @@ -1,5 +1,6 @@ -[ - { +users: { + + user1: { "fName": "Julian", "lName": "Kodlin", "id": "5d8f6a73-8d3a-4519-ba6c-7846e129edb8", @@ -389,4 +390,4 @@ "wiki":"https://de.wikipedia.org/wiki/SinnerSchrader", "image": "https://www.disneyclips.com/imagesnewb/images/daisysecret.gif" } -] \ No newline at end of file +} \ No newline at end of file diff --git a/static/fonts/Maison MG [WEB]/MaisonWEB-Bold.woff2 b/static/fonts/Maison MG [WEB]/MaisonWEB-Bold.woff2 deleted file mode 100644 index 6d840fb..0000000 Binary files a/static/fonts/Maison MG [WEB]/MaisonWEB-Bold.woff2 and /dev/null differ diff --git a/static/fonts/Maison MG [WEB]/MaisonWEB-Italic.woff2 b/static/fonts/Maison MG [WEB]/MaisonWEB-Italic.woff2 deleted file mode 100644 index 22a8472..0000000 Binary files a/static/fonts/Maison MG [WEB]/MaisonWEB-Italic.woff2 and /dev/null differ diff --git a/static/fonts/Maison MG [WEB]/MaisonWEB-Light.woff2 b/static/fonts/Maison MG [WEB]/MaisonWEB-Light.woff2 deleted file mode 100644 index a2b1319..0000000 Binary files a/static/fonts/Maison MG [WEB]/MaisonWEB-Light.woff2 and /dev/null differ diff --git a/static/fonts/Maison MG [WEB]/MaisonWEB-Regular.woff2 b/static/fonts/Maison MG [WEB]/MaisonWEB-Regular.woff2 deleted file mode 100644 index b30799e..0000000 Binary files a/static/fonts/Maison MG [WEB]/MaisonWEB-Regular.woff2 and /dev/null differ diff --git a/static/fonts/Maison MG [WEB]/MaisonWEB-Bold.woff b/static/fonts/maison/MaisonWEB-Bold.woff similarity index 100% rename from static/fonts/Maison MG [WEB]/MaisonWEB-Bold.woff rename to static/fonts/maison/MaisonWEB-Bold.woff diff --git a/src/assets/fonts/MaisonWEB-Bold.woff2 b/static/fonts/maison/MaisonWEB-Bold.woff2 similarity index 100% rename from src/assets/fonts/MaisonWEB-Bold.woff2 rename to static/fonts/maison/MaisonWEB-Bold.woff2 diff --git a/static/fonts/Maison MG [WEB]/MaisonWEB-Italic.woff b/static/fonts/maison/MaisonWEB-Italic.woff similarity index 100% rename from static/fonts/Maison MG [WEB]/MaisonWEB-Italic.woff rename to static/fonts/maison/MaisonWEB-Italic.woff diff --git a/src/assets/fonts/MaisonWEB-Italic.woff2 b/static/fonts/maison/MaisonWEB-Italic.woff2 similarity index 100% rename from src/assets/fonts/MaisonWEB-Italic.woff2 rename to static/fonts/maison/MaisonWEB-Italic.woff2 diff --git a/static/fonts/Maison MG [WEB]/MaisonWEB-Light.woff b/static/fonts/maison/MaisonWEB-Light.woff similarity index 100% rename from static/fonts/Maison MG [WEB]/MaisonWEB-Light.woff rename to static/fonts/maison/MaisonWEB-Light.woff diff --git a/src/assets/fonts/MaisonWEB-Light.woff2 b/static/fonts/maison/MaisonWEB-Light.woff2 similarity index 100% rename from src/assets/fonts/MaisonWEB-Light.woff2 rename to static/fonts/maison/MaisonWEB-Light.woff2 diff --git a/static/fonts/Maison MG [WEB]/MaisonWEB-Regular.woff b/static/fonts/maison/MaisonWEB-Regular.woff similarity index 100% rename from static/fonts/Maison MG [WEB]/MaisonWEB-Regular.woff rename to static/fonts/maison/MaisonWEB-Regular.woff diff --git a/src/assets/fonts/MaisonWEB-Regular.woff2 b/static/fonts/maison/MaisonWEB-Regular.woff2 similarity index 100% rename from src/assets/fonts/MaisonWEB-Regular.woff2 rename to static/fonts/maison/MaisonWEB-Regular.woff2 diff --git a/static/fonts/Maison MG [WEB]/Milieu Grotesque Webfont License.pdf b/static/fonts/maison/Milieu Grotesque Webfont License.pdf similarity index 100% rename from static/fonts/Maison MG [WEB]/Milieu Grotesque Webfont License.pdf rename to static/fonts/maison/Milieu Grotesque Webfont License.pdf diff --git a/static/fonts/Maison MG [WEB]/Milieu Grotesque Webfonts Tech Info.pdf b/static/fonts/maison/Milieu Grotesque Webfonts Tech Info.pdf similarity index 100% rename from static/fonts/Maison MG [WEB]/Milieu Grotesque Webfonts Tech Info.pdf rename to static/fonts/maison/Milieu Grotesque Webfonts Tech Info.pdf diff --git a/static/images/Seat.svg b/static/images/Seat.svg new file mode 100644 index 0000000..3aebe8a --- /dev/null +++ b/static/images/Seat.svg @@ -0,0 +1,14 @@ + + + Seat + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/SeatDesk.svg b/static/images/SeatDesk.svg new file mode 100644 index 0000000..3f60ecd --- /dev/null +++ b/static/images/SeatDesk.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/Table.svg b/static/images/Table.svg new file mode 100644 index 0000000..14b50c1 --- /dev/null +++ b/static/images/Table.svg @@ -0,0 +1,15 @@ + + + Rectangle 2 + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/close-black-icon.png b/static/images/close-black-icon.png new file mode 100644 index 0000000..6bc4372 Binary files /dev/null and b/static/images/close-black-icon.png differ diff --git a/static/images/compressed_map.svg b/static/images/compressed_map.svg new file mode 100644 index 0000000..56b90f7 --- /dev/null +++ b/static/images/compressed_map.svg @@ -0,0 +1,3801 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Völckersstraße + + + Völckersstraße + + + Borselstraße + + + + access via + + + 3rd floor + + + + + + + + room gz + + + + + S2S + + + + House + + + ground floor only + + + + + B + + + + House + + + + + B + + + + House + + + third floor only + + + third floor only + + + + + H + + + + House + + + + + H + + + + House + + + + + Team VWA CMS + + + Team VWA + + + Team VWA + + + Room + + + Brody + + + Bodo + + + Room + + + Adrian + + + + Feel Good + + + Room + + + + Ada + + + Room + + + Room + + + + + + + S2S + + + + ground floor only + + + + + S2S + + + + ground floor only + + + + + + + room gz + + + room gz + + + room gz + + + room gz + + + + + + S2S + + + + House + + + ground floor only + + + + + B + + + + House + + + + + B + + + + House + + + third floor only + + + third floor only + + + + + + room gz + + + room gz + + + room gz + + + room gz + + + + + + S2S + + + + House + + + ground floor only + + + + + B + + + + House + + + + + B + + + + House + + + third floor only + + + third floor only + + + + + + room gz + + + room gz + + + room gz + + + room gz + + + + + + + B + + + + House + + + + + B + + + + House + + + third floor only + + + third floor only + + + + + + + + Völckersstraße + + + Völckersstraße + + + Borselstraße + + + + + + + B + + + + House + + + + + H + + + + House + + + + + H + + + + House + + + + + A-4 + + + + House-Floor + + + + + A-4 + + + + House-Floor + + + + + A-4 + + + + House-Floor + + + + + B + + + + House + + + + + S2S + + + + House + + + third floor only + + + third floor only + + + ground floor only + + + + + access via + + + 3rd floor + + + + + + + restricted area + + + + + + + + + + + + + + + B-3 + + + + House-Floor + + + + + H-3 + + + + House-Floor + + + + + H-3 + + + + House-Floor + + + + + A-3 + + + + House-Floor + + + + + A-3 + + + + House-Floor + + + + + A-3 + + + + House-Floor + + + + + B-3 + + + + House-Floor + + + + + S2S + + + + House + + + ground floor only + + + + + access via + + + 3rd floor + + + + + + + + restricted area + + + + + + + + + + + + + + + B + + + + House + + + + + H-2 + + + + House-Floor + + + + + H-2 + + + + House-Floor + + + + + A-2 + + + + House-Floor + + + + + A-2 + + + + House-Floor + + + + + A-2 + + + + House-Floor + + + + + B + + + + House + + + + + S2S + + + + House + + + third floor only + + + third floor only + + + ground floor only + + + + + access via + + + 3rd floor + + + + + + + + restricted area + + + + + + + + + + + + + + + B + + + + House + + + + + H-1 + + + + House-Floor + + + + + H-1 + + + + House-Floor + + + + + A-1 + + + + House-Floor + + + + + A-1 + + + + House-Floor + + + + + A-1 + + + + House-Floor + + + + + B + + + + House + + + + + S2S + + + + House + + + third floor only + + + third floor only + + + ground floor only + + + + + access via + + + 3rd floor + + + + + + + + restricted area + + + + + + + + + + + + + + + B + + + + House + + + + + H-0 + + + + House-Floor + + + + + H-0 + + + + House-Floor + + + + + A-0 + + + + House-Floor + + + + + A-0 + + + + House-Floor + + + + + A-0 + + + + House-Floor + + + + + B + + + + House + + + + + S2S-0 + + + + House-Floor + + + third floor only + + + third floor only + + + + + access via + + + 3rd floor + + + + + + + + Völckersstraße + + + Borselstraße + + + + + S2S + + + + + House + + + + + B + + + + + S2 + + + + + + S2 + + + House + + + + + A + + + + + + + S2 + + + + Hous + + + e + + + + + + H + + + + + + diff --git a/static/images/default-user-icon.png b/static/images/default-user-icon.png new file mode 100644 index 0000000..c6b56c3 Binary files /dev/null and b/static/images/default-user-icon.png differ diff --git a/static/images/desktop.ini b/static/images/desktop.ini new file mode 100644 index 0000000..65831ce --- /dev/null +++ b/static/images/desktop.ini @@ -0,0 +1,3 @@ +[LocalizedFileNames] +compressed_map.svg=@compressed_map,0 +wikipedia.png=@wikipedia,0 diff --git a/static/images/ic-date-range-black-24.png b/static/images/ic-date-range-black-24.png new file mode 100644 index 0000000..fade642 Binary files /dev/null and b/static/images/ic-date-range-black-24.png differ diff --git a/static/images/mail-icon.png b/static/images/mail-icon.png new file mode 100644 index 0000000..8a49823 Binary files /dev/null and b/static/images/mail-icon.png differ diff --git a/src/assets/images/mapedited.svg b/static/images/mapedited.svg similarity index 100% rename from src/assets/images/mapedited.svg rename to static/images/mapedited.svg diff --git a/static/images/menu-black-icon.png b/static/images/menu-black-icon.png new file mode 100644 index 0000000..4e0286b Binary files /dev/null and b/static/images/menu-black-icon.png differ diff --git a/static/images/mobile-icon.png b/static/images/mobile-icon.png new file mode 100644 index 0000000..091459d Binary files /dev/null and b/static/images/mobile-icon.png differ diff --git a/static/images/move-logo.png b/static/images/move-logo.png new file mode 100644 index 0000000..067202c Binary files /dev/null and b/static/images/move-logo.png differ diff --git a/static/images/phone-icon.png b/static/images/phone-icon.png new file mode 100644 index 0000000..709b38a Binary files /dev/null and b/static/images/phone-icon.png differ diff --git a/static/images/s-2-logo.png b/static/images/s-2-logo.png new file mode 100644 index 0000000..da3d498 Binary files /dev/null and b/static/images/s-2-logo.png differ diff --git a/src/assets/images/search-icon.png b/static/images/search-icon.png old mode 100755 new mode 100644 similarity index 100% rename from src/assets/images/search-icon.png rename to static/images/search-icon.png diff --git a/static/images/skillwill.png b/static/images/skillwill.png new file mode 100644 index 0000000..52f02fd Binary files /dev/null and b/static/images/skillwill.png differ diff --git a/static/images/slack-mark-monochrome-black.png b/static/images/slack-mark-monochrome-black.png new file mode 100644 index 0000000..8f4e048 Binary files /dev/null and b/static/images/slack-mark-monochrome-black.png differ diff --git a/static/images/wikipedia.png b/static/images/wikipedia.png new file mode 100644 index 0000000..d29a736 Binary files /dev/null and b/static/images/wikipedia.png differ diff --git a/static/style/hello.css b/static/style/hello.css deleted file mode 100644 index e69de29..0000000 diff --git a/styles/css/auth.component.css b/styles/css/auth.component.css new file mode 100644 index 0000000..ce8a04a --- /dev/null +++ b/styles/css/auth.component.css @@ -0,0 +1,98 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.login { + position: absolute; + width: 100%; + min-height:100vh; + background-color: #1e212a; + color: #f4f7fa; + text-align: center; + z-index: -2; +} + +.login #s2-logo { + position: absolute; + top: 10px; + left: 10px; + max-height:60%; + width: auto; + height: 30px; +} + +.login #move-logo { + display: block; + margin: 0 auto; + margin-top: 110px; + max-height:20%; + width: auto; +} + +.login h1.login__headline { + margin-top: 60px; + font-size: 24px; + letter-spacing: 1.3px; +} +/*Login text*/ +.login p.login__text { + margin-top: 30px; + font-size: 18px; + letter-spacing: 0.8px; +} + +.login #loader { + margin-top: 30px; +} + +/* Hide firebase text*/ +.login span.firebaseui-idp-text.firebaseui-idp-text-short { + display: none; +} + +/* Hide text within button*/ +.login span.firebaseui-idp-text.firebaseui-idp-text-long { + display: none; +} + +/* Login button container*/ +.login div#firebaseui-auth-container { + margin-top: 80px; +} + +/* Google button list item*/ +.login li.firebaseui-list-item { + list-style-type: none; +} + +/* Login button */ +.login button.firebaseui-idp-button.mdl-button.mdl-js-button.mdl-button--raised.firebaseui-idp-google.firebaseui-id-idp-button { + position: absolute; + left: 50%; + transform: translate(-50%, 0); + top: 460px; + width: 170px; + height: 60px; + background-color: transparent; + border: 2px solid #f4f7fa; + padding: 10px; + cursor: pointer; + z-index: 1; +} + +/*Style Google logo*/ +.login img.firebaseui-idp-icon { + display: none; +} +/* lays underneath */ +.login h1.button__text { + position: absolute; + left: 50%; + transform: translate(-50%, 0); + top: 475px; + /*margin-top: 15px;*/ + font-size: 22px; + z-index: -1; +} diff --git a/styles/css/dashboard.component.css b/styles/css/dashboard.component.css new file mode 100644 index 0000000..2ac7a46 --- /dev/null +++ b/styles/css/dashboard.component.css @@ -0,0 +1,9 @@ +body { + font-family: 'MaisonNeue', sans-serif; +} + + +.menu-visible { + /*put transition here*/ +} + diff --git a/styles/css/header.component.css b/styles/css/header.component.css new file mode 100644 index 0000000..f7c5836 --- /dev/null +++ b/styles/css/header.component.css @@ -0,0 +1,43 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/*hide logo for small screens*/ +@media (max-width: 850px) { + .app-header__logos { + display: none; + } +} +.app-header { + position: relative; + width: 100%; + height: 65px; + background-color: #1e212a; +} + +.app-header__logos { + position: absolute; + width: 100%; + height: 100%; +} + +.app-header #s2-logo { + float: left; + margin-left: 10px; + margin-top: 20px; + bottom: 0px; + width: 130px; + height: auto; +} + +.app-header #move-logo { + position: absolute; + display: block; + left: 50%; + transform: translate(-50%, 0); + max-height:100%; + width: auto; +} + diff --git a/styles/css/map.component.css b/styles/css/map.component.css new file mode 100644 index 0000000..39eccbe --- /dev/null +++ b/styles/css/map.component.css @@ -0,0 +1,41 @@ +.map--wrapper svg { + position: relative; + + /*width: 100%;*/ + height: calc(100vh - 70px); + width: auto; +} +/* + .mapHB { + width: 100%; + height: 100vh; + position: fixed; + left: 0; + z-index: 0; + top: 250px; + } + + .myMap { + position: relative; + } + + .svg-pan-zoom_viewport { + max-width: 100%; + } + + #svg-pan-zoom-controls { + display: none; + } + + .floorNavigation { + z-index: 200; + position:fixed; + top: 50%; + right:10%; + } + + .floorList { + position: absolute; + width: 30px; + z-index: 200; + }*/ \ No newline at end of file diff --git a/styles/css/menu.component.css b/styles/css/menu.component.css new file mode 100644 index 0000000..b757dca --- /dev/null +++ b/styles/css/menu.component.css @@ -0,0 +1,276 @@ +*{ + margin: 0; + padding: 0; +} + +/*include padding and border into total width and height of elements*/ +*{ + box-sizing: border-box; +} + +/* MEDIA QUERIES + +/* Define max width for mobile devices */ +@media (min-width: 415px) { + .burger-menu { + max-width: 300px; + } +} + +/*Hide feedback if screen height is insufficient */ +@media (max-height: 558px) { + .feedback-visible { + display: none; + } +} + +/*Make menu cover anything else on page*/ +.menu__wrapper { + position: relative; + float: right; + width: 100%; + height: 100vh; + z-index: 10; +} + +/*Make burger menu take up 75% of the page and align right*/ +.burger-menu { + position: relative; + background-color: #f4f7fa; + width: 75%; + height: 100%; + top: 0; + left: 0; + float: right; + border: 2px #1e212a; + border-style: solid solid none solid; +} + +.menu-visible { + overflow: hidden; + max-height: 0; + /*add transition here*/ +} + + /*25% column to cover content of the page, used to toggle the menu. Hidden desktop/iPad*/ +.menu__toggle { + display: block; + position: absolute; + background-color: black; + width: 100%; + height: 100%; + opacity: 0.3; + float: left; +} + +/*remove default list styles */ +li { + list-style: none; +} + +/*Underline links*/ +a:hover { + text-decoration: underline; +} + +/* USER INFORMATION */ + .user-info { + position: relative; + z-index: 0; + overflow: hidden; + border-bottom: solid 2px #1e212a; +} + +/* CSS trick to keep user image 4x3 format on various screen sizes*/ +.user-info:before { + content: ''; + display: block; + padding-bottom: 75%; +} + +/* style user image*/ +img { + position: absolute; + width: 100%; + margin: auto; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 1; +} + +img#btn__close { + position: absolute; + margin: initial; + width: 30px; + height: 30px; +} + +img#btn__close:hover { + cursor: pointer; +} + +/* style user name*/ +.user-text h2 { + position: absolute; + font-size: 26px; + font-weight: bold; + letter-spacing: 1px; + color: #f4f7fa; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9); + z-index: 2; + bottom: 20px; + left: 50%; + margin-right: -50%; + transform: translate(-50%, -50%); +} + +/* style desk location of user */ +.desk-text { + position: absolute; + width: 100%; + z-index: 2; + bottom: 18px; +} + +/* align desk location central*/ +.desk-text ul { + position: absolute; + left: 50%; + margin-right: -50%; + transform: translate(-50%, -50%); +} + +.desk-text ul li { + display: inline; + font-size: 18px; + font-weight: bold; + letter-spacing: 1px; + color: #1e212a; + padding:1px; + background-color: #03ffb7; + margin: 8px; +} + +/* LOCATION NAVIGATION */ + +/*style location navigation*/ +.nav { + position: relative; + width: 100%; + background-color: #f4f7fa; +} + +/* Define styles for all links*/ +.nav__locations a { + display: block; + text-decoration: none; + line-height: 60px; + font-size: 20px; + letter-spacing: 0.8px; + font-weight: bold; + color: #1e212a; + text-align: center; +} + +ul.nav__locations li { + border-bottom: solid 2px #1e212a; +} + +/* invert colors of parent active routes,*/ +.active > a { + color: #f4f7fa; +} + +.active > a:link { + background-color: #1e212a; +} + +/* Hide submenu by default*/ +ul.submenu { + display:none; +} + +ul.submenu-visible.submenu { + display:flex; +} + +ul.submenu li { + border: 2px #1e212a; + border-style: none solid solid none; + width: 50%; +} + +.submenu li:nth-child(2) { + border-right: 0px; +} + +/* STYLE FEEDBACK/LOGOUT Container*/ +.menu__feedback { + position: absolute; + display: inline; + bottom: 0px; + width: 100%; + border-bottom: solid 2px #1e212a; + /*/text-align: center;*/ + padding-bottom: 10px; + font-size: 16px; +} + +/*Style feedback link*/ +[href="mailto:marie.klaus@code.berlin?subject= Move App user feedback"] { + position: relative; + float: left; + padding-left: 20%; + display: inline; + text-decoration: none; + font-weight: bold; + color: #1e212a; +} + +/*.menu__feedback p, { + display: inline; + font-size: 16px; +}*/ + +/*add some whitespace between feedback link and impressum*/ +.menu__feedback p { + /*padding-left: 12px; */ +} + + +a#menu__logout { + position: relative; + float: right; + padding-right: 20%; + text-decoration: none; + display: inline; + font-weight: bold; + color: #1e212a; +} + +a#menu__logout:hover { + text-decoration: underline; +} + +/*TRANSITIONS*/ + +/* Set initial state of submenu. + Set it to max-height: 0, and hide the overflowing content. + Use a transition to fade-in content. +*/ +/*.submenu-visible { + overflow: hidden; + max-height: 0; + -webkit-transition: all 3s ease-out; +} + +.menu-visible { + overflow: hidden; + max-height: 0; + -webkit-transition: width 1s; + transition-timing-function: ease-in; + -webkit-transition-delay: 1s; + transition-delay: 1s; +}*/ diff --git a/styles/css/ottensen.component.css b/styles/css/ottensen.component.css new file mode 100644 index 0000000..50b8dd0 --- /dev/null +++ b/styles/css/ottensen.component.css @@ -0,0 +1,143 @@ +*{ + margin: 0; + padding: 0; +} + +*{ + box-sizing: border-box; +} + +.map { + width: 100%; + z-index: 1; +} + +.dropdown { + position: relative; + width: 100%; + height: 100%; +} + +.dropdown-toggle { + background-color: white; + width: 48px; + height: 60px; + z-index: -2; +} + +.dropdown-menu { + position: absolute; + color: white; + background-color: #1e212a; + border-radius: 5px; + border:1px solid black; + z-index: 900; + padding: 0; + overflow: hidden; + font-size: small; + font-family: Arial; + line-height: 2em; + word-spacing: 0; + top: 112px; + left: 125px; + text-align: center; + font-size: 16px; + font-weight: 700; +} + +@media (max-width: 890px) { + .dropdown-menu { + width: 35%; + min-height: 30vh; + } + .dropdown-menu input { + position: relative; + top: 20px; + } +} + +@media (max-width: 600px) and (min-width: 300px) { + .dropdown-menu { + width: 45%; + min-height: 30vh; + } + .dropdown-menu input { + position: relative; + top: 20px; + } +} + +@media (min-width: 900px) { + .dropdown-menu { + width: 20%; + min-height: 25vh; + } + .dropdown-menu input { + position: relative; + top: 5px; + } +} + +.dropdown-menu a { + font-size: 1.25em; + color: #00C; + padding: .25em 2em .25em 1em; + text-decoration: none; + background: white; + display: block; + cursor: pointer; +} + +.dropdown-menu a:hover { + background: #00C; + color: white; +} + +.dropdown-menu a { + font-size: 1.25em; + color: #00C; + padding: .25em 2em .25em 1em; + text-decoration: none; + background: white; + display: block; + cursor: pointer; +} + +.dropdown-menu a:hover { + background: #00C; + color: white; +} + +.seat { + width: 50px; + height: 50px; + background-image: url("../../static/images/SeatDesk.svg"); + background-repeat: no-repeat; + background-position: center; + color: transparent; + position: absolute; + cursor: pointer; + border: none; +} + +.seat__image { + position: absolute; + width: 23px; + left: 14px; +} + +.v--modal-overlay { + background: black; +} + +#menu-button { + color: black; + background-color:#03ffb7; + border: none; + cursor: pointer; + font-size: 14px; + width: 120px; + border: 1px solid black; + border-radius: 5px; + +} \ No newline at end of file diff --git a/styles/css/profile.component.css b/styles/css/profile.component.css new file mode 100644 index 0000000..bf1c465 --- /dev/null +++ b/styles/css/profile.component.css @@ -0,0 +1,156 @@ +f*, *:before, *:after { + box-sizing: border-box; +} + +*{ + margin: 0; + padding: 0; +} +/*Set max width for search for non-smartphone devices.*/ +@media (min-width: 450px) { + .profile { + max-width: 350px; + } +} +/* Shrink icons for very small sreens*/ +@media (max-width: 330px) { +.profile__user-deep-links img { + max-width: 25px; + height: auto; + } +} + +@media(min-height: 700px) { + .profile { + max-height: 300px; + } +} + +/*PROFILE BOX*/ +.profile { + position: absolute; + top: 60px; + width: 100%; + height: calc(100vh - 80px); + /* Made to fit iPhone X as biggest smartphone screen*/ + max-height: 727px; + background-color: #f4f7fa; + color: #1e212a; + border: 2px solid #1e212a; +} + +/* position user image*/ +.profile__img{ + position: relative; + width: 100%; + height: 190px; + overflow: hidden; +} + +.profile__img img { + position: absolute; + width: 100%; + margin: auto; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 1; +} + +/* POSITION USER INFO*/ +.profile__user-info { + position: relative; + top: 10px; + text-align: center; +} + +.profile__user-info h1 { + font-size: 24px; + padding-bottom: 5px; +} + +/* STYLE DESK INFO*/ +.profile__user-info ul li { + position: relative; + display: inline; + top: 4px; + font-size: 18px; + font-weight: bold; + letter-spacing: 1px; + background-color: #03ffb7; + margin-right: 4px; +} + + + +/* JOB TITLE AND TEAM INFO*/ +.profile__user-info h2 { + position: relative; + top: 10px; + font-size: 16px; + line-height: 1.5; + letter-spacing: 0.8px; +} + +/* LINE SEPARATOR*/ +.profile__line-separator { + position: relative; + top: 30px; + height: 2px; + width: 75%; + margin: 0 auto; + border-bottom: 2px solid #1e212a; +} + +/*USER CONTACT INFO*/ +.profile__user-contact { + position: relative; + top: 35px; + margin: 0 auto; + font-size: 14px; + font-weight: bold; +} + +.profile__user-contact img { + position: relative; + width: 15px; + height: auto; +} + +/*remove styles from links*/ +.profile__user-contact a { + text-decoration: none; + color: #1e212a; +} + +#mobile-icon { + width: 13px; +} + +.profile__user-contact td { + padding: 5px; +} + +/* USER DEEP LINK ICONS */ +.profile__user-deep-links { + position: relative; + display: inline; + top: 40px; + margin-left: 10%; +} + +.profile__user-deep-links img { + position: relative; + width: 40px; + height: auto; + margin-right: 20px; +} + +#wiki-icon { + position: relative; + top: 10px; + left: 5px; + width: 65px; + height: auto; +} \ No newline at end of file diff --git a/styles/css/search.component.css b/styles/css/search.component.css index e69de29..abd8784 100644 --- a/styles/css/search.component.css +++ b/styles/css/search.component.css @@ -0,0 +1,196 @@ +f*, *:before, *:after { + box-sizing: border-box; +} + +*{ + margin: 0; + padding: 0; +} + +/*Set max width for search for non-smartphone devices.*/ +@media (min-width: 450px) { + .search { + max-width: 350px; + } +} + +/*style search box*/ +.search { + position: absolute; + top: 12px; + float: right; + right: calc(10px); + height: 45px; + width: calc(100% - 20px); + border: none; + background-color: #f4f7fa; + background-image: url('../../static/images/search-icon.png'); + background-repeat: no-repeat; + background-position: 2% 50%; +} + +/* Placeholder text search input*/ + /* Chrome/Opera/Safari */ +::-webkit-input-placeholder { + color: #1e212a; + opacity: 0.6; + font-family: 'MaisonNeue', sans-serif; +} +/* Firefox 19+ */ +::-moz-placeholder { + color: #1e212a; + opacity: 0.6; + font-family: 'MaisonNeue', sans-serif; +} + +/* IE 10+ */ +:-ms-input-placeholder { + color: #1e212a; + opacity: 0.6; + font-family: 'MaisonNeue', sans-serif; +} + +/* Firefox 18- */ +:-moz-placeholder { + color: #1e212a; + opacity: 0.6; + font-family: 'MaisonNeue', sans-serif; +} + +/*style search input*/ +.search__input { + position: absolute; + left: 40px; + top: 5px; + width: 75%; + height: 40px; + background-color: #f4f7fa; + border: none; + font-family: 'MaisonNeue', sans-serif; + font-size: 16px; +} + +/* magnifying glass */ +#search-icon { + width: 20px; + height: 20px; +} + +/*remove default input outline*/ +input:focus, textarea:focus { + outline: none; +} + +/* burger menu icon*/ +div.btn { + position: absolute; + right:20px; + float: right; + width: 40px; + height: 40px; + background-image: url("../../static/images/menu-black-icon.png"); +} + +div.btn:hover { + cursor: pointer; +} + +/* Search result list */ +.search__list { + position: absolute; + top: 65px; + width: 100%; + border: 2px solid #1e212a; + color: #1e212a; + z-index: 2; + background-color: white; +} + +.search__item { + position: relative; + padding: 10px; +} + +.search__list__thumbnail { + position: relative; + width: 60px; + height: 60px; + border: 2px solid #1e212a; + overflow: hidden; +} + +/*make picture width slighty bigger to make 4x3 pics fit into square*/ +.search__list__thumbnail img { + position: absolute; + width: 100%; + height: auto; +} + +.search__list__name { + position: absolute; + left: 80px; + top: 15px; + font-size: 18px; + font-weight: bold; + letter-spacing: 0.5px; + color: #1e212a; +} + +/* display desk location*/ +.search__list__desk { + position: absolute; + left: 80px; + top: 42px; +} + +.search__list__desk ul li { + display: inline; + font-size: 18px; + font-weight: bold; + letter-spacing: 1px; + color: #1e212a; + background-color: #03ffb7; + margin-right: 4px; +} + +.search__no-user { + position: absolute; + top:70px; + width: 100%; + text-align: center; + border: 2px #1e212a; + border-style: none solid solid solid; +} + +.search__no-user p { + position: relative; + margin: 3px; + z-index: 10; +} + +.search__no-user img { + position: relative; + width: 100%; + height: auto; + top: 3px; +} + +.btn__clear-search { +position: relative; +width: 30px; +height: auto; +float: right; +z-index: 10; +} + +.btn__clear-search:hover { + cursor: pointer; +} + +#btn__clear-search-profile { + top: 60px; +} + +.v--modal-box v--modal { + +} \ No newline at end of file