Download as
Browse Code »

Commit 2449bea2c46f44ef09122856363beb955c853c1f

Authored by Dmitriy Zaporozhets
1 parent 21b1fee9
Exists in master and in 4 other branches 6-8-stable, 7-0-stable, 7-0-stable-spb, spb-stable

restyle header a bit

Showing 2 changed files with 17 additions and 122 deletions   Show diff stats
app/assets/stylesheets/sections/header.scss
  Diff comments   View file @2449bea
... ... @@ -72,13 +72,22 @@ header {
72 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 86 * Search box
78 87 *
79 88 */
80 89 .search {
81   - margin-right: 45px;
  90 + margin-right: 10px;
82 91 margin-left: 10px;
83 92  
84 93 .search-input {
... ... @@ -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 112 * Dark header
... ...
app/views/layouts/_head_panel.html.haml
  Diff comments   View file @2449bea
... ... @@ -9,6 +9,9 @@
9 9 %h1.project_name= title
10 10 %ul.nav
11 11 %li
  12 + = render "layouts/search"
  13 + %li.separator
  14 + %li
12 15 = link_to public_root_path, title: "Public area", class: 'has_bottom_tooltip', 'data-original-title' => 'Public area' do
13 16 %i.icon-globe
14 17 - if current_user.is_admin?
... ... @@ -22,20 +25,12 @@
22 25 %li
23 26 = link_to profile_path, title: "My Profile", class: 'has_bottom_tooltip', 'data-original-title' => 'Your profile' do
24 27 %i.icon-user
25   - %li.separator
26 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 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 36 = render "layouts/init_auto_complete"
... ...