Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New table styles #1344

Merged
merged 4 commits into from
Jan 18, 2018
Merged

New table styles #1344

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5afde7d
New lighter table style
tvdeyen Jan 9, 2018
403966f
Use new table style for dashboard widgets
tvdeyen Jan 13, 2018
876109e
Adjust sitemap style to table style
tvdeyen Jan 13, 2018
0793049
Remove brightness from light yellow color
tvdeyen Jan 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion app/assets/stylesheets/alchemy/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ $very-light-blue: lighten($light-blue, 12%);
$light-gray: #ededed;
$medium-gray: #e3e3e3;
$dark-gray: #666666;
$light_yellow: #ffffdc;
$light_yellow: #fbfbd8;
$linked-color: #ffd77a;
$white: #f2f2f2;

Expand Down Expand Up @@ -62,7 +62,12 @@ $error_background_color: #efd3d3;

$form-left-width: 35%;
$form-right-width: 65%;

$sitemap-line-height: 32px;
$sitemap-page-background-color: rgba(#fff, 0.5);
$sitemap-page-hover-color: rgba($light_yellow, 0.5);
$sitemap-info-background-color: rgba($linked-color, 0.5);
$sitemap-highlight-color: rgba(#fffba5, 0.5);

$main-menu-width: 150px !default;
$collapsed-main-menu-width: 48px !default;
Expand All @@ -79,3 +84,6 @@ $transition-duration: 200ms !default;
$transition-easing: linear !default;

$addon-icon-opacity: 0.85;

$table-row-background-color: rgba(#fff, 0.25);
$table-row-hover-color: rgba($light_yellow, 0.5);
47 changes: 7 additions & 40 deletions app/assets/stylesheets/alchemy/dashboard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,26 @@
#dashboard {
overflow: auto;
padding: 4*$default-padding 2*$default-padding;
padding: 4*$default-padding 0;
width: 100%;
position: relative;

h1 {
font-size: 2em;
margin: 0 0 8px 0;
font-size: 1.5em;
margin: 0 0 8px 8px;
}

h2 {
padding: 0;
margin-bottom: 16px;
p {
margin: 0 0 16px 8px;
}

div.column {
.column {
width: 50%;
float: left;
padding-right: 16px;
}

div.widget {
width: 100%;
.widget {
margin-bottom: 16px;
background-color: $medium-gray;
border: $default-border;
@extend .top-rounded-border;
float: left;

h2 {
padding: 2 * $default-padding;
Expand All @@ -38,43 +32,16 @@
}

table {
width: 100%;
padding: 0;
border-spacing: 0;

td {
padding: 2 * $default-padding;
margin-bottom: 0;
position: relative;
color: #aaa;

&:first-child { width: 40% }
form { float: right }
span { color: #333 }
}
}
}
}

div#sideboard {
right: 16px;
top: 82px;
position: absolute;
width: 240px;
padding: 16px;

div.sideboard_widget img {
margin-bottom: 16px;
float: none;
}
}

div#license {
overflow: auto;
height: 24em;
background-color: white;
}

#update_check {
height: 16px;

Expand Down
23 changes: 13 additions & 10 deletions app/assets/stylesheets/alchemy/sitemap.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,9 @@
}

.sitemap_pagename_link {
background-color: #fff;
color: black;
display: block;
padding: 0 3*$default-padding;
text-decoration: none;
transition: background-color, 400ms;

&.inactive {
color: #656565;
Expand All @@ -39,7 +36,7 @@
.redirect_url {
float: right;
text-align: right;
background-color: #fff0c4;
background-color: $sitemap-info-background-color;
line-height: $sitemap-line-height;
font-size: 10px;
padding: 0 2*$default-padding;
Expand Down Expand Up @@ -81,33 +78,39 @@
height: $sitemap-line-height;
margin: 3*$default-margin 0;
position: relative;
transition: background-color 250ms;

&.highlight .sitemap_pagename_link {
background-color: #FFFBA5;
background-color: $sitemap-highlight-color;
}

&.no-match .sitemap_pagename_link {
color: $medium-gray;
}

&:hover .sitemap_pagename_link {
background-color: $light_yellow;
&:hover {
background-color: $sitemap-page-hover-color;
border-radius: $default-border-radius;
}
}

.sitemap_sitename {
@include border-left-radius($default-border-radius);
line-height: $sitemap-line-height;
overflow: hidden;
background-color: $sitemap-page-background-color;

&.without-status {
@include border-right-radius($default-border-radius);
}
}

.sitemap_left_images {
@extend .left-rounded-border;
position: relative;
width: 32px;
line-height: $sitemap-line-height;
float: left;
padding: 0 2*$default-padding;
background-color: rgba(#fff, .75);
text-align: center;
}

Expand Down Expand Up @@ -185,7 +188,7 @@

.page_infos {
@extend .right-rounded-border;
background-color: rgba(#fff, .75);
background-color: $sitemap-page-background-color;
border-left: 1px solid $light-gray;
float: right;
height: $sitemap-line-height;
Expand Down
24 changes: 9 additions & 15 deletions app/assets/stylesheets/alchemy/tables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,22 @@ table {
}

.list td, .list th {
padding: $default-padding 2*$default-padding;
padding: 2*$default-padding;
vertical-align: top;
line-height: 18px;
border-right: 1px solid $medium-gray;
transition: background-color 250ms;

&:last-child {
border-right: 0 none;
}

&.wrap-text {
white-space: normal !important;
}

&.icon {
width: 16px;
background-color: transparent;
padding: $default-padding;
text-align: center;
}
}
Expand All @@ -36,10 +39,8 @@ th {
white-space: nowrap;
text-align: left;
vertical-align: top;
background: $light-gray;
border-bottom: 1px solid $medium-gray;
font-weight: normal;
text-transform: uppercase;
font-weight: bold;

i {
font-style: normal;
Expand All @@ -65,19 +66,12 @@ th {
}
}

tr.odd td {
background-color: #eaf3f9;
}

tr.even td {
background-color: white;
background-color: $table-row-background-color;
}

.list tr .tools {
width: 40px;
background: $light-gray;
border-top: 0 none;
border-right: 0 none;
white-space: nowrap;
@extend .disable-user-select;

Expand All @@ -98,7 +92,7 @@ td.heading {
}

.list tr:hover td {
background-color: $light_yellow;
background-color: $table-row-hover-color;
}

td, th {
Expand Down
2 changes: 1 addition & 1 deletion app/controllers/alchemy/admin/base_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ def render_errors_or_redirect(object, redirect_url, flash_notice)
def per_page_value_for_screen_size
return 25 if session[:screen_size].blank?
screen_height = session[:screen_size].split('x').last.to_i
(screen_height / 30) - 10
(screen_height / 50) - 12
end

# Does redirects for html and js requests
Expand Down
13 changes: 8 additions & 5 deletions app/views/alchemy/admin/dashboard/_locked_pages.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
<% colspan = multi_site? ? 5 : 4 %>
<div class="widget">
<h2><%= Alchemy.t('Currently locked pages') %>:</h2>
<table>
<table class="list">
<tr>
<th colspan="<%= colspan %>"><%= Alchemy.t('Currently locked pages') %></th>
</tr>
<% if @all_locked_pages.blank? %>
<tr class="even">
<td><%= Alchemy.t('no pages') %></td>
<tr>
<td colspan="<%= colspan %>"><%= Alchemy.t('no pages') %></td>
</tr>
<% else %>
<% @all_locked_pages.each do |page| %>
<tr class="<%= cycle('even', 'odd', :name => 'locked_pages') %>">
<tr class="<%= cycle('even', 'odd', name: 'locked_pages') %>">
<td>
<% if current_alchemy_user.id == page.locked_by %>
<%= link_to(page.name, alchemy.edit_admin_page_path(page)) %>
Expand Down
8 changes: 5 additions & 3 deletions app/views/alchemy/admin/dashboard/_recent_pages.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
<div class="widget">
<h2><%= Alchemy.t('Your last updated pages') %>:</h2>
<table>
<table class="list">
<tr>
<th colspan="4"><%= Alchemy.t('Your last updated pages') %></th>
</tr>
<% if @last_edited_pages.blank? %>
<tr class="even">
<td><%= Alchemy.t('no pages') %></td>
<td colspan="4"><%= Alchemy.t('no pages') %></td>
</tr>
<% else %>
<% @last_edited_pages.each do |page| %>
Expand Down
6 changes: 4 additions & 2 deletions app/views/alchemy/admin/dashboard/_sites.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<div class="widget sites">
<h2><%= Alchemy::Site.model_name.human(count: 2) %>:</h2>
<table>
<table class="list">
<tr>
<th colspan="2"><%= Alchemy::Site.model_name.human(count: 2) %></th>
</tr>
<% @sites.each do |site| %>
<tr class="<%= cycle('even', 'odd', name: 'sites') %>">
<td>
Expand Down
10 changes: 6 additions & 4 deletions app/views/alchemy/admin/dashboard/_users.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
<div class="widget">
<h2><%= Alchemy.t('Who else is online') %>:</h2>
<table>
<table class="list">
<tr>
<th colspan="2"><%= Alchemy.t('Who else is online') %></th>
</tr>
<% if @online_users.blank? %>
<tr class="even">
<td><%= Alchemy.t('no users') %></td>
<tr>
<td colspan="2"><%= Alchemy.t('no users') %></td>
</tr>
<% else %>
<% @online_users.each do |user| %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/alchemy/admin/dashboard/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
<%= render 'recent_pages' %>
</div>
<div class="column right">
<% if @online_users %>
<% if @online_users.any? %>
<%= render 'users' %>
<% end %>
<% if multi_site? %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/alchemy/admin/layoutpages/_layoutpage.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
</div>
<%- end -%>
</div>
<div class="sitemap_sitename">
<div class="sitemap_sitename without-status">
<%= link_to(
layoutpage.name,
alchemy.edit_admin_page_path(layoutpage),
Expand Down
8 changes: 4 additions & 4 deletions spec/features/admin/dashboard_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
it "should initially show no pages are locked" do
visit admin_dashboard_path
locked_pages_widget = all('div[@class="widget"]').first
expect(locked_pages_widget).to have_content "Currently locked pages:"
expect(locked_pages_widget).to have_content "Currently locked pages"
expect(locked_pages_widget).to have_content "no pages"
end

Expand All @@ -22,7 +22,7 @@
a_page.lock_to!(user)
visit admin_dashboard_path
locked_pages_widget = all('div[@class="widget"]').first
expect(locked_pages_widget).to have_content "Currently locked pages:"
expect(locked_pages_widget).to have_content "Currently locked pages"
expect(locked_pages_widget).to have_content a_page.name
expect(locked_pages_widget).to have_content "Me"
end
Expand All @@ -36,7 +36,7 @@
allow(user.class).to receive(:find_by).and_return(other_user)
visit admin_dashboard_path
locked_pages_widget = all('div[@class="widget"]').first
expect(locked_pages_widget).to have_content "Currently locked pages:"
expect(locked_pages_widget).to have_content "Currently locked pages"
expect(locked_pages_widget).to have_content a_page.name
expect(locked_pages_widget).to have_content "Sue Smith"
end
Expand All @@ -51,7 +51,7 @@
it "lists all sites" do
visit admin_dashboard_path
sites_widget = all('div[@class="widget sites"]').first
expect(sites_widget).to have_content "Websites:"
expect(sites_widget).to have_content "Websites"
expect(sites_widget).to have_content "Default Site"
expect(sites_widget).to have_content "Site"
end
Expand Down