Rails update. Fancybox update. Migrations from Paperclip.

This commit is contained in:
Christoph Haas 2020-10-19 18:49:15 +02:00
parent 1d97215591
commit 7ac69a1d8a
25 changed files with 305 additions and 115 deletions

View file

@ -13,7 +13,6 @@
//= require jquery
//= require jquery_ujs
//= require foundation
//= require fancybox
//= require cookies_eu
//= require_tree .

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,36 @@
//
// Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
// the trix-editor content (whether displayed or under editing). Feel free to incorporate this
// inclusion directly in any other asset bundle and remove this file.
//
//= require trix/dist/trix
// We need to override trix.csss image gallery styles to accommodate the
// <action-text-attachment> element we wrap around attachments. Otherwise,
// images in galleries will be squished by the max-width: 33%; rule.
.trix-content {
.attachment-gallery {
> action-text-attachment,
> .attachment {
flex: 1 0 33%;
padding: 0 0.5em;
max-width: 33%;
}
&.attachment-gallery--2,
&.attachment-gallery--4 {
> action-text-attachment,
> .attachment {
flex-basis: 50%;
max-width: 50%;
}
}
}
action-text-attachment {
.attachment {
padding: 0 !important;
max-width: 100% !important;
}
}
}

View file

@ -11,7 +11,9 @@
*= require_self
*= require foundation_and_overrides
*= require cookies_eu
*= require fancybox
*= require font-awesome
*= require my_styles
*/
@import "jquery.fancybox.min";

File diff suppressed because one or more lines are too long

View file

@ -488,4 +488,55 @@ a.black
.pkgdescription
{
margin-bottom: 3rem;
}
}
.image-with-zoom-icon-container {
position: relative;
// display: inline-block;
}
.image-with-zoom-icon-container img {
// opacity: 1;
display: block;
width: 100%;
height: auto;
// transition: .5s ease;
// backface-visibility: hidden;
}
@keyframes example {
from {opacity: 0}
to {opacity: 0.5}
}
.image-with-zoom-icon-container .magnifying-glass-icon {
transition: .5s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
background: rgba(0,0,0,0.5);
color: #fff;
text-align: center;
position: absolute;
font-size: 200%;
border-radius: 50%;
padding: 20px;
border: 1px solid #fff;
line-height: 1;
// opacity: 0.3;
animation-name: example;
animation-duration: 1s;
animation-delay: 4s;
animation-fill-mode: both;
}
// .magnifying-glass-icon:hover {
// opacity: 1;
// }

View file

@ -0,0 +1,3 @@
class ApplicationMailbox < ActionMailbox::Base
# routing /something/i => :somewhere
end

View file

@ -10,15 +10,15 @@ class Screenshot < ApplicationRecord
validates :image, attached: true, content_type: { in: 'image/png', message: 'is not a valid PNG image file' }
# Before migration from Paperclip to ActiveStorage:
#has_attached_file :image,
# styles: { :large => '800x600>', :thumb => '160x120>' },
# default_url: '/images/dummy/no-screenshots-available.svg',
# path: ':rails_root/public/screenshots/:id_partition/:style.png',
# url: '/screenshots/:id_partition/:style.png'
#validates_attachment_content_type :image, :content_type => 'image/png'
#validates_with AttachmentSizeValidator, :attributes => :image, :less_than => 5.megabytes
# validate :validate_image_is_unique
validates :delete_reason, length: { in: 5..100 }, allow_nil: true
# has_attached_file :image,
# styles: { :large => '800x600>', :thumb => '160x120>' },
# default_url: '/images/dummy/no-screenshots-available.svg',
# path: ':rails_root/public/screenshots/:id_partition/:style.png',
# url: '/screenshots/:id_partition/:style.png'
# validates_attachment_content_type :image, :content_type => 'image/png'
# validates_with AttachmentSizeValidator, :attributes => :image, :less_than => 5.megabytes
# # validate :validate_image_is_unique
# validates :delete_reason, length: { in: 5..100 }, allow_nil: true
# Validator that checks if the image has already been uploaded.
# A generic uniqueness validator does not work because it would attribute
@ -163,4 +163,12 @@ class Screenshot < ApplicationRecord
#Digest::MD5.base64digest(Net::HTTP.get(URI(url)))
end
def large_watermarked
if self.image.attached?
self.image.variant(combine_options: {
gravity: 'SouthEast',
draw: 'image Over 0,0 0,0 "public/logo/watermark.png"'
}).processed
end
end
end

View file

@ -0,0 +1,14 @@
<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
<% if blob.representable? %>
<%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %>
<% end %>
<figcaption class="attachment__caption">
<% if caption = blob.try(:caption) %>
<%= caption %>
<% else %>
<span class="attachment__name"><%= blob.filename %></span>
<span class="attachment__size"><%= number_to_human_size blob.byte_size %></span>
<% end %>
</figcaption>
</figure>

View file

@ -21,18 +21,17 @@ html
= render 'layouts/footer'
// Load Javascript libraries
// Initialize Zurb Foundation
javascript:
$(".fancybox").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
/ javascript:
/ $(".fancybox").fancybox({
/ prevEffect : 'none',
/ nextEffect : 'none',
/ helpers : {
/ title : {
/ type: 'outside'
/ },
/ thumbs : {
/ width : 50,
/ height : 50
/ }
/ }
/ });

View file

