restructure presentation layer
- Move most GUI related code to /presentation - Move components to /components (separate from bootstrap and style) - Move shared components helpers to /components/shared - Rename Bootstrapping to bootstrapping to enforce same naming convention in /presentation
This commit is contained in:
72
src/presentation/components/TheFooter/DownloadUrlList.vue
Normal file
72
src/presentation/components/TheFooter/DownloadUrlList.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<span
|
||||
class="container"
|
||||
v-bind:class="{ 'container_unsupported': !hasCurrentOsDesktopVersion, 'container_supported': hasCurrentOsDesktopVersion }">
|
||||
<span class="description">
|
||||
<font-awesome-icon class="description__icon" :icon="['fas', 'desktop']" />
|
||||
<span class="description__text">For desktop:</span>
|
||||
</span>
|
||||
<span class="urls">
|
||||
<span class="urls__url" v-for="os of supportedDesktops" v-bind:key="os">
|
||||
<DownloadUrlListItem :operatingSystem="os" />
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { Environment } from '@/application/Environment/Environment';
|
||||
import { OperatingSystem } from '@/domain/OperatingSystem';
|
||||
import DownloadUrlListItem from './DownloadUrlListItem.vue';
|
||||
|
||||
@Component({
|
||||
components: { DownloadUrlListItem },
|
||||
})
|
||||
export default class DownloadUrlList extends Vue {
|
||||
public readonly supportedDesktops: ReadonlyArray<OperatingSystem>;
|
||||
public readonly hasCurrentOsDesktopVersion: boolean = false;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
const supportedOperativeSystems = [OperatingSystem.Windows, OperatingSystem.Linux, OperatingSystem.macOS];
|
||||
const currentOs = Environment.CurrentEnvironment.os;
|
||||
this.supportedDesktops = supportedOperativeSystems.sort((os) => os === currentOs ? 0 : 1);
|
||||
this.hasCurrentOsDesktopVersion = supportedOperativeSystems.includes(currentOs);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/presentation/styles/media.scss";
|
||||
|
||||
.container {
|
||||
display:flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
&_unsupported {
|
||||
opacity: 0.9;
|
||||
}
|
||||
&_supported {
|
||||
font-size: 1em;
|
||||
}
|
||||
.description {
|
||||
&__icon {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
&__text {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.urls {
|
||||
&__url {
|
||||
&:not(:first-child)::before {
|
||||
opacity: 0.5;
|
||||
content: "|";
|
||||
font-size: 0.6rem;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user