From: Jiri Tomasek<jtomasek(a)redhat.com> --- src/app/stylesheets/custom.scss | 1 - src/app/stylesheets/layout.scss | 110 +++++++++------- src/app/views/deployables/_form.html.haml | 18 ++-- src/app/views/deployables/_new.html.haml | 8 +- .../views/deployables/_new_from_image.html.haml | 2 +- src/app/views/deployables/show.html.haml | 138 +++++++++++--------- .../deployments/launch_from_catalog.html.haml | 9 +- src/app/views/images/edit_xml.html.haml | 4 +- src/app/views/images/new.html.haml | 2 +- src/app/views/images/overview.html.haml | 2 +- src/app/views/images/show.html.haml | 14 +- .../_provider_selection.html.haml | 4 +- 12 files changed, 172 insertions(+), 140 deletions(-) diff --git a/src/app/stylesheets/custom.scss b/src/app/stylesheets/custom.scss index 4f72278..2943ce4 100644 --- a/src/app/stylesheets/custom.scss +++ b/src/app/stylesheets/custom.scss @@ -17,7 +17,6 @@ } /*fixes the button_to helper used in button-group problem*/ -.button-group .button_to div{display: inline;} .button-group .button_to div .button.pill{ -webkit-border-radius: 0em 50em; -moz-border-radius: 0em 50em 50em 0em; diff --git a/src/app/stylesheets/layout.scss b/src/app/stylesheets/layout.scss index c1f3886..f999fa9 100644 --- a/src/app/stylesheets/layout.scss +++ b/src/app/stylesheets/layout.scss @@ -183,6 +183,7 @@ svg { form{ display: inline; } +form.button_to> div {display: inline;} /* `Clear Floated Elements ----------------------------------------------------------------------------------------------------*/ @@ -1637,54 +1638,42 @@ section.admin-content-section{ p.description{ margin-bottom: 20px } -} - -header.admin-page-header + section.admin-content-section{margin-top: 26px;} -section.admin-content-section + section.admin-content-section {margin-top: 26px;} -section.admin-content-section{ margin-bottom: 10px; } - /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -Build Push +Centered div ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -section.admin-content-section{ - .content.buildpush{ - fieldset{margin-top: 20px;} - - textarea.edit_xml{ - box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; - width: 100%; - padding: 5px 3px; - height: 300px; - border: 1px solid #C4C4C4; - resize: vertical; - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.50); - -moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.50); - -webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.50); - } - - div.centered{ - width: 600px; margin: 10px auto; - } + div.centered{ + width: 600px; margin: 10px auto; + } - div.lefted{ - padding-right: 380px; - margin: 0px 50px; - min-height: 160px; - h2{ - font-family: $font-family-primary; - font-size: 21px; - font-weight: 200; - margin-bottom: 4px; - padding-right: 40px; - text-align: center; - } - p{ text-align: center; margin: 10px 0px 10px 0px; } +/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +Left aligned div +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + div.lefted{ + padding-right: 380px; + margin: 0px 50px; + min-height: 160px; + h2{ + font-family: $font-family-primary; + font-size: 21px; + font-weight: 200; + margin-bottom: 4px; + padding-right: 40px; + text-align: center; } - div.lefted.image-upload-overview{background: url(../../images/template-valid.png) no-repeat 600px top;} - div.lefted.new-catalog-entry-from-image{background: url(../../images/template-valid.png) no-repeat 600px top;} + p{ text-align: center; margin: 10px 0px 10px 0px; } } + } +header.admin-page-header + section.admin-content-section{margin-top: 10px;} +section.admin-content-section + section.admin-content-section {margin-top: 10px;} +section.admin-content-section{ margin-bottom: 10px; } + +/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +Build Push +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ +div.lefted.image-upload-overview{background: url(../../images/template-valid.png) no-repeat 600px top;} +div.lefted.new-catalog-entry-from-image{background: url(../../images/template-valid.png) no-repeat 600px top;} /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ User Card @@ -2396,6 +2385,18 @@ ul.instances-array{ } /************************************************************************** */ +/********************************************* Deployable Detail page */ +/************************************************************************** */ + +table.light_table{ + margin: 10px; + td,th{ padding: 10px; } + th{border-bottom: 1px solid #CCCCCC;} + td:first-child, th:first-child{padding-left: 0px;} + td:last-child, th:last-child{padding-right: 0px;} +} + +/************************************************************************** */ /********************************************* Launch from catalog elements */ /************************************************************************** */ @@ -2504,14 +2505,14 @@ ul.catalog_pretty { background: -ms-linear-gradient(top, #efefef 0%,#e0e0e0 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #efefef 0%,#e0e0e0 100%); /* W3C */ + display: table; + width: 100%; + box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; div.controls{ - width: 200px; - float: right; text-align: right; display: table-cell; vertical-align: middle; - div{ display: inline; } a{ margin-right: 10px; text-decoration: none; } a:after{ content: " ▼"; } a:hover{ color: black; } @@ -2519,13 +2520,14 @@ ul.catalog_pretty { div.info{ padding-left: 32px; - background: transparent url('../../images/deployment_large_icon_provider.png') no-repeat left top; + background: transparent url('../../images/deployment_large_icon_provider.png') no-repeat left center; h2{ font-size: 16px; } + display: table-cell; + vertical-align: middle; } } div.details.collapsible{ - display: none; background: #eee; border-top: 1px solid #ccc; table{ @@ -2535,6 +2537,7 @@ ul.catalog_pretty { td:last-child, th:last-child{padding-right: 0px;} th{border-bottom: 1px solid #CCCCCC;} } +&.collapsed{display: none;} } } } @@ -2970,7 +2973,6 @@ body.monitor form.generic{ input.short{ width: 100px; } - } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ @@ -3067,7 +3069,19 @@ body.administer form.generic{ span.text_instead_input{ display: inline-block; - padding: 6px; + padding: 6px 0px; + } + + textarea.edit_xml{ + box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; + width: 100%; + padding: 5px 3px; + height: 300px; + border: 1px solid #C4C4C4; + resize: vertical; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.50); + -moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.50); + -webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.50); } } diff --git a/src/app/views/deployables/_form.html.haml b/src/app/views/deployables/_form.html.haml index fa6ec32..1c50786 100644 --- a/src/app/views/deployables/_form.html.haml +++ b/src/app/views/deployables/_form.html.haml @@ -1,15 +1,15 @@ - if @deployable.errors.any? = render 'layouts/error_messages', :object => @deployable -%fieldset - = form_for @deployable do |form| += form_for @deployable do |form| + %fieldset - if params[:edit_xml] %p - = form.label :xml, t('.deployable_xml') - = form.text_area :xml, :class => 'long' + %h2= t('.deployable_xml') + = form.text_area :xml, :class => 'edit_xml' - else %p = label_tag :catalog_id, t('catalog_entries.form.catalog') - = @catalog.name + %span.text_instead_input= @catalog.name .clear %p = form.label :name, t('catalog_entries.index.name') @@ -19,8 +19,8 @@ = form.text_area :description, :class => 'long' %p = form.label :xml, t('.deployable_xml') - = link_to t("catalog_entries.properties.edit_deployable_xml"), edit_catalog_deployable_path((a)catalog.id, @deployable.id, :edit_xml=>true) + %span.text_instead_input= link_to t("catalog_entries.properties.edit_deployable_xml"), edit_catalog_deployable_path((a)catalog.id, @deployable.id, :edit_xml=>true) -%fieldset.options - = link_to t('cancel'), catalog_path(@catalog), :class => 'button danger' - = submit_tag t('save'), :name => 'save', :class => 'button', :id => 'save_button' + %fieldset.align-center + = link_to t('cancel'), catalog_path(@catalog), :class => 'button danger' + = submit_tag t('save'), :name => 'save', :class => 'button', :id => 'save_button' diff --git a/src/app/views/deployables/_new.html.haml b/src/app/views/deployables/_new.html.haml index a1d1589..2b431a5 100644 --- a/src/app/views/deployables/_new.html.haml +++ b/src/app/views/deployables/_new.html.haml @@ -10,9 +10,9 @@ %nav#image-upload-tabs.faceted %ul.tabs %li - = link_to t('catalog_entries.new.upload'), new_catalog_deployable_path(@catalog), :id => "upload", :class => "#{'selected' if @form_option == 'upload'}" + = link_to t('catalog_entries.new.upload'), new_catalog_deployable_path(@catalog), :id => "upload", :class => "#{'active' if @form_option == 'upload'}" %li - = link_to t('catalog_entries.new.from_url'), new_catalog_deployable_path(@catalog, :from_url => true), :id => "from_url", :class => "#{'selected' if @form_option == 'from_url'}" + = link_to t('catalog_entries.new.from_url'), new_catalog_deployable_path(@catalog, :from_url => true), :id => "from_url", :class => "#{'active' if @form_option == 'from_url'}" .form_option = render :partial => @form_option @@ -48,8 +48,8 @@ }); function change_selected($add_selected, $remove_selected){ - $remove_selected.removeClass('selected'); - $add_selected.addClass('selected'); + $remove_selected.removeClass('active'); + $add_selected.addClass('active'); } function read_name_field() { diff --git a/src/app/views/deployables/_new_from_image.html.haml b/src/app/views/deployables/_new_from_image.html.haml index 2e1b285..b8030be 100644 --- a/src/app/views/deployables/_new_from_image.html.haml +++ b/src/app/views/deployables/_new_from_image.html.haml @@ -2,7 +2,7 @@ %h1.deployables= t('.catalog_entry_name', :name => @deployable.name) %section.admin-content-section - .content.buildpush + .content = form_for @deployable, :html => {:class => 'generic'} do |form| = hidden_field_tag :create_from_image, params[:create_from_image] - if @deployable.errors.any? diff --git a/src/app/views/deployables/show.html.haml b/src/app/views/deployables/show.html.haml index 6a8576a..f2b1c14 100644 --- a/src/app/views/deployables/show.html.haml +++ b/src/app/views/deployables/show.html.haml @@ -8,86 +8,106 @@ = link_to t('deployments.overview.launch'), launch_new_deployments_path(:deployable_id => @deployable.id, :pool_id => @catalog.pool), :id => :launch_deployment -%section.admin-content-section.deployable - %section.image - %header - %h2= t('.image') - %table +%section.admin-content-section + %header + %h2.users= t('.images') + .content + .centered + %table.light_table %thead %tr - %th=t'.name' + %th + %th + %strong=t'.name' %th=t'.hwp_profile' - %th=t'.hdd' - %th=t'.ram' - %th=t'.arch' + %th.align-center=t'.hdd' + %th.align-center=t'.ram' + %th.align-center=t'.arch' %tbody - - @image_details.each do |assembly| - %tr - - if assembly.has_key?(:name) - %td=assembly[:name] - -else - %td=assembly[:error_name] - -if assembly.has_key?(:hwp) - %td=assembly[:hwp][:name] - %td=assembly[:hwp][:hdd] - %td=assembly[:hwp][:ram] - %td=assembly[:hwp][:arch] - -else - %td Not exist in DB + - @image_details.each do |assembly| + %tr + %td image ready + - if assembly.has_key?(:name) + %td + %strong=assembly[:name] + -else + %td=assembly[:error_name] + -if assembly.has_key?(:hwp) + %td=assembly[:hwp][:name] + %td.align-center=assembly[:hwp][:hdd] + %td.align-center=assembly[:hwp][:ram] + %td.align-center=assembly[:hwp][:arch] + -else + %td Not exist in DB - %section.build +%section.admin-content-section + - if @missing_images.empty? %header %h2= t('.build') - - - if @missing_images.empty? + .section-controls = form_tag(catalog_deployable_build_path(@catalog, @deployable)) do = select_tag :build_options, options_for_select([[t(".build_missing"), :build_missing], [t(".push_missing"), :push_missing]]) - = submit_tag t('.start'), :id => :start_build + = submit_tag t('.start'), :id => :start_build, :class => 'button pill' + .content + %p.description.align-center= t('.build_description') - %p.description= t('.build_description') - - %ul#providers-list - - @build_results.each do |provider_type, results| - %li - = provider_type - %ul + %ul#providers-list.catalog_pretty + - @build_results.each do |provider_type, results| + %li.collapse_entity + .summary + .info + %h2= provider_type + .controls + = link_to t(".details"),"#", :class => "collapse" + .details.collapsible + %table + %tr + %th=t'.provider' + %th=t'.account' + %th.align-center=t'.status' - results.each do |result| - %li - %span.provider= result[:provider] - %span.account= result[:account] - %span.status= result[:status] - - else - %h3= t('.missing_images') - %ul#missing-images-list - - @missing_images.each do |uuid| - %li= uuid - - - %section.catalogs + %tr + %td= result[:provider] + %td= result[:account] + %td.align-center= result[:status] + - else %header - %h2= t('.catalogs') + %h2= t('.build') + .content + %h3= t('.missing_images') + %ul#missing-images-list + - @missing_images.each do |uuid| + %li= uuid - %p= t('.choose_catalog') +%section.admin-content-section + %header + %h2= t('.catalogs') + .section-controls = form_for(:catalog_entry, :url => catalog_entries_path) do |f| + = f.label :catalog_id, t('catalog_entries.show.choose_catalog') = f.select :catalog_id, options_for_select(@catalogs_options) = f.hidden_field(:deployable_id, :value => @deployable.id) - = f.submit t('catalog_entries.show.add_catalog'), :id => :add_catalog - - %table + = f.submit t('catalog_entries.show.add_catalog'), :id => :add_catalog, :class => 'button pill' + .content + .centered + %table.light_table %tr %th - %label= t('.catalog_name') %th - %label= t('.environment') + %label + %strong= t('.catalog_name') + %th + %label + %strong= t('.environment') - @deployable.catalog_entries.each do |catalog_entry| %tr - %td - = button_to t('catalog_entries.show.delete'), catalog_entry_path(catalog_entry), :method => 'delete', :confirm => "#{t'catalog_entries.show.confirm_delete'}", :id => 'delete' - = catalog_entry.catalog.name + %td= button_to t('catalog_entries.show.delete'), catalog_entry_path(@catalog_entry), :method => 'delete', :confirm => "#{t'catalog_entries.show.confirm_delete'}", :id => 'delete' + %td= catalog_entry.catalog.name %td= catalog_entry.catalog.pool.pool_family.name - - if check_privilege(Privilege::PERM_VIEW,@permission_object) - %section.roles - %header - %h2= t('users.users') +- if check_privilege(Privilege::PERM_VIEW,@permission_object) + %section.admin-content-section + %header + %h2.roles= t('users.users') + .content = render :partial => 'permissions/permissions' diff --git a/src/app/views/deployments/launch_from_catalog.html.haml b/src/app/views/deployments/launch_from_catalog.html.haml index ca262e8..0c70fcf 100644 --- a/src/app/views/deployments/launch_from_catalog.html.haml +++ b/src/app/views/deployments/launch_from_catalog.html.haml @@ -11,14 +11,13 @@ - @deployables.each do |deployable| %li.collapse_entity .summary - .controls - = link_to t(".details"),"#", :class => "collapse" - = button_to t(".select"), launch_time_params_deployments_path(:deployment => { :name => deployable.name, :pool_id => @catalog.pool.id }, :deployable_id => deployable.id ), :class=> "button pill" .info %h2= deployable.name %p= deployable.description - .clear - .details.collapsible + .controls + = link_to t(".details"),"#", :class => "collapse" + = button_to t(".select"), launch_time_params_deployments_path(:deployment => { :name => deployable.name, :pool_id => @catalog.pool.id }, :deployable_id => deployable.id ), :class=> "button pill" + .details.collapsible.collapsed %table %tr %th diff --git a/src/app/views/images/edit_xml.html.haml b/src/app/views/images/edit_xml.html.haml index 0f4ee68..da13b83 100644 --- a/src/app/views/images/edit_xml.html.haml +++ b/src/app/views/images/edit_xml.html.haml @@ -9,8 +9,8 @@ %header %h2= t('.edit') - .content.tight.buildpush - = form_tag(overview_images_path, {:method => :post}) do + .content.tight + = form_tag(overview_images_path, {:method => :post, :class => 'generic'}) do = hidden_field_tag :environment, @environment.id = hidden_field_tag :name, @name = text_area_tag :image_xml, @xml, :class => 'edit_xml' diff --git a/src/app/views/images/new.html.haml b/src/app/views/images/new.html.haml index e9ec326..838bb63 100644 --- a/src/app/views/images/new.html.haml +++ b/src/app/views/images/new.html.haml @@ -6,7 +6,7 @@ = link_to t('images.environment', :environment => @environment.name), pool_family_path(@environment), :class => 'rounded-link' %section.admin-content-section - .content.buildpush + .content .centered %p.description.align-center %strong= t('.description', :environment => @environment.name) diff --git a/src/app/views/images/overview.html.haml b/src/app/views/images/overview.html.haml index 4e70112..0167513 100644 --- a/src/app/views/images/overview.html.haml +++ b/src/app/views/images/overview.html.haml @@ -6,7 +6,7 @@ = link_to t('images.environment', :environment => @environment.name), pool_family_path(@environment), :class => 'rounded-link' %section.admin-content-section - .content.buildpush + .content = form_tag(images_path, {:method => :post}) do = hidden_field_tag :environment, @environment.id = hidden_field_tag :name, @name diff --git a/src/app/views/images/show.html.haml b/src/app/views/images/show.html.haml index c712b1b..707cce3 100644 --- a/src/app/views/images/show.html.haml +++ b/src/app/views/images/show.html.haml @@ -10,13 +10,13 @@ %section.admin-content-section %header - %h2 - = t('.provider_images') - = t'.view_build' - = form_tag image_path((a)image.id), :method => :get do - = select_tag :build, options_for_build_select(@builds, @build, @latest_build) - = submit_tag t('.select_build'), :id => 'seletect_build_button' - = button_to t('.rebuild_all'), rebuild_all_image_path((a)image.id) + %h2= t('.provider_images') + .section-controls + = t'.view_build' + = form_tag image_path((a)image.id), :method => :get do + = select_tag :build, options_for_build_select(@builds, @build, @latest_build) + = submit_tag t('.select_build'), :id => 'seletect_build_button' + = button_to t('.rebuild_all'), rebuild_all_image_path((a)image.id) .content %dl.image_builds - @account_groups.each do |driver, group| diff --git a/src/app/views/provider_accounts/_provider_selection.html.haml b/src/app/views/provider_accounts/_provider_selection.html.haml index 36236cb..268512f 100644 --- a/src/app/views/provider_accounts/_provider_selection.html.haml +++ b/src/app/views/provider_accounts/_provider_selection.html.haml @@ -1,11 +1,11 @@ %fieldset#provider_type %p = label_tag :provider_name, t(".provider_name") - = @provider.name + %span.text_instead_input= @provider.name .clear %p = label_tag t('.cloud_type') - = @provider.provider_type.name + %span.text_instead_input= @provider.provider_type.name .clear - unless @provider.provider_type.deltacloud_driver.nil? = render :partial => "provider_form", :locals => { :provider_type => @provider.provider_type}