ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor logos, first step

Browse Source
This commit is contained in:
Wolfgang Huß 2021-05-18 17:04:24 +02:00
parent 453bd7ae35
commit ff6cc306af
24 changed files with 103 additions and 343 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -13,7 +13,7 @@ ocelot.social is a nonprofit social, action and knowledge network that connects
* **Action**: Don't just read about how to make the world a better place, but come into **Action** by following provided suggestions on the **Action** tab provided by other people or **Organisations**.
<p align="center">
<img src="webapp/static/img/custom/welcome.svg" alt="Ocelot-Social" width="40%" height="40%">
<img src="webapp/static/img/custom/logo-squared.svg" alt="ocelot.social" width="40%" height="40%">
</p>
## Live demo

1
backend/src/config/links.js
View File

@ -1,3 +1,4 @@
// this file is duplicated in `backend/src/config/links.js` and `webapp/constants/links.js` and replaced on rebranding
export default {
ORGANIZATION: 'https://ocelot.social',
DONATE: 'https://ocelot-social.herokuapp.com/donations',

10
backend/src/config/logos.js Normal file
View File

@ -0,0 +1,10 @@
// this file is duplicated in `backend/src/config/logos.js` and `webapp/constants/logos.js` and replaced on rebranding
// this are the paths in the webapp
export default {
LOGO_HEADER_PATH: '/img/custom/logo-horizontal.svg',
LOGO_SIGNUP_PATH: '/img/custom/logo-squared.svg',
LOGO_WELCOME_PATH: '/img/custom/logo-squared.svg',
LOGO_LOGOUT_PATH: '/img/custom/logo-squared.svg',
LOGO_PASSWORD_RESET_PATH: '/img/custom/logo-squared.svg',
LOGO_MAINTENACE_RESET_PATH: '/img/custom/logo-squared.svg',
}

2
backend/src/config/metadata.js
View File

@ -1,7 +1,9 @@
// this file is duplicated in `backend/src/config/metadata.js` and `webapp/constants/metadata.js` and replaced on rebranding
export default {
APPLICATION_NAME: 'ocelot.social',
APPLICATION_SHORT_NAME: 'ocelot',
APPLICATION_DESCRIPTION: 'ocelot.social Community Network',
COOKIE_NAME: 'ocelot-social-token',
ORGANIZATION_NAME: 'ocelot.social Community',
ORGANIZATION_JURISDICTION: 'City of Angels',
}

3
backend/src/middleware/email/templateBuilder.js
View File

@ -1,10 +1,11 @@
import mustache from 'mustache'
import CONFIG from '../../config'
import logosWebapp from '../../config/logos.js'
import * as templates from './templates'
const from = CONFIG.EMAIL_DEFAULT_SENDER
const welcomeImageUrl = new URL(`/img/custom/welcome.svg`, CONFIG.CLIENT_URI)
const welcomeImageUrl = new URL(logosWebapp.LOGO_WELCOME_PATH, CONFIG.CLIENT_URI)
const defaultParams = {
supportUrl: CONFIG.SUPPORT_URL,

12
webapp/components/LoginForm/LoginForm.vue
View File

@ -7,7 +7,7 @@
<base-card>
<template #imageColumn>
<a :href="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)" target="_blank">
<img class="image" alt="Welcome" src="/img/custom/welcome.svg" />
<logo type="welcome" />
</a>
</template>
<h2 class="title">{{ $t('login.login') }}</h2>
@ -56,13 +56,15 @@
</template>
<script>
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
import links from '~/constants/links.js'
import metadata from '~/constants/metadata.js'
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
import Logo from '~/components/Logo/Logo'
export default {
components: {
LocaleSwitch,
Logo,
},
data() {
return {
@ -122,9 +124,9 @@ export default {
margin-top: $space-large;
margin-bottom: $space-small;
}
.image {
width: 100%;
}
// .image {
// width: 100%;
// }
}
.password-wrapper {

52
webapp/components/Logo/Logo.vue
View File

@ -1,24 +1,35 @@
<template>
<component :is="tag" class="ds-logo" :class="[inverse && 'ds-logo-inverse']">
<svg-logo v-if="!inverse" class="ds-logo-svg" />
<svg-logo-inverse v-else class="ds-logo-svg" />
<img v-if="!inverse" class="ds-logo-svg" :alt="metadata.APPLICATION_NAME + ' ' + logo.alt" :src="logo.path" :style="logoWidth" />
<img v-else class="ds-logo-svg" :alt="metadata.APPLICATION_NAME + ' ' + logo.alt" :src="logo.path" :style="logoWidth" />
</component>
</template>
<script>
import svgLogo from '~/static/img/custom/Logo-Horizontal.svg'
import svgLogoInverse from '~/static/img/custom/Logo-Horizontal-Dark.svg'
import logos from '~/constants/logos.js'
import metadata from '~/constants/metadata.js'
/**
* This component displays the brand's logo.
* @version 1.0.0
*/
export default {
name: 'Logo',
components: {
svgLogo,
svgLogoInverse,
},
props: {
/**
* Logo type
*/
type: {
type: String,
required: true,
},
/**
* Logo type
*/
width: {
type: String,
default: null,
},
/**
* Inverse the logo
*/
@ -34,6 +45,31 @@ export default {
default: 'div',
},
},
data() {
const logosObject = {
header: { path: logos.LOGO_HEADER_PATH, alt: 'Header', widthDefault: '130px'},
welcome: { path: logos.LOGO_WELCOME_PATH, alt: 'Welcome', widthDefault: '200px'},
signup: { path: logos.LOGO_SIGNUP_PATH, alt: 'Sign Up', widthDefault: '200px'},
logout: { path: logos.LOGO_LOGOUT_PATH, alt: 'Logging Out', widthDefault: '200px'},
passwordReset: { path: logos.LOGO_PASSWORD_RESET_PATH, alt: 'Reset Your Password', widthDefault: '200px'},
maintenance: { path: logos.LOGO_MAINTENACE_RESET_PATH, alt: 'Under Maintenance', widthDefault: '75%'},
}
return {
logo: logosObject[this.type],
metadata,
}
},
computed: {
logoWidth() {
let width = ''
if (this.width === null) {
width = this.logo.widthDefault
} else {
width = this.width
}
return `width: ${width};`
},
},
}
</script>

4
webapp/components/Registration/RegistrationSlider.vue
View File

@ -3,7 +3,7 @@
<base-card>
<template #imageColumn>
<a :href="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)" target="_blank">
<img class="image" alt="Welcome" src="/img/custom/welcome.svg" />
<logo type="signup" />
</a>
</template>
@ -47,6 +47,7 @@ import links from '~/constants/links.js'
import metadata from '~/constants/metadata.js'
import ComponentSlider from '~/components/ComponentSlider/ComponentSlider'
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
import Logo from '~/components/Logo/Logo'
import RegistrationSlideCreate from './RegistrationSlideCreate'
import RegistrationSlideEmail from './RegistrationSlideEmail'
import RegistrationSlideInvite from './RegistrationSlideInvite'
@ -58,6 +59,7 @@ export default {
components: {
ComponentSlider,
LocaleSwitch,
Logo,
RegistrationSlideCreate,
RegistrationSlideEmail,
RegistrationSlideInvite,

5
webapp/components/_new/generic/BaseCard/BaseCard.story.js
View File

@ -1,5 +1,6 @@
import { storiesOf } from '@storybook/vue'
import helpers from '~/storybook/helpers'
import logos from '~/constants/logos.js'
import BaseCard from './BaseCard.vue'
storiesOf('Generic/BaseCard', module)
@ -33,7 +34,7 @@ storiesOf('Generic/BaseCard', module)
template: `
<base-card style="width: 600px;">
<template #imageColumn>
<img class="image" alt="Example image" src="/img/custom/welcome.svg" />
<img class="image" alt="Example image" src="${logos.LOGO_WELCOME_PATH}" />
</template>
<h2 class="title">I am a card heading</h2>
<p>And I am a paragraph.</p>
@ -46,7 +47,7 @@ storiesOf('Generic/BaseCard', module)
template: `
<base-card style="width: 600px;">
<template #imageColumn>
<img class="image" alt="Example image" src="/img/custom/welcome.svg" />
<img class="image" alt="Example image" src="${logos.LOGO_WELCOME_PATH}" />
</template>
<h2 class="title">I am a card heading</h2>
<p>And I am a paragraph.</p>

1
webapp/constants/links.js
View File

@ -1,3 +1,4 @@
// this file is duplicated in `backend/src/config/links.js` and `webapp/constants/links.js` and replaced on rebranding
export default {
ORGANIZATION: 'https://ocelot.social',
DONATE: 'https://ocelot-social.herokuapp.com/donations',

10
webapp/constants/logos.js Normal file
View File

@ -0,0 +1,10 @@
// this file is duplicated in `backend/src/config/logos.js` and `webapp/constants/logos.js` and replaced on rebranding
// this are the paths in the webapp
export default {
LOGO_HEADER_PATH: '/img/custom/logo-horizontal.svg',
LOGO_SIGNUP_PATH: '/img/custom/logo-squared.svg',
LOGO_WELCOME_PATH: '/img/custom/logo-squared.svg',
LOGO_LOGOUT_PATH: '/img/custom/logo-squared.svg',
LOGO_PASSWORD_RESET_PATH: '/img/custom/logo-squared.svg',
LOGO_MAINTENACE_RESET_PATH: '/img/custom/logo-squared.svg',
}

3
webapp/constants/metadata.js
View File

@ -1,8 +1,9 @@
// this file is duplicated in `backend/src/config/metadata.js` and `webapp/constants/metadata.js` and replaced on rebranding
export default {
APPLICATION_NAME: 'ocelot.social',
APPLICATION_SHORT_NAME: 'ocelot',
APPLICATION_DESCRIPTION: 'ocelot.social Community Network',
COOKIE_NAME: 'ocelot-social-token',
ORGANIZATION_NAME: 'ocelot.social Community',
ORGANIZATION_JURISDICTION: 'City of Angels',
COOKIE_NAME: 'ocelot-social-token',
}

2
webapp/layouts/basic.vue
View File

@ -6,7 +6,7 @@
<ds-flex-item width="5.5%" />
<ds-flex-item style="flex-grow: 1" width="20%">
<a @click="redirectToRoot">
<logo />
<logo type="header" />
</a>
</ds-flex-item>
<ds-flex-item width="20%" style="flex-grow: 0">

2
webapp/layouts/default.vue
View File

@ -6,7 +6,7 @@
<ds-flex class="main-navigation-flex">
<ds-flex-item :width="{ base: '142px' }">
<nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'">
<logo />
<logo type="header" />
</nuxt-link>
</ds-flex-item>
<ds-flex-item

12
webapp/maintenance/source/pages/index.vue
View File

@ -9,11 +9,7 @@
<ds-flex-item :width="{ base: '100%', sm: 1, md: 1 }">
<ds-space>
<a :href="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)" target="_blank">
<img
class="image"
alt="Under maintenance"
src="/img/custom/under-maintenance.svg"
/>
<logo type="maintenance" />
</a>
</ds-space>
</ds-flex-item>
@ -42,11 +38,13 @@ import emails from '~/constants/emails.js'
import links from '~/constants/links.js'
import metadata from '~/constants/metadata.js'
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
import Logo from '~/components/Logo/Logo'
export default {
layout: 'blank',
components: {
LocaleSwitch,
Logo,
},
data() {
return { links, metadata, supportEmail: emails.SUPPORT }
@ -55,8 +53,4 @@ export default {
</script>
<style lang="scss">
.image {
width: 75%;
height: auto;
}
</style>

7
webapp/pages/logout.vue
View File

@ -3,7 +3,7 @@
<ds-flex>
<ds-flex-item :width="{ base: '100%' }" centered>
<ds-space style="text-align: center" margin-top="large" margin-bottom="xxx-small" centered>
<img style="width: 200px" alt="Logging out" src="/img/custom/logout.svg" />
<logo type="logout" />
</ds-space>
<ds-space style="text-align: center" margin-top="small" margin-bottom="xxx-small" centered>
<ds-heading tag="h3" soft>Logging out...</ds-heading>
@ -14,8 +14,13 @@
</template>
<script>
import Logo from '~/components/Logo/Logo'
export default {
layout: 'blank',
components: {
Logo,
},
async beforeCreate() {
await this.$store.dispatch('auth/logout')
this.$router.replace('/login')

4
webapp/pages/password-reset.vue
View File

@ -3,7 +3,7 @@
<base-card>
<template #imageColumn>
<a :href="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)" target="_blank">
<img class="image" alt="Reset your password" src="/img/custom/password-reset.svg" />
<logo type="passwordReset" />
</a>
</template>
<nuxt-child />
@ -18,10 +18,12 @@
import links from '~/constants/links.js'
import metadata from '~/constants/metadata.js'
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
import Logo from '~/components/Logo/Logo'
export default {
components: {
LocaleSwitch,
Logo,
},
layout: 'no-header',
data() {

48
webapp/static/img/custom/Logo-Horizontal-Dark.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 34 KiB

2
webapp/static/img/custom/Logo-Horizontal.svg
View File

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="828" height="260" viewBox="0 0 828 260" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<svg width="100%" height="100%" viewBox="0 0 828 260" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(2.95533,0,0,2.95533,-18.4944,-17.8011)">
<path d="M50.078,80.683C50.078,83.106 55.132,85.274 56.169,85.541C57.205,85.809 56.888,86.99 59.656,86.414C62.423,85.837 65.412,83.181 68.261,79.517C71.11,75.853 69.025,73.224 66.9,70.435C64.775,67.646 60.169,64.412 59.656,58.155C59.252,53.234 63.3,53.047 64.996,52.876C66.693,52.705 69.497,54.85 70.654,54.602C71.76,54.366 76.418,58.834 76.929,57.234C76.642,55.298 77.838,54.264 79.448,54.2C81.057,54.136 81.623,56.773 82.356,58.155C83.259,59.861 83.998,58.66 84.146,57.229C84.538,53.415 83.26,49.493 83.911,46.972C84.277,45.555 85.282,45.386 86.792,43.731C90.77,39.372 90.818,32.915 89.923,29.827C90.954,28.574 92.317,28.571 92.521,21.538C92.726,14.505 87.451,8.531 86.038,7.721C84.624,6.91 80.605,7.633 79.555,8.51C78.506,9.387 66.486,19.391 64.996,21.1C63.507,22.81 62.752,23.616 63.556,27.206C60.728,24.559 56.073,22.692 50.078,23.64C44.083,22.692 39.427,24.559 36.6,27.206C37.403,23.616 36.649,22.81 35.159,21.1C33.669,19.391 21.65,9.387 20.6,8.51C19.551,7.633 15.532,6.91 14.118,7.721C12.704,8.531 7.43,14.505 7.634,21.538C7.838,28.571 9.201,28.574 10.233,29.827C9.337,32.915 9.385,39.372 13.363,43.731C14.874,45.386 15.878,45.555 16.245,46.972C16.896,49.493 15.617,53.415 16.01,57.229C16.157,58.66 16.896,59.861 17.8,58.155C18.532,56.773 19.099,54.136 20.708,54.2C22.317,54.264 23.514,55.298 23.227,57.234C23.737,58.834 28.396,54.366 29.502,54.602C30.659,54.85 33.462,52.705 35.159,52.876C36.856,53.047 40.904,53.234 40.5,58.155C39.987,64.412 35.381,67.646 33.256,70.435C31.13,73.224 29.046,75.853 31.894,79.517C34.743,83.181 37.732,85.837 40.5,86.414C43.268,86.99 42.951,85.809 43.987,85.541C45.023,85.274 50.078,83.106 50.078,80.683C50.078,78.259 50.078,78.259 50.078,80.683Z" style="fill:rgb(230,121,25);"/>
<path d="M50,86.57C52.004,86.57 56.013,85.541 56.013,85.541C57.049,85.809 56.732,86.99 59.5,86.414C59.5,86.414 60.917,86.187 61.043,87.1C61.17,88.013 60.255,90.034 57.757,91.5C55.258,92.966 52.642,92.872 50,92.901C47.358,92.872 44.742,92.966 42.243,91.5C39.745,90.034 38.83,88.013 38.957,87.1C39.083,86.187 40.5,86.414 40.5,86.414C43.268,86.99 42.951,85.809 43.987,85.541C43.987,85.541 47.996,86.57 50,86.57Z" style="fill:rgb(134,131,131);"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

4
webapp/static/img/custom/under-maintenance.svg → webapp/static/img/custom/logo-squared.svg
View File

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="600" height="570" viewBox="0 0 600 570" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1.04809,0,0,1.04809,274.036,-174.508)">
<svg width="100%" height="100%" viewBox="0 0 600 570" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1.09038,0,0,1.09038,282.489,-181.549)">
<g transform="matrix(2.95533,0,0,2.95533,-122.994,148.699)">
<path d="M50.078,80.683C50.078,83.106 55.132,85.274 56.169,85.541C57.205,85.809 56.888,86.99 59.656,86.414C62.423,85.837 65.412,83.181 68.261,79.517C71.11,75.853 69.025,73.224 66.9,70.435C64.775,67.646 60.169,64.412 59.656,58.155C59.252,53.234 63.3,53.047 64.996,52.876C66.693,52.705 69.497,54.85 70.654,54.602C71.76,54.366 76.418,58.834 76.929,57.234C76.642,55.298 77.838,54.264 79.448,54.2C81.057,54.136 81.623,56.773 82.356,58.155C83.259,59.861 83.998,58.66 84.146,57.229C84.538,53.415 83.26,49.493 83.911,46.972C84.277,45.555 85.282,45.386 86.792,43.731C90.77,39.372 90.818,32.915 89.923,29.827C90.954,28.574 92.317,28.571 92.521,21.538C92.726,14.505 87.451,8.531 86.038,7.721C84.624,6.91 80.605,7.633 79.555,8.51C78.506,9.387 66.486,19.391 64.996,21.1C63.507,22.81 62.752,23.616 63.556,27.206C60.728,24.559 56.073,22.692 50.078,23.64C44.083,22.692 39.427,24.559 36.6,27.206C37.403,23.616 36.649,22.81 35.159,21.1C33.669,19.391 21.65,9.387 20.6,8.51C19.551,7.633 15.532,6.91 14.118,7.721C12.704,8.531 7.43,14.505 7.634,21.538C7.838,28.571 9.201,28.574 10.233,29.827C9.337,32.915 9.385,39.372 13.363,43.731C14.874,45.386 15.878,45.555 16.245,46.972C16.896,49.493 15.617,53.415 16.01,57.229C16.157,58.66 16.896,59.861 17.8,58.155C18.532,56.773 19.099,54.136 20.708,54.2C22.317,54.264 23.514,55.298 23.227,57.234C23.737,58.834 28.396,54.366 29.502,54.602C30.659,54.85 33.462,52.705 35.159,52.876C36.856,53.047 40.904,53.234 40.5,58.155C39.987,64.412 35.381,67.646 33.256,70.435C31.13,73.224 29.046,75.853 31.894,79.517C34.743,83.181 37.732,85.837 40.5,86.414C43.268,86.99 42.951,85.809 43.987,85.541C45.023,85.274 50.078,83.106 50.078,80.683C50.078,78.259 50.078,78.259 50.078,80.683Z" style="fill:rgb(230,121,25);"/>
<path d="M50,86.57C52.004,86.57 56.013,85.541 56.013,85.541C57.049,85.809 56.732,86.99 59.5,86.414C59.5,86.414 60.917,86.187 61.043,87.1C61.17,88.013 60.255,90.034 57.757,91.5C55.258,92.966 52.642,92.872 50,92.901C47.358,92.872 44.742,92.966 42.243,91.5C39.745,90.034 38.83,88.013 38.957,87.1C39.083,86.187 40.5,86.414 40.5,86.414C43.268,86.99 42.951,85.809 43.987,85.541C43.987,85.541 47.996,86.57 50,86.57Z" style="fill:rgb(134,131,131);"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

65
webapp/static/img/custom/logout.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 28 KiB

65
webapp/static/img/custom/password-reset.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 28 KiB

65
webapp/static/img/custom/sign-up.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 28 KiB

65
webapp/static/img/custom/welcome.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 28 KiB