@ -19,7 +19,7 @@
- @pending_screenshots.each do |screenshot|
.container.listview
/ = screenshot.status
a.black.fancybox href=rails_representation_url(screenshot.image.variant("800x600")) rel='fancybox-thumb' title=screenshot.caption
a.black.fancybox href=screenshot.image.variant("800x600") rel='fancybox-thumb' title=screenshot.caption
= image_tag(screenshot.image.variant("800x600"), alt: screenshot.caption)
.imgcaption =screenshot.caption
em.imgcaption =screenshot.adminstatus
@ -43,7 +43,7 @@
- @package.screenshots.each do |screenshot|
- if screenshot.approved==true and screenshot.markedfordelete==false
.container.listview
a.black.fancybox href=rails_representation_url(screenshot.image.variant("800x600", timestamp: false)) rel='fancybox-thumb' title=screenshot.caption
a.black.fancybox href=screenshot.image.variant("800x600", timestamp: false) rel='fancybox-thumb' title=screenshot.caption
= image_tag(screenshot.image.variant("800x600"), alt: screenshot.caption)
.imgcaption =screenshot.caption

View file

@ -16,7 +16,7 @@
- @current_users_screenshots.each do |screenshot|
.column
a.black.fancybox href=rails_representation_url(screenshot.image.variant(resize_to_limit: [800,600], timestamp: false))
a.black.fancybox href=screenshot.image.variant(resize_to_limit: [800,600], timestamp: false)
div.grid-thumbnail
= image_tag(screenshot.image.variant(resize_to_limit: [160,120]), alt: screenshot.caption, class: 'thumbnail')
div

View file

@ -20,8 +20,17 @@ h1 =@package.name
- screenshots_visible_to_user(@package).each do |screenshot|
.listview
.text-center
a.black.fancybox href =rails_representation_url(screenshot.image.variant(resize_to_limit: [800,600])) rel='fancybox-thumb' title=screenshot.caption
= image_tag(screenshot.image.variant(resize_to_limit: [800,600]), alt: screenshot.caption)
/a.black.fancybox href =url_for(screenshot.image.variant(resize_to_limit: [800,600])) rel='fancybox-thumb' title=screenshot.caption
/ Fancybox image viewer: http://fancyapps.com/fancybox/3/docs/#usage
a href =url_for(screenshot.large_watermarked) rel='fancybox-thumb' title=screenshot.caption data-fancybox='gallery'
.image-with-zoom-icon-container
.image-with-zoom-icon
= image_tag(url_for(screenshot.image), alt: screenshot.caption)
.magnifying-glass-icon
i.fa.fa-search
- if screenshot.description
.imgcaption =screenshot.description
// Has the unmoderated screenshot been uploaded by the current user?
@ -33,7 +42,7 @@ h1 =@package.name
- if screenshot.version.present?
.imgcaption
| Screenshot was taken from version #{screenshot.upstream_version}
| Screenshot was taken from version #{screenshot.upstream_version} #{time_ago_in_words(screenshot.created_at)} ago
- if user_signed_in? and current_user.is_admin?
.imgcaption
span.label.secondary #{screenshot.adminstatus}
@ -45,19 +54,19 @@ h1 =@package.name
= screenshot.inspect
// Is the user an admin?
// TODO: fix dropdowns do not enforce javascript
- if user_signed_in? and current_user.is_admin?
= render(partial: 'admin_dropdown', locals: {screenshot: screenshot})
// or does the screenshot belong to the user (determined by session cookie)
- elsif user_signed_in? and screenshot.user == current_user
= render(partial: 'user_dropdown', locals: {screenshot: screenshot})
// Is the user an admin?
// TODO: fix dropdowns do not enforce javascript
- if user_signed_in? and current_user.is_admin?
= render(partial: 'admin_dropdown', locals: {screenshot: screenshot})
// or does the screenshot belong to the user (determined by session cookie)
- elsif user_signed_in? and screenshot.user == current_user
= render(partial: 'user_dropdown', locals: {screenshot: screenshot})
// or is the user not related to the screenshot and the screenshot is public?
// TODO: Move to a seperate page with a form
//- elsif screenshot.approved
// = render(partial: 'report_dropdown', locals: {screenshot: screenshot})
// or is the user not related to the screenshot and the screenshot is public?
// TODO: Move to a seperate page with a form
//- elsif screenshot.approved
// = render(partial: 'report_dropdown', locals: {screenshot: screenshot})
- else
.listview

View file

@ -18,7 +18,7 @@ h1 = "Upload screenshots for #{@package.name}"
a.button id="file-select-button"
= fa_stacked_icon "image", base: "circle-thin"
span id="file-label"
' Select screenshot file(s)
' Upload screenshots
.small-6.cell
button.button type="submit" id="file-submit"
@ -29,7 +29,7 @@ h1 = "Upload screenshots for #{@package.name}"
p Just for your information - these screenshots have already been uploaded:
- @package.screenshots.all.each do |ss|
a.black.fancybox href=rails_representation_url(ss.image.variant(resize_to_limit: [800,600])) rel='fancybox-thumb' title=ss.caption
a.black.fancybox href=url_for(ss.image.variant(resize_to_limit: [800,600])) rel='fancybox-thumb' title=ss.caption
= image_tag(ss.image.variant(resize_to_limit: [160,120]), alt: ss.caption, class: 'thumbnail')

View file

@ -12,10 +12,12 @@ p
h2 Who runs this site?
p
' This site is operated by Christoph Haas.
' This site is run by Christoph Haas (haas). Paul Wise (pabs) helps with the
' moderation of new uploads. However almost all of the screenshots were
' contributed by countless volunteers of the open-source community.
'
' Feel free to leave
a href="mailto:email@christoph-haas.de" feedback?
a href="mailto:haas@debian.org" feedback?
a name='cookies'
h2 Cookies and privacy