Skip to content

W
warm_city
Commit 3d54a59b by Mykhailo Makohin
Options

add project show page

parent 669352b5
Showing with 1306 additions and 93 deletions
Gemfile
......@@ -28,6 +28,7 @@ gem 'activeadmin'
gem 'carrierwave'
gem 'cancancan'
gem 'cocoon'
gem 'friendly_id'
group :development, :test do
gem 'byebug', platform: :mri
......
Gemfile.lock
......@@ -101,6 +101,8 @@ GEM
formtastic (3.1.5)
actionpack (>= 3.2.13)
formtastic_i18n (0.6.0)
friendly_id (5.3.0)
activerecord (>= 4.0.0)
globalid (0.4.2)
activesupport (>= 4.2.0)
gmaps4rails (2.1.2)
......@@ -295,6 +297,7 @@ DEPENDENCIES
cocoon
coffee-rails (~> 4.2)
devise
friendly_id
gmaps4rails
haml
jbuilder (~> 2.5)
......
app/admin/projects.rb
......@@ -28,6 +28,10 @@ ActiveAdmin.register Project do
end
end
def find_resource
scoped_collection.friendly.find(params[:id])
end
def project_params
params.require(:project).permit(:photo, :photo_preview, :photo_before, :remove_photo_before,
:photo_after, :remove_photo_after, :types, :status, :individual_type_uk, :individual_type_en,
......@@ -63,8 +67,10 @@ ActiveAdmin.register Project do
f.input :photo_after, label: "#{t "active_admin.attributes.project.photo_after"}",
hint: f.object.photo_after.present? ? image_tag(f.object.photo_after.url(:thumb_small)) : content_tag(:span, "no file yet")
f.input :remove_photo_after, as: :boolean, label: "#{t "active_admin.attributes.project.remove_photo"}"
f.input :types, label: "#{t "active_admin.attributes.project.types"}"
f.input :status, label: "#{t "active_admin.attributes.project.status"}"
f.input :types, as: :select, collection: Project.types.map { |type| [I18n.t("active_admin.project/types.#{type[0]}"), type[0]] },
label: "#{t "active_admin.attributes.project.types"}"
f.input :status, as: :select, collection: Project.statuses.map { |status| [I18n.t("active_admin.project/status.#{status[0]}"), status[0]] },
label: "#{t "active_admin.attributes.project.status"}"
f.input :individual_type_uk, label: "#{t "active_admin.attributes.project.individual_type_uk"}"
f.input :individual_type_en, label: "#{t "active_admin.attributes.project.individual_type_en"}"
f.input :title_uk, label: "#{t "active_admin.attributes.project.title_uk"}"
......@@ -219,6 +225,9 @@ ActiveAdmin.register Project do
row I18n.t "active_admin.attributes.project.title_en" do |p|
p.title_en
end
row I18n.t "active_admin.attributes.project.slug" do |p|
p.slug
end
row I18n.t "active_admin.attributes.project.site" do |p|
p.site
end
......
app/assets/javascripts/application.js
......@@ -25,7 +25,7 @@
//= require underscore
//= require jquery.autocomplete
//= require gmaps/google
//= require infobox
//= require squares
//= require_tree .
//= require cocoon
//= require_tree .
app/assets/javascripts/jquery.twentytwenty.js 0 → 100644
(function($){
$.fn.twentytwenty = function(options) {
var options = $.extend({
default_offset_pct: 0.5,
orientation: 'horizontal',
before_label: 'Before',
after_label: 'After',
no_overlay: false,
move_slider_on_hover: false,
move_with_handle_only: true,
click_to_move: false
}, options);
return this.each(function() {
var sliderPct = options.default_offset_pct;
var container = $(this);
var sliderOrientation = options.orientation;
var beforeDirection = (sliderOrientation === 'vertical') ? 'down' : 'left';
var afterDirection = (sliderOrientation === 'vertical') ? 'up' : 'right';
container.wrap("<div class='twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>");
if(!options.no_overlay) {
container.append("<div class='twentytwenty-overlay'></div>");
var overlay = container.find(".twentytwenty-overlay");
overlay.append("<div class='twentytwenty-before-label' data-content='"+options.before_label+"'></div>");
overlay.append("<div class='twentytwenty-after-label' data-content='"+options.after_label+"'></div>");
}
var beforeImg = container.find("img:first");
var afterImg = container.find("img:last");
container.append("<div class='twentytwenty-handle'></div>");
var slider = container.find(".twentytwenty-handle");
slider.append("<span class='twentytwenty-" + beforeDirection + "-arrow'></span>");
slider.append("<span class='twentytwenty-" + afterDirection + "-arrow'></span>");
container.addClass("twentytwenty-container");
beforeImg.addClass("twentytwenty-before");
afterImg.addClass("twentytwenty-after");
var calcOffset = function(dimensionPct) {
var w = beforeImg.width();
var h = beforeImg.height();
return {
w: w+"px",
h: h+"px",
cw: (dimensionPct*w)+"px",
ch: (dimensionPct*h)+"px"
};
};
var adjustContainer = function(offset) {
if (sliderOrientation === 'vertical') {
beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)");
afterImg.css("clip", "rect("+offset.ch+","+offset.w+","+offset.h+",0)");
}
else {
beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
afterImg.css("clip", "rect(0,"+offset.w+","+offset.h+","+offset.cw+")");
}
container.css("height", offset.h);
};
var adjustSlider = function(pct) {
var offset = calcOffset(pct);
slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw);
adjustContainer(offset);
};
// Return the number specified or the min/max number if it outside the range given.
var minMaxNumber = function(num, min, max) {
return Math.max(min, Math.min(max, num));
};
// Calculate the slider percentage based on the position.
var getSliderPercentage = function(positionX, positionY) {
var sliderPercentage = (sliderOrientation === 'vertical') ?
(positionY-offsetY)/imgHeight :
(positionX-offsetX)/imgWidth;
return minMaxNumber(sliderPercentage, 0, 1);
};
$(window).on("resize.twentytwenty", function(e) {
adjustSlider(sliderPct);
});
var offsetX = 0;
var offsetY = 0;
var imgWidth = 0;
var imgHeight = 0;
var onMoveStart = function(e) {
if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && sliderOrientation !== 'vertical') {
e.preventDefault();
}
else if (((e.distX < e.distY && e.distX < -e.distY) || (e.distX > e.distY && e.distX > -e.distY)) && sliderOrientation === 'vertical') {
e.preventDefault();
}
container.addClass("active");
offsetX = container.offset().left;
offsetY = container.offset().top;
imgWidth = beforeImg.width();
imgHeight = beforeImg.height();
};
var onMove = function(e) {
if (container.hasClass("active")) {
sliderPct = getSliderPercentage(e.pageX, e.pageY);
adjustSlider(sliderPct);
}
};
var onMoveEnd = function() {
container.removeClass("active");
};
var moveTarget = options.move_with_handle_only ? slider : container;
moveTarget.on("movestart",onMoveStart);
moveTarget.on("move",onMove);
moveTarget.on("moveend",onMoveEnd);
if (options.move_slider_on_hover) {
container.on("mouseenter", onMoveStart);
container.on("mousemove", onMove);
container.on("mouseleave", onMoveEnd);
}
slider.on("touchmove", function(e) {
e.preventDefault();
});
container.find("img").on("mousedown", function(event) {
event.preventDefault();
});
if (options.click_to_move) {
container.on('click', function(e) {
offsetX = container.offset().left;
offsetY = container.offset().top;
imgWidth = beforeImg.width();
imgHeight = beforeImg.height();
sliderPct = getSliderPercentage(e.pageX, e.pageY);
adjustSlider(sliderPct);
});
}
$(window).trigger("resize.twentytwenty");
});
};
})(jQuery);
app/assets/javascripts/main.js
......@@ -13,21 +13,21 @@ var BASE_RANDOM_NUMBER = 25,
FADE_TIME = 600,
POPOVER_HEIGHT = 450;
$(document).ready(function(){
jQuery(document).ready(function($){
detectOutdatedBrowser();
initPlaceOfCubes();
initGallerySlider();
// initPlaceOfCubes();
// initGallerySlider();
mobilePartners();
initTip();
initMap();
// initTip();
// initMap();
topTip();
initTooltipster();
// toolinitTooltipster();
playStopVideoInModal();
initTwentytwenty();
scrollToTop();
$('[data-toggle="popover"]').popover({title: "<span class=\"usr_surname\">Фондар</span><span class=\"usr_name\">Вікторія Тараневська <a href=\"#\" class=\"round_link\"><i class=\"icon icon_fb\"></i></span>", content: "<div class=\"usr_contributions\">Внесків 3</div><div class=\"usr_funds\"><div class=\"usr_funds_value\">на суму: 14 200 UAH</div></div><div class=\"usr_volunteering\">Волонтерство 2</div>", html: true, placement: "top"});
// $('[data-toggle="popover"]').popover({title: "<span class=\"usr_surname\">Фондар</span><span class=\"usr_name\">Вікторія Тараневська <a href=\"#\" class=\"round_link\"><i class=\"icon icon_fb\"></i></span>", content: "<div class=\"usr_contributions\">Внесків 3</div><div class=\"usr_funds\"><div class=\"usr_funds_value\">на суму: 14 200 UAH</div></div><div class=\"usr_volunteering\">Волонтерство 2</div>", html: true, placement: "top"});
})
function scrollToTop() {
......@@ -48,8 +48,8 @@ function scrollToTop() {
function initTwentytwenty() {
$(window).load(function(){
$(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7});
$(window).on("load", function(){
$(".twentytwenty-container").twentytwenty();
});
}
......@@ -122,7 +122,7 @@ function initGallerySlider() {
}
function topTip() {
$(window).load(function(){
$(window).on('load', function(){
$(".show_tip").delay(1000).fadeIn(500);
setTimeout(function(){
$(".show_tip").fadeOut(500);
......@@ -185,7 +185,7 @@ function mobilePartners() {
$(window).resize(function() {
mobilePartners();
initTooltipster();
// initTooltipster();
initDraggable();
});
......
app/assets/stylesheets/foundation.css 0 → 100644
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
html,
body {
font-size: 100%; }
body {
background: white;
color: #222222;
padding: 0;
margin: 0;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1;
position: relative;
cursor: default; }
a:hover {
cursor: pointer; }
a:focus {
outline: none; }
img,
object,
embed {
max-width: 100%;
height: auto; }
object,
embed {
height: 100%; }
img {
-ms-interpolation-mode: bicubic; }
#map_canvas img,
#map_canvas embed,
#map_canvas object,
.map_canvas img,
.map_canvas embed,
.map_canvas object {
max-width: none !important; }
.left {
float: left !important; }
.right {
float: right !important; }
.text-left {
text-align: left !important; }
.text-right {
text-align: right !important; }
.text-center {
text-align: center !important; }
.text-justify {
text-align: justify !important; }
.hide {
display: none; }
.antialiased {
-webkit-font-smoothing: antialiased; }
img {
display: inline-block;
vertical-align: middle; }
textarea {
height: auto;
min-height: 50px; }
select {
width: 100%; }
/* Grid HTML Classes */
.row {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 62.5em;
*zoom: 1; }
.row:before, .row:after {
content: " ";
display: table; }
.row:after {
clear: both; }
.row.collapse .column,
.row.collapse .columns {
position: relative;
padding-left: 0;
padding-right: 0;
float: left; }
.row .row {
width: auto;
margin-left: -0.9375em;
margin-right: -0.9375em;
margin-top: 0;
margin-bottom: 0;
max-width: none;
*zoom: 1; }
.row .row:before, .row .row:after {
content: " ";
display: table; }
.row .row:after {
clear: both; }
.row .row.collapse {
width: auto;
margin: 0;
max-width: none;
*zoom: 1; }
.row .row.collapse:before, .row .row.collapse:after {
content: " ";
display: table; }
.row .row.collapse:after {
clear: both; }
.column,
.columns {
position: relative;
padding-left: 0.9375em;
padding-right: 0.9375em;
width: 100%;
float: left; }
@media only screen {
.column,
.columns {
position: relative;
padding-left: 0.9375em;
padding-right: 0.9375em;
float: left; }
.small-1 {
position: relative;
width: 8.33333%; }
.small-2 {
position: relative;
width: 16.66667%; }
.small-3 {
position: relative;
width: 25%; }
.small-4 {
position: relative;
width: 33.33333%; }
.small-5 {
position: relative;
width: 41.66667%; }
.small-6 {
position: relative;
width: 50%; }
.small-7 {
position: relative;
width: 58.33333%; }
.small-8 {
position: relative;
width: 66.66667%; }
.small-9 {
position: relative;
width: 75%; }
.small-10 {
position: relative;
width: 83.33333%; }
.small-11 {
position: relative;
width: 91.66667%; }
.small-12 {
position: relative;
width: 100%; }
.small-offset-0 {
position: relative;
margin-left: 0%; }
.small-offset-1 {
position: relative;
margin-left: 8.33333%; }
.small-offset-2 {
position: relative;
margin-left: 16.66667%; }
.small-offset-3 {
position: relative;
margin-left: 25%; }
.small-offset-4 {
position: relative;
margin-left: 33.33333%; }
.small-offset-5 {
position: relative;
margin-left: 41.66667%; }
.small-offset-6 {
position: relative;
margin-left: 50%; }
.small-offset-7 {
position: relative;
margin-left: 58.33333%; }
.small-offset-8 {
position: relative;
margin-left: 66.66667%; }
.small-offset-9 {
position: relative;
margin-left: 75%; }
.small-offset-10 {
position: relative;
margin-left: 83.33333%; }
[class*="column"] + [class*="column"]:last-child {
float: right; }
[class*="column"] + [class*="column"].end {
float: left; }
.column.small-centered,
.columns.small-centered {
position: relative;
margin-left: auto;
margin-right: auto;
float: none !important; } }
/* Styles for screens that are atleast 768px; */
@media only screen and (min-width: 768px) {
.large-1 {
position: relative;
width: 8.33333%; }
.large-2 {
position: relative;
width: 16.66667%; }
.large-3 {
position: relative;
width: 25%; }
.large-4 {
position: relative;
width: 33.33333%; }
.large-5 {
position: relative;
width: 41.66667%; }
.large-6 {
position: relative;
width: 50%; }
.large-7 {
position: relative;
width: 58.33333%; }
.large-8 {
position: relative;
width: 66.66667%; }
.large-9 {
position: relative;
width: 75%; }
.large-10 {
position: relative;
width: 83.33333%; }
.large-11 {
position: relative;
width: 91.66667%; }
.large-12 {
position: relative;
width: 100%; }
.row .large-offset-0 {
position: relative;
margin-left: 0%; }
.row .large-offset-1 {
position: relative;
margin-left: 8.33333%; }
.row .large-offset-2 {
position: relative;
margin-left: 16.66667%; }
.row .large-offset-3 {
position: relative;
margin-left: 25%; }
.row .large-offset-4 {
position: relative;
margin-left: 33.33333%; }
.row .large-offset-5 {
position: relative;
margin-left: 41.66667%; }
.row .large-offset-6 {
position: relative;
margin-left: 50%; }
.row .large-offset-7 {
position: relative;
margin-left: 58.33333%; }
.row .large-offset-8 {
position: relative;
margin-left: 66.66667%; }
.row .large-offset-9 {
position: relative;
margin-left: 75%; }
.row .large-offset-10 {
position: relative;
margin-left: 83.33333%; }
.row .large-offset-11 {
position: relative;
margin-left: 91.66667%; }
.push-1 {
position: relative;
left: 8.33333%;
right: auto; }
.pull-1 {
position: relative;
right: 8.33333%;
left: auto; }
.push-2 {
position: relative;
left: 16.66667%;
right: auto; }
.pull-2 {
position: relative;
right: 16.66667%;
left: auto; }
.push-3 {
position: relative;
left: 25%;
right: auto; }
.pull-3 {
position: relative;
right: 25%;
left: auto; }
.push-4 {
position: relative;
left: 33.33333%;
right: auto; }
.pull-4 {
position: relative;
right: 33.33333%;
left: auto; }
.push-5 {
position: relative;
left: 41.66667%;
right: auto; }
.pull-5 {
position: relative;
right: 41.66667%;
left: auto; }
.push-6 {
position: relative;
left: 50%;
right: auto; }
.pull-6 {
position: relative;
right: 50%;
left: auto; }
.push-7 {
position: relative;
left: 58.33333%;
right: auto; }
.pull-7 {
position: relative;
right: 58.33333%;
left: auto; }
.push-8 {
position: relative;
left: 66.66667%;
right: auto; }
.pull-8 {
position: relative;
right: 66.66667%;
left: auto; }
.push-9 {
position: relative;
left: 75%;
right: auto; }
.pull-9 {
position: relative;
right: 75%;
left: auto; }
.push-10 {
position: relative;
left: 83.33333%;
right: auto; }
.pull-10 {
position: relative;
right: 83.33333%;
left: auto; }
.push-11 {
position: relative;
left: 91.66667%;
right: auto; }
.pull-11 {
position: relative;
right: 91.66667%;
left: auto; }
.column.large-centered,
.columns.large-centered {
position: relative;
margin-left: auto;
margin-right: auto;
float: none !important; }
.column.large-uncentered,
.columns.large-uncentered {
margin-left: 0;
margin-right: 0;
float: left !important; }
.column.large-uncentered.opposite,
.columns.large-uncentered.opposite {
float: right !important; } }
app/assets/stylesheets/twentytwenty-no-compass.css 0 → 100644
.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
content: " ";
display: block;
background: #fff;
position: absolute;
z-index: 30; }
.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
width: 3px;
height: 9999px;
left: 50%;
margin-left: -1.5px; }
.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
width: 9999px;
height: 3px;
top: 50%;
margin-top: -1.5px; }
.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%; }
.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
transition-duration: 0.5s; }
.twentytwenty-before-label, .twentytwenty-after-label {
transition-property: opacity; }
.twentytwenty-before-label:before, .twentytwenty-after-label:before {
color: #fff;
font-size: 13px;
letter-spacing: 0.1em; }
.twentytwenty-before-label:before, .twentytwenty-after-label:before {
position: absolute;
background: rgba(255, 255, 255, 0.2);
line-height: 38px;
padding: 0 20px;
border-radius: 2px; }
.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
top: 50%;
margin-top: -19px; }
.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
left: 50%;
margin-left: -45px;
text-align: center;
width: 90px; }
.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
width: 0;
height: 0;
border: 6px inset transparent;
position: absolute; }
.twentytwenty-left-arrow, .twentytwenty-right-arrow {
top: 50%;
margin-top: -6px; }
.twentytwenty-up-arrow, .twentytwenty-down-arrow {
left: 50%;
margin-left: -6px; }
.twentytwenty-container {
box-sizing: content-box;
z-index: 0;
overflow: hidden;
position: relative;
-webkit-user-select: none;
-moz-user-select: none; }
.twentytwenty-container img {
max-width: 100%;
position: absolute;
top: 0;
display: block; }
.twentytwenty-container.active .twentytwenty-overlay,
.twentytwenty-container.active :hover.twentytwenty-overlay {
background: transparent; }
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label,
.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
opacity: 0; }
.twentytwenty-container * {
box-sizing: content-box; }
.twentytwenty-before-label {
opacity: 0; }
.twentytwenty-before-label:before {
content: attr(data-content); }
.twentytwenty-after-label {
opacity: 0; }
.twentytwenty-after-label:before {
content: attr(data-content); }
.twentytwenty-horizontal .twentytwenty-before-label:before {
left: 10px; }
.twentytwenty-horizontal .twentytwenty-after-label:before {
right: 10px; }
.twentytwenty-vertical .twentytwenty-before-label:before {
top: 10px; }
.twentytwenty-vertical .twentytwenty-after-label:before {
bottom: 10px; }
.twentytwenty-overlay {
transition-property: background;
background: transparent;
z-index: 25; }
.twentytwenty-overlay:hover {
background: rgba(0, 0, 0, 0.5); }
.twentytwenty-overlay:hover .twentytwenty-after-label {
opacity: 1; }
.twentytwenty-overlay:hover .twentytwenty-before-label {
opacity: 1; }
.twentytwenty-before {
z-index: 20; }
.twentytwenty-after {
z-index: 10; }
.twentytwenty-handle {
height: 38px;
width: 38px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -22px;
margin-top: -22px;
border: 3px solid #fff;
border-radius: 1000px;
box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
z-index: 40;
cursor: pointer; }
.twentytwenty-horizontal .twentytwenty-handle:before {
bottom: 50%;
margin-bottom: 22px;
box-shadow: 0 3px 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-horizontal .twentytwenty-handle:after {
top: 50%;
margin-top: 22px;
box-shadow: 0 -3px 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-vertical .twentytwenty-handle:before {
left: 50%;
margin-left: 22px;
box-shadow: 3px 0 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-vertical .twentytwenty-handle:after {
right: 50%;
margin-right: 22px;
box-shadow: -3px 0 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-left-arrow {
border-right: 6px solid #fff;
left: 50%;
margin-left: -17px; }
.twentytwenty-right-arrow {
border-left: 6px solid #fff;
right: 50%;
margin-right: -17px; }
.twentytwenty-up-arrow {
border-bottom: 6px solid #fff;
top: 50%;
margin-top: -17px; }
.twentytwenty-down-arrow {
border-top: 6px solid #fff;
bottom: 50%;
margin-bottom: -17px; }
app/assets/stylesheets/twentytwenty.css 0 → 100644
.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
content: " ";
display: block;
background: white;
position: absolute;
z-index: 30;
-webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
-moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
width: 3px;
height: 9999px;
left: 50%;
margin-left: -1.5px; }
.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
width: 9999px;
height: 3px;
top: 50%;
margin-top: -1.5px; }
.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%; }
.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
transition-duration: 0.5s; }
.twentytwenty-before-label, .twentytwenty-after-label {
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
transition-property: opacity; }
.twentytwenty-before-label:before, .twentytwenty-after-label:before {
color: white;
font-size: 13px;
letter-spacing: 0.1em; }
.twentytwenty-before-label:before, .twentytwenty-after-label:before {
position: absolute;
background: rgba(255, 255, 255, 0.2);
line-height: 38px;
padding: 0 20px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px; }
.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
top: 50%;
margin-top: -19px; }
.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
left: 50%;
margin-left: -45px;
text-align: center;
width: 90px; }
.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
width: 0;
height: 0;
border: 6px inset transparent;
position: absolute; }
.twentytwenty-left-arrow, .twentytwenty-right-arrow {
top: 50%;
margin-top: -6px; }
.twentytwenty-up-arrow, .twentytwenty-down-arrow {
left: 50%;
margin-left: -6px; }
.twentytwenty-container {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
z-index: 0;
overflow: hidden;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none; }
.twentytwenty-container img {
max-width: 100%;
position: absolute;
top: 0;
display: block; }
.twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay {
background: rgba(0, 0, 0, 0); }
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
opacity: 0; }
.twentytwenty-container * {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box; }
.twentytwenty-before-label {
opacity: 0; }
.twentytwenty-before-label:before {
content: attr(data-content); }
.twentytwenty-after-label {
opacity: 0; }
.twentytwenty-after-label:before {
content: attr(data-content); }
.twentytwenty-horizontal .twentytwenty-before-label:before {
left: 10px; }
.twentytwenty-horizontal .twentytwenty-after-label:before {
right: 10px; }
.twentytwenty-vertical .twentytwenty-before-label:before {
top: 10px; }
.twentytwenty-vertical .twentytwenty-after-label:before {
bottom: 10px; }
.twentytwenty-overlay {
-webkit-transition-property: background;
-moz-transition-property: background;
transition-property: background;
background: rgba(0, 0, 0, 0);
z-index: 25; }
.twentytwenty-overlay:hover {
background: rgba(0, 0, 0, 0.5); }
.twentytwenty-overlay:hover .twentytwenty-after-label {
opacity: 1; }
.twentytwenty-overlay:hover .twentytwenty-before-label {
opacity: 1; }
.twentytwenty-before {
z-index: 20; }
.twentytwenty-after {
z-index: 10; }
.twentytwenty-handle {
height: 38px;
width: 38px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -22px;
margin-top: -22px;
border: 3px solid white;
-webkit-border-radius: 1000px;
-moz-border-radius: 1000px;
border-radius: 1000px;
-webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
-moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
z-index: 40;
cursor: pointer; }
.twentytwenty-horizontal .twentytwenty-handle:before {
bottom: 50%;
margin-bottom: 22px;
-webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
-moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-horizontal .twentytwenty-handle:after {
top: 50%;
margin-top: 22px;
-webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
-moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-vertical .twentytwenty-handle:before {
left: 50%;
margin-left: 22px;
-webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
-moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-vertical .twentytwenty-handle:after {
right: 50%;
margin-right: 22px;
-webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
-moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-left-arrow {
border-right: 6px solid white;
left: 50%;
margin-left: -17px; }
.twentytwenty-right-arrow {
border-left: 6px solid white;
right: 50%;
margin-right: -17px; }
.twentytwenty-up-arrow {
border-bottom: 6px solid white;
top: 50%;
margin-top: -17px; }
.twentytwenty-down-arrow {
border-top: 6px solid white;
bottom: 50%;
margin-bottom: -17px; }
app/controllers/projects_controller.rb
class ProjectsController < ApplicationController
load_and_authorize_resource
def index
@projects = collection
end
# def index
# @projects = collection
# end
def show
@project = Project.new
@project = resource
end
def new
@project = Project.new
# @project.project_photos.build
end
# def new
# @project = Project.new
# end
def create
@project = Project.new(project_params)
if @project.save
redirect_to project_path(@project)
else
ap '----------------------'
ap @project.errors.full_messages
render :new
end
end
# def create
# @project = Project.new(project_params)
# if @project.save
# redirect_to project_path(@project)
# else
# render :new
# end
# end
def edit
@project = resource
end
# def edit
# @project = resource
# end
def update
@project = resource
if @project.update(project_params)
redirect_to project_path(project: @project)
else
render :edit
end
end
# def update
# @project = resource
# if @project.update(project_params)
# redirect_to project_path(project: @project)
# else
# render :edit
# end
# end
def destroy
@project = resource
@project.destroy
redirect_to projects_path
end
# def destroy
# @project = resource
# @project.destroy
# redirect_to projects_path
# end
private
def collection
Project.all
end
# def collection
# Project.all
# end
def resource
Project.find(params[:id])
Project.friendly.find(params[:id])
end
def project_params
params.require(:project).permit(:photo, :photo_preview, :photo_before, :photo_after, :type,
:status, :name, :name_eng, :individual_type_ua, :individual_type_en,
:title_ua, :title_en, :heading_ua, :heading_en, :slug, :short_description_ua,
:short_description_en, :description_ua,:description_en, :site,
:link_to_facebook, :required_amount, :related_links_ua, :related_links_en,
:footer_photo,
project_photos_attributes: [ :id, :photo, :title_uk, :title_en, :_destroy] )
end
# def project_params
# params.require(:project).permit(:photo, :photo_preview, :photo_before, :photo_after, :type,
# :status, :name, :name_eng, :individual_type_ua, :individual_type_en,
# :title_ua, :title_en, :heading_ua, :heading_en, :slug, :short_description_ua,
# :short_description_en, :description_ua,:description_en, :site,
# :link_to_facebook, :required_amount, :related_links_ua, :related_links_en,
# :footer_photo,
# project_photos_attributes: [ :id, :photo, :title_uk, :title_en, :_destroy] )
# end
end
\ No newline at end of file
app/models/project.rb
class Project < ApplicationRecord
extend FriendlyId
friendly_id :title_uk, :use => :slugged
mount_uploader :photo, AvatarUploader
mount_uploader :photo_preview, AvatarUploader
mount_uploader :photo_before, AvatarUploader
......@@ -21,11 +24,12 @@ class Project < ApplicationRecord
accepts_nested_attributes_for :project_documents, reject_if: :all_blank, allow_destroy: true
accepts_nested_attributes_for :project_videos, reject_if: :all_blank, allow_destroy: true
validates :photo, :photo_preview, :types, :status, :title_uk, :short_description_uk,
validates :photo, :photo_preview, :types, :status, :slug, :title_uk, :short_description_uk,
:description_uk, :required_amount, presence: true
validates_length_of :individual_type_uk, :individual_type_en, :title_uk, :title_en,
:heading_uk, :heading_en, :site, :link_to_facebook, :related_links_uk,
:related_links_en, maximum: 200
validates_length_of :short_description_uk, :short_description_en, maximum: 2000
validates_length_of :description_uk, :description_en, maximum: 5000
validates_format_of :slug, :with => /\A[a-z0-9]+\z/i
end
app/views/home/index.html.haml
......@@ -611,3 +611,5 @@
%a#scroller.scroller{:href => "#"}
%i.icon.icon_arrow_up
%div на початок
%script{:src => "http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false&key=AIzaSyCd7M4P6CpmOv7_K1XGn_0JgEa47r97tu4&callback=initMap", :type => "text/javascript"}
:cdata
\ No newline at end of file
app/views/layouts/application.html.haml
......@@ -32,6 +32,5 @@
= render 'partials/white_header'
= yield
= render 'partials/footer-site'
= render 'partials/footer'
app/views/partials/_footer.html.haml
%script{:src => "http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false&key=AIzaSyCd7M4P6CpmOv7_K1XGn_0JgEa47r97tu4&callback=initMap", :type => "text/javascript"}
:cdata
\ No newline at end of file
config/initializers/friendly_id.rb 0 → 100644
# FriendlyId Global Configuration
#
# Use this to set up shared configuration options for your entire application.
# Any of the configuration options shown here can also be applied to single
# models by passing arguments to the `friendly_id` class method or defining
# methods in your model.
#
# To learn more, check out the guide:
#
# http://norman.github.io/friendly_id/file.Guide.html
FriendlyId.defaults do |config|
# ## Reserved Words
#
# Some words could conflict with Rails's routes when used as slugs, or are
# undesirable to allow as slugs. Edit this list as needed for your app.
config.use :reserved
config.reserved_words = %w(new edit index session login logout users admin
stylesheets assets javascripts images)
# This adds an option to treat reserved words as conflicts rather than exceptions.
# When there is no good candidate, a UUID will be appended, matching the existing
# conflict behavior.
# config.treat_reserved_as_conflict = true
# ## Friendly Finders
#
# Uncomment this to use friendly finders in all models. By default, if
# you wish to find a record by its friendly id, you must do:
#
# MyModel.friendly.find('foo')
#
# If you uncomment this, you can do:
#
# MyModel.find('foo')
#
# This is significantly more convenient but may not be appropriate for
# all applications, so you must explicity opt-in to this behavior. You can
# always also configure it on a per-model basis if you prefer.
#
# Something else to consider is that using the :finders addon boosts
# performance because it will avoid Rails-internal code that makes runtime
# calls to `Module.extend`.
#
# config.use :finders
#
# ## Slugs
#
# Most applications will use the :slugged module everywhere. If you wish
# to do so, uncomment the following line.
#
# config.use :slugged
#
# By default, FriendlyId's :slugged addon expects the slug column to be named
# 'slug', but you can change it if you wish.
#
# config.slug_column = 'slug'
#
# By default, slug has no size limit, but you can change it if you wish.
#
# config.slug_limit = 255
#
# When FriendlyId can not generate a unique ID from your base method, it appends
# a UUID, separated by a single dash. You can configure the character used as the
# separator. If you're upgrading from FriendlyId 4, you may wish to replace this
# with two dashes.
#
# config.sequence_separator = '-'
#
# Note that you must use the :slugged addon **prior** to the line which
# configures the sequence separator, or else FriendlyId will raise an undefined
# method error.
#
# ## Tips and Tricks
#
# ### Controlling when slugs are generated
#
# As of FriendlyId 5.0, new slugs are generated only when the slug field is
# nil, but if you're using a column as your base method can change this
# behavior by overriding the `should_generate_new_friendly_id?` method that
# FriendlyId adds to your model. The change below makes FriendlyId 5.0 behave
# more like 4.0.
# Note: Use(include) Slugged module in the config if using the anonymous module.
# If you have `friendly_id :name, use: slugged` in the model, Slugged module
# is included after the anonymous module defined in the initializer, so it
# overrides the `should_generate_new_friendly_id?` method from the anonymous module.
#
# config.use :slugged
# config.use Module.new {
# def should_generate_new_friendly_id?
# slug.blank? || <your_column_name_here>_changed?
# end
# }
#
# FriendlyId uses Rails's `parameterize` method to generate slugs, but for
# languages that don't use the Roman alphabet, that's not usually sufficient.
# Here we use the Babosa library to transliterate Russian Cyrillic slugs to
# ASCII. If you use this, don't forget to add "babosa" to your Gemfile.
#
# config.use Module.new {
# def normalize_friendly_id(text)
# text.to_slug.normalize! :transliterations => [:russian, :latin]
# end
# }
end
config/routes.rb
......@@ -3,7 +3,7 @@ Rails.application.routes.draw do
root 'home#index'
ActiveAdmin.routes(self)
resources :users
resources :projects
resources :projects, only: [:show]
end
devise_for :users, controllers: {omniauth_callbacks: "users/omniauth_callbacks",
registrations: "users"}
......
db/migrate/20190930175107_create_friendly_id_slugs.rb 0 → 100644
MIGRATION_CLASS =
if ActiveRecord::VERSION::MAJOR >= 5
ActiveRecord::Migration["#{ActiveRecord::VERSION::MAJOR}.#{ActiveRecord::VERSION::MINOR}"]
else
ActiveRecord::Migration
end
class CreateFriendlyIdSlugs < MIGRATION_CLASS
def change
create_table :friendly_id_slugs do |t|
t.string :slug, :null => false
t.integer :sluggable_id, :null => false
t.string :sluggable_type, :limit => 50
t.string :scope
t.datetime :created_at
end
add_index :friendly_id_slugs, [:sluggable_type, :sluggable_id]
add_index :friendly_id_slugs, [:slug, :sluggable_type], length: { slug: 140, sluggable_type: 50 }
add_index :friendly_id_slugs, [:slug, :sluggable_type, :scope], length: { slug: 70, sluggable_type: 50, scope: 70 }, unique: true
end
end
db/schema.rb
......@@ -10,7 +10,7 @@
#
# It's strongly recommended that you check this file into your version control system.
ActiveRecord::Schema.define(version: 20190927094153) do
ActiveRecord::Schema.define(version: 20190930175107) do
create_table "active_admin_comments", force: :cascade, options: "ENGINE=InnoDB DEFAULT CHARSET=utf8" do |t|
t.string "namespace"
......@@ -26,6 +26,17 @@ ActiveRecord::Schema.define(version: 20190927094153) do
t.index ["resource_type", "resource_id"], name: "index_active_admin_comments_on_resource_type_and_resource_id", using: :btree
end
create_table "friendly_id_slugs", force: :cascade, options: "ENGINE=InnoDB DEFAULT CHARSET=utf8" do |t|
t.string "slug", null: false
t.integer "sluggable_id", null: false
t.string "sluggable_type", limit: 50
t.string "scope"
t.datetime "created_at"
t.index ["slug", "sluggable_type", "scope"], name: "index_friendly_id_slugs_on_slug_and_sluggable_type_and_scope", unique: true, length: { slug: 70, scope: 70 }, using: :btree
t.index ["slug", "sluggable_type"], name: "index_friendly_id_slugs_on_slug_and_sluggable_type", length: { slug: 140 }, using: :btree
t.index ["sluggable_type", "sluggable_id"], name: "index_friendly_id_slugs_on_sluggable_type_and_sluggable_id", using: :btree
end
create_table "project_documents", force: :cascade, options: "ENGINE=InnoDB DEFAULT CHARSET=utf8" do |t|
t.string "document_uk"
t.string "document_en"
......
vendor/assets/javascripts/jquery.twentytwenty.js
(function($){
$.fn.twentytwenty = function(options) {
var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal'}, options);
var options = $.extend({
default_offset_pct: 0.5,
orientation: 'horizontal',
before_label: 'Before',
after_label: 'After',
no_overlay: false,
move_slider_on_hover: false,
move_with_handle_only: true,
click_to_move: false
}, options);
return this.each(function() {
var sliderPct = options.default_offset_pct;
......@@ -12,7 +22,12 @@
container.wrap("<div class='twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>");
if(!options.no_overlay) {
container.append("<div class='twentytwenty-overlay'></div>");
var overlay = container.find(".twentytwenty-overlay");
overlay.append("<div class='twentytwenty-before-label' data-content='"+options.before_label+"'></div>");
overlay.append("<div class='twentytwenty-after-label' data-content='"+options.after_label+"'></div>");
}
var beforeImg = container.find("img:first");
var afterImg = container.find("img:last");
container.append("<div class='twentytwenty-handle'></div>");
......@@ -23,10 +38,6 @@
beforeImg.addClass("twentytwenty-before");
afterImg.addClass("twentytwenty-after");
var overlay = container.find(".twentytwenty-overlay");
overlay.append("<div class='twentytwenty-before-label'></div>");
overlay.append("<div class='twentytwenty-after-label'></div>");
var calcOffset = function(dimensionPct) {
var w = beforeImg.width();
var h = beforeImg.height();
......@@ -41,9 +52,11 @@
var adjustContainer = function(offset) {
if (sliderOrientation === 'vertical') {
beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)");
afterImg.css("clip", "rect("+offset.ch+","+offset.w+","+offset.h+",0)");
}
else {
beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
afterImg.css("clip", "rect(0,"+offset.w+","+offset.h+","+offset.cw+")");
}
container.css("height", offset.h);
};
......@@ -52,16 +65,32 @@
var offset = calcOffset(pct);
slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw);
adjustContainer(offset);
}
};
// Return the number specified or the min/max number if it outside the range given.
var minMaxNumber = function(num, min, max) {
return Math.max(min, Math.min(max, num));
};
// Calculate the slider percentage based on the position.
var getSliderPercentage = function(positionX, positionY) {
var sliderPercentage = (sliderOrientation === 'vertical') ?
(positionY-offsetY)/imgHeight :
(positionX-offsetX)/imgWidth;
return minMaxNumber(sliderPercentage, 0, 1);
};
$(window).on("resize.twentytwenty", function(e) {
adjustSlider(sliderPct);
});
var offsetX = 0;
var offsetY = 0;
var imgWidth = 0;
slider.on("movestart", function(e) {
var imgHeight = 0;
var onMoveStart = function(e) {
if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && sliderOrientation !== 'vertical') {
e.preventDefault();
}
......@@ -73,29 +102,48 @@
offsetY = container.offset().top;
imgWidth = beforeImg.width();
imgHeight = beforeImg.height();
});
slider.on("moveend", function(e) {
container.removeClass("active");
});
slider.on("move", function(e) {
};
var onMove = function(e) {
if (container.hasClass("active")) {
sliderPct = (sliderOrientation === 'vertical') ? (e.pageY-offsetY)/imgHeight : (e.pageX-offsetX)/imgWidth;
if (sliderPct < 0) {
sliderPct = 0;
}
if (sliderPct > 1) {
sliderPct = 1;
}
sliderPct = getSliderPercentage(e.pageX, e.pageY);
adjustSlider(sliderPct);
}
};
var onMoveEnd = function() {
container.removeClass("active");
};
var moveTarget = options.move_with_handle_only ? slider : container;
moveTarget.on("movestart",onMoveStart);
moveTarget.on("move",onMove);
moveTarget.on("moveend",onMoveEnd);
if (options.move_slider_on_hover) {
container.on("mouseenter", onMoveStart);
container.on("mousemove", onMove);
container.on("mouseleave", onMoveEnd);
}
slider.on("touchmove", function(e) {
e.preventDefault();
});
container.find("img").on("mousedown", function(event) {
event.preventDefault();
});
if (options.click_to_move) {
container.on('click', function(e) {
offsetX = container.offset().left;
offsetY = container.offset().top;
imgWidth = beforeImg.width();
imgHeight = beforeImg.height();
sliderPct = getSliderPercentage(e.pageX, e.pageY);
adjustSlider(sliderPct);
});
}
$(window).trigger("resize.twentytwenty");
});
};
......
vendor/assets/javascripts/squares.js
......@@ -15,9 +15,9 @@ var BASE_RANDOM_NUMBER = 25,
$(document).ready(function(){
if ($('#user_search_block').length > 0 && $('.section_environment').length == 0) {
initPlaceOfCubes();
// initPlaceOfCubes();
}
$('[data-toggle="popover"]').popover({title: "<span class=\"usr_surname\">Фондар</span><span class=\"usr_name\">Вікторія Тараневська <a href=\"#\" class=\"round_link\"><i class=\"icon icon_fb\"></i></span>", content: "<div class=\"usr_contributions\">Внесків 3</div><div class=\"usr_funds\"><div class=\"usr_funds_value\">на суму: 14 200 UAH</div></div><div class=\"usr_volunteering\">Волонтерство 2</div>", html: true, placement: "top"});
// $('[data-toggle="popover"]').popover({title: "<span class=\"usr_surname\">Фондар</span><span class=\"usr_name\">Вікторія Тараневська <a href=\"#\" class=\"round_link\"><i class=\"icon icon_fb\"></i></span>", content: "<div class=\"usr_contributions\">Внесків 3</div><div class=\"usr_funds\"><div class=\"usr_funds_value\">на суму: 14 200 UAH</div></div><div class=\"usr_volunteering\">Волонтерство 2</div>", html: true, placement: "top"});
});
/**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment