44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reworked on footer & removed github icon

Browse Source
This commit is contained in:
undergroundwires
2020-07-25 23:36:46 +01:00
parent 04b9b59e14
commit 60a5a2aa40
8 changed files with 103 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/presentation/Bootstrapping/Modules/IconBootstrapper.ts
View File

@@ -4,15 +4,20 @@ import { faGithub } from '@fortawesome/free-brands-svg-icons';
/** BRAND ICONS (PREFIX: fab) */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
/** REGULAR ICONS (PREFIX: far) */
import { faFolderOpen, faFolder } from '@fortawesome/free-regular-svg-icons';
import { faFolderOpen, faFolder, faComment, faSmile } from '@fortawesome/free-regular-svg-icons';
/** SOLID ICONS (PREFIX: fas (default)) */
import { faTimes, faFileDownload, faCopy, faSearch, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
import { faTimes, faFileDownload, faCopy, faSearch, faInfoCircle, faUserSecret, faDesktop, faTag, faGlobe } from '@fortawesome/free-solid-svg-icons';
export class IconBootstrapper implements IVueBootstrapper {
public bootstrap(vue: VueConstructor): void {
library.add(
faGithub,
faUserSecret,
faSmile,
faDesktop,
faGlobe,
faTag,
faFolderOpen,
faFolder,
faTimes,

5
src/presentation/Scripts/Cards/CardListItem.vue
View File

@@ -75,10 +75,7 @@ export default class CardListItem extends StatefulVue {
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
$big-screen-width: 991px;
$medium-screen-width: 767px;
$small-screen-width: 380px;
@import "@/presentation/styles/media.scss";
$card-padding: 30px;
$card-margin: 15px;

35
src/presentation/TheFooter/DownloadUrlList.vue
View File

@@ -1,6 +1,11 @@
<template>
<span v-bind:class="{ 'unsupported': !hasCurrentOsDesktopVersion, 'supported': hasCurrentOsDesktopVersion }">
For desktop:
<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" />
@@ -33,15 +38,31 @@ export default class DownloadUrlList extends Vue {
</script>
<style scoped lang="scss">
.unsupported {
font-size: 0.85em;
}
.supported {
font-size: 1em;
@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;

82
src/presentation/TheFooter/TheFooter.vue
View File

@@ -2,18 +2,37 @@
<div>
<div class="footer">
<div class="footer__section">
<div class="item">
<a :href="releaseUrl" target="_blank">{{ version }}</a>
</div>
<div class="item">
<a @click="$modal.show(modalName)">Privacy</a>
</div>
<span v-if="isDesktop" class="footer__section__item">
<font-awesome-icon class="icon" :icon="['fas', 'globe']" />
<span>Online version at <a href="https://privacy.sexy" target="_blank">https://privacy.sexy</a></span>
</span>
<span v-else class="footer__section__item">
<DownloadUrlList />
</span>
</div>
<div class="footer__section">
<span v-if="isDesktop">
Online version at <a href="https://privacy.sexy" target="_blank">https://privacy.sexy</a>
</span>
<DownloadUrlList v-else />
<div class="footer__section__item">
<a :href="feedbackUrl" target="_blank">
<font-awesome-icon class="icon" :icon="['far', 'smile']" />
<span>Feedback</span>
</a>
</div>
<div class="footer__section__item">
<a :href="repositoryUrl" target="_blank">
<font-awesome-icon class="icon" :icon="['fab', 'github']" />
<span>Source Code</span>
</a>
</div>
<div class="footer__section__item">
<a :href="releaseUrl" target="_blank">
<font-awesome-icon class="icon" :icon="['fas', 'tag']" />
<span>v{{ version }}</span>
</a>
</div>
<div class="footer__section__item">
<font-awesome-icon class="icon" :icon="['fas', 'user-secret']" />
<a @click="$modal.show(modalName)">Privacy</a>
</div>
</div>
</div>
<modal :name="modalName" height="auto" :scrollable="true" :adaptive="true">
@@ -45,7 +64,9 @@ export default class TheFooter extends StatefulVue {
public readonly isDesktop: boolean;
public version: string = '';
public repositoryUrl: string = '';
public releaseUrl: string = '';
public feedbackUrl: string = '';
constructor() {
super();
@@ -54,8 +75,10 @@ export default class TheFooter extends StatefulVue {
public async mounted() {
const state = await this.getCurrentStateAsync();
this.version = `v${state.app.version}`;
this.version = state.app.version;
this.repositoryUrl = state.app.repositoryUrl;
this.releaseUrl = `${state.app.repositoryUrl}/releases/tag/${state.app.version}`;
this.feedbackUrl = `${state.app.repositoryUrl}/issues`;
}
}
</script>
@@ -63,26 +86,33 @@ export default class TheFooter extends StatefulVue {
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@import "@/presentation/styles/fonts.scss";
@import "@/presentation/styles/media.scss";
$medium-screen-width: 767px;
.icon {
margin-right: 0.5em;
text-decoration: none;
}
.footer {
display: flex;
justify-content: space-between;
@media screen and (max-width: $medium-screen-width) {
@media (max-width: $big-screen-width) {
flex-direction: column;
align-items: center;
}
flex-wrap: wrap;
&__section {
display: flex;
@media (max-width: $big-screen-width) {
justify-content: space-around;
width:100%;
&:not(:first-child) {
margin-top: 0.7em;
}
}
flex-wrap: wrap;
color: $dark-gray;
font-size: 1rem;
font-family: $normal-font;
&:not(:first-child) {
padding-top: 3px;
}
a {
color:inherit;
text-decoration: underline;
@@ -91,10 +121,18 @@ $medium-screen-width: 767px;
opacity: 0.8;
}
}
.item:not(:first-child)::before {
content: "|";
padding: 0 5px;
&__item:not(:first-child) {
&::before {
content: "|";
padding: 0 5px;
}
@media (max-width: $big-screen-width) {
margin-top: 3px;
&::before {
content: "";
padding: 0;
}
}
}
}
}

15
src/presentation/TheHeader.vue
View File

@@ -1,10 +1,7 @@
<template>
<div id="container">
<h1 class="child title" >{{ title }}</h1>
<h2 class="child subtitle">{{ subtitle }}</h2>
<a :href="repositoryUrl" target="_blank" class="child github" >
<font-awesome-icon :icon="['fab', 'github']" size="3x" />
</a>
<h2 class="child subtitle">Enforce privacy & security on Windows</h2>
</div>
</template>
@@ -16,13 +13,10 @@ import { StatefulVue } from './StatefulVue';
export default class TheHeader extends StatefulVue {
public title = '';
public subtitle = '';
public repositoryUrl = '';
public async mounted() {
const state = await this.getCurrentStateAsync();
this.title = state.app.name;
this.subtitle = 'Enforce privacy & security on Windows';
this.repositoryUrl = state.app.repositoryUrl;
}
}
</script>
@@ -56,13 +50,6 @@ export default class TheHeader extends StatefulVue {
font-weight: 500;
line-height: 1.2;
}
.github {
color:inherit;
cursor: pointer;
&:hover {
opacity: 0.9;
}
}
}
</style>

4
src/presentation/styles/colors.scss
View File

@@ -1,8 +1,8 @@
$white: #fff;
$light-gray: #eceef1;
$gray: darken(#eceef1, 30%);
$gray: darken($light-gray, 30%);
$dark-gray: #616f86;
$slate: darken(#eceef1, 70%);
$slate: darken($light-gray, 70%);
$dark-slate: #2f3133;
$accent: #1abc9c;
$black: #000

3
src/presentation/styles/media.scss Normal file
View File

@@ -0,0 +1,3 @@
$big-screen-width: 992px;
$medium-screen-width: 768px;
$small-screen-width: 380px;