style .tasks
This commit is contained in:
Felix Niklas
parent
ef19624d83
commit
f11a12f98e
2 changed files with 273 additions and 3 deletions
|
|
@ -41,7 +41,124 @@
|
||||||
<li class="customers"><a href="#">Customers</a></li>
|
<li class="customers"><a href="#">Customers</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div class="tasks flex"></div>
|
<div class="tasks flex">
|
||||||
|
<div class="task level-1 horizontal center">
|
||||||
|
<div class="priority icon"></div>
|
||||||
|
<div class="name contain-text flex">Klischee nicht sauber ausgearbeitet</div>
|
||||||
|
<div class="close-task button horizontal centered">
|
||||||
|
<div class="close-task icon"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="task level-2 horizontal center">
|
||||||
|
<div class="modified priority icon"></div>
|
||||||
|
<div class="name contain-text flex">Probleme mit Siebdruck</div>
|
||||||
|
<div class="close-task button horizontal centered">
|
||||||
|
<div class="close-task icon"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="task level-3 horizontal center">
|
||||||
|
<div class="priority icon"></div>
|
||||||
|
<div class="name contain-text flex">Programmfehler</div>
|
||||||
|
<div class="close-task button horizontal centered">
|
||||||
|
<div class="close-task icon"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="task level-2 horizontal center">
|
||||||
|
<div class="modified priority icon"></div>
|
||||||
|
<div class="name contain-text flex">Tonerstaub unter Glasplatte</div>
|
||||||
|
<div class="close-task button horizontal centered">
|
||||||
|
<div class="close-task icon"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="task level-1 horizontal center">
|
||||||
|
<div class="priority icon"></div>
|
||||||
|
<div class="name contain-text flex">Programmfehler</div>
|
||||||
|
<div class="close-task button horizontal centered">
|
||||||
|
<div class="close-task icon"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="task level-1 horizontal center">
|
||||||
|
<div class="modified priority icon"></div>
|
||||||
|
<div class="name contain-text flex">Super Service!</div>
|
||||||
|
<div class="close-task button horizontal centered">
|
||||||
|
<div class="close-task icon"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="task level-2 horizontal center">
|
||||||
|
<div class="priority icon"></div>
|
||||||
|
<div class="name contain-text flex">Probleme mit Siebdruck</div>
|
||||||
|
<div class="close-task button horizontal centered">
|
||||||
|
<div class="close-task icon"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="task level-3 horizontal center">
|
||||||
|
<div class="priority icon"></div>
|
||||||
|
<div class="name contain-text flex">Programmfehler</div>
|
||||||
|
<div class="close-task button horizontal centered">
|
||||||
|
<div class="close-task icon"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="task level-2 horizontal center">
|
||||||
|
<div class="priority icon"></div>
|
||||||
|
<div class="name contain-text flex">Tonerstaub unter Glasplatte</div>
|
||||||
|
<div class="close-task button horizontal centered">
|
||||||
|
<div class="close-task icon"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="task level-1 horizontal center">
|
||||||
|
<div class="priority icon"></div>
|
||||||
|
<div class="name contain-text flex">Programmfehler</div>
|
||||||
|
<div class="close-task button horizontal centered">
|
||||||
|
<div class="close-task icon"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="task level-1 horizontal center">
|
||||||
|
<div class="priority icon"></div>
|
||||||
|
<div class="name contain-text flex">Super Service!</div>
|
||||||
|
<div class="close-task button horizontal centered">
|
||||||
|
<div class="close-task icon"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="task level-2 horizontal center">
|
||||||
|
<div class="priority icon"></div>
|
||||||
|
<div class="name contain-text flex">Probleme mit Siebdruck</div>
|
||||||
|
<div class="close-task button horizontal centered">
|
||||||
|
<div class="close-task icon"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="task level-3 horizontal center">
|
||||||
|
<div class="priority icon"></div>
|
||||||
|
<div class="name contain-text flex">Programmfehler</div>
|
||||||
|
<div class="close-task button horizontal centered">
|
||||||
|
<div class="close-task icon"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="task level-2 horizontal center">
|
||||||
|
<div class="priority icon"></div>
|
||||||
|
<div class="name contain-text flex">Tonerstaub unter Glasplatte</div>
|
||||||
|
<div class="close-task button horizontal centered">
|
||||||
|
<div class="close-task icon"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="task level-1 horizontal center">
|
||||||
|
<div class="priority icon"></div>
|
||||||
|
<div class="name contain-text flex">Programmfehler</div>
|
||||||
|
<div class="close-task button horizontal centered">
|
||||||
|
<div class="close-task icon"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="task level-1 horizontal center">
|
||||||
|
<div class="priority icon"></div>
|
||||||
|
<div class="name contain-text flex">Super Service!</div>
|
||||||
|
<div class="close-task button horizontal centered">
|
||||||
|
<div class="close-task icon"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$('.task').click(function(){ $(this).toggleClass('active') })
|
||||||
|
</script>
|
||||||
<!-- <div class="spinner"></div> -->
|
<!-- <div class="spinner"></div> -->
|
||||||
|
|
||||||
<% if !_.isEmpty(@user): %>
|
<% if !_.isEmpty(@user): %>
|
||||||
|
|
|
||||||
|
|
@ -669,7 +669,7 @@ ol.tabs li {
|
||||||
.contain-text {
|
.contain-text {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.separator {
|
.separator {
|
||||||
|
|
@ -776,6 +776,75 @@ ol.tabs li {
|
||||||
background-position: 0 -96px;
|
background-position: 0 -96px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.priority.icon {
|
||||||
|
background: none;
|
||||||
|
border-radius: 100%;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.modified.priority.icon {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
background: none !important;
|
||||||
|
border: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.priority.icon:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
margin: -3px 0 0 -3px;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 100%;
|
||||||
|
background: #2c2d36;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modified.priority.icon:after {
|
||||||
|
-webkit-animation: fade 1s ease 2s infinite alternate;
|
||||||
|
-moz-animation: fade 1s ease 2s infinite alternate;
|
||||||
|
-ms-animation: fade 1s ease 2s infinite alternate;
|
||||||
|
animation: fade 1s ease 2s infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fade { from { opacity: 0 } to { opacity: 1 } }
|
||||||
|
@-moz-keyframes fade { from { opacity: 0 } to { opacity: 1 } }
|
||||||
|
@-ms-keyframes fade { from { opacity: 0 } to { opacity: 1 } }
|
||||||
|
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
|
||||||
|
|
||||||
|
.close-task.icon {
|
||||||
|
background: #2c2d36;
|
||||||
|
border-radius: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-task.icon:before,
|
||||||
|
.close-task.icon:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -1px;
|
||||||
|
top: 20%;
|
||||||
|
height: 60%;
|
||||||
|
width: 2px;
|
||||||
|
background: #586066;
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
-moz-transform: rotate(45deg);
|
||||||
|
-ms-transform: rotate(45deg);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-task.icon:after {
|
||||||
|
-webkit-transform: rotate(-45deg);
|
||||||
|
-moz-transform: rotate(-45deg);
|
||||||
|
-ms-transform: rotate(-45deg);
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs
|
* removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs
|
||||||
*/
|
*/
|
||||||
|
|
@ -1202,9 +1271,93 @@ footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
.tasks {
|
.tasks {
|
||||||
background: #2c2d36;
|
background: #2c2d36;
|
||||||
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.task {
|
||||||
|
height: 38px;
|
||||||
|
padding: 10px 15px 10px 8px;
|
||||||
|
color: #808080;
|
||||||
|
border-bottom: 1px solid #33363e;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task .priority.icon {
|
||||||
|
margin-top: -2px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task .modified.priority.icon {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task:hover {
|
||||||
|
background: #26272e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task.active {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task.active .priority.icon,
|
||||||
|
.task.active .modified.priority.icon,
|
||||||
|
.task.active .modified.priority.icon:after {
|
||||||
|
background: white;
|
||||||
|
border-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level-1 .priority.icon,
|
||||||
|
.level-1.active,
|
||||||
|
.level-1.active .priority.icon:after,
|
||||||
|
.level-1 .modified.priority.icon,
|
||||||
|
.level-1 .modified.priority.icon:after {
|
||||||
|
background-color: #38ae6a;
|
||||||
|
border-color: #38ae6a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level-2 .priority.icon,
|
||||||
|
.level-2.active,
|
||||||
|
.level-2.active .priority.icon:after,
|
||||||
|
.level-2 .modified.priority.icon,
|
||||||
|
.level-2 .modified.priority.icon:after {
|
||||||
|
background-color: #f35910;
|
||||||
|
border-color: #f35910;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level-3 .priority.icon,
|
||||||
|
.level-3.active,
|
||||||
|
.level-3.active .priority.icon:after,
|
||||||
|
.level-3 .modified.priority.icon,
|
||||||
|
.level-3 .modified.priority.icon:after {
|
||||||
|
background-color: #faab00;
|
||||||
|
border-color: #faab00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task .close-task.button {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 40px;
|
||||||
|
padding-left: 12px;
|
||||||
|
height: 100%;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task:hover .close-task.button {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-task.button:hover .icon {
|
||||||
|
background: #972e29;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-task.button:hover .icon:after,
|
||||||
|
.close-task.button:hover .icon:before {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
padding: 10px 15px 10px 10px;
|
padding: 10px 15px 10px 10px;
|
||||||
border-bottom: 1px solid rgba(240, 250, 255, .05);
|
border-bottom: 1px solid rgba(240, 250, 255, .05);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue