Merge pull request #1344 from tvdeyen/new-table-style

New table styles
AlchemyCMS · Jan 18, 2018 · bc1054a · bc1054a
2 parents 8d81d9e + 0793049
commit bc1054a
Show file tree

Hide file tree

Showing 12 changed files with 68 additions and 87 deletions.
diff --git a/app/assets/stylesheets/alchemy/_variables.scss b/app/assets/stylesheets/alchemy/_variables.scss
@@ -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;
 
@@ -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;
@@ -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);
diff --git a/app/assets/stylesheets/alchemy/dashboard.scss b/app/assets/stylesheets/alchemy/dashboard.scss
@@ -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;
@@ -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;
 

diff --git a/app/assets/stylesheets/alchemy/sitemap.scss b/app/assets/stylesheets/alchemy/sitemap.scss
@@ -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;
@@ -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;
@@ -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;
 }
 
@@ -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;

diff --git a/app/assets/stylesheets/alchemy/tables.scss b/app/assets/stylesheets/alchemy/tables.scss
@@ -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;
   }
 }
@@ -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;
@@ -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;
 
@@ -98,7 +92,7 @@ td.heading {
 }
 
 .list tr:hover td {
-  background-color: $light_yellow;
+  background-color: $table-row-hover-color;
 }
 
 td, th {

diff --git a/app/controllers/alchemy/admin/base_controller.rb b/app/controllers/alchemy/admin/base_controller.rb
@@ -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

diff --git a/app/views/alchemy/admin/dashboard/_locked_pages.html.erb b/app/views/alchemy/admin/dashboard/_locked_pages.html.erb
@@ -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)) %>

diff --git a/app/views/alchemy/admin/dashboard/_recent_pages.html.erb b/app/views/alchemy/admin/dashboard/_recent_pages.html.erb
@@ -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| %>

diff --git a/app/views/alchemy/admin/dashboard/_sites.html.erb b/app/views/alchemy/admin/dashboard/_sites.html.erb
@@ -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>

diff --git a/app/views/alchemy/admin/dashboard/_users.html.erb b/app/views/alchemy/admin/dashboard/_users.html.erb
@@ -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| %>

diff --git a/app/views/alchemy/admin/dashboard/index.html.erb b/app/views/alchemy/admin/dashboard/index.html.erb
@@ -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? %>

diff --git a/app/views/alchemy/admin/layoutpages/_layoutpage.html.erb b/app/views/alchemy/admin/layoutpages/_layoutpage.html.erb
@@ -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),

diff --git a/spec/features/admin/dashboard_spec.rb b/spec/features/admin/dashboard_spec.rb
@@ -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
 
@@ -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
@@ -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
@@ -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