Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

style popups

Browse source
This commit is contained in:
Felix Niklas 2014-07-15 10:30:50 +02:00
parent b190b93531
commit 5bc6226090
2 changed files with 150 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
app/assets/javascripts/app/views/navigation.jst.eco
View file

@ -88,4 +88,44 @@
<li><a href="#login"><%- @T( 'Sign in' ) %></a></li>
</ul>
-->
<% end %>
<% end %>
<div class="popover right" style="left: 255px; top: 20px; display: block;">
<div class="arrow"></div>
<h2 class="popover-title">Neuer Statuscheck, so sieht das mit zwei Zeilen Headline aus</h2>
<div class="popover-content">
<div class="level-2">
<div class="priority icon"></div>
eskalierend
</div>
<hr>
<h3>Personen</h3>
<div class="person">
Doreen Kubiak <span class="company">Steuerbüro C. Kaik</span>
</div>
<div class="person">
Martin Edenhofer <span class="company">Znuny GmbH</span>
</div>
<div class="person">
Oliver Ruhm <span class="company">Zeughaus GmbH</span>
</div>
<hr>
<div class="horizontal two-column wrap">
<div class="column">
<h3>ID</h3>
<div class="contain-text">#10009</div>
</div>
<div class="column">
<h3>Priorität</h3>
<div class="contain-text">2 normal</div>
</div>
<div class="column">
<h3>Erstellt vor</h3>
<div class="contain-text">60 Tagen (02. Feb. 2013)</div>
</div>
<div class="column">
<h3>Gruppe</h3>
<div class="contain-text">Billing</div>
</div>
</div>
</div>
</div>

124
app/assets/stylesheets/zzz.css.erb
View file

@ -42,11 +42,6 @@ table th, table td {
display: table-cell;
border-bottom: 1px solid #eeeeee;
}
.popover {
min-width: 240px;
z-index: 1110;
}
.hero-two {
width: 100%;
}
@ -378,18 +373,27 @@ h1 {
line-height: 29px;
color: rgba(0,8,14,.73);
}
h2 {
h2,
h2.popover-title {
font-size: 19px;
line-height: 25px;
color: rgba(0,8,14,.73);
}
h3 {
font-size: 22px;
margin-top: 10px;
font-size: 13px;
margin: 14px 0 6px;
color: #a9bcc4;
font-weight: 200;
text-transform: uppercase;
letter-spacing: 0.07em;
}
h4 {
font-size: 20px;
}
h5 {
font-size: 16px;
}
@ -1305,13 +1309,16 @@ footer {
.task {
height: 38px;
padding: 10px 15px 10px 8px;
color: #808080;
padding: 10px 15px 7px 8px;
border-bottom: 1px solid #33363e;
cursor: pointer;
position: relative;
}
.task .name {
color: #808080;
}
.task:hover {
text-decoration: none;
}
@ -1329,7 +1336,7 @@ footer {
background: #26272e;
}
.task.active {
.task.active .name {
color: white;
}
@ -1340,6 +1347,10 @@ footer {
border-color: white;
}
.level-2 {
color: #38ae6a;
}
.level-1 .priority.icon,
.level-1.active,
.level-1.active .priority.icon:after,
@ -1347,6 +1358,11 @@ footer {
.level-1 .modified.priority.icon:after {
background-color: #38ae6a;
border-color: #38ae6a;
color: #38ae6a;
}
.level-2 {
color: #f35910;
}
.level-2 .priority.icon,
@ -1356,6 +1372,11 @@ footer {
.level-2 .modified.priority.icon:after {
background-color: #f35910;
border-color: #f35910;
color: #f35910;
}
.level-3 {
color: #faab00;
}
.level-3 .priority.icon,
@ -1480,17 +1501,20 @@ footer {
margin-right: 13px;
}
.search .custom-dropdown-menu > li:hover > a {
.search .custom-dropdown-menu > li:hover > a,
.search .custom-dropdown-menu > li.active > a {
background: #3fa9f5;
color: white;
text-decoration: none;
}
.search .custom-dropdown-menu > li:hover > a .priority.icon {
.search .custom-dropdown-menu > li:hover > a .priority.icon,
.search .custom-dropdown-menu > li.active > a .priority.icon {
background: white;
}
.search .custom-dropdown-menu > li:hover > a .priority.icon:after {
.search .custom-dropdown-menu > li:hover > a .priority.icon:after,
.search .custom-dropdown-menu > li.active > a .priority.icon:after {
background: #3fa9f5;
}
@ -1668,4 +1692,74 @@ footer {
padding: 10px 20px;
background: #f8f9fa;
overflow: auto;
}
}
.popover {
width: 372px;
max-width: 9999px;
border-radius: 0;
border: none;
z-index: 1110;
box-shadow: 0 1px 14px rgba(0,8,14,.25);
}
.popover-title {
border: none;
background: none;
padding: 20px 17px 4px;
}
.popover-content {
padding: 0 17px 10px;
}
.popover.right { margin-left: 4px; }
.popover.right > .arrow {
border-right: none;
left: -9px;
}
.popover.top { margin-bottom: 9px; }
.popover.top > .arrow {
border-top: none;
bottom: -9px;
}
.popover.left { margin-right: 9px; }
.popover.left > .arrow {
border-left: none;
right: -9px;
}
.popover.bottom { margin-top: 9px; }
.popover.bottom > .arrow {
border-bottom: none;
top: -9px;
}
.popover > .arrow:after {
border-width: 8px;
}
.popover .priority.icon:after {
background: white;
}
.popover .person .company {
color: #a1a4a7;
}
.popover hr {
margin: 8px 0;
}
.popover .person .company:before { content: '('; }
.popover .person .company:after { content: ')'; }
.popover .column h3 {
margin: 8px 0 1px;
}
.popover .column {
margin-bottom: 8px;
}