Commit 2449bea2c46f44ef09122856363beb955c853c1f

Authored by Dmitriy Zaporozhets
1 parent 21b1fee9

restyle header a bit

app/assets/stylesheets/sections/header.scss
@@ -72,13 +72,22 @@ header { @@ -72,13 +72,22 @@ header {
72 @include header-font; 72 @include header-font;
73 } 73 }
74 74
  75 + .profile-pic {
  76 + position: relative;
  77 + top: -4px;
  78 + img {
  79 + width: 26px;
  80 + @include border-radius(4px);
  81 + }
  82 + }
  83 +
75 /** 84 /**
76 * 85 *
77 * Search box 86 * Search box
78 * 87 *
79 */ 88 */
80 .search { 89 .search {
81 - margin-right: 45px; 90 + margin-right: 10px;
82 margin-left: 10px; 91 margin-left: 10px;
83 92
84 .search-input { 93 .search-input {
@@ -98,115 +107,6 @@ header { @@ -98,115 +107,6 @@ header {
98 } 107 }
99 } 108 }
100 109
101 - /**  
102 - *  
103 - * Account box  
104 - *  
105 - */  
106 - .account-box {  
107 - position: absolute;  
108 - right: 0;  
109 - top: 4px;  
110 - z-index: 10000;  
111 - width: 128px;  
112 - font-size: 11px;  
113 - float: right;  
114 - display: block;  
115 - cursor: pointer;  
116 - img {  
117 - @include border-radius(3px);  
118 - right: 5px;  
119 - position: absolute;  
120 - width: 28px;  
121 - height: 28px;  
122 - display: block;  
123 - top: 1px;  
124 - &:after {  
125 - content: " ";  
126 - display: block;  
127 - position: absolute;  
128 - top: 0;  
129 - right: 0;  
130 - left: 0;  
131 - bottom: 0;  
132 - float: right;  
133 - @include border-radius(5px);  
134 - border: 1px solid rgba(255, 255, 255, 0.1);  
135 - border-bottom: 0;  
136 - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.15)), to(rgba(0, 0, 0, 0.25))),  
137 - -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));  
138 - background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)),  
139 - -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));  
140 - background: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)),  
141 - linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));  
142 - -webkit-background-origin: border-box;  
143 - -moz-background-origin: border;  
144 - background-origin: border-box; } } }  
145 -  
146 - .account-box {  
147 - &.hover {  
148 - height: 138px; }  
149 - &:hover > .account-links {  
150 - display: block; } }  
151 -  
152 - .account-links {  
153 - @include border-radius(5px);  
154 - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);  
155 - position: relative;  
156 - &:before {  
157 - content: ".";  
158 - width: 0;  
159 - height: 0;  
160 - position: absolute;  
161 - border: 5px solid transparent;  
162 - border-color: rgba(255, 255, 255, 0);  
163 - border-bottom-color: #555;  
164 - text-indent: -9999px;  
165 - top: -10px;  
166 - line-height: 0;  
167 - right: 10px;  
168 - z-index: 10; }  
169 - background: #555;  
170 - display: none;  
171 - z-index: 100000;  
172 - @include border-radius(4px);  
173 - width: 130px;  
174 - position: absolute;  
175 - right: 5px;  
176 - top: 38px;  
177 - margin-top: 0;  
178 - float: right;  
179 - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);  
180 - a {  
181 - color: #fff;  
182 - padding: 12px 15px;  
183 - display: block;  
184 - text-shadow: none;  
185 - border-bottom: 1px solid #666;  
186 - font-size: 12px;  
187 - &:hover {  
188 - color: #fff;  
189 - background: #333;  
190 - }  
191 - }  
192 - }  
193 -  
194 - .account-box.hover .arrow-up {  
195 - top: 41px;  
196 - right: 6px;  
197 - position: absolute; }  
198 -  
199 - .account-links a {  
200 - &:first-child {  
201 - @include border-radius(5px 5px 0 0);  
202 - }  
203 - &:last-child {  
204 - @include border-radius(0 0 5px 5px);  
205 - border-bottom: 0;  
206 - }  
207 - }  
208 -  
209 -  
210 110
211 /* 111 /*
212 * Dark header 112 * Dark header
app/views/layouts/_head_panel.html.haml
@@ -9,6 +9,9 @@ @@ -9,6 +9,9 @@
9 %h1.project_name= title 9 %h1.project_name= title
10 %ul.nav 10 %ul.nav
11 %li 11 %li
  12 + = render "layouts/search"
  13 + %li.separator
  14 + %li
12 = link_to public_root_path, title: "Public area", class: 'has_bottom_tooltip', 'data-original-title' => 'Public area' do 15 = link_to public_root_path, title: "Public area", class: 'has_bottom_tooltip', 'data-original-title' => 'Public area' do
13 %i.icon-globe 16 %i.icon-globe
14 - if current_user.is_admin? 17 - if current_user.is_admin?
@@ -22,20 +25,12 @@ @@ -22,20 +25,12 @@
22 %li 25 %li
23 = link_to profile_path, title: "My Profile", class: 'has_bottom_tooltip', 'data-original-title' => 'Your profile' do 26 = link_to profile_path, title: "My Profile", class: 'has_bottom_tooltip', 'data-original-title' => 'Your profile' do
24 %i.icon-user 27 %i.icon-user
25 - %li.separator  
26 %li 28 %li
27 - = render "layouts/search" 29 + = link_to destroy_user_session_path, class: "logout", method: :delete, title: "Logout", class: 'has_bottom_tooltip', 'data-original-title' => 'Logout' do
  30 + %i.icon-signout
28 %li 31 %li
29 - .account-box  
30 - = link_to profile_path, class: "pic" do  
31 - = image_tag gravatar_icon(current_user.email)  
32 - .account-links  
33 - = link_to profile_path, class: "username" do  
34 - %i.icon-user.icon-white  
35 - My profile  
36 - = link_to destroy_user_session_path, class: "logout", method: :delete do  
37 - %i.icon-signout.icon-white  
38 - Logout 32 + = link_to current_user, class: "profile-pic" do
  33 + = image_tag gravatar_icon(current_user.email, 26)
39 34
40 35
41 = render "layouts/init_auto_complete" 36 = render "layouts/init_auto_complete"