udongo 5.9.0 → 6.0.0

data/app/assets/stylesheets/backend/components/_card.scss

@@ -0,0 +1,3 @@
+.card {
+  margin-bottom: 1rem;
+}

data/app/assets/stylesheets/backend/components/_form.scss

@@ -1,5 +1,5 @@
 .form-actions {
-  margin-top: 10px;
+  margin-bottom: 1rem;
 }
 
 .help-block {

data/app/assets/stylesheets/backend/udongo.scss

@@ -10,12 +10,13 @@
 
 // Components
 @import 'components/navbar';
-@import 'components/tabs';
+@import 'components/tab';
 @import 'components/breadcrumb';
 @import 'components/form';
 @import 'components/nav';
 @import 'components/page_tree';
 @import 'components/table';
+@import 'components/card';
 
 // Page specific styles
 @import 'pages/login';

data/app/controllers/backend/content/rows/videos_controller.rb

@@ -0,0 +1,6 @@
+class Backend::Content::Rows::VideosController < Backend::BaseController
+  include Concerns::Backend::ContentTypeController
+
+  model ContentVideo
+  allowed_params :url, :aspect_ratio
+end

data/app/controllers/backend/content/rows_controller.rb

@@ -1,6 +1,6 @@
 class Backend::Content::RowsController < Backend::BaseController
   include Concerns::Backend::PositionableController
-  before_action :find_model, only: [:update_position, :destroy]
+  before_action :find_model, except: [:new]
 
   def new
     if params[:klass] && params[:id] && params[:locale]
@@ -13,6 +13,27 @@ class Backend::Content::RowsController < Backend::BaseController
     end
   end
 
+  def horizontal_alignment
+    align = params[:align].to_s
+    align = 'left' unless %w(left center right).include?(align)
+    @row.update_attribute :horizontal_alignment, align
+
+    redirect_back_to_content
+  end
+
+  def vertical_alignment
+    align = params[:align].to_s
+    align = 'top' unless %w(top center bottom).include?(align)
+    @row.update_attribute :vertical_alignment, align
+
+    redirect_back_to_content
+  end
+
+  def toggle_full_width
+    @row.update_attribute :full_width, !@row.full_width?
+    redirect_back_to_content
+  end
+
   def destroy
     @row.destroy
     redirect_back_to_content('content-rows')

data/app/decorators/content_row_decorator.rb

@@ -6,4 +6,24 @@ class ContentRowDecorator < ApplicationDecorator
   def column_limit_reached?
     column_width_calculator.total(:width_xl) >= 12
   end
+
+  def classes
+    list = []
+
+    if horizontal_alignment.to_s == 'center'
+      list << 'justify-content-center'
+
+    elsif horizontal_alignment.to_s == 'right'
+      list << 'justify-content-end'
+    end
+
+    if vertical_alignment.to_s == 'center'
+      list << 'align-items-center'
+
+    elsif vertical_alignment.to_s == 'bottom'
+      list << 'align-items-end'
+    end
+
+    list
+  end
 end

data/app/decorators/content_video_decorator.rb

@@ -0,0 +1,23 @@
+class ContentVideoDecorator < ApplicationDecorator
+  delegate_all
+
+  def embed_url
+    url.to_s.include?('vimeo') ? vimeo_embed_url : youtube_embed_url
+  end
+
+  def aspect_ratio_class
+    aspect_ratio.to_s.split('x').join('by')
+  end
+
+  private
+
+  def vimeo_embed_url
+    video_id = /[0-9*]+/.match(url.to_s).to_s
+    "https://player.vimeo.com/video/#{video_id}"
+  end
+
+  def youtube_embed_url
+    video_id = url.to_s.split('v=').last
+    "https://www.youtube.com/embed/#{video_id}?rel=0"
+  end
+end

data/app/helpers/backend/dropdown_helper.rb

@@ -8,7 +8,7 @@ module Backend
 
     def options_for_column_widths
       (1..12).to_a.reverse.map do |i|
-        ["#{(i.to_f / 12.0 * 100).to_i}%", i]
+        ["#{i}/12", i]
       end
     end
   end

data/app/models/content_video.rb

@@ -0,0 +1,11 @@
+class ContentVideo < ApplicationRecord
+  include Concerns::ContentType
+
+  ASPECT_RATIOS = %w(16x9 21x9 4x3 1x1)
+
+  belongs_to :asset
+
+  def content_type
+    :video
+  end
+end

data/app/models/email_template.rb

@@ -4,7 +4,7 @@ class EmailTemplate < ApplicationRecord
 
   include Concerns::Sortable
 
-  validates :description, :from_name, presence: true
+  validates :description, :from_name, :from_email, presence: true
   validates :identifier, presence: true, uniqueness: { case_sensitive: false }
   validates :from_email, email: true
   validates :cc, :bcc, email: true, allow_blank: true

data/app/views/backend/_breadcrumbs.html.erb

@@ -3,10 +3,11 @@
     <li class="breadcrumb-item"><%= link_to icon(:home), backend_path %></li>
 
     <% breadcrumb.each do |item| %>
-      <% klass = (item == breadcrumb.all.last) ? 'active' : '' %>
+      <% last = (item == breadcrumb.all.last) %>
+      <% klass = last ? 'active' : '' %>
       <li class="breadcrumb-item <%= klass %>">
 
-        <% if item[:link].present? %>
+        <% if item[:link].present? && !last %>
           <%= link_to item[:name].to_s.html_safe, item[:link] %>
         <% else %>
           <%= item[:name].to_s.html_safe %>

data/app/views/backend/_navigation.html.erb

@@ -1,8 +1,11 @@
-<nav class="navbar navbar-dark bg-inverse">
+<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
+  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#udongo-navbar" aria-controls="udongo-navbar" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
   <%= link_to backend_path, class: 'navbar-brand' do %>
     <%= Udongo.config.base.project_name %>
   <% end %>
 
   <%= render 'layouts/backend/top_navigation' %>
 </nav>
-

data/app/views/backend/admins/index.html.erb

@@ -1,6 +1,6 @@
 <%= render 'backend/breadcrumbs' %>
 
-<p class="text-xs-right">
+<p class="text-right">
   <%= link_to icon(:plus, t('b.add')), new_backend_admin_path, class: 'btn btn-primary btn-sm' %>
 </p>
 
@@ -19,7 +19,7 @@
         <tr>
           <td><%= a.full_name %></td>
           <td><%= mail_to a.email %></td>
-          <td class="text-xs-right">
+          <td class="text-right">
             <%= link_to_edit [:backend, a] %>
             <%= link_to_delete [:backend, a] %>
           </td>

data/app/views/backend/articles/images/index.html.erb

@@ -2,7 +2,7 @@
 <%= render 'backend/breadcrumbs' %>
 <%= render 'backend/articles/tabs', model: @article, active: :images %>
 
-<p class="text-xs-right">
+<p class="text-right">
   <%= link_to icon(:plus, t('b.add')), backend_images_path(klass: @article.class.name, id: @article.id), class: 'btn btn-primary btn-sm' %>
 </p>
 
@@ -30,7 +30,7 @@
           <td><%= number_to_human_size a.filesize %></td>
           <td><%= simple_format a.description %></td>
           <td><%= l a.updated_at %></td>
-          <td class="text-xs-right">
+          <td class="text-right">
             <%= link_to icon(:trash), unlink_backend_images_path(klass: @article.class.name, id: @article.id, asset_id: a.id), data: { confirm: t('b.msg.confirm') }, title: t('b.delete') %>
           </td>
         </tr>

data/app/views/backend/articles/index.html.erb

@@ -1,6 +1,6 @@
 <%= render 'backend/breadcrumbs' %>
 
-<p class="text-xs-right">
+<p class="text-right">
   <%= link_to icon(:plus, t('b.add')), new_backend_article_path, class: 'btn btn-primary btn-sm' %>
 </p>
 
@@ -40,7 +40,7 @@
           <td><%= l a.published_at if a.published_at %></td>
           <td><%= t a.visible?.to_s %></td>
           <td><%= t a.press_release?.to_s %></td>
-          <td class="text-xs-right">
+          <td class="text-right">
             <%= link_to_edit_translation [:backend, a] %>
             <%= link_to_delete [:backend, a] %>
           </td>

data/app/views/backend/assets/index.html.erb

@@ -1,7 +1,7 @@
 <%= render 'backend/breadcrumbs' %>
 <%= render 'filter' %>
 
-<p class="text-xs-right">
+<p class="text-right">
   <%= link_to icon(:plus, t('b.add')), new_backend_asset_path, class: 'btn btn-primary btn-sm' %>
 </p>
 
@@ -32,7 +32,7 @@
           <td><%= number_to_human_size a.filesize %></td>
           <td><%= simple_format a.description %></td>
           <td><%= l a.updated_at %></td>
-          <td class="text-xs-right">
+          <td class="text-right">
             <%= link_to_edit [:backend, a] %>
             <%= link_to_delete [:backend, a] if a.deletable? %>
           </td>

data/app/views/backend/content/_rows.html.erb

@@ -21,11 +21,45 @@
       <div id="content-row-<%= row.id %>" class="card content-row" data-update-position="<%= update_position_backend_content_row_path(row) %>">
         <div class="card-header handle">
           <div class="btn-group" role="group">
-            <%= link_to icon(:trash, t('b.msg.flexible_content.delete_row')), backend_content_row_path(row), class: 'btn btn-secondary', method: :delete, data: { confirm: t('b.msg.confirm') } %>
+            <% klass = 'btn btn-secondary' %>
+            <% klass << ' active' if row.horizontal_alignment == 'left' || row.horizontal_alignment.blank? %>
+            <%= link_to icon(:align_left), horizontal_alignment_backend_content_row_path(row, align: 'left'), class: klass, title: t('b.msg.flexible_content.align_left'), data: { toggle: 'tooltip', placement: 'bottom' } %>
+
+            <% klass = 'btn btn-secondary' %>
+            <% klass << ' active' if row.horizontal_alignment == 'center' %>
+            <%= link_to icon(:align_center), horizontal_alignment_backend_content_row_path(row, align: 'center'), class: klass, title: t('b.msg.flexible_content.align_center'), data: { toggle: 'tooltip', placement: 'bottom' } %>
+
+            <% klass = 'btn btn-secondary' %>
+            <% klass << ' active' if row.horizontal_alignment == 'right' %>
+            <%= link_to icon(:align_right), horizontal_alignment_backend_content_row_path(row, align: 'right'), class: klass, title: t('b.msg.flexible_content.align_right'), data: { toggle: 'tooltip', placement: 'bottom' } %>
+          </div>
+
+          <div class="btn-group" role="group">
+            <% klass = 'btn btn-secondary' %>
+            <% klass << ' active' if row.vertical_alignment == 'top' || row.vertical_alignment.blank? %>
+            <%= link_to icon(:long_arrow_up), vertical_alignment_backend_content_row_path(row, align: 'top') , class: klass, title: t('b.msg.flexible_content.align_vertical_top'), data: { toggle: 'tooltip', placement: 'bottom' } %>
+
+            <% klass = 'btn btn-secondary' %>
+            <% klass << ' active' if row.vertical_alignment == 'center' %>
+            <%= link_to icon(:arrows_v), vertical_alignment_backend_content_row_path(row, align: 'center'), class: klass, title: t('b.msg.flexible_content.align_vertical_center'), data: { toggle: 'tooltip', placement: 'bottom' } %>
+
+            <% klass = 'btn btn-secondary' %>
+            <% klass << ' active' if row.vertical_alignment == 'bottom' %>
+            <%= link_to icon(:long_arrow_down), vertical_alignment_backend_content_row_path(row, align: 'bottom'), class: klass, title: t('b.msg.flexible_content.align_vertical_bottom'), data: { toggle: 'tooltip', placement: 'bottom' } %>
+          </div>
+
+          <div class="btn-group" role="group">
+            <% klass = 'btn btn-secondary' %>
+            <% klass << ' active' if row.full_width? %>
+            <%= link_to icon(:arrows_h), toggle_full_width_backend_content_row_path(row), class: klass, title: t('b.msg.flexible_content.full_width'), data: { toggle: 'tooltip', placement: 'bottom' } %>
+          </div>
+
+          <div class="btn-group" role="group">
+            <%= link_to icon(:trash), backend_content_row_path(row), class: 'btn btn-secondary', title: t('b.delete'), method: :delete, data: { toggle: 'tooltip', placement: 'bottom', confirm: t('b.msg.confirm') } %>
           </div>
         </div>
 
-        <div class="row content-columns card-block">
+        <div class="row content-columns card-block <%= row.classes.join(' ') %>">
           <% row.columns.each do |column| %>
             <% content = column.content.decorate %>
 

data/app/views/backend/content/_video.html.erb

@@ -0,0 +1,8 @@
+<% if object.url.present? && object.aspect_ratio.present? %>
+  <div class="embed-responsive embed-responsive-<%= object.aspect_ratio_class %>">
+    <iframe class="embed-responsive-item" src="<%= object.embed_url %>" allowfullscreen></iframe>
+  </div>
+
+<% else %>
+  <p><%= t 'b.msg.flexible_content.no_video_present' %></p>
+<% end %>

data/app/views/backend/content/rows/columns/_column_width_explanation.html.erb

@@ -0,0 +1,5 @@
+<div class="alert alert-info">
+  <p class="m-b-0">
+    <%= icon(:info) %> <%= t 'b.msg.flexible_content.width_explanation' %>
+  </p>
+</div>

data/app/views/backend/content/rows/columns/_dimension_fields.html.erb

@@ -1,11 +1,29 @@
-<% Udongo::Configs::FlexibleContent::BREAKPOINTS.each do |bp| %>
-  <%=
-    form.input(
-      "width_#{bp}",
-      as: :select,
-      collection: options_for_column_widths,
-      include_blank: false,
-      wrapper_html: { hidden: !Udongo.config.flexible_content.allowed_breakpoint?(bp) }
-    )
-  %>
+<% javascript 'backend/flexible_content_breakpoints' %>
+
+<% Udongo::Configs::FlexibleContent::BREAKPOINTS.each do |b| %>
+  <% if b == Udongo::Configs::FlexibleContent::DEFAULT_BREAKPOINT %>
+    <%=
+      form.input(
+          "width_#{b}",
+          as: :select,
+          collection: options_for_column_widths,
+          include_blank: false,
+          label: t('simple_form.labels.defaults.width'),
+          wrapper_html: { data: { default_breakpoint: true }}
+      )
+    %>
+
+    <%= link_to icon(:cog, t('b.advanced')), '#', data: { show_all_breakpoints: true } %>
+
+  <% else %>
+    <%=
+      form.input(
+          "width_#{b}",
+          as: :select,
+          collection: options_for_column_widths,
+          include_blank: false,
+          wrapper_html: { style: 'display: none;', data: { advanced_breakpoint: true, "breakpoint_#{b}": true }}
+      )
+    %>
+  <% end %>
 <% end %>

data/app/views/backend/content/rows/columns/edit.html.erb

@@ -1,6 +1,8 @@
 <%= render 'backend/general_form_error', object: @column %>
 
 <%= simple_form_for(@column, url: backend_content_row_column_path(@row, @column)) do |f| %>
+  <%= render 'column_width_explanation' %>
+
   <div class="card">
     <div class="card-header">
       <%= t 'b.msg.flexible_content.edit_column' %>

data/app/views/backend/content/rows/columns/new.html.erb

@@ -1,6 +1,8 @@
 <%= render 'backend/general_form_error', object: @column %>
 
 <%= simple_form_for(@column, url: backend_content_row_columns_path(@row)) do |f| %>
+  <%= render 'column_width_explanation' %>
+
   <div class="card">
     <div class="card-header">
       <%= t 'b.msg.flexible_content.add_column' %>

data/app/views/backend/content/rows/videos/edit.html.erb

@@ -0,0 +1,14 @@
+<%= simple_form_for [:backend, @model] do |f| %>
+  <div class="card">
+    <div class="card-header">
+      <%= t 'b.msg.flexible_content.edit_video' %>
+    </div>
+
+    <div class="card-block">
+      <%= f.input :url, as: :string %>
+      <%= f.input :aspect_ratio, collection: ContentVideo::ASPECT_RATIOS, include_blank: false %>
+    </div>
+  </div>
+
+  <%= render 'backend/form_actions', cancel_url: content_path %>
+<% end %>

data/app/views/backend/email_templates/index.html.erb

@@ -14,7 +14,7 @@
       <% @email_templates.each do |s| %>
         <tr data-update-position="<%= update_position_backend_email_template_path(s) %>">
           <td><%= s.description %></td>
-          <td class="text-xs-right">
+          <td class="text-right">
             <%= link_to_edit_translation [:backend, s] %>
           </td>
         </tr>

data/app/views/backend/emails/index.html.erb

@@ -27,7 +27,7 @@
               <%= t 'b.not_yet_sent' %>
             <% end %>
           </td>
-          <td class="right icons">
+          <td class="text-right">
             <%= link_to_show [:backend, e] %>
           </td>
         </tr>

data/app/views/backend/forms/fields/index.html.erb

@@ -4,6 +4,10 @@
 <%= render 'backend/breadcrumbs' %>
 
 <% if @form.fields.any? %>
+  <p class="text-right">
+    <%= link_to icon(:plus, t('b.add')), new_backend_form_field_path(@form), class: 'btn btn-primary btn-sm' %>
+  </p>
+
   <table class="table table-striped table-hover">
     <thead class="thead-inverse">
       <tr>
@@ -12,19 +16,11 @@
       </tr>
     </thead>
 
-    <tfoot>
-      <tr>
-        <td colspan="2" class="text-xs-center">
-          <%= link_to icon(:plus, t('b.msg.form_fields.add')), new_backend_form_field_path(@form), class: 'btn btn-primary' %>
-        </td>
-      </tr>
-    </tfoot>
-
     <tbody>
       <% @form.fields.each do |f| %>
         <tr data-update-position="<%= update_position_backend_form_field_path(@form, f) %>">
           <td><%= f.identifier %></td>
-          <td class="text-xs-right">
+          <td class="text-right">
             <%= link_to_edit edit_backend_form_field_path(@form, f) %>
             <%= link_to_delete backend_form_field_path(@form, f) %>
           </td>
@@ -32,13 +28,10 @@
       <% end %>
     </tbody>
   </table>
+
 <% else %>
-  <div class="text-xs-center">
-    <p>
-      <%= t('b.msg.form_fields.explanation') %>
-    </p>
-    <p>
-      <%= link_to t('b.msg.form_fields.add_first'), new_backend_form_field_path(@form), class: 'btn btn-primary' %>
-    </p>
-  </div>
+  <p><%= t('b.msg.form_fields.explanation') %></p>
+  <p>
+    <%= link_to t('b.msg.form_fields.add_first'), new_backend_form_field_path(@form), class: 'btn btn-primary' %>
+  </p>
 <% end %>