Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-25 00:53:48 +00:00
Code Issues Actions Projects Releases Wiki Activity

improve activity list

Browse Source
This commit is contained in:
Mathieu Jaumotte
2021-08-01 20:21:39 +02:00
parent 9f5086e9c1
commit 982c704f6c
6 changed files with 327 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss
View File

@@ -1,14 +1,105 @@
// Access to Bootstrap variables and mixins
@import '~ChillMainAssets/module/bootstrap/shared';
//@import '~ChillMainSass/custom/mixins/entity';
// activity creation first step: select type page
div.new-activity-select-type {
div.activity-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
//.chill-entity.chill-entity__activity-reason {
// @include entity($chill-pink, white);
//}
div.bloc {
width: 200px;
align-self: flex-end;
height: 140px;
display: flex;
justify-content: center;
align-items: center;
}
}
}
.activity {
//color: $chill-green;
// exceptions for flex-table in list-records
div.activity-list {
div.flex-table {
div.item-bloc {
div.item-row.main {
div.item-col {
&:first-child {
flex-basis: 27%;
}
ul.list-content {
li.social-issues, li.social-actions {
.badge-primary {
font-variant: small-caps;
font-weight: bold;
font-size: 88%;
margin-bottom: 0.2em;
}
}
li.social-issues .badge-primary {
background-color: $orange;
}
li.social-actions .badge-primary {
background-color: $green;
}
}
}
}
div.item-row.details {
flex-direction: row;
& > div.item-col {
justify-content: flex-start;
align-self: center;
&:nth-child(1) {
flex-grow: 1; flex-shrink: 0; flex-basis: 30%;
}
&:nth-child(2) {
flex-grow: 0; flex-shrink: 1; flex-basis: 70%;
}
&:only-child {
flex-grow: 0; flex-shrink: 0; flex-basis: 100%;
& > div.concerned-groups {
flex-grow: 0; flex-shrink: 0; flex-basis: 100%;
display: flex;
flex-direction: column; // TODO pas fini
div.group {
flex-grow: 1; flex-shrink: 0; flex-basis: 30%;
h4 {}
ul.list-content {
li {
display: inline;
}
}
}
}
}
}
div.concerned-groups {
font-size: 85%;
h4 {
text-transform: uppercase;
}
}
}
ul.list-content {
list-style-type: none;
padding-left: 1em;
margin: 0 0;
li {
margin-bottom: 0.2em;
}
}
}
div.duration {
font-size: smaller;
padding-left: 1em;
margin-top: 1em;
}
}
}
// exceptions for flex-bloc in concerned-groups
@@ -22,7 +113,7 @@ div.flex-bloc.concerned-groups {
li {
margin-bottom: 0.2em;
a {
color: white;
color: $white;
cursor: pointer;
&:hover {
color: #ffffffab;
@@ -36,97 +127,3 @@ div.flex-bloc.concerned-groups {
}
}
// exceptions for flex-table in list-records
div.flex-table.list-records {
div.item-bloc {
div.item-row.main {
div.item-col {
&:first-child {
flex-basis: 27%;
}
ul.list-content {
li.social-issues, li.social-actions {
.badge-primary {
font-variant: small-caps;
font-weight: bold;
font-size: 88%;
margin-bottom: 0.2em;
}
}
li.social-issues .badge-primary {
background-color: var(--chill-orange);
}
li.social-actions .badge-primary {
background-color: var(--chill-green);
}
}
}
}
div.item-row.details {
flex-direction: row;
& > div.item-col {
justify-content: flex-start;
align-self: center;
&:nth-child(1) {
flex-grow: 1; flex-shrink: 0; flex-basis: 30%;
}
&:nth-child(2) {
flex-grow: 0; flex-shrink: 1; flex-basis: 70%;
}
&:only-child {
flex-grow: 0; flex-shrink: 0; flex-basis: 100%;
& > div.concerned-groups {
flex-grow: 0; flex-shrink: 0; flex-basis: 100%;
display: flex;
flex-direction: column; // TODO pas fini
div.group {
flex-grow: 1; flex-shrink: 0; flex-basis: 30%;
h4 {}
ul.list-content {
li {
display: inline;
}
}
}
}
}
}
div.concerned-groups {
font-size: 85%;
h4 {
text-transform: uppercase;
}
}
}
ul.list-content {
list-style-type: none;
padding-left: 1em;
margin: 0 0;
li {
margin-bottom: 0.2em;
}
}
}
div.duration {
font-size: smaller;
padding-left: 1em;
margin-top: 1em;
}
}
div.activity-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
div.bloc {
width: 200px;
align-self: flex-end;
height: 140px;
display: flex;
justify-content: center;
align-items: center;
}
}