From 177dc4464bc413bc46c282d5406f567422a86eda Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Sat, 15 Nov 2014 17:05:03 +0100 Subject: [PATCH] format sidebar info, style orga member section create .sidebar-block for generic sidebar blocks --- .../layout_ref/organization_profile.jst.eco | 2 +- .../app/views/widget/organization.jst.eco | 70 +++++++++------ .../javascripts/app/views/widget/user.jst.eco | 62 ++++++------- app/assets/stylesheets/zammad.css.scss | 86 ++++++++++--------- 4 files changed, 115 insertions(+), 105 deletions(-) diff --git a/app/assets/javascripts/app/views/layout_ref/organization_profile.jst.eco b/app/assets/javascripts/app/views/layout_ref/organization_profile.jst.eco index 4f6061f51..a66317376 100644 --- a/app/assets/javascripts/app/views/layout_ref/organization_profile.jst.eco +++ b/app/assets/javascripts/app/views/layout_ref/organization_profile.jst.eco @@ -56,7 +56,7 @@ Doreen Kubiak
-
+
Franz Xaver
diff --git a/app/assets/javascripts/app/views/widget/organization.jst.eco b/app/assets/javascripts/app/views/widget/organization.jst.eco index 9170a75ca..af2dc8a56 100644 --- a/app/assets/javascripts/app/views/widget/organization.jst.eco +++ b/app/assets/javascripts/app/views/widget/organization.jst.eco @@ -1,31 +1,45 @@ -
-
+
+

<%= @organization.displayName() %> -

+ +
- <% for row in @organizationData: %> - <% if @organization[row.name] || row.name is 'note': %> -
- <% if row.tag isnt 'textarea': %> -
<%- @T( row.display ) %>
-
<%- @L( @P( @organization[row.name] ) ) %>
- <% else: %> -
<%- @T( row.display ) %>
-
-
<%= @organization[row.name] %>
-
- <% end %> -
- <% end %> - <% end %> +<% for row in @organizationData: %> +<% if @organization[row.name] || row.name is 'note': %> +
+<% if row.tag isnt 'textarea': %> + + <%- @L( @P( @organization[row.name] ) ) %> +<% else: %> + +
<%= @organization[row.name] %>
+<% end %> +
+<% end %> +<% end %> - <% if @organization.members: %> -

<%- @T('Member') %>

- - <% end %> - -
\ No newline at end of file +<% if @organization.members: %> +
+ + + +
+<% end %> \ No newline at end of file diff --git a/app/assets/javascripts/app/views/widget/user.jst.eco b/app/assets/javascripts/app/views/widget/user.jst.eco index 90b4e4f25..48e8e2f04 100644 --- a/app/assets/javascripts/app/views/widget/user.jst.eco +++ b/app/assets/javascripts/app/views/widget/user.jst.eco @@ -1,57 +1,49 @@
-
- <%- @user.avatar("50") %> -
-
- <%= @user.displayName() %> -
-
+
+ <%- @user.avatar("50", "", "userInfo-avatar") %> +

+ <%= @user.displayName() %> +

<% for row in @userData: %> <% if @user[row.name] || row.name is 'note': %> -
+
<% if row.tag isnt 'textarea': %> -
<%- @T( row.display ) %>
-
<%- @L( @P( @user[row.name] ) ) %>
+ + <%- @L( @P( @user[row.name] ) ) %> <% else: %> -
<%- @T( row.display ) %>
-
-
<%= @user[row.name] %>
-
+ +
<%= @user[row.name] %>
<% end %>
<% end %> <% end %> <% if !_.isEmpty(@user['accounts']): %> -
-
<%- @T( 'Linked Accounts' ) %>
-
+
+ <% for account of @user['accounts']: %> - <%= account %> + <%= account %> <% end %> -
<% end %> <% if !_.isEmpty(@user['links']): %> <% for link in @user['links']: %> -
-
<%- @T( link['title'] ) %>
-
- <% for item in link['items']: %> - <% if item['url']: %> - target="_blank"<% end %>> - <% else: %> - - <% end %> - <%- @T( item['name'] ) %> <% if item['count'] isnt undefined: %>(<%= item['count'] %>)<% end %> - <% if item['url']: %> - - <% else: %> - - <% end %> -
+
+ +<% for item in link['items']: %> + <% if item['url']: %> + target="_blank"<% end %>> + <% else: %> + + <% end %> + <%- @T( item['name'] ) %> <% if item['count'] isnt undefined: %>(<%= item['count'] %>)<% end %> + <% if item['url']: %> + + <% else: %> + <% end %>
+<% end %> <% end %> <% end %>
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss index 79b2c02d5..a46d5b952 100644 --- a/app/assets/stylesheets/zammad.css.scss +++ b/app/assets/stylesheets/zammad.css.scss @@ -523,11 +523,11 @@ label, .checkbox.form-group label { text-transform: uppercase; color: #999; + display: block; font-size: 12px; font-weight: normal; letter-spacing: 0.1em; - padding: 0 2px; - margin-bottom: 6px; + margin-bottom: 4px; } fieldset { @@ -552,6 +552,11 @@ fieldset > *:not(.form-group) .form-control { margin-top: 0; } +.form-group label { + padding: 0 2px; + margin-bottom: 6px; +} + .form-group .controls .richtext { position: relative; height: auto; @@ -669,7 +674,6 @@ textarea, text-transform: inherit; vertical-align: baseline; letter-spacing: inherit; - display: block; } @@ -2244,6 +2248,7 @@ footer { letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 1px rgba(0,0,0,.2); + cursor: default; } .unique.avatar.size-50 { @@ -2269,6 +2274,23 @@ footer { margin-top: 5px; } + .sidebar h3 { + margin: 0; + color: rgba(0,8,14,.73); + font-weight: normal; + font-size: 16px; + text-transform: initial; + letter-spacing: 0; + } + + .sidebar-block { + margin: 20px 0; + + &:first-child { + margin-top: 0; + } + } + .main + .sidebar { border-right: none; border-left: 1px solid #e6e6e6; @@ -3352,7 +3374,7 @@ footer { @extend .vertical; } - .tabsSidebar hr { + .tabsSidebar .sidebar > hr { margin: 20px; } @@ -3918,12 +3940,12 @@ footer { right: 0; } -.userInfo .avatar { +.userInfo-avatar { float: right; position: relative; } -.userInfo .avatar:after { +.userInfo-avatar:after { content: ""; background: image_url("sprite.svg"); background-position: -236px 0; @@ -3934,42 +3956,25 @@ footer { position: absolute; } -.userInfo-name { - color: rgba(0,8,14,.73); - font-size: 16px; -} - -.userInfo-entry { - margin: 20px 0; -} - -.userInfo-entry:first-child { - margin-top: 0; -} - -.userInfo-label { - text-transform: uppercase; - color: #999; - font-size: 12px; - font-weight: normal; - letter-spacing: 0.1em; - margin-bottom: 6px; -} - -.userInfo-value { - word-wrap: break-word; -} - - .userInfo-value textarea { - width: 100%; - height: auto; - line-height: 20px; - border: none; - padding: 0; - outline: none; - resize: none; +.userList { + list-style: none; + padding: 0; + + li { + @extend .horizontal; + @extend .center; + margin: 10px 0; } + a { + @extend .u-textTruncate; + } + + .avatar { + margin-right: 7px; + } +} + .checkbox.form-group .checkbox { margin-top: 0; margin-bottom: 15px; @@ -3985,7 +3990,6 @@ footer { .checkbox.form-group .controls label { padding: 3px 0 3px 20px; - display: block; font: inherit; font-size: 13px; margin-bottom: 0;