You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
engelsystem/shift_markup.html

121 lines
3.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="public/css/theme3.css" />
<style>
.shift-calendar {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-itmes: stretch;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-itmes: stretch;
width: 100%;
}
.shift-calendar .lane {
background: #f0f0f0;
flex-grow: 1;
min-width: 300px;
width: 300px;
flex-grow: 1;
}
.shift-calendar .lane.time {
flex-grow: 0;
min-width: 100px;
width: 100px;
flex-grow: 0;
}
.shift-calendar .lane .tick {
height: 20px;
border-top: 1px solid #ddd;
}
.shift-calendar .lane .tick.hour {
border-top: 1px solid #aaa;
}
.shift-calendar .shift {
margin-bottom: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div class="shift-calendar">
<div class="lane time">
<div class="tick hour">10:00</div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick hour">11:00</div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick hour">12:00</div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick hour">13:00</div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
</div>
<div class="lane">
<div class="tick hour"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="shift panel panel-success" style="height: 160px;">
<div class="panel-heading">
<a href="?p=shifts&amp;action=view&amp;shift_id=2696">00:00 02:00 — Bottle Collection</a>
<div class="pull-right">
<div class="btn-group">
<a href="?p=user_shifts&amp;edit_shift=2696" class="btn btn-default btn-xs"> <span class="glyphicon glyphicon-edit"></span>
</a> <a href="?p=user_shifts&amp;delete_shift=2696" class="btn btn-default btn-xs"> <span class="glyphicon glyphicon-trash"></span>
</a>
</div>
</div>
</div>
<div class="panel-body">
<span class="glyphicon glyphicon-info-sign"></span> Bottle Collection Quick Response Team<br> <a href="?p=rooms&amp;action=view&amp;room_id=42"> <span class="glyphicon glyphicon-map-marker"></span> Bottle Sorting (Hall H)
</a>
</div>
<ul class="list-group">
<li class="list-group-item"><strong><a href="?p=angeltypes&amp;action=view&amp;angeltype_id=104575">Angel</a>:</strong> <span style=""><a class="" href="?p=users&amp;action=view&amp;user_id=1755"><span class="icon-icon_angel"></span> Pantomime</a></span>, <span style=""><a
class="" href="?p=users&amp;action=view&amp;user_id=50"><span class="icon-icon_angel"></span> sandzwerg</a></span></li>
<li class="list-group-item"><a href="?p=user_shifts&amp;shift_id=2696&amp;type_id=104575" class="btn btn-default btn-xs">Neue Engel hinzufügen</a></li>
</ul>
<div class="shift-spacer"></div>
</div>
<div class="tick hour"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
</div>
<div class="lane">
<div class="tick hour"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick hour"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick hour"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick hour"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
</div>
</div>
</body>
</html>