Skip to content

Commit

Permalink
Add logo for Involved Organizations and Companies (#133)
Browse files Browse the repository at this point in the history 
* Add logo for Involved Organizations and Companies

* Add further Logos

* Adapt padding of v-sheet

* Add further light/dark logos

* Add hover for logos

* Harmonize IESE logos

* Fix case of logo filename
  • Loading branch information
@seicke
seicke authored Dec 7, 2024
1 parent c04d5bd commit 9a2f54e
Show file tree
Hide file tree
Showing 13 changed files with 338 additions and 25 deletions.
Binary file added aas-web-ui/src/assets/ARENA2036_Logo_dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added aas-web-ui/src/assets/ARENA2036_Logo_light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added aas-web-ui/src/assets/DFKI_Logo_dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added aas-web-ui/src/assets/DFKI_Logo_light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added aas-web-ui/src/assets/HARTING_Logo_dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added aas-web-ui/src/assets/HARTING_Logo_light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed aas-web-ui/src/assets/HTW_Logo.png
View file
Binary file not shown.
93 changes: 93 additions & 0 deletions aas-web-ui/src/assets/HTW_Logo_dark.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
91 changes: 91 additions & 0 deletions aas-web-ui/src/assets/HTW_Logo_light.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added aas-web-ui/src/assets/IDTA_Logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 19 additions & 0 deletions aas-web-ui/src/assets/IESE_Logo_dark.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 aas-web-ui/src/assets/IESE_Logo.svg → aas-web-ui/src/assets/IESE_Logo_light.svg
View file
File renamed without changes
160 changes: 135 additions & 25 deletions aas-web-ui/src/components/About.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,31 +5,125 @@
<br /><br />

<h2>Involved Organizations and Companies</h2>
<v-sheet class="mt-5" theme="light" rounded>
<v-row align="center" justify="center">
<v-col cols="4" class="pa-6">
<v-img src="Basyx_Logo.svg">
<template #sources>
<source srcset="@/assets/BaSyx_Logo.svg" />
</template>
</v-img>
</v-col>
<v-col cols="4" class="pa-6">
<v-img src="HTW_Logo.png">
<template #sources>
<source srcset="@/assets/HTW_Logo.png" />
</template>
</v-img>
</v-col>
<v-col cols="4" class="pa-6">
<v-img src="IESE_Logo.svg">
<template #sources>
<source srcset="@/assets/IESE_Logo.svg" />
</template>
</v-img>
</v-col>
</v-row>
</v-sheet>
<v-row align="center" justify="center" class="mt-5">
<v-col cols="3" class="pa-6">
<v-hover>
<template #default="{ props: hoverProps, isHovering }">
<a href="https://basyx.org/" target="_blank">
<v-img
src="Basyx_Logo.svg"
v-bind="hoverProps"
:style="{ filter: isHovering ? 'grayscale(0%)' : 'grayscale(100%)' }">
<template #sources>
<source srcset="@/assets/BaSyx_Logo.svg" />
</template>
</v-img>
</a>
</template>
</v-hover>
</v-col>
<v-col cols="3" class="pa-6">
<v-hover v-slot="{ props: hoverProps, isHovering }">
<a href="https://www.htw-berlin.de/" target="_blank">
<v-img
:src="isDark ? 'HTW_Logo_dark.svg' : 'HTW_Logo_light.svg'"
v-bind="hoverProps"
:style="{ filter: isHovering ? 'grayscale(0%)' : 'grayscale(100%)' }">
<template v-if="isDark" #sources>
<source srcset="@/assets/HTW_Logo_dark.svg" />
</template>
<template v-else #sources>
<source srcset="@/assets/HTW_Logo_light.svg" />
</template>
</v-img>
</a>
</v-hover>
</v-col>
<v-col cols="3" class="pa-6">
<v-hover v-slot="{ props: hoverProps, isHovering }">
<a href="https://www.iese.fraunhofer.de/" target="_blank">
<v-img
:src="isDark ? 'IESE_Logo_dark.svg' : 'IESE_Logo_light.svg'"
v-bind="hoverProps"
:style="{ filter: isHovering ? 'grayscale(0%)' : 'grayscale(100%)' }">
<template v-if="isDark" #sources>
<source srcset="@/assets/IESE_Logo_dark.svg" />
</template>
<template v-else #sources>
<source srcset="@/assets/IESE_Logo_light.svg" />
</template>
</v-img>
</a>
</v-hover>
</v-col>
<v-col cols="3" class="pa-6">
<v-hover v-slot="{ props: hoverProps, isHovering }">
<a href="https://industrialdigitaltwin.org/" target="_blank">
<v-img
src="IDTA_Logo.png"
v-bind="hoverProps"
:style="{ filter: isHovering ? 'grayscale(0%)' : 'grayscale(100%)' }">
<template #sources>
<source srcset="@/assets/IDTA_Logo.png" />
</template>
</v-img>
</a>
</v-hover>
</v-col>
</v-row>
<v-row align="center" justify="center">
<v-col cols="3" class="pa-6">
<v-hover v-slot="{ props: hoverProps, isHovering }">
<a href="https://www.harting.com/" target="_blank">
<v-img
:src="isDark ? 'HARTING_Logo_dark.png' : 'HARTING_Logo_light.png'"
v-bind="hoverProps"
:style="{ filter: isHovering ? 'grayscale(0%)' : 'grayscale(100%)' }">
<template v-if="isDark" #sources>
<source srcset="@/assets/HARTING_Logo_dark.png" />
</template>
<template v-else #sources>
<source srcset="@/assets/HARTING_Logo_light.png" />
</template>
</v-img>
</a>
</v-hover>
</v-col>
<v-col cols="3" class="pa-6">
<v-hover v-slot="{ props: hoverProps, isHovering }">
<a href="https://www.dfki.de/" target="_blank">
<v-img
:src="isDark ? 'DFKI_Logo_dark.png' : 'DFKI_Logo_light.png'"
v-bind="hoverProps"
:style="{ filter: isHovering ? 'grayscale(0%)' : 'grayscale(100%)' }">
<template v-if="isDark" #sources>
<source srcset="@/assets/DFKI_Logo_dark.png" />
</template>
<template v-else #sources>
<source srcset="@/assets/DFKI_Logo_light.png" />
</template>
</v-img>
</a>
</v-hover>
</v-col>
<v-col cols="3" class="pa-6">
<v-hover v-slot="{ props: hoverProps, isHovering }">
<a href="https://arena2036.de/" target="_blank">
<v-img
:src="isDark ? 'ARENA2036_Logo_dark.png' : 'ARENA2036_Logo_light.png'"
v-bind="hoverProps"
:style="{ filter: isHovering ? 'grayscale(0%)' : 'grayscale(100%)' }">
<template v-if="isDark" #sources>
<source srcset="@/assets/ARENA2036_Logo_dark.png" />
</template>
<template v-else #sources>
<source srcset="@/assets/ARENA2036_Logo_light.png" />
</template>
</v-img>
</a>
</v-hover>
</v-col>
</v-row>

<br /><br />

Expand Down Expand Up @@ -131,10 +225,19 @@

<script lang="ts">
import { defineComponent } from 'vue';
import { useTheme } from 'vuetify';
export default defineComponent({
name: 'About',
setup() {
const theme = useTheme();
return {
theme, // Theme Object
};
},
data() {
return {
contributors: [
Expand Down Expand Up @@ -182,6 +285,13 @@
};
},
computed: {
// Check if the current Theme is dark
isDark() {
return this.theme.global.current.value.dark;
},
},
methods: {
getImageUrl(imageName: string) {
return new URL(`../assets/Contributors/${imageName}`, import.meta.url).href;
Expand Down

0 comments on commit 9a2f54e

Please sign in to comment.