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

follow @mattwr18 PR review

Browse Source 
- replace magic numbers with tokens
- remove unused name attribute
- use slot shorthand (for the slots added in this PR)
This commit is contained in:
Alina Beck 2020-02-17 10:44:52 +01:00
parent f1efdbad7d
commit ad385490bc
15 changed files with 58 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
webapp/assets/_new/styles/tokens.scss
View File

@ -211,7 +211,8 @@ $letter-spacing-x-small: -0.015em;
* @presenter Opacity
*/
$opacity-soft: 0.65;
$opacity-base: 1;
$opacity-soft: 0.7;
$opacity-disabled: 0.5;
/**
@ -264,12 +265,23 @@ $size-avatar-large: 114px;
$size-button-base: 36px;
$size-button-small: 26px;
/**
* @tokens Size Images
* @presenter Spacing
*/
$size-image-max-height: 2000px;
$size-image-cropper-max-height: 600px;
$size-image-cropper-min-height: 400px;
$size-image-uploader-min-height: 200px;
/**
* @tokens Size Icons
* @presenter Spacing
*/
$size-icon-base: 16px;
$size-icon-large: 60px;
/**
* @tokens Shadow
@ -285,6 +297,12 @@ $box-shadow-active: 0 0 6px 1px rgba(20, 100, 160, 0.5);
$box-shadow-inset: inset 0 0 20px 1px rgba(0,0,0,.15);
$box-shadow-small-inset: inset 0 0 0 1px rgba(0,0,0,.05);
/**
* @tokens Effects
*/
$blur-radius: 22px;
/**
* @tokens Animation Duration
*/
@ -317,6 +335,7 @@ $z-index-page-header: 2000;
$z-index-page-sidebar: 1500;
$z-index-sticky: 100;
$z-index-post-teaser-link: 5;
$z-index-surface: 1;
/**
* @tokens Media Query

2
webapp/components/CommentCard/CommentCard.vue
View File

@ -8,7 +8,7 @@
<base-card v-else :class="commentClass" :id="anchor">
<header class="header">
<user-teaser :user="comment.author" :date-time="comment.createdAt">
<template v-if="wasEdited" v-slot:dateTime>
<template v-if="wasEdited" #dateTime>
<span>({{ $t('comment.edited') }})</span>
</template>
</user-teaser>

4
webapp/components/ContributionForm/ContributionForm.vue
View File

@ -8,7 +8,7 @@
>
<template slot-scope="{ errors }">
<base-card>
<template v-slot:heroImage>
<template #heroImage>
<img
v-if="showHeroImage"
:src="contribution.image | proxyApiUrl"
@ -276,7 +276,7 @@ export default {
}
.image.--blur-image {
filter: blur(22px);
filter: blur($blur-radius);
}
> .ds-form-item {

2
webapp/components/Editor/SuggestionList.vue
View File

@ -89,7 +89,7 @@ export default {
}
&.hint {
opacity: 0.7;
opacity: $opacity-soft;
pointer-events: none;
}
}

1
webapp/components/FilterMenu/FilterMenu.vue
View File

@ -2,7 +2,6 @@
<base-card class="filter-menu">
<h2>{{ $t('filter-menu.hashtag-search', { hashtag }) }}</h2>
<base-button
name="clear-search-button"
icon="close"
circle
:title="this.$t('filter-menu.clearSearch')"

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

@ -5,7 +5,7 @@
<b>- {{ $t('quotes.african.author') }}</b>
</blockquote>
<base-card>
<template v-slot:imageColumn>
<template #imageColumn>
<a :href="$t('login.moreInfoURL')" :title="$t('login.moreInfo')" target="_blank">
<img class="image" alt="Human Connection" src="/img/sign-up/humanconnection.svg" />
</a>
@ -40,7 +40,7 @@
<nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
</p>
</form>
<template v-slot:topMenu>
<template #topMenu>
<locale-switch offset="5" />
</template>
</base-card>

2
webapp/components/Notification/Notification.vue
View File

@ -64,7 +64,7 @@ export default {
}
&.--read {
opacity: 0.5;
opacity: $opacity-disabled;
}
> .description {

6
webapp/components/PostTeaser/PostTeaser.vue
View File

@ -11,7 +11,7 @@
}"
:highlight="isPinned"
>
<template v-if="post.image" v-slot:heroImage>
<template v-if="post.image" #heroImage>
<img :src="post.image | proxyApiUrl" class="image" />
</template>
<client-only>
@ -158,7 +158,7 @@ export default {
height: 100%;
&.--blur-image > .hero-image > .image {
filter: blur(22px);
filter: blur($blur-radius);
}
> .content {
@ -178,7 +178,7 @@ export default {
> .counter-icon {
display: block;
margin-right: $space-small;
opacity: 0.5;
opacity: $opacity-disabled;
}
> .content-menu {

30
webapp/components/TeaserImage/TeaserImage.vue
View File

@ -105,7 +105,7 @@ export default {
<style lang="scss">
.image-uploader {
position: relative;
min-height: 200px;
min-height: $size-image-uploader-min-height;
cursor: pointer;
.image + & {
@ -125,20 +125,20 @@ export default {
}
&.--blur-image .preview-image {
filter: blur(22px);
filter: blur($blur-radius);
}
.preview-image {
width: 100%;
max-height: 2000px;
max-height: $size-image-max-height;
object-fit: contain;
}
> .crop-overlay {
width: 100%;
height: 100%;
min-height: 400px;
max-height: 600px;
min-height: $size-image-cropper-min-height;
max-height: $size-image-cropper-max-height;
font-size: $font-size-base;
> .img {
@ -148,16 +148,16 @@ export default {
> .crop-confirm {
position: absolute;
left: 10px;
top: 10px;
z-index: 1;
left: $space-x-small;
top: $space-x-small;
z-index: $z-index-surface;
}
> .crop-cancel {
position: absolute;
right: 10px;
top: 10px;
z-index: 1;
right: $space-x-small;
top: $space-x-small;
z-index: $z-index-surface;
}
}
@ -168,11 +168,11 @@ export default {
align-items: center;
width: 100%;
height: 100%;
z-index: 1;
z-index: $z-index-surface;
&:hover {
> .base-icon {
opacity: 1;
opacity: $opacity-base;
}
}
@ -182,8 +182,8 @@ export default {
border-radius: 100%;
border: $border-size-base dashed $color-neutral-20;
background-color: $color-neutral-95;
font-size: 60px;
opacity: 0.7;
font-size: $size-icon-large;
opacity: $opacity-soft;
}
}
}

2
webapp/components/UserTeaser/UserTeaser.story.js
View File

@ -80,7 +80,7 @@ storiesOf('UserTeaser', module)
}),
template: `
<user-teaser :user="user" :date-time="new Date()">
<template v-slot:dateTime>
<template #dateTime>
- HEY! I'm edited
</template>
</user>

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

@ -19,7 +19,7 @@ storiesOf('Generic/BaseCard', module)
components: { BaseCard },
template: `
<base-card style="width: 400px;">
<template v-slot:heroImage>
<template #heroImage>
<img class="image" src="https://unsplash.com/photos/R4y_E5ZQDPg/download" />
</template>
<h2 class="title">I am a card heading</h2>
@ -32,7 +32,7 @@ storiesOf('Generic/BaseCard', module)
components: { BaseCard },
template: `
<base-card style="width: 600px;">
<template v-slot:imageColumn>
<template #imageColumn>
<img class="image" src="/img/sign-up/humanconnection.svg" />
</template>
<h2 class="title">I am a card heading</h2>
@ -45,12 +45,12 @@ storiesOf('Generic/BaseCard', module)
components: { BaseCard },
template: `
<base-card style="width: 600px;">
<template v-slot:imageColumn>
<template #imageColumn>
<img class="image" src="/img/sign-up/humanconnection.svg" />
</template>
<h2 class="title">I am a card heading</h2>
<p>And I am a paragraph.</p>
<template v-slot:topMenu>
<template #topMenu>
<base-button size="small">Menu</base-button>
</template>
</base-card>

2
webapp/components/_new/generic/BaseCard/BaseCard.vue
View File

@ -84,7 +84,7 @@ export default {
> .hero-image {
width: calc(100% + (2 * #{$space-base}));
max-height: 2000px;
max-height: $size-image-max-height;
margin: -$space-base;
margin-bottom: $space-base;
overflow: hidden;

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

@ -1,11 +1,11 @@
<template>
<ds-container width="small" class="password-reset">
<base-card>
<template v-slot:imageColumn>
<template #imageColumn>
<img alt="Human Connection" src="/icon.png" class="image" />
</template>
<nuxt-child />
<template v-slot:topMenu>
<template #topMenu>
<locale-switch offset="5" />
</template>
</base-card>

6
webapp/pages/post/_id/_slug/index.vue
View File

@ -9,7 +9,7 @@
'--blur-image': blurred,
}"
>
<template v-slot:heroImage>
<template #heroImage>
<img :src="post.image | proxyApiUrl" class="image" />
<aside v-show="post.imageBlurred" class="blur-toggle">
<img v-show="blurred" :src="post.image | proxyApiUrl" class="preview" />
@ -23,7 +23,7 @@
</template>
<section class="menu">
<user-teaser :user="post.author" :date-time="post.createdAt">
<template v-slot:dateTime>
<template #dateTime>
<ds-text v-if="post.createdAt !== post.updatedAt">({{ $t('post.edited') }})</ds-text>
</template>
</user-teaser>
@ -249,7 +249,7 @@ export default {
}
&.--blur-image > .hero-image > .image {
filter: blur(22px);
filter: blur($blur-radius);
}
.blur-toggle {

4
webapp/pages/registration.vue
View File

@ -1,11 +1,11 @@
<template>
<ds-container width="medium">
<base-card>
<template v-slot:imageColumn>
<template #imageColumn>
<img alt="Human Connection" src="/img/sign-up/nicetomeetyou.svg" />
</template>
<nuxt-child />
<template v-slot:topMenu>
<template #topMenu>
<locale-switch offset="5" />
</template>
</base-card>