Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-07-01 22:46:13 +00:00
Code Issues Actions Projects Releases Wiki Activity

[design proposal] adding a mixin to style social issue badge

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-08-20 20:40:05 +02:00
parent 2a3f869882
commit 4d65c54996
9 changed files with 42 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/custom/_debug.scss
View File

@ -3,7 +3,7 @@ body {
div.responsive {
position: fixed;
top: 0;
left: 50%;
left: 0;
background-color: #4a4d50;
color: white;
padding: 0.5em;

8
src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/custom/_variables.scss
View File

@ -157,8 +157,10 @@ $chill-yellow: $yellow;
$chill-red: $red;
$chill-beige: $beige;
$chill-pink: $pink;
$chill-gray: $gray-600;
$chill-dark-gray: $gray-800;
$chill-gray: $gray-600;
$chill-l-gray: $gray-400;
$chill-ll-gray: $gray-300;
$chill-light-gray: $gray-200;
$chill-llight-gray: $gray-100;
// scss-docs-end theme-color-variables
@ -185,8 +187,10 @@ $chill-colors: (
"chill-red": $chill-red,
"chill-beige": $chill-beige,
"chill-pink": $chill-pink,
"chill-gray": $chill-gray,
"chill-dark-gray": $chill-dark-gray,
"chill-gray": $chill-gray,
"chill-l-gray": $chill-l-gray,
"chill-ll-gray": $chill-ll-gray,
"chill-light-gray": $chill-light-gray,
"chill-llight-gray": $chill-llight-gray,
);

3
src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss
View File

@ -1,7 +1,8 @@
// Access to Bootstrap variables and mixins
@import '~ChillMainAssets/module/bootstrap/shared';
// Override Main generic assets
// Complete/override Main generic assets
@import './scss/mixins';
@import './scss/render_box.scss';
@import './scss/flex_table.scss';

18
src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss Normal file
View File

@ -0,0 +1,18 @@
///
/// Social Issue mixin
// define visual badge for all social issues
///
$social-issue-color: $chill-pink;
@mixin badge_social_issue {
text-transform: capitalize !important;
font-weight: 500 !important;
border-left: 20px groove $social-issue-color;
&:before {
content: '\f04b';
font-family: ForkAwesome;
color: $social-issue-color;
margin: 0 0.3em 0 -0.7em;
}
}

6
src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss
View File

@ -1,3 +1,5 @@
/// variables
/// CHILL ENTITY RENDER BOX
.chill-entity {
@ -11,6 +13,10 @@
/// SOCIAL-ISSUE
&.entity-social-issue {
margin-right: 0.3em;
font-size: 120%;
span.badge {
@include badge_social_issue;
}
}
}

8
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssue.vue
View File

@ -1,5 +1,5 @@
<template>
<span class="badge bg-chill-light-gray text-dark">{{ issue.text }}</span>
<span class="badge bg-chill-l-gray text-dark">{{ issue.text }}</span>
</template>
<script>
@ -10,10 +10,12 @@ export default {
</script>
<style lang="scss" scoped>
@import 'ChillMainAssets/module/bootstrap/shared';
@import 'ChillPersonAssets/chill/scss/mixins';
span.badge {
@include badge_social_issue;
font-size: 95%;
text-transform: capitalize !important;
font-weight: 500 !important;
margin-bottom: 5px;
margin-right: 1em;
}

2
src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig
View File

@ -97,7 +97,7 @@
<div class="wl-col list">
{% for si in accompanying_period.socialIssues %}
<p class="wl-item">
{{ si.title|localize_translatable_string }}
{{ si|chill_entity_render_box }}
</p>
{% endfor %}
</div>

2
src/Bundle/ChillPersonBundle/Resources/views/Entity/social_issue.html.twig
View File

@ -1,6 +1,6 @@
{% set reversed_parents = parents|reverse %}
<span class="chill-entity entity-social-issue">
<span class="badge bg-chill-pink">
<span class="badge bg-chill-l-gray text-dark">
{%- for p in reversed_parents %}
<span class="parent-{{ loop.revindex0 }}">
{{ p.title|localize_translatable_string }}{{ options['default.separator'] }}

4
src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig
View File

@ -1,7 +1,7 @@
{% macro button_person(person) %}
<li>
<a href="{{ path('chill_person_accompanying_period_list', { 'person_id' : person.id }) }}"
class="btn btn-sm btn-outline-primary" title="{{ 'See accompanying periods'|trans }}"><i class="fa fa-random"></i></a>
<a href="{{ path('chill_person_accompanying_course_new') }}"
class="btn btn-sm btn-create change-icon" title="{{ 'Create an accompanying period'|trans }}"><i class="fa fa-random"></i></a>
</li>
{% endmacro %}