navbar: tasks and search
This commit is contained in:
Felix Niklas
parent
f11a12f98e
commit
b20443a0db
5 changed files with 239 additions and 70 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="72px" height="115px" viewBox="0 0 72 115" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<svg width="72px" height="141px" viewBox="0 0 72 141" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<title>sprite</title>
|
||||
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
|
||||
<defs></defs>
|
||||
|
|
@ -13,5 +13,9 @@
|
|||
<path d="M31,66 L31,59 L30,59 L30,66 L23,66 L23,67 L30,67 L30,74 L31,74 L31,67 L38,67 L38,66 L31,66 Z" id="green-plus" stroke="#38AE6A" stroke-width="2" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M31,86 L31,79 L30,79 L30,86 L23,86 L23,87 L30,87 L30,94 L31,94 L31,87 L38,87 L38,86 L31,86 Z" id="white-plus" stroke="#FFFFFF" stroke-width="2" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M5.324,110.89 L11.883,105.477 L5.324,100.064 L5.324,103.596 L0,103.596 L0,107.358 L5.324,107.358 L5.324,110.89 L5.324,110.89 Z M3.644,96 L3.644,97.542 L13.052,97.542 L13.052,113.459 L3.644,113.459 L3.644,115 L14.593,115 L14.593,96 L3.644,96 L3.644,96 Z" id="sign-out" fill="#0F94D7" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M4,128 L9,128 L9,116 L4,116 L4,128 Z M7,125 L8,125 L8,126 L7,126 L7,125 Z M6,123 L7,123 L7,124 L6,124 L6,123 Z M7,121 L8,121 L8,122 L7,122 L7,121 Z M6,119 L7,119 L7,120 L6,120 L6,119 Z M7,117 L8,117 L8,118 L7,118 L7,117 Z M4,117 L5,117 L5,118 L4,118 L4,117 Z M4,121 L5,121 L5,122 L4,122 L4,121 Z M4,125 L5,125 L5,126 L4,126 L4,125 Z M1.52039063e-16,128 L3,128 L3,120 L0,120 L1.52039063e-16,128 Z M1,121 L2,121 L2,122 L1,122 L1,121 Z M1,123 L2,123 L2,124 L1,124 L1,123 Z M1,125 L2,125 L2,126 L1,126 L1,125 Z M13.4247788,119.05212 L12.719469,119.05212 L12.719469,117.471392 L12.2123894,117.471392 L12.2123894,116 L11.7876106,116 L11.7876106,117.471392 L11.280531,117.471392 L11.280531,119.05212 L10.5743363,119.05212 L10.5743363,120.672689 L10,120.672689 L10,128 L14,128 L14,120.672689 L13.4247788,120.672689 L13.4247788,119.05212 Z M10,126 L11,126 L11,127 L10,127 L10,126 Z M10,122 L11,122 L11,123 L10,123 L10,122 Z M12,124 L13,124 L13,125 L12,125 L12,124 Z" id="organisation" fill="#808080" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M4,141 L9,141 L9,129 L4,129 L4,141 Z M7,138 L8,138 L8,139 L7,139 L7,138 Z M6,136 L7,136 L7,137 L6,137 L6,136 Z M7,134 L8,134 L8,135 L7,135 L7,134 Z M6,132 L7,132 L7,133 L6,133 L6,132 Z M7,130 L8,130 L8,131 L7,131 L7,130 Z M4,130 L5,130 L5,131 L4,131 L4,130 Z M4,134 L5,134 L5,135 L4,135 L4,134 Z M4,138 L5,138 L5,139 L4,139 L4,138 Z M1.52039063e-16,141 L3,141 L3,133 L0,133 L1.52039063e-16,141 Z M1,134 L2,134 L2,135 L1,135 L1,134 Z M1,136 L2,136 L2,137 L1,137 L1,136 Z M1,138 L2,138 L2,139 L1,139 L1,138 Z M13.4247788,132.05212 L12.719469,132.05212 L12.719469,130.471392 L12.2123894,130.471392 L12.2123894,129 L11.7876106,129 L11.7876106,130.471392 L11.280531,130.471392 L11.280531,132.05212 L10.5743363,132.05212 L10.5743363,133.672689 L10,133.672689 L10,141 L14,141 L14,133.672689 L13.4247788,133.672689 L13.4247788,132.05212 Z M10,139 L11,139 L11,140 L10,140 L10,139 Z M10,135 L11,135 L11,136 L10,136 L10,135 Z M12,137 L13,137 L13,138 L12,138 L12,137 Z" id="organisation" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M26.3210957,124.814779 C25.6167174,124.516346 24.8342889,124.169622 24.1299105,123.879881 C23.9294855,123.825796 23.7280968,123.770745 23.5267082,123.715694 C23.2877399,123.549576 23.0526259,123.000034 22.9244695,122.727677 C22.7963131,122.708361 22.6700839,122.690976 22.5409639,122.672626 C22.5611992,122.248638 22.8232934,122.226425 22.9244695,121.90288 C23.0150462,121.618934 22.9341054,121.249031 23.0767155,120.984401 C23.176928,120.801864 23.4024062,120.799932 23.5141817,120.643472 C23.6163213,120.500533 23.6837721,120.251356 23.7155703,120.07558 C23.7733852,119.756864 23.824455,119.321287 23.6731727,119.004503 C23.5854867,118.823898 23.5305625,118.805548 23.506473,118.585344 C23.4785291,118.316851 23.5854867,117.44473 23.5883775,117.256398 C23.600904,116.766736 23.5883775,116.727138 23.4708205,116.250031 C23.4708205,116.250031 23.3272468,115.818316 23.1036958,115.688899 L22.653703,115.611634 L22.377155,115.35473 C21.2603636,114.665147 20.0635949,115.148048 19.4218493,115.408815 C18.4987379,115.70918 17.9138437,116.61607 18.3224024,118.553473 C18.3908167,118.883778 18.1402854,119.032511 18.1576299,119.212151 C18.1932824,119.606199 18.2009911,120.55655 18.5729337,120.790274 C18.6076226,120.811522 18.8716441,120.878163 18.8687533,120.859812 C18.906333,121.245168 18.9419855,121.629558 18.9795652,122.013948 C19.0720691,122.26892 19.2956201,122.297894 19.3601801,122.658139 L19.0739963,122.727677 C18.9468035,123.000034 18.7107259,123.549576 18.4717576,123.715694 C18.270369,123.770745 18.0709075,123.825796 17.8695189,123.879881 C17.1661041,124.169622 16.382712,124.516346 15.6773701,124.814779 C15.0356245,125.08617 14.2657226,125.18275 14.0334993,125.857847 C14.0334993,126.316604 13.9911017,127.39927 14.0017011,128 L20.1445358,128 L20.5954921,124.912325 L20.2206587,124.1194 L21.0859553,123.704105 L21.8153868,124.110708 L21.4135731,124.926812 L22.1246966,128 L27.9977282,128 C28.0102548,127.39927 27.9668936,126.316604 27.9668936,125.857847 C27.7327432,125.18275 26.9647684,125.08617 26.3210957,124.814779 Z" id="user" fill="#808080" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M26.3210957,137.814779 C25.6167174,137.516346 24.8342889,137.169622 24.1299105,136.879881 C23.9294855,136.825796 23.7280968,136.770745 23.5267082,136.715694 C23.2877399,136.549576 23.0526259,136.000034 22.9244695,135.727677 C22.7963131,135.708361 22.6700839,135.690976 22.5409639,135.672626 C22.5611992,135.248638 22.8232934,135.226425 22.9244695,134.90288 C23.0150462,134.618934 22.9341054,134.249031 23.0767155,133.984401 C23.176928,133.801864 23.4024062,133.799932 23.5141817,133.643472 C23.6163213,133.500533 23.6837721,133.251356 23.7155703,133.07558 C23.7733852,132.756864 23.824455,132.321287 23.6731727,132.004503 C23.5854867,131.823898 23.5305625,131.805548 23.506473,131.585344 C23.4785291,131.316851 23.5854867,130.44473 23.5883775,130.256398 C23.600904,129.766736 23.5883775,129.727138 23.4708205,129.250031 C23.4708205,129.250031 23.3272468,128.818316 23.1036958,128.688899 L22.653703,128.611634 L22.377155,128.35473 C21.2603636,127.665147 20.0635949,128.148048 19.4218493,128.408815 C18.4987379,128.70918 17.9138437,129.61607 18.3224024,131.553473 C18.3908167,131.883778 18.1402854,132.032511 18.1576299,132.212151 C18.1932824,132.606199 18.2009911,133.55655 18.5729337,133.790274 C18.6076226,133.811522 18.8716441,133.878163 18.8687533,133.859812 C18.906333,134.245168 18.9419855,134.629558 18.9795652,135.013948 C19.0720691,135.26892 19.2956201,135.297894 19.3601801,135.658139 L19.0739963,135.727677 C18.9468035,136.000034 18.7107259,136.549576 18.4717576,136.715694 C18.270369,136.770745 18.0709075,136.825796 17.8695189,136.879881 C17.1661041,137.169622 16.382712,137.516346 15.6773701,137.814779 C15.0356245,138.08617 14.2657226,138.18275 14.0334993,138.857847 C14.0334993,139.316604 13.9911017,140.39927 14.0017011,141 L20.1445358,141 L20.5954921,137.912325 L20.2206587,137.1194 L21.0859553,136.704105 L21.8153868,137.110708 L21.4135731,137.926812 L22.1246966,141 L27.9977282,141 C28.0102548,140.39927 27.9668936,139.316604 27.9668936,138.857847 C27.7327432,138.18275 26.9647684,138.08617 26.3210957,137.814779 Z" id="user" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 14 KiB |
|
|
@ -49,7 +49,7 @@ class App.Navigation extends App.Controller
|
|||
|
||||
# remove result if not result exists
|
||||
if _.isEmpty( result )
|
||||
@el.find('.dropdown').removeClass('open')
|
||||
@el.find('.search').removeClass('open')
|
||||
el.html( '' )
|
||||
|
||||
# remove old popovers
|
||||
|
|
@ -63,7 +63,7 @@ class App.Navigation extends App.Controller
|
|||
el.html( html )
|
||||
|
||||
# show result list
|
||||
@el.find('.dropdown').addClass('open')
|
||||
@el.find('.search').addClass('open')
|
||||
|
||||
# start ticket popups
|
||||
@ticketPopups()
|
||||
|
|
@ -136,30 +136,34 @@ class App.Navigation extends App.Controller
|
|||
ticket = App.Ticket.find( id )
|
||||
ticket.humanTime = @humanTime(ticket.created_at)
|
||||
data =
|
||||
display: "##{ticket.number} - #{ticket.title} - #{ticket.humanTime}"
|
||||
id: ticket.id
|
||||
class: "ticket-popover"
|
||||
url: ticket.uiUrl()
|
||||
display: "##{ticket.number} - #{ticket.title}"
|
||||
createt_at: "#{ticket.created_at}"
|
||||
humanTime: "#{ticket.humanTime}"
|
||||
id: ticket.id
|
||||
class: "task level-1 ticket-popover"
|
||||
url: ticket.uiUrl()
|
||||
iconClass: "priority"
|
||||
area.result.push data
|
||||
else if area.name is 'User'
|
||||
area.result = []
|
||||
for id in area.ids
|
||||
user = App.User.find( id )
|
||||
data =
|
||||
display: "#{user.displayName()}"
|
||||
id: user.id
|
||||
class: "user-popover"
|
||||
url: user.uiUrl()
|
||||
display: "#{user.displayName()}"
|
||||
id: user.id
|
||||
class: "user user-popover"
|
||||
iconClass: "user"
|
||||
area.result.push data
|
||||
else if area.name is 'Organization'
|
||||
area.result = []
|
||||
for id in area.ids
|
||||
organization = App.Organization.find( id )
|
||||
data =
|
||||
display: "#{organization.displayName()}"
|
||||
id: organization.id
|
||||
class: "organization-popover"
|
||||
url: organization.uiUrl()
|
||||
display: "#{organization.displayName()}"
|
||||
id: organization.id
|
||||
class: "organisation organization-popover"
|
||||
url: organization.uiUrl()
|
||||
iconClass: "organisation"
|
||||
area.result.push data
|
||||
|
||||
@renderResult(result)
|
||||
|
|
@ -171,6 +175,8 @@ class App.Navigation extends App.Controller
|
|||
# remember to set search box
|
||||
@searchFocus = true
|
||||
|
||||
@el.find('.search').addClass('focused')
|
||||
|
||||
# check if search is needed
|
||||
@term = @el.find('#global-search').val()
|
||||
return if @searchFocusSet
|
||||
|
|
@ -180,6 +186,8 @@ class App.Navigation extends App.Controller
|
|||
|
||||
# remove search result
|
||||
@el.find('#global-search').bind( 'focusout', (e) =>
|
||||
@el.find('.search').removeClass('focused')
|
||||
|
||||
@delay(
|
||||
=>
|
||||
@searchFocus = false
|
||||
|
|
@ -189,13 +197,14 @@ class App.Navigation extends App.Controller
|
|||
)
|
||||
|
||||
# prevent submit of search box
|
||||
@el.find('#global-search').parent().bind( 'submit', (e) =>
|
||||
@el.find('form.search').bind( 'submit', (e) =>
|
||||
e.preventDefault()
|
||||
)
|
||||
|
||||
# start search
|
||||
@el.find('#global-search').bind( 'keyup', (e) =>
|
||||
@term = @el.find('#global-search').val()
|
||||
|
||||
return if !@term
|
||||
return if @term is search
|
||||
@delay( searchFunction, 220, 'search' )
|
||||
|
|
|
|||
|
|
@ -1,16 +1,66 @@
|
|||
<form class="search horizontal dropdown">
|
||||
<input id="global-search" class="flex" type="search" autocomplete="off">
|
||||
<form class="search horizontal">
|
||||
<div class="search-holder flex">
|
||||
<input id="global-search" type="search" autocomplete="off">
|
||||
<div class="empty-search horizontal centered">
|
||||
<div class="close icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="logo" title="<%- @C( 'product_name' ) %>"></div>
|
||||
<ul id="global-search-result" class="dropdown-menu" role="menu">
|
||||
<ul id="global-search-result" class="custom-dropdown-menu" role="menu">
|
||||
|
||||
<li class="divider" style="padding: 2px 10px; height: auto; margin: 4px 0px;">Ticket</li>
|
||||
|
||||
<li><a href="#ticket/zoom/1" class="ticket-popover" data-id="1" data-original-title="" title="">#10001 - Welcome to Zammad! - 5 d 19 h</a></li>
|
||||
|
||||
<li>
|
||||
<a href="#ticket/zoom/1" class="task level-1 ticket-popover horizontal center icon-switch" data-id="1" data-original-title="" title="">
|
||||
<div class="priority icon"></div>
|
||||
<div class="flex contain-text">
|
||||
|
||||
|
||||
#10001 - Welcome to Zammad! -
|
||||
<time datetime="2014-07-02T19:18:54.000Z">7 d 13 h</time>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="divider" style="padding: 2px 10px; height: auto; margin: 4px 0px;">User</li>
|
||||
<li class="divider"></li>
|
||||
|
||||
<li><a href="#user/zoom/2" class="user-popover" data-id="2" data-original-title="" title="">Nicole Braun</a></li>
|
||||
<li>
|
||||
<a href="" class="user user-popover horizontal center icon-switch" data-id="3" data-original-title="" title="">
|
||||
<div class="user icon"></div>
|
||||
<div class="flex contain-text">
|
||||
|
||||
|
||||
Felix Niklas
|
||||
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="" class="user user-popover horizontal center icon-switch" data-id="4" data-original-title="" title="">
|
||||
<div class="user icon"></div>
|
||||
<div class="flex contain-text">
|
||||
|
||||
|
||||
Franz Lautner
|
||||
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="" class="user user-popover horizontal center icon-switch" data-id="2" data-original-title="" title="">
|
||||
<div class="user icon icon"></div>
|
||||
<div class="flex contain-text">
|
||||
|
||||
|
||||
Nicole Braun
|
||||
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
|
@ -46,112 +96,112 @@
|
|||
<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 class="close icon close-task"></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 class="close icon close-task"></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 class="close icon close-task"></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 class="close icon close-task"></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 class="close icon close-task"></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 class="close icon close-task"></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 class="close icon close-task"></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 class="close icon close-task"></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 class="close icon close-task"></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 class="close icon close-task"></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 class="close icon close-task"></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 class="close icon close-task"></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 class="close icon close-task"></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 class="close icon close-task"></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 class="close icon close-task"></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 class="close icon close-task"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,19 @@
|
|||
<% for area in @result: %>
|
||||
<li class="divider" style="padding: 2px 10px; height: auto; margin: 4px 0px;"><%- @T( area.name ) %></li>
|
||||
<% for area, i in @result: %>
|
||||
<% if i > 0: %> <li class="divider"></li> <% end %>
|
||||
<% for item in area.result: %>
|
||||
<li><a href="<%- item.url %>" class="<%= item.class %>" data-id="<%= item.id %>"><%= item.display %></a></li>
|
||||
<li>
|
||||
<a href="<%- item.url %>" class="<%= item.class %> horizontal center icon-switch" data-id="<%= item.id %>">
|
||||
<div class="<%= item.iconClass %> icon"></div>
|
||||
<div class="flex contain-text">
|
||||
<% console.log area.name %>
|
||||
<% if area.name is "Ticket": %>
|
||||
<%= item.display %> -
|
||||
<time datetime="<%= item.createt_at %>"><%= item.humanTime %></time>
|
||||
<% else: %>
|
||||
<%= item.display %>
|
||||
<% end %>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
body {
|
||||
font-family: "FiraSansOT", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
line-height: 1.7;
|
||||
background: #2c2d36;
|
||||
}
|
||||
|
||||
#app > nav {
|
||||
|
|
@ -521,20 +522,6 @@ label {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
/*
|
||||
min-width: 270px;
|
||||
*/
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a {
|
||||
font-weight: 200;
|
||||
max-width: 340px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dropdown-menu .count {
|
||||
padding-top: 1px;
|
||||
margin-left: 10px;
|
||||
|
|
@ -579,6 +566,10 @@ label {
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
.login, .getstarted, .reset_password, .signup {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.login .hero-unit {
|
||||
width: 430px;
|
||||
}
|
||||
|
|
@ -816,35 +807,67 @@ ol.tabs li {
|
|||
@-ms-keyframes fade { from { opacity: 0 } to { opacity: 1 } }
|
||||
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
|
||||
|
||||
.close.icon {
|
||||
position: relative;
|
||||
background: none;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.close-task.icon {
|
||||
background: #2c2d36;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.close-task.icon:before,
|
||||
.close-task.icon:after {
|
||||
.close.icon:before,
|
||||
.close.icon:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -1px;
|
||||
top: 20%;
|
||||
height: 60%;
|
||||
top: 10%;
|
||||
height: 80%;
|
||||
width: 2px;
|
||||
background: #586066;
|
||||
background: #85888a;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.close-task.icon:after {
|
||||
.close.icon:after {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.close-task:before,
|
||||
.close-task:after {
|
||||
top: 20%;
|
||||
height: 60%;
|
||||
background: #586066;
|
||||
}
|
||||
|
||||
.organisation.icon {
|
||||
height: 13px;
|
||||
width: 14px;
|
||||
background-position: 0 -115px;
|
||||
}
|
||||
|
||||
.icon-switch:hover .organisation.icon {
|
||||
background-position: 0 -128px;
|
||||
}
|
||||
|
||||
.user.icon {
|
||||
height: 13px;
|
||||
width: 14px;
|
||||
background-position: -14px -115px;
|
||||
}
|
||||
|
||||
.icon-switch:hover .user.icon {
|
||||
background-position: -14px -128px;
|
||||
}
|
||||
|
||||
/*
|
||||
* removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs
|
||||
*/
|
||||
|
|
@ -1219,8 +1242,13 @@ footer {
|
|||
.navigation {
|
||||
width: 260px;
|
||||
background: #26272e;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navigation:empty {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.navigation .navbar-nav,
|
||||
.navigation .navbar-nav > li {
|
||||
float: none;
|
||||
|
|
@ -1362,10 +1390,30 @@ footer {
|
|||
padding: 10px 15px 10px 10px;
|
||||
border-bottom: 1px solid rgba(240, 250, 255, .05);
|
||||
}
|
||||
|
||||
.search-holder {
|
||||
margin-right: 15px;
|
||||
position: relative;
|
||||
transition: 240ms;
|
||||
}
|
||||
|
||||
.empty-search {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 30px;
|
||||
width: 40px;
|
||||
z-index: 1;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.filled.search .empty-search {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.search input {
|
||||
width: 100%;
|
||||
padding: 5px 10px 5px 33px;
|
||||
margin-right: 15px;
|
||||
height: 30px;
|
||||
color: #ECECEC;
|
||||
line-height: 20px;
|
||||
|
|
@ -1373,16 +1421,15 @@ footer {
|
|||
outline: none;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
transition: 240ms;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.search input:focus {
|
||||
.search.focused .search-holder {
|
||||
margin-right: -46px;
|
||||
}
|
||||
|
||||
.search input:focus + .logo {
|
||||
.search.focused .logo {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
|
@ -1394,6 +1441,55 @@ footer {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search .custom-dropdown-menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
background: #26272e;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 56px;
|
||||
z-index: 1002;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search.open .custom-dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.search .custom-dropdown-menu .divider {
|
||||
height: 1px;
|
||||
background: #2f3238;
|
||||
margin: 14px 0 17px;
|
||||
}
|
||||
|
||||
.search .custom-dropdown-menu > li > a {
|
||||
height: 30px;
|
||||
padding: 0 15px 0 10px;
|
||||
color: #808080;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.search .custom-dropdown-menu > li > a .icon {
|
||||
margin-right: 13px;
|
||||
}
|
||||
|
||||
.search .custom-dropdown-menu > li:hover > a {
|
||||
background: #3fa9f5;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.search .custom-dropdown-menu > li:hover > a .priority.icon {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.search .custom-dropdown-menu > li:hover > a .priority.icon:after {
|
||||
background: #3fa9f5;
|
||||
}
|
||||
|
||||
.user-menu {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -1491,9 +1587,6 @@ footer {
|
|||
background: #4cb77c;
|
||||
}
|
||||
|
||||
.user-menu .dropdown-menu:after {
|
||||
}
|
||||
|
||||
.user-menu .dropdown-menu .divider {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue