lucas.mathieu/cachet-docker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Playing around with a new timeline view, may want restyling.

Browse Source
This commit is contained in:
James Brooks
2014-12-27 23:59:28 +00:00
parent cb8e0ab210
commit f859597336
5 changed files with 310 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
app/assets/sass/_status-page.scss
View File

@@ -63,22 +63,116 @@ body.status-page {
}
}
.badge {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 12px;
padding-right: 12px;
&.badge-incident-1 {
background-color: $orange;
.timeline {
.content-wrapper {
margin-top: 40px;
margin-bottom: 40px;
}
&.badge-incident-2 {
background-color: $yellow;
h3 {
margin-top: 30px;
margin-bottom: 40px;
font-size: 22px;
small {
margin-left: 15px;
}
}
&.badge-incident-3 {
background-color: $blue;
.moment {
width: 100%;
padding-bottom: 50px;
position: relative;
&.first {
&:before {
height: 130%;
top: -20px;
}
&:after {
content: '';
position: absolute;
left: 23px;
top: -20px;
width: 7px;
height: 7px;
background: $grey;
border-radius: 50%;
}
}
&:before {
content: '';
position: absolute;
left: 25px;
top: 5px;
width: 3px;
height: 100%;
background: #eee;
}
.icon {
background: #000;
width: 35px;
height: 35px;
border-radius: 50%;
position: absolute;
left: 24px;
top: 4px;
.fa {
color: #fff;
position: absolute;
&.fa-flag {
top: 10px;
left: 11px;
}
&.fa-warning {
top: 10px;
left: 11px;
}
&.fa-eye {
top: 10px;
left: 11px;
}
&.fa-check {
top: 10px;
left: 11px;
}
}
&.status-1 {
background-color: $orange;
}
&.status-2 {
background-color: $yellow;
}
&.status-3 {
background-color: $blue;
}
&.status-4 {
background-color: $green;
}
}
&.last:before {
background: #fff;
}
.message .content {
float: left;
width: 80%;
p {
margin-top: 15px;
color: #555;
.date {
display: block;
color: $dark-grey;
margin-bottom: 6px;
font-size: 13px;
}
}
}
}
&.badge-incident-4 {
background-color: $green;
}
@media (max-width: 991px) {
.timeline .moment .icon {
left: 17px;
}
}
@media (max-width: 767px) {
.timeline .moment .message .content {
width: 100%;
}
}
@@ -93,24 +187,8 @@ body.status-page {
border: 1px solid $grey;
font-size: 1.1em;
span.badge {
position: absolute;
top: 0;
right: 0;
border-radius: 0;
display: block;
}
i.glyphicon {
font-size: 1.4em;
color: rgba(white, 0.9);
}
h1, h2, h3, h4 {
margin-bottom: 2px;
}
h4 {
margin-bottom: 2px;
font-weight: 400;
max-width: 90%;
}
@@ -119,29 +197,6 @@ body.status-page {
margin-bottom: 0;
line-height: 1.3em;
}
time {
color: #6C7A89;
// letter-spacing: 0.02em;
font-weight: 300;
font-size: 1.1em;
}
&.active {
background-color: #F2F1EF;
h3 {
color: #22313F;
padding-top: 2px;
padding-bottom: 2px;
font-weight: 600;
font-size: 1.4em;
}
&:hover {
color: inherit;
border-color: $grey;
}
}
}
&.components {