mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
Improving the timeline UI
This commit is contained in:
Marc Ducobu
parent
84d263cfa5
commit
b67b6f4917
@ -2693,16 +2693,16 @@ html {
|
||||
width: 25%; }
|
||||
|
||||
.push-3 {
|
||||
left: 25.0%; }
|
||||
left: 25%; }
|
||||
|
||||
.pull-3 {
|
||||
right: 25.0%; }
|
||||
right: 25%; }
|
||||
|
||||
.prefix-3 {
|
||||
margin-left: 25.0%; }
|
||||
margin-left: 25%; }
|
||||
|
||||
.suffix-3 {
|
||||
margin-right: 25.0%; }
|
||||
margin-right: 25%; }
|
||||
|
||||
.grid-4 {
|
||||
width: 33.33333%; }
|
||||
@ -2738,16 +2738,16 @@ html {
|
||||
width: 50%; }
|
||||
|
||||
.push-6 {
|
||||
left: 50.0%; }
|
||||
left: 50%; }
|
||||
|
||||
.pull-6 {
|
||||
right: 50.0%; }
|
||||
right: 50%; }
|
||||
|
||||
.prefix-6 {
|
||||
margin-left: 50.0%; }
|
||||
margin-left: 50%; }
|
||||
|
||||
.suffix-6 {
|
||||
margin-right: 50.0%; }
|
||||
margin-right: 50%; }
|
||||
|
||||
.grid-7 {
|
||||
width: 58.33333%; }
|
||||
@ -2783,16 +2783,16 @@ html {
|
||||
width: 75%; }
|
||||
|
||||
.push-9 {
|
||||
left: 75.0%; }
|
||||
left: 75%; }
|
||||
|
||||
.pull-9 {
|
||||
right: 75.0%; }
|
||||
right: 75%; }
|
||||
|
||||
.prefix-9 {
|
||||
margin-left: 75.0%; }
|
||||
margin-left: 75%; }
|
||||
|
||||
.suffix-9 {
|
||||
margin-right: 75.0%; }
|
||||
margin-right: 75%; }
|
||||
|
||||
.grid-10 {
|
||||
width: 83.33333%; }
|
||||
@ -2828,16 +2828,16 @@ html {
|
||||
width: 100%; }
|
||||
|
||||
.push-12 {
|
||||
left: 100.0%; }
|
||||
left: 100%; }
|
||||
|
||||
.pull-12 {
|
||||
right: 100.0%; }
|
||||
right: 100%; }
|
||||
|
||||
.prefix-12 {
|
||||
margin-left: 100.0%; }
|
||||
margin-left: 100%; }
|
||||
|
||||
.suffix-12 {
|
||||
margin-right: 100.0%; }
|
||||
margin-right: 100%; }
|
||||
|
||||
.float-left {
|
||||
float: left; }
|
||||
@ -3008,16 +3008,16 @@ html {
|
||||
width: 25%; }
|
||||
|
||||
.push-mobile-3 {
|
||||
left: 25.0%; }
|
||||
left: 25%; }
|
||||
|
||||
.pull-mobile-3 {
|
||||
right: 25.0%; }
|
||||
right: 25%; }
|
||||
|
||||
.prefix-mobile-3 {
|
||||
margin-left: 25.0%; }
|
||||
margin-left: 25%; }
|
||||
|
||||
.suffix-mobile-3 {
|
||||
margin-right: 25.0%; }
|
||||
margin-right: 25%; }
|
||||
|
||||
.grid-mobile-4 {
|
||||
width: 33.33333%; }
|
||||
@ -3053,16 +3053,16 @@ html {
|
||||
width: 50%; }
|
||||
|
||||
.push-mobile-6 {
|
||||
left: 50.0%; }
|
||||
left: 50%; }
|
||||
|
||||
.pull-mobile-6 {
|
||||
right: 50.0%; }
|
||||
right: 50%; }
|
||||
|
||||
.prefix-mobile-6 {
|
||||
margin-left: 50.0%; }
|
||||
margin-left: 50%; }
|
||||
|
||||
.suffix-mobile-6 {
|
||||
margin-right: 50.0%; }
|
||||
margin-right: 50%; }
|
||||
|
||||
.grid-mobile-7 {
|
||||
width: 58.33333%; }
|
||||
@ -3098,16 +3098,16 @@ html {
|
||||
width: 75%; }
|
||||
|
||||
.push-mobile-9 {
|
||||
left: 75.0%; }
|
||||
left: 75%; }
|
||||
|
||||
.pull-mobile-9 {
|
||||
right: 75.0%; }
|
||||
right: 75%; }
|
||||
|
||||
.prefix-mobile-9 {
|
||||
margin-left: 75.0%; }
|
||||
margin-left: 75%; }
|
||||
|
||||
.suffix-mobile-9 {
|
||||
margin-right: 75.0%; }
|
||||
margin-right: 75%; }
|
||||
|
||||
.grid-mobile-10 {
|
||||
width: 83.33333%; }
|
||||
@ -3143,16 +3143,16 @@ html {
|
||||
width: 100%; }
|
||||
|
||||
.push-mobile-12 {
|
||||
left: 100.0%; }
|
||||
left: 100%; }
|
||||
|
||||
.pull-mobile-12 {
|
||||
right: 100.0%; }
|
||||
right: 100%; }
|
||||
|
||||
.prefix-mobile-12 {
|
||||
margin-left: 100.0%; }
|
||||
margin-left: 100%; }
|
||||
|
||||
.suffix-mobile-12 {
|
||||
margin-right: 100.0%; }
|
||||
margin-right: 100%; }
|
||||
|
||||
.float-mobile-left {
|
||||
float: left; }
|
||||
@ -3323,16 +3323,16 @@ html {
|
||||
width: 25%; }
|
||||
|
||||
.push-tablet-3 {
|
||||
left: 25.0%; }
|
||||
left: 25%; }
|
||||
|
||||
.pull-tablet-3 {
|
||||
right: 25.0%; }
|
||||
right: 25%; }
|
||||
|
||||
.prefix-tablet-3 {
|
||||
margin-left: 25.0%; }
|
||||
margin-left: 25%; }
|
||||
|
||||
.suffix-tablet-3 {
|
||||
margin-right: 25.0%; }
|
||||
margin-right: 25%; }
|
||||
|
||||
.grid-tablet-4 {
|
||||
width: 33.33333%; }
|
||||
@ -3368,16 +3368,16 @@ html {
|
||||
width: 50%; }
|
||||
|
||||
.push-tablet-6 {
|
||||
left: 50.0%; }
|
||||
left: 50%; }
|
||||
|
||||
.pull-tablet-6 {
|
||||
right: 50.0%; }
|
||||
right: 50%; }
|
||||
|
||||
.prefix-tablet-6 {
|
||||
margin-left: 50.0%; }
|
||||
margin-left: 50%; }
|
||||
|
||||
.suffix-tablet-6 {
|
||||
margin-right: 50.0%; }
|
||||
margin-right: 50%; }
|
||||
|
||||
.grid-tablet-7 {
|
||||
width: 58.33333%; }
|
||||
@ -3413,16 +3413,16 @@ html {
|
||||
width: 75%; }
|
||||
|
||||
.push-tablet-9 {
|
||||
left: 75.0%; }
|
||||
left: 75%; }
|
||||
|
||||
.pull-tablet-9 {
|
||||
right: 75.0%; }
|
||||
right: 75%; }
|
||||
|
||||
.prefix-tablet-9 {
|
||||
margin-left: 75.0%; }
|
||||
margin-left: 75%; }
|
||||
|
||||
.suffix-tablet-9 {
|
||||
margin-right: 75.0%; }
|
||||
margin-right: 75%; }
|
||||
|
||||
.grid-tablet-10 {
|
||||
width: 83.33333%; }
|
||||
@ -3458,16 +3458,16 @@ html {
|
||||
width: 100%; }
|
||||
|
||||
.push-tablet-12 {
|
||||
left: 100.0%; }
|
||||
left: 100%; }
|
||||
|
||||
.pull-tablet-12 {
|
||||
right: 100.0%; }
|
||||
right: 100%; }
|
||||
|
||||
.prefix-tablet-12 {
|
||||
margin-left: 100.0%; }
|
||||
margin-left: 100%; }
|
||||
|
||||
.suffix-tablet-12 {
|
||||
margin-right: 100.0%; }
|
||||
margin-right: 100%; }
|
||||
|
||||
.float-tablet-left {
|
||||
float: left; }
|
||||
@ -4350,18 +4350,32 @@ GNU Affero General Public License for more details.
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
div.timeline div {
|
||||
margin: 0.7em 0.2em;
|
||||
background-color: #e6e6e6;
|
||||
padding: 0.3em; }
|
||||
div.timeline div div.summary {
|
||||
margin-left: 1em; }
|
||||
div.timeline-item {
|
||||
padding: 0.5em;
|
||||
overflow: auto;
|
||||
margin-bottom: 1.5em; }
|
||||
div.timeline-item.odd {
|
||||
background-color: #e6e6e6; }
|
||||
div.timeline-item.odd .summary {
|
||||
background-color: #fff; }
|
||||
div.timeline-item.even {
|
||||
background-color: #fff; }
|
||||
div.timeline-item.even .summary {
|
||||
background-color: #e6e6e6; }
|
||||
div.timeline-item .summary {
|
||||
margin: 1em;
|
||||
overflow: auto; }
|
||||
div.timeline-item h3 {
|
||||
margin-top: 0em;
|
||||
font-size: 1em; }
|
||||
div.timeline-item h3.single-line {
|
||||
margin-bottom: 0em; }
|
||||
|
||||
span.entity.entity-activity.activity-reason {
|
||||
font-variant: small-caps;
|
||||
display: inline;
|
||||
padding: .2em .6em .3em;
|
||||
font-size: 85%;
|
||||
font-size: 88%;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
@ -4371,6 +4385,15 @@ span.entity.entity-activity.activity-reason {
|
||||
color: white;
|
||||
background-color: #dd506d; }
|
||||
|
||||
.activity {
|
||||
color: #43b29d; }
|
||||
|
||||
.report {
|
||||
color: #df4949; }
|
||||
|
||||
.person {
|
||||
color: #334d5c; }
|
||||
|
||||
html, body {
|
||||
min-height: 100%;
|
||||
font-family: 'open_sansregular'; }
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -2,6 +2,8 @@
|
||||
@import 'custom/timeline';
|
||||
@import 'custom/mixins/entity';
|
||||
@import 'custom/activity';
|
||||
@import 'custom/report';
|
||||
@import 'custom/person';
|
||||
|
||||
html,body {
|
||||
min-height:100%;
|
||||
|
||||
@ -2,3 +2,6 @@ span.entity.entity-activity.activity-reason {
|
||||
@include entity($chill-pink, white);
|
||||
}
|
||||
|
||||
.activity {
|
||||
color: $chill-green;
|
||||
}
|
||||
|
||||
3
Resources/public/sass/custom/_person.scss
Normal file
3
Resources/public/sass/custom/_person.scss
Normal file
@ -0,0 +1,3 @@
|
||||
.person {
|
||||
color: $chill-blue;
|
||||
}
|
||||
3
Resources/public/sass/custom/_report.scss
Normal file
3
Resources/public/sass/custom/_report.scss
Normal file
@ -0,0 +1,3 @@
|
||||
.report {
|
||||
color: $chill-red;
|
||||
}
|
||||
@ -16,14 +16,38 @@ You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
div.timeline {
|
||||
div {
|
||||
margin: 0.7em 0.2em;
|
||||
background-color: #e6e6e6;
|
||||
padding: 0.3em;
|
||||
div.timeline-item {
|
||||
padding: 0.5em;
|
||||
overflow: auto;
|
||||
margin-bottom: 1.5em;
|
||||
|
||||
&.odd {
|
||||
background-color: $chill-llight-gray;
|
||||
|
||||
.summary {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
div.summary {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.even {
|
||||
background-color: $white;
|
||||
|
||||
.summary {
|
||||
background-color: $chill-llight-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.summary {
|
||||
margin: 1em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 0em;
|
||||
font-size: 1em;
|
||||
|
||||
&.single-line {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<div class="timeline">
|
||||
{% for result in results %}
|
||||
<div>
|
||||
<div class="timeline-item {% if loop.index0 is even %}even{% else %}odd{% endif %}">
|
||||
{% include result.template with result.template_data %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user