Drupal7モジュール（Fivestar）評価時にのajaxプロセス状態表示レイアウト変更

問題点：モジュール（Fivestar）のajaxプロセス状態表示がよくない

• 背景：Drupal7.56、Fivestart7.x-2.2
• モジュール（Fivestart）の評価操作時に、ajaxプロセス状態表示が大きくて、バランスが良くないです
  
• このajaxプロセス状態表示をcssのプロパティ変更で小さくにしたいです

問題の特定：デバッガーでFivestartのajaxプロセスを止めてプロセス表示するhtmlブロック要素を特定

• ajaxプロセス状態表示ブロックが動作時のみしか表示されないので、ajaxのプロセスが短くて、状態表示ブロックのhtml要素確認が難しいです
• デバッガーで、fivestart/fivestart.module ファイルの505行あたりにあるファンクション：function fivestar_ajax_submit($form, $form_state) にブレイクポイントを入れます。
• Fivestartのajaxプロセスが止められまして、プロセス状態のhtmlブロックの確認ができるようになります
  
• ajaxプロセス状態ブロックはイメージに示された<span class="input-group-addon">要素にあります

  <span class="input-group-addon">
      <div class="ajax-progress ajax-progress-throbber">
          <i class="glyphicon glyphicon-refresh glyphicon-spin"></i>
      </div>
  </span>
  

  • この要素がajax作動時に追加されます。ajax動作後に消えます。

cssでajaxプロセス状態表示ブロックを評価結果（五つの星）ブロックに一行として表示させます

• ajaxプロセス状態表示ブロック（<div>）、評価結果（五つの星）ブロック（<div>）から構成されます
• この二つのブロックを一行に表示すれば今回の目的が達成できます
• ajaxプロセス状態表示ブロックの背景などの要素も一緒にcssで調整します

  //　Drupalのstyle.cssに以下のコードを追加して、Fivestartのajaxプロセス表示を上書き
  .fivestar-widget .form-item.form-item-vote.form-type-select.form-group {
    display: inline-block;
  }
  .fivestar-widget .form-item.form-item-vote.form-type-select.form-group .input-group,
  .fivestar-widget .form-item.form-item-vote.form-type-select.form-group .fivestar-widget {
    display: inline-block;
  }
  .fivestar-widget .form-item.form-item-vote.form-type-select.form-group div.fivestar-widget {
    vertical-align: middle ;
  }
  .fivestar-widget .form-item.form-item-vote.form-type-select.form-group .input-group-addon {
    display: inline;
    border: 0;
    background-color: rgba(255, 255, 255, 0);
    padding: 0;
  }