Add carousel image width setting.
This commit is contained in:
BoHung Chiu 2021-06-11 17:15:51 +08:00
parent 8fb10fa211
commit 3f323c70fc
8 changed files with 41 additions and 4 deletions

View File

@ -596,7 +596,7 @@ class AnnouncementsController < ApplicationController
"pause_btn_title" => pause_btn_title, "pause_btn_title" => pause_btn_title,
"prev_btn_title" => prev_btn_title, "prev_btn_title" => prev_btn_title,
"next_btn_title" => next_btn_title, "next_btn_title" => next_btn_title,
"carousel_display_style" => (bulletin_carousel_images.count == 0 ? 'display: none' : 'width: 50%;margin: auto;'), "carousel_display_style" => (bulletin_carousel_images.count == 0 ? 'display: none' : "width: #{announcement.carousel_image_width};margin: auto;"),
"carousel_count" => bulletin_carousel_images.count "carousel_count" => bulletin_carousel_images.count
}, },
"comments" => announcement.comments, "comments" => announcement.comments,
@ -680,7 +680,7 @@ class AnnouncementsController < ApplicationController
"pause_btn_title" => pause_btn_title, "pause_btn_title" => pause_btn_title,
"prev_btn_title" => prev_btn_title, "prev_btn_title" => prev_btn_title,
"next_btn_title" => next_btn_title, "next_btn_title" => next_btn_title,
"carousel_display_style" => (bulletin_carousel_images.count == 0 ? 'display: none' : 'width: 50%;margin: auto;'), "carousel_display_style" => (bulletin_carousel_images.count == 0 ? 'display: none' : "width: #{AnnouncementSetting.last.carousel_image_width};margin: auto;"),
"carousel_count" => bulletin_carousel_images.count "carousel_count" => bulletin_carousel_images.count
}, },
"comments" => [], "comments" => [],

View File

@ -1,7 +1,7 @@
class AnnouncementSetting class AnnouncementSetting
include Mongoid::Document include Mongoid::Document
include Mongoid::Timestamps include Mongoid::Timestamps
field :carousel_image_width, type: String, :default => "75%"
field :top_limit, type: Integer, :default => 0 field :top_limit, type: Integer, :default => 0
field :pro_enabled, type: Boolean, :default => false field :pro_enabled, type: Boolean, :default => false
field :approvers, type: Array, :default => [] field :approvers, type: Array, :default => []

View File

@ -26,6 +26,7 @@ class Bulletin
before_destroy do before_destroy do
AnnsCache.all.destroy AnnsCache.all.destroy
end end
field :custom_carousel_image_width, type: String, default: ""
field :image_display_class, type: String, default: "full-size-img" #3 choices: full-size-img , pull-left , pull-right field :image_display_class, type: String, default: "full-size-img" #3 choices: full-size-img , pull-left , pull-right
field :add_to_calendar,type: Boolean,default: false field :add_to_calendar,type: Boolean,default: false
field :calendar_start_date, :type => DateTime field :calendar_start_date, :type => DateTime
@ -222,4 +223,7 @@ class Bulletin
def hidden_text def hidden_text
I18n.t("announcement.status.hidden") I18n.t("announcement.status.hidden")
end end
def carousel_image_width
(self.custom_carousel_image_width.blank? ? AnnouncementSetting.last.carousel_image_width : self.custom_carousel_image_width)
end
end end

View File

@ -303,6 +303,12 @@
</div> </div>
<!-- Images Module --> <!-- Images Module -->
<div class="tab-pane fade" id="carousel_image_upload"> <div class="tab-pane fade" id="carousel_image_upload">
<div class="control-group">
<label class="control-label muted" for="carousel_image_width"><%= t("announcement.carousel_image_width") %></label>
<div class="controls">
<%= f.text_field :custom_carousel_image_width, :placeholder => t("announcement.custom_carousel_image_width_hint") %>
</div>
</div>
<% if @bulletin && !@bulletin.bulletin_carousel_images.blank? %> <% if @bulletin && !@bulletin.bulletin_carousel_images.blank? %>
<div class="exist"> <div class="exist">
<% @bulletin.bulletin_carousel_images.each_with_index do |bulletin_carousel_image, i| %> <% @bulletin.bulletin_carousel_images.each_with_index do |bulletin_carousel_image, i| %>

View File

@ -129,6 +129,12 @@
<div id="notification"><%= t("announcement.click_on_submit") %></div> <div id="notification"><%= t("announcement.click_on_submit") %></div>
<%= form_for @setting, url: (@setting.new_record? ? admin_announcement_createsettings_path : admin_announcement_updatesettings_path), html: {class: "form-horizontal main-forms"} do |f| %> <%= form_for @setting, url: (@setting.new_record? ? admin_announcement_createsettings_path : admin_announcement_updatesettings_path), html: {class: "form-horizontal main-forms"} do |f| %>
<div class="input-area"> <div class="input-area">
<div class="control-group">
<%= f.label :carousel_image_width, t("announcement.default_carousel_image_width"), :class => "control-label muted" %>
<div class="controls">
<%= f.text_field :carousel_image_width %>
</div>
</div>
<div class="control-group"> <div class="control-group">
<%= f.label :only_manager_can_edit_status, t("announcement.only_manager_can_edit_status"), :class => "control-label muted" %> <%= f.label :only_manager_can_edit_status, t("announcement.only_manager_can_edit_status"), :class => "control-label muted" %>
<div class="controls"> <div class="controls">

View File

@ -3,6 +3,9 @@ en:
feed: Feed feed: Feed
import: Import import: Import
announcement: announcement:
custom_carousel_image_width_hint: "If blank, width will be default value."
carousel_image_width: Carousel Image Width
default_carousel_image_width: Default Carousel Image Width
cover_image_display_setting: Cover Image display setting cover_image_display_setting: Cover Image display setting
full_width: Full width full_width: Full width
up_left_corner: Up-left corner up_left_corner: Up-left corner

View File

@ -3,6 +3,9 @@ zh_tw:
feed: 供給 feed: 供給
import: 匯入 import: 匯入
announcement: announcement:
custom_carousel_image_width_hint: "未填寫,則使用預設寬度"
carousel_image_width: 輪播圖片寬度
default_carousel_image_width: 預設輪播圖片寬度
cover_image_display_setting: 封面圖片顯示設定 cover_image_display_setting: 封面圖片顯示設定
full_width: 滿版呈現 full_width: 滿版呈現
up_left_corner: 左上角 up_left_corner: 左上角

View File

@ -5,6 +5,21 @@
.full-size-img { .full-size-img {
width: 100%; width: 100%;
} }
.s-annc__sub-img.pull-right {
margin-left: 2em;
}
.s-annc__sub-img.pull-left {
margin-right: 2em;
}
strong.carousel__description {
color: white;
}
.carousel_images{
{{carousel_display_style}}
}
@media (max-width: 767px){
width: 100%;
}
</style> </style>
<article class="s-annc show-announcement"> <article class="s-annc show-announcement">
<h1 class="s-annc__show-title">{{title}}</h1> <h1 class="s-annc__show-title">{{title}}</h1>
@ -52,7 +67,7 @@
</ul> </ul>
</article> </article>
<div class="carousel_images" style="{{carousel_display_style}}"> <div class="carousel_images">
<div class="w-ba-banner ba-banner-widget-1"> <div class="w-ba-banner ba-banner-widget-1">
<div class="w-ba-banner__wrap cycle-slideshow" <div class="w-ba-banner__wrap cycle-slideshow"
data-list="bulletin_carousel_images" data-list="bulletin_carousel_images"