From 45f8ea130868670bca42dc7866de0177348dcfd6 Mon Sep 17 00:00:00 2001 From: Benjamin ter Kuile Date: Thu, 17 Apr 2014 19:17:57 +0200 Subject: [PATCH] styling progress --- .../foundation1/form_actions.css.sass | 23 ++++++ .../foundation_and_overrides.css.sass | 14 +++- .../foundation1/products_preview.css.sass | 3 + .../supplier/foundation1/structure.css.sass | 14 +--- .../supplier/foundation1/tables.css.sass | 27 +++++++ app/views/suppliers/products/index.html.slim | 76 ++++++++++--------- app/views/suppliers/sections/index.html.slim | 3 +- app/views/suppliers/tables/index.html.slim | 49 ++++++------ app/views/suppliers/tables/show.html.slim | 13 ++-- 9 files changed, 141 insertions(+), 81 deletions(-) create mode 100644 app/assets/stylesheets/supplier/foundation1/form_actions.css.sass create mode 100644 app/assets/stylesheets/supplier/foundation1/tables.css.sass diff --git a/app/assets/stylesheets/supplier/foundation1/form_actions.css.sass b/app/assets/stylesheets/supplier/foundation1/form_actions.css.sass new file mode 100644 index 00000000..ec32e706 --- /dev/null +++ b/app/assets/stylesheets/supplier/foundation1/form_actions.css.sass @@ -0,0 +1,23 @@ +@import font-awesome +@import ./foundation_and_overrides +.form-actions + a + &.form-action-index + +button($bg: $button-index-color, $padding: $button-sml) + margin-right: $button-margin + &.form-action-new + +button($bg: $button-new-color, $padding: $button-sml) + margin-right: $button-margin + &.form-action-edit + +button($bg: $button-edit-color, $padding: $button-sml) + margin-right: $button-margin + &.form-action-destroy + +button($bg: $button-destroy-color, $padding: $button-sml) + &.form-action-qr-codes + +button($bg: $button-qr-code-color, $padding: $button-sml) + span + @extend .fa + @extend .fa-qrcode + @extend .fa-lg + &:before + padding-right: rem-calc(10) diff --git a/app/assets/stylesheets/supplier/foundation1/foundation_and_overrides.css.sass b/app/assets/stylesheets/supplier/foundation1/foundation_and_overrides.css.sass index 537ef495..4e108a7e 100644 --- a/app/assets/stylesheets/supplier/foundation1/foundation_and_overrides.css.sass +++ b/app/assets/stylesheets/supplier/foundation1/foundation_and_overrides.css.sass @@ -1,6 +1,10 @@ @mixin button-icon-only padding: 2px 5px margin: 0 + +@mixin table-fit + width: 1px + white-space: nowrap // Foundation by ZURB // foundation.zurb.com // Licensed under MIT Open Source @@ -320,7 +324,6 @@ $secondary-color: #d7d7d7 // // $include-html-button-classes: $include-html-classes; - // We use these to build padding for buttons. // $button-tny: rem-calc(10); // $button-sml: rem-calc(14); @@ -1243,4 +1246,13 @@ $secondary-color: #d7d7d7 // $range-slider-handle-round: $global-rounded; // $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%); // $range-slider-handle-cursor: pointer; + +// CUSTOM VARIABLES @import 'foundation' +$button-margin: rem-calc(10) +$button-qr-code-color: #555 +$button-index-color: $secondary-color +$button-new-color: #afa +$button-edit-color: #ffa +$button-destroy-color: #faa + diff --git a/app/assets/stylesheets/supplier/foundation1/products_preview.css.sass b/app/assets/stylesheets/supplier/foundation1/products_preview.css.sass index eb1854cf..df30bbe3 100644 --- a/app/assets/stylesheets/supplier/foundation1/products_preview.css.sass +++ b/app/assets/stylesheets/supplier/foundation1/products_preview.css.sass @@ -1,3 +1,4 @@ +@import ./foundation_and_overrides .products_preview-date .products_preview-time-container float: left @@ -15,3 +16,5 @@ margin-left: 10px select width: 50px +#products-table + width: 100% diff --git a/app/assets/stylesheets/supplier/foundation1/structure.css.sass b/app/assets/stylesheets/supplier/foundation1/structure.css.sass index c3137ba1..66688954 100644 --- a/app/assets/stylesheets/supplier/foundation1/structure.css.sass +++ b/app/assets/stylesheets/supplier/foundation1/structure.css.sass @@ -1,9 +1,6 @@ $side-spacing: 0px @import constants @import ./foundation_and_overrides -@mixin table-fit - width: 1px - white-space: nowrap html body label @@ -54,7 +51,7 @@ form .clear clear: both body - background-image: $wood + background-image: $wood !important background-repeat: repeat main.main-section +panel($bg:rgba(200,200,200,0.8)) @@ -64,12 +61,3 @@ main.main-section .hide, .hidden display: none -table - &.table - // Bootstrap behaviour - width: 100% - td.actions, th.actions - text-align: right - +table-fit - th.status-icons, td.status-icons - +table-fit diff --git a/app/assets/stylesheets/supplier/foundation1/tables.css.sass b/app/assets/stylesheets/supplier/foundation1/tables.css.sass new file mode 100644 index 00000000..3ec1339a --- /dev/null +++ b/app/assets/stylesheets/supplier/foundation1/tables.css.sass @@ -0,0 +1,27 @@ +@import constants +@import ./foundation_and_overrides +@import font-awesome +table + &.table + // Bootstrap behaviour + width: 100% + td.actions, th.actions + text-align: right + +table-fit + th.status-icons, td.status-icons + +table-fit + .table-edit + +button($bg: $secondary-color) + +button-icon-only + span + @extend .fa + @extend .fa-pencil + .table-destroy + +button($bg: $secondary-color) + +button-icon-only + color: $warning-color + + margin-left: 8px + span + @extend .fa + @extend .fa-times diff --git a/app/views/suppliers/products/index.html.slim b/app/views/suppliers/products/index.html.slim index 9691146e..c1de3c78 100644 --- a/app/views/suppliers/products/index.html.slim +++ b/app/views/suppliers/products/index.html.slim @@ -1,42 +1,46 @@ - model_class = Product .page-header= title :index, model_class -.span7 - .well - - if @products.any? - table.table - thead - tr - th data-t="attributes.product.name" = model_class.human_attribute_name(:name) - th data-t="attributes.product.code" = model_class.human_attribute_name(:code) - th.currency data-t="attributes.product.price" = model_class.human_attribute_name(:price) - th data-t="models.plural.product_category" = ProductCategory.model_name.human_plural - th.timestamp data-t="attributes.product.created_at" = model_class.human_attribute_name(:created_at) - th.actions data-t="helpers.actions.title" =t 'helpers.actions.title' - tbody - - @products.each do |product| - tr class="product-row-#{product.id}" - td.link= link_to product.name, [:suppliers, product] - td= product.code - td.currency=currency product.price - td.link= product.category_links namespace: :suppliers - td.timestamp data-time=product.created_at.utc.iso8601 - td.actions - = link_to t('helpers.links.edit'), [:edit, :suppliers, product], class: 'btn btn-mini edit-resource-button' - ' - = link_to t("helpers.links.destroy"), [:suppliers, product], method: :delete, data: {confirm: are_you_sure? }, class: 'btn btn-mini btn-danger' - - else - = no_content_given model_class - = link_to t("helpers.links.new"), new_suppliers_product_path(product_category_id: @product_category.try(:id)), class: 'btn btn-primary', data: {t: 'product.new'} +.medium-12.large-8.columns + - if @products.any? + table.table + thead + tr + th data-t="attributes.product.name" = model_class.human_attribute_name(:name) + th data-t="attributes.product.code" = model_class.human_attribute_name(:code) + th.currency data-t="attributes.product.price" = model_class.human_attribute_name(:price) + th data-t="models.plural.product_category" = ProductCategory.model_name.human_plural + th.timestamp data-t="attributes.product.created_at" = model_class.human_attribute_name(:created_at) + th.actions data-t="helpers.actions.title" =t 'helpers.actions.title' + tbody + - @products.each do |product| + tr class="product-row-#{product.id}" + td.link= link_to product.name, [:suppliers, product] + td= product.code + td.currency=currency product.price + td.link= product.category_links namespace: :suppliers + td.timestamp data-time=product.created_at.utc.iso8601 + td.actions + = link_to [:edit, :suppliers, product], class: 'table-edit' do + span data-title="helpers.links.edit" + = link_to [:suppliers, product], method: :delete, data: {confirm: are_you_sure? }, class: 'table-destroy' do + span data-title="helpers.links.destroy" + - else + = no_content_given model_class + .form-actions + = link_to new_suppliers_product_path(product_category_id: @product_category.try(:id)), class: 'form-action-new' + span data-t="helpers.links.new" /a.btn.btn-primary data-t="helpers.links.new" href=new_suppliers_product_path -.span4 - h4 data-t='product.preview.header'= t('supplier.product.preview.header') - .products_preview-time-container - .products_preview-date= text_field_tag :date, Date.today.iso8601, class: 'datepicker' - .products_preview-hour= select_tag :preview_hour, options_for_select(0..23) - .products_preview-minute= select_tag :preview_minute, options_for_select(1..60) - .clear - p data-t='product.preview.description'= t('supplier.product.preview.description') - .well +.medium-12.large-4.columns + .medium-6.large-12.columns + h4 data-t='product.preview.header'= t('supplier.product.preview.header') + .products_preview-time-container + .products_preview-date= text_field_tag :date, Date.today.iso8601, class: 'datepicker' + br + .products_preview-hour= select_tag :preview_hour, options_for_select(0..23) + .products_preview-minute= select_tag :preview_minute, options_for_select(1..60) + .clear + .medium-6.large-12.columns + p data-t='product.preview.description'= t('supplier.product.preview.description') table#products-table tbody script#products-category-template[type="text/html"]= mustache_template 'user/products_category' diff --git a/app/views/suppliers/sections/index.html.slim b/app/views/suppliers/sections/index.html.slim index 016a30ed..c6e80150 100644 --- a/app/views/suppliers/sections/index.html.slim +++ b/app/views/suppliers/sections/index.html.slim @@ -26,4 +26,5 @@ - else = no_content_given model_class .form-actions - = link_to t("helpers.links.new"), new_suppliers_section_path, class: 'btn btn-primary', data: {t: 'helpers.links.new'} + = link_to new_suppliers_section_path, class: 'form-action-new' + span data-t="helpers.links.new" diff --git a/app/views/suppliers/tables/index.html.slim b/app/views/suppliers/tables/index.html.slim index 35760233..4448fbc8 100644 --- a/app/views/suppliers/tables/index.html.slim +++ b/app/views/suppliers/tables/index.html.slim @@ -7,30 +7,31 @@ div.page-header= title :index, model_class input#filter-to_number.number type="number" size=4 value=params[:to_number] name="to_number" ' = submit_tag 'Filter' -.well - - if @tables.any? - = paginate @tables - table.table - thead +- if @tables.any? + = paginate @tables + table.table + thead + tr + th.link data-t="attributes.table.number"= model_class.human_attribute_name(:number) + th.link data-t="models.section"= Section.model_name.human + th.timestamp data-t="attributes.table.created_at"= model_class.human_attribute_name(:created_at) + th.actions data-t="helpers.actions.title"=t 'helpers.actions.title' + tbody + - @tables.each do |table| tr - th.link data-t="attributes.table.number"= model_class.human_attribute_name(:number) - th.link data-t="models.section"= Section.model_name.human - th.timestamp data-t="attributes.table.created_at"= model_class.human_attribute_name(:created_at) - th.actions data-t="helpers.actions.title"=t 'helpers.actions.title' - tbody - - @tables.each do |table| - tr - td.link= link_to table.number, [:suppliers, table] - td.link= link_to_if table.section.present?, table.section.try(:title), [:suppliers, table.section] - td.timestamp data-time=table.created_at.try(:utc).try(:iso8601) - td.actions - = link_to t('helpers.links.edit'), [:edit, :suppliers, table], class: 'btn btn-mini', data: {t: 'helpers.links.edit'} - ' - = link_to t("helpers.links.destroy"), [:suppliers, table], method: :delete, data: {confirm: are_you_sure? }, class: 'btn btn-mini btn-danger', data: {t: 'helpers.links.destroy'} - - else - = no_content_given model_class + td.link= link_to table.number, [:suppliers, table] + td.link= link_to_if table.section.present?, table.section.try(:title), [:suppliers, table.section] + td.timestamp data-time=table.created_at.try(:utc).try(:iso8601) + td.actions + = link_to [:edit, :suppliers, table], class: 'table-edit' do + span data-title="helpers.links.edit" + = link_to [:suppliers, table], method: :delete, data: {confirm: are_you_sure? }, class: 'table-destroy' do + span data-title="helpers.links.destroy" +- else + = no_content_given model_class .form-actions - = link_to t("helpers.links.new"), new_suppliers_table_path, class: 'btn btn-primary', data: {t: 'helpers.links.new'} - ' - = link_to t('supplier.tables.qr_codes.link'), qr_codes_suppliers_tables_path(params.slice(:from_number, :to_number)), class: 'btn btn-info', data: {t: 'tables.qr_codes.link'}, target: :_blank + = link_to new_suppliers_table_path, class: 'form-action-new' + span data-t="helpers.links.new" + = link_to qr_codes_suppliers_tables_path(params.slice(:from_number, :to_number)), class: 'form-action-qr-codes', target: :_blank + span data-t="tables.qr_codes.link" diff --git a/app/views/suppliers/tables/show.html.slim b/app/views/suppliers/tables/show.html.slim index 9969c9c0..e6491cf5 100644 --- a/app/views/suppliers/tables/show.html.slim +++ b/app/views/suppliers/tables/show.html.slim @@ -7,10 +7,11 @@ dl.dl-horizontal.show-list - if @table.section.present? dt= Section.model_name.human dd= link_to @table.section.title, [:suppliers, @table.section] - +//= supplier_form_actions :index, :edit, :destroy, object: @table, for: :tables .form-actions - = link_to t("helpers.links.back"), suppliers_tables_path, class: 'btn' - ' - = link_to t('helpers.links.edit'), [:edit, :suppliers, @table], class: 'btn' - ' - = link_to t("helpers.links.destroy"), [:suppliers, @table], method: :delete, data: {confirm: are_you_sure? }, class: 'btn btn-danger' + = link_to [:suppliers, :tables], class: 'form-action-index' + span data-t="helpers.links.index" + = link_to [:edit, :suppliers, @table], class: 'form-action-edit' + span data-t="helpers.links.edit" + = link_to [:suppliers, @table], method: :delete, data: {confirm: are_you_sure? }, class: 'form-action-destroy' + span data-t="helpers.links.destroy"