mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-09 16:24:51 +00:00
Add Photo Filters and Photo Albums
This commit is contained in:
parent
596f335dc6
commit
47df007a7e
12 changed files with 642 additions and 13 deletions
|
@ -40,6 +40,10 @@ class StatusController extends Controller
|
||||||
'filter_name' => 'nullable|string',
|
'filter_name' => 'nullable|string',
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
if(count($request->file('photo')) > config('pixelfed.max_album_length')) {
|
||||||
|
return redirect()->back()->with('error', 'Too many files, max limit per post: ' . config('pixelfed.max_album_length'));
|
||||||
|
}
|
||||||
|
|
||||||
$cw = $request->filled('cw') && $request->cw == 'on' ? true : false;
|
$cw = $request->filled('cw') && $request->cw == 'on' ? true : false;
|
||||||
$monthHash = hash('sha1', date('Y') . date('m'));
|
$monthHash = hash('sha1', date('Y') . date('m'));
|
||||||
$userHash = hash('sha1', $user->id . (string) $user->created_at);
|
$userHash = hash('sha1', $user->id . (string) $user->created_at);
|
||||||
|
|
|
@ -96,5 +96,15 @@ return [
|
||||||
|
|
|
|
||||||
*/
|
*/
|
||||||
'max_caption_length' => env('MAX_CAPTION_LENGTH', 150),
|
'max_caption_length' => env('MAX_CAPTION_LENGTH', 150),
|
||||||
|
|
||||||
|
/*
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
| Album size limit
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
| The max number of photos allowed per post.
|
||||||
|
|
|
||||||
|
*/
|
||||||
|
'max_album_length' => env('MAX_ALBUM_LENGTH', 4),
|
||||||
|
|
||||||
];
|
];
|
BIN
public/css/app.css
vendored
BIN
public/css/app.css
vendored
Binary file not shown.
BIN
public/js/app.js
vendored
BIN
public/js/app.js
vendored
Binary file not shown.
Binary file not shown.
1
resources/assets/js/bootstrap.js
vendored
1
resources/assets/js/bootstrap.js
vendored
|
@ -22,6 +22,7 @@ try {
|
||||||
require('./components/commentform');
|
require('./components/commentform');
|
||||||
require('./components/searchform');
|
require('./components/searchform');
|
||||||
require('./components/bookmarkform');
|
require('./components/bookmarkform');
|
||||||
|
require('./components/statusform');
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
110
resources/assets/js/components/statusform.js
vendored
Normal file
110
resources/assets/js/components/statusform.js
vendored
Normal file
|
@ -0,0 +1,110 @@
|
||||||
|
$(document).ready(function() {
|
||||||
|
|
||||||
|
$('#statusForm .btn-filter-select').on('click', function(e) {
|
||||||
|
let el = $(this);
|
||||||
|
});
|
||||||
|
|
||||||
|
pixelfed.create = {};
|
||||||
|
pixelfed.filters = {};
|
||||||
|
pixelfed.create.hasGeneratedSelect = false;
|
||||||
|
pixelfed.create.selectedFilter = false;
|
||||||
|
pixelfed.create.currentFilterName = false;
|
||||||
|
pixelfed.create.currentFilterClass = false;
|
||||||
|
|
||||||
|
pixelfed.filters.list = [
|
||||||
|
['1977','filter-1977'],
|
||||||
|
['Aden','filter-aden'],
|
||||||
|
['Amaro','filter-amaro'],
|
||||||
|
['Ashby','filter-ashby'],
|
||||||
|
['Brannan','filter-brannan'],
|
||||||
|
['Brooklyn','filter-brooklyn'],
|
||||||
|
['Charmes','filter-charmes'],
|
||||||
|
['Clarendon','filter-clarendon'],
|
||||||
|
['Crema','filter-crema'],
|
||||||
|
['Dogpatch','filter-dogpatch'],
|
||||||
|
['Earlybird','filter-earlybird'],
|
||||||
|
['Gingham','filter-gingham'],
|
||||||
|
['Ginza','filter-ginza'],
|
||||||
|
['Hefe','filter-hefe'],
|
||||||
|
['Helena','filter-helena'],
|
||||||
|
['Hudson','filter-hudson'],
|
||||||
|
['Inkwell','filter-inkwell'],
|
||||||
|
['Kelvin','filter-kelvin'],
|
||||||
|
['Kuno','filter-juno'],
|
||||||
|
['Lark','filter-lark'],
|
||||||
|
['Lo-Fi','filter-lofi'],
|
||||||
|
['Ludwig','filter-ludwig'],
|
||||||
|
['Maven','filter-maven'],
|
||||||
|
['Mayfair','filter-mayfair'],
|
||||||
|
['Moon','filter-moon'],
|
||||||
|
['Nashville','filter-nashville'],
|
||||||
|
['Perpetua','filter-perpetua'],
|
||||||
|
['Poprocket','filter-poprocket'],
|
||||||
|
['Reyes','filter-reyes'],
|
||||||
|
['Rise','filter-rise'],
|
||||||
|
['Sierra','filter-sierra'],
|
||||||
|
['Skyline','filter-skyline'],
|
||||||
|
['Slumber','filter-slumber'],
|
||||||
|
['Stinson','filter-stinson'],
|
||||||
|
['Sutro','filter-sutro'],
|
||||||
|
['Toaster','filter-toaster'],
|
||||||
|
['Valencia','filter-valencia'],
|
||||||
|
['Vesper','filter-vesper'],
|
||||||
|
['Walden','filter-walden'],
|
||||||
|
['Willow','filter-willow'],
|
||||||
|
['X-Pro II','filter-xpro-ii']
|
||||||
|
];
|
||||||
|
|
||||||
|
function previewImage(input) {
|
||||||
|
if (input.files && input.files[0]) {
|
||||||
|
var reader = new FileReader();
|
||||||
|
reader.onload = function(e) {
|
||||||
|
$('.filterPreview').attr('src', e.target.result);
|
||||||
|
}
|
||||||
|
reader.readAsDataURL(input.files[0]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateFilterSelect() {
|
||||||
|
let filters = pixelfed.filters.list;
|
||||||
|
for(var i = 0, len = filters.length; i < len; i++) {
|
||||||
|
let filter = filters[i];
|
||||||
|
let name = filter[0];
|
||||||
|
let className = filter[1];
|
||||||
|
let select = $('#filterSelectDropdown');
|
||||||
|
var template = '<option value="' + className + '">' + name + '</option>';
|
||||||
|
select.append(template);
|
||||||
|
}
|
||||||
|
pixelfed.create.hasGeneratedSelect = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#fileInput').on('change', function() {
|
||||||
|
previewImage(this);
|
||||||
|
$('#statusForm .form-filters.d-none').removeClass('d-none');
|
||||||
|
$('#statusForm .form-preview.d-none').removeClass('d-none');
|
||||||
|
$('#statusForm #collapsePreview').collapse('show');
|
||||||
|
if(!pixelfed.create.hasGeneratedSelect) {
|
||||||
|
generateFilterSelect();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#filterSelectDropdown').on('change', function() {
|
||||||
|
let el = $(this);
|
||||||
|
let filter = el.val();
|
||||||
|
let oldFilter = pixelfed.create.currentFilterClass;
|
||||||
|
if(filter == 'none') {
|
||||||
|
$('.filterContainer').removeClass(oldFilter);
|
||||||
|
pixelfed.create.currentFilterClass = false;
|
||||||
|
pixelfed.create.currentFilterName = 'None';
|
||||||
|
$('.form-group.form-preview .form-text').text('Current Filter: No filter selected');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
$('.filterContainer').removeClass(oldFilter).addClass(filter);
|
||||||
|
pixelfed.create.currentFilterClass = filter;
|
||||||
|
pixelfed.create.currentFilterName = el.find(':selected').text();
|
||||||
|
$('.form-group.form-preview .form-text').text('Current Filter: ' + pixelfed.create.currentFilterName);
|
||||||
|
$('input[name=filter_class]').val(pixelfed.create.currentFilterClass);
|
||||||
|
$('input[name=filter_name]').val(pixelfed.create.currentFilterName);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
2
resources/assets/sass/app.scss
vendored
2
resources/assets/sass/app.scss
vendored
|
@ -11,6 +11,8 @@
|
||||||
|
|
||||||
@import "custom";
|
@import "custom";
|
||||||
|
|
||||||
|
@import "components/filters";
|
||||||
|
|
||||||
@import "components/typeahead";
|
@import "components/typeahead";
|
||||||
|
|
||||||
@import "components/notifications";
|
@import "components/notifications";
|
||||||
|
|
445
resources/assets/sass/components/filters.scss
vendored
Normal file
445
resources/assets/sass/components/filters.scss
vendored
Normal file
|
@ -0,0 +1,445 @@
|
||||||
|
/*! Instagram.css v0.1.3 | MIT License | github.com/picturepan2/instagram.css */
|
||||||
|
[class*="filter"] {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="filter"]::before {
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-1977 {
|
||||||
|
-webkit-filter: sepia(.5) hue-rotate(-30deg) saturate(1.4);
|
||||||
|
filter: sepia(.5) hue-rotate(-30deg) saturate(1.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-aden {
|
||||||
|
-webkit-filter: sepia(.2) brightness(1.15) saturate(1.4);
|
||||||
|
filter: sepia(.2) brightness(1.15) saturate(1.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-aden::before {
|
||||||
|
background: rgba(125, 105, 24, .1);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-amaro {
|
||||||
|
-webkit-filter: sepia(.35) contrast(1.1) brightness(1.2) saturate(1.3);
|
||||||
|
filter: sepia(.35) contrast(1.1) brightness(1.2) saturate(1.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-amaro::before {
|
||||||
|
background: rgba(125, 105, 24, .2);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: overlay;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-ashby {
|
||||||
|
-webkit-filter: sepia(.5) contrast(1.2) saturate(1.8);
|
||||||
|
filter: sepia(.5) contrast(1.2) saturate(1.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-ashby::before {
|
||||||
|
background: rgba(125, 105, 24, .35);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: lighten;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-brannan {
|
||||||
|
-webkit-filter: sepia(.4) contrast(1.25) brightness(1.1) saturate(.9) hue-rotate(-2deg);
|
||||||
|
filter: sepia(.4) contrast(1.25) brightness(1.1) saturate(.9) hue-rotate(-2deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-brooklyn {
|
||||||
|
-webkit-filter: sepia(.25) contrast(1.25) brightness(1.25) hue-rotate(5deg);
|
||||||
|
filter: sepia(.25) contrast(1.25) brightness(1.25) hue-rotate(5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-brooklyn::before {
|
||||||
|
background: rgba(127, 187, 227, .2);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: overlay;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-charmes {
|
||||||
|
-webkit-filter: sepia(.25) contrast(1.25) brightness(1.25) saturate(1.35) hue-rotate(-5deg);
|
||||||
|
filter: sepia(.25) contrast(1.25) brightness(1.25) saturate(1.35) hue-rotate(-5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-charmes::before {
|
||||||
|
background: rgba(125, 105, 24, .25);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: darken;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-clarendon {
|
||||||
|
-webkit-filter: sepia(.15) contrast(1.25) brightness(1.25) hue-rotate(5deg);
|
||||||
|
filter: sepia(.15) contrast(1.25) brightness(1.25) hue-rotate(5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-clarendon::before {
|
||||||
|
background: rgba(127, 187, 227, .4);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: overlay;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-crema {
|
||||||
|
-webkit-filter: sepia(.5) contrast(1.25) brightness(1.15) saturate(.9) hue-rotate(-2deg);
|
||||||
|
filter: sepia(.5) contrast(1.25) brightness(1.15) saturate(.9) hue-rotate(-2deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-crema::before {
|
||||||
|
background: rgba(125, 105, 24, .2);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-dogpatch {
|
||||||
|
-webkit-filter: sepia(.35) saturate(1.1) contrast(1.5);
|
||||||
|
filter: sepia(.35) saturate(1.1) contrast(1.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-earlybird {
|
||||||
|
-webkit-filter: sepia(.25) contrast(1.25) brightness(1.15) saturate(.9) hue-rotate(-5deg);
|
||||||
|
filter: sepia(.25) contrast(1.25) brightness(1.15) saturate(.9) hue-rotate(-5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-earlybird::before {
|
||||||
|
background: radial-gradient(circle closest-corner, transparent 0, rgba(125, 105, 24, .2) 100%);
|
||||||
|
background: -o-radial-gradient(circle closest-corner, transparent 0, rgba(125, 105, 24, .2) 100%);
|
||||||
|
background: -moz-radial-gradient(circle closest-corner, transparent 0, rgba(125, 105, 24, .2) 100%);
|
||||||
|
background: -webkit-radial-gradient(circle closest-corner, transparent 0, rgba(125, 105, 24, .2) 100%);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-gingham {
|
||||||
|
-webkit-filter: contrast(1.1) brightness(1.1);
|
||||||
|
filter: contrast(1.1) brightness(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-gingham::before {
|
||||||
|
background: #e6e6e6;
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: soft-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-ginza {
|
||||||
|
-webkit-filter: sepia(.25) contrast(1.15) brightness(1.2) saturate(1.35) hue-rotate(-5deg);
|
||||||
|
filter: sepia(.25) contrast(1.15) brightness(1.2) saturate(1.35) hue-rotate(-5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-ginza::before {
|
||||||
|
background: rgba(125, 105, 24, .15);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: darken;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-hefe {
|
||||||
|
-webkit-filter: sepia(.4) contrast(1.5) brightness(1.2) saturate(1.4) hue-rotate(-10deg);
|
||||||
|
filter: sepia(.4) contrast(1.5) brightness(1.2) saturate(1.4) hue-rotate(-10deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-hefe::before {
|
||||||
|
background: radial-gradient(circle closest-corner, transparent 0, rgba(0, 0, 0, .25) 100%);
|
||||||
|
background: -o-radial-gradient(circle closest-corner, transparent 0, rgba(0, 0, 0, .25) 100%);
|
||||||
|
background: -moz-radial-gradient(circle closest-corner, transparent 0, rgba(0, 0, 0, .25) 100%);
|
||||||
|
background: -webkit-radial-gradient(circle closest-corner, transparent 0, rgba(0, 0, 0, .25) 100%);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-helena {
|
||||||
|
-webkit-filter: sepia(.5) contrast(1.05) brightness(1.05) saturate(1.35);
|
||||||
|
filter: sepia(.5) contrast(1.05) brightness(1.05) saturate(1.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-helena::before {
|
||||||
|
background: rgba(158, 175, 30, .25);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: overlay;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-hudson {
|
||||||
|
-webkit-filter: sepia(.25) contrast(1.2) brightness(1.2) saturate(1.05) hue-rotate(-15deg);
|
||||||
|
filter: sepia(.25) contrast(1.2) brightness(1.2) saturate(1.05) hue-rotate(-15deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-hudson::before {
|
||||||
|
background: radial-gradient(circle closest-corner, transparent 25%, rgba(25, 62, 167, .25) 100%);
|
||||||
|
background: -o-radial-gradient(circle closest-corner, transparent 25%, rgba(25, 62, 167, .25) 100%);
|
||||||
|
background: -moz-radial-gradient(circle closest-corner, transparent 25%, rgba(25, 62, 167, .25) 100%);
|
||||||
|
background: -webkit-radial-gradient(circle closest-corner, transparent 25%, rgba(25, 62, 167, .25) 100%);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-inkwell {
|
||||||
|
-webkit-filter: brightness(1.25) contrast(.85) grayscale(1);
|
||||||
|
filter: brightness(1.25) contrast(.85) grayscale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-juno {
|
||||||
|
-webkit-filter: sepia(.35) contrast(1.15) brightness(1.15) saturate(1.8);
|
||||||
|
filter: sepia(.35) contrast(1.15) brightness(1.15) saturate(1.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-juno::before {
|
||||||
|
background: rgba(127, 187, 227, .2);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: overlay;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-kelvin {
|
||||||
|
-webkit-filter: sepia(.15) contrast(1.5) brightness(1.1) hue-rotate(-10deg);
|
||||||
|
filter: sepia(.15) contrast(1.5) brightness(1.1) hue-rotate(-10deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-kelvin::before {
|
||||||
|
background: radial-gradient(circle closest-corner, rgba(128, 78, 15, .25) 0, rgba(128, 78, 15, .5) 100%);
|
||||||
|
background: -o-radial-gradient(circle closest-corner, rgba(128, 78, 15, .25) 0, rgba(128, 78, 15, .5) 100%);
|
||||||
|
background: -moz-radial-gradient(circle closest-corner, rgba(128, 78, 15, .25) 0, rgba(128, 78, 15, .5) 100%);
|
||||||
|
background: -webkit-radial-gradient(circle closest-corner, rgba(128, 78, 15, .25) 0, rgba(128, 78, 15, .5) 100%);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: overlay;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-lark {
|
||||||
|
-webkit-filter: sepia(.25) contrast(1.2) brightness(1.3) saturate(1.25);
|
||||||
|
filter: sepia(.25) contrast(1.2) brightness(1.3) saturate(1.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-lofi {
|
||||||
|
-webkit-filter: saturate(1.1) contrast(1.5);
|
||||||
|
filter: saturate(1.1) contrast(1.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-ludwig {
|
||||||
|
-webkit-filter: sepia(.25) contrast(1.05) brightness(1.05) saturate(2);
|
||||||
|
filter: sepia(.25) contrast(1.05) brightness(1.05) saturate(2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-ludwig::before {
|
||||||
|
background: rgba(125, 105, 24, .1);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: overlay;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-maven {
|
||||||
|
-webkit-filter: sepia(.35) contrast(1.05) brightness(1.05) saturate(1.75);
|
||||||
|
filter: sepia(.35) contrast(1.05) brightness(1.05) saturate(1.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-maven::before {
|
||||||
|
background: rgba(158, 175, 30, .25);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: darken;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-mayfair {
|
||||||
|
-webkit-filter: contrast(1.1) brightness(1.15) saturate(1.1);
|
||||||
|
filter: contrast(1.1) brightness(1.15) saturate(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-mayfair::before {
|
||||||
|
background: radial-gradient(circle closest-corner, transparent 0, rgba(175, 105, 24, .4) 100%);
|
||||||
|
background: -o-radial-gradient(circle closest-corner, transparent 0, rgba(175, 105, 24, .4) 100%);
|
||||||
|
background: -moz-radial-gradient(circle closest-corner, transparent 0, rgba(175, 105, 24, .4) 100%);
|
||||||
|
background: -webkit-radial-gradient(circle closest-corner, transparent 0, rgba(175, 105, 24, .4) 100%);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-moon {
|
||||||
|
-webkit-filter: brightness(1.4) contrast(.95) saturate(0) sepia(.35);
|
||||||
|
filter: brightness(1.4) contrast(.95) saturate(0) sepia(.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-nashville {
|
||||||
|
-webkit-filter: sepia(.25) contrast(1.5) brightness(.9) hue-rotate(-15deg);
|
||||||
|
filter: sepia(.25) contrast(1.5) brightness(.9) hue-rotate(-15deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-nashville::before {
|
||||||
|
background: radial-gradient(circle closest-corner, rgba(128, 78, 15, .5) 0, rgba(128, 78, 15, .65) 100%);
|
||||||
|
background: -o-radial-gradient(circle closest-corner, rgba(128, 78, 15, .5) 0, rgba(128, 78, 15, .65) 100%);
|
||||||
|
background: -moz-radial-gradient(circle closest-corner, rgba(128, 78, 15, .5) 0, rgba(128, 78, 15, .65) 100%);
|
||||||
|
background: -webkit-radial-gradient(circle closest-corner, rgba(128, 78, 15, .5) 0, rgba(128, 78, 15, .65) 100%);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: screen;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-perpetua {
|
||||||
|
-webkit-filter: contrast(1.1) brightness(1.25) saturate(1.1);
|
||||||
|
filter: contrast(1.1) brightness(1.25) saturate(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-perpetua::before {
|
||||||
|
background: linear-gradient(to bottom, rgba(0, 91, 154, .25), rgba(230, 193, 61, .25));
|
||||||
|
background: -o-linear-gradient(top, rgba(0, 91, 154, .25), rgba(230, 193, 61, .25));
|
||||||
|
background: -moz-linear-gradient(top, rgba(0, 91, 154, .25), rgba(230, 193, 61, .25));
|
||||||
|
background: -webkit-linear-gradient(top, rgba(0, 91, 154, .25), rgba(230, 193, 61, .25));
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 91, 154, .25)), to(rgba(230, 193, 61, .25)));
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-poprocket {
|
||||||
|
-webkit-filter: sepia(.15) brightness(1.2);
|
||||||
|
filter: sepia(.15) brightness(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-poprocket::before {
|
||||||
|
background: radial-gradient(circle closest-corner, rgba(206, 39, 70, .75) 40%, black 80%);
|
||||||
|
background: -o-radial-gradient(circle closest-corner, rgba(206, 39, 70, .75) 40%, black 80%);
|
||||||
|
background: -moz-radial-gradient(circle closest-corner, rgba(206, 39, 70, .75) 40%, black 80%);
|
||||||
|
background: -webkit-radial-gradient(circle closest-corner, rgba(206, 39, 70, .75) 40%, black 80%);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: screen;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-reyes {
|
||||||
|
-webkit-filter: sepia(.75) contrast(.75) brightness(1.25) saturate(1.4);
|
||||||
|
filter: sepia(.75) contrast(.75) brightness(1.25) saturate(1.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-rise {
|
||||||
|
-webkit-filter: sepia(.25) contrast(1.25) brightness(1.2) saturate(.9);
|
||||||
|
filter: sepia(.25) contrast(1.25) brightness(1.2) saturate(.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-rise::before {
|
||||||
|
background: radial-gradient(circle closest-corner, transparent 0, rgba(230, 193, 61, .25) 100%);
|
||||||
|
background: -o-radial-gradient(circle closest-corner, transparent 0, rgba(230, 193, 61, .25) 100%);
|
||||||
|
background: -moz-radial-gradient(circle closest-corner, transparent 0, rgba(230, 193, 61, .25) 100%);
|
||||||
|
background: -webkit-radial-gradient(circle closest-corner, transparent 0, rgba(230, 193, 61, .25) 100%);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: lighten;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-sierra {
|
||||||
|
-webkit-filter: sepia(.25) contrast(1.5) brightness(.9) hue-rotate(-15deg);
|
||||||
|
filter: sepia(.25) contrast(1.5) brightness(.9) hue-rotate(-15deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-sierra::before {
|
||||||
|
background: radial-gradient(circle closest-corner, rgba(128, 78, 15, .5) 0, rgba(0, 0, 0, .65) 100%);
|
||||||
|
background: -o-radial-gradient(circle closest-corner, rgba(128, 78, 15, .5) 0, rgba(0, 0, 0, .65) 100%);
|
||||||
|
background: -moz-radial-gradient(circle closest-corner, rgba(128, 78, 15, .5) 0, rgba(0, 0, 0, .65) 100%);
|
||||||
|
background: -webkit-radial-gradient(circle closest-corner, rgba(128, 78, 15, .5) 0, rgba(0, 0, 0, .65) 100%);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: screen;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-skyline {
|
||||||
|
-webkit-filter: sepia(.15) contrast(1.25) brightness(1.25) saturate(1.2);
|
||||||
|
filter: sepia(.15) contrast(1.25) brightness(1.25) saturate(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-slumber {
|
||||||
|
-webkit-filter: sepia(.35) contrast(1.25) saturate(1.25);
|
||||||
|
filter: sepia(.35) contrast(1.25) saturate(1.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-slumber::before {
|
||||||
|
background: rgba(125, 105, 24, .2);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: darken;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-stinson {
|
||||||
|
-webkit-filter: sepia(.35) contrast(1.25) brightness(1.1) saturate(1.25);
|
||||||
|
filter: sepia(.35) contrast(1.25) brightness(1.1) saturate(1.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-stinson::before {
|
||||||
|
background: rgba(125, 105, 24, .45);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: lighten;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-sutro {
|
||||||
|
-webkit-filter: sepia(.4) contrast(1.2) brightness(.9) saturate(1.4) hue-rotate(-10deg);
|
||||||
|
filter: sepia(.4) contrast(1.2) brightness(.9) saturate(1.4) hue-rotate(-10deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-sutro::before {
|
||||||
|
background: radial-gradient(circle closest-corner, transparent 50%, rgba(0, 0, 0, .5) 90%);
|
||||||
|
background: -o-radial-gradient(circle closest-corner, transparent 50%, rgba(0, 0, 0, .5) 90%);
|
||||||
|
background: -moz-radial-gradient(circle closest-corner, transparent 50%, rgba(0, 0, 0, .5) 90%);
|
||||||
|
background: -webkit-radial-gradient(circle closest-corner, transparent 50%, rgba(0, 0, 0, .5) 90%);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: darken;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-toaster {
|
||||||
|
-webkit-filter: sepia(.25) contrast(1.5) brightness(.95) hue-rotate(-15deg);
|
||||||
|
filter: sepia(.25) contrast(1.5) brightness(.95) hue-rotate(-15deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-toaster::before {
|
||||||
|
background: radial-gradient(circle, #804e0f, rgba(0, 0, 0, .25));
|
||||||
|
background: -o-radial-gradient(circle, #804e0f, rgba(0, 0, 0, .25));
|
||||||
|
background: -moz-radial-gradient(circle, #804e0f, rgba(0, 0, 0, .25));
|
||||||
|
background: -webkit-radial-gradient(circle, #804e0f, rgba(0, 0, 0, .25));
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: screen;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-valencia {
|
||||||
|
-webkit-filter: sepia(.25) contrast(1.1) brightness(1.1);
|
||||||
|
filter: sepia(.25) contrast(1.1) brightness(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-valencia::before {
|
||||||
|
background: rgba(230, 193, 61, .1);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: lighten;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-vesper {
|
||||||
|
-webkit-filter: sepia(.35) contrast(1.15) brightness(1.2) saturate(1.3);
|
||||||
|
filter: sepia(.35) contrast(1.15) brightness(1.2) saturate(1.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-vesper::before {
|
||||||
|
background: rgba(125, 105, 24, .25);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: overlay;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-walden {
|
||||||
|
-webkit-filter: sepia(.35) contrast(.8) brightness(1.25) saturate(1.4);
|
||||||
|
filter: sepia(.35) contrast(.8) brightness(1.25) saturate(1.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-walden::before {
|
||||||
|
background: rgba(229, 240, 128, .5);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: darken;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-willow {
|
||||||
|
-webkit-filter: brightness(1.2) contrast(.85) saturate(.05) sepia(.2);
|
||||||
|
filter: brightness(1.2) contrast(.85) saturate(.05) sepia(.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-xpro-ii {
|
||||||
|
-webkit-filter: sepia(.45) contrast(1.25) brightness(1.75) saturate(1.3) hue-rotate(-5deg);
|
||||||
|
filter: sepia(.45) contrast(1.25) brightness(1.75) saturate(1.3) hue-rotate(-5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-xpro-ii::before {
|
||||||
|
background: radial-gradient(circle closest-corner, rgba(0, 91, 154, .35) 0, rgba(0, 0, 0, .65) 100%);
|
||||||
|
background: -o-radial-gradient(circle closest-corner, rgba(0, 91, 154, .35) 0, rgba(0, 0, 0, .65) 100%);
|
||||||
|
background: -moz-radial-gradient(circle closest-corner, rgba(0, 91, 154, .35) 0, rgba(0, 0, 0, .65) 100%);
|
||||||
|
background: -webkit-radial-gradient(circle closest-corner, rgba(0, 91, 154, .35) 0, rgba(0, 0, 0, .65) 100%);
|
||||||
|
content: "";
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
}
|
15
resources/assets/sass/custom.scss
vendored
15
resources/assets/sass/custom.scss
vendored
|
@ -234,3 +234,18 @@ body, button, input, textarea {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
background-position: 50%;
|
background-position: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInDown {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-1.25em);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.details-animated[open] {
|
||||||
|
animation-name: fadeInDown;
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
}
|
|
@ -27,7 +27,7 @@
|
||||||
@foreach($timeline as $status)
|
@foreach($timeline as $status)
|
||||||
<div class="col-12 col-md-4 mb-4">
|
<div class="col-12 col-md-4 mb-4">
|
||||||
<a class="card info-overlay" href="{{$status->url()}}">
|
<a class="card info-overlay" href="{{$status->url()}}">
|
||||||
<div class="square">
|
<div class="square {{$status->firstMedia()->filter_class}}">
|
||||||
<div class="square-content" style="background-image: url('{{$status->thumb()}}')"></div>
|
<div class="square-content" style="background-image: url('{{$status->thumb()}}')"></div>
|
||||||
<div class="info-overlay-text">
|
<div class="info-overlay-text">
|
||||||
<h5 class="text-white m-auto font-weight-bold">
|
<h5 class="text-white m-auto font-weight-bold">
|
||||||
|
|
|
@ -1,13 +1,20 @@
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header font-weight-bold">New Post</div>
|
<div class="card-header font-weight-bold">New Post</div>
|
||||||
<div class="card-body" id="statusForm">
|
<div class="card-body" id="statusForm">
|
||||||
|
@if (session('error'))
|
||||||
|
<div class="alert alert-danger">
|
||||||
|
{{ session('error') }}
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
<form method="post" action="/timeline" enctype="multipart/form-data">
|
<form method="post" action="/timeline" enctype="multipart/form-data">
|
||||||
@csrf
|
@csrf
|
||||||
|
<input type="hidden" name="filter_name" value="">
|
||||||
|
<input type="hidden" name="filter_class" value="">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="font-weight-bold text-muted small">Upload Image</label>
|
<label class="font-weight-bold text-muted small">Upload Image</label>
|
||||||
<input type="file" class="form-control-file" name="photo" accept="image/*">
|
<input type="file" class="form-control-file" id="fileInput" name="photo[]" accept="image/*" multiple="">
|
||||||
<small class="form-text text-muted">
|
<small class="form-text text-muted">
|
||||||
Max Size: @maxFileSize(). Supported formats: jpeg, png, gif, bmp.
|
Max Size: @maxFileSize(). Supported formats: jpeg, png, gif, bmp. Limited to {{config('pixelfed.max_album_length')}} photos per post.
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
|
@ -17,17 +24,52 @@
|
||||||
Max length: {{config('pixelfed.max_caption_length')}} characters.
|
Max length: {{config('pixelfed.max_caption_length')}} characters.
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
{{-- <div class="form-group">
|
<div class="form-group">
|
||||||
<label class="font-weight-bold text-muted small">CW/NSFW</label>
|
<button class="btn btn-primary btn-sm px-3 py-1 font-weight-bold" type="button" data-toggle="collapse" data-target="#collapsePreview" aria-expanded="false" aria-controls="collapsePreview">
|
||||||
<div class="switch switch-sm">
|
Options
|
||||||
<input type="checkbox" class="switch" id="cw-switch" name="cw">
|
</button>
|
||||||
<label for="cw-switch" class="small font-weight-bold">(Default off)</label>
|
<div class="collapse" id="collapsePreview">
|
||||||
|
|
||||||
|
<div class="form-group pt-3">
|
||||||
|
<label class="font-weight-bold text-muted small">CW/NSFW</label>
|
||||||
|
<div class="switch switch-sm">
|
||||||
|
<input type="checkbox" class="switch" id="cw-switch" name="cw">
|
||||||
|
<label for="cw-switch" class="small font-weight-bold">(Default off)</label>
|
||||||
|
</div>
|
||||||
|
<small class="form-text text-muted">
|
||||||
|
Please mark all NSFW and controversial content, as per our content policy.
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{-- <div class="form-group">
|
||||||
|
<label class="font-weight-bold text-muted small">Visibility</label>
|
||||||
|
<div class="switch switch-sm">
|
||||||
|
<input type="checkbox" class="switch" id="visibility-switch" name="visibility">
|
||||||
|
<label for="visibility-switch" class="small font-weight-bold">Public | Followers-only</label>
|
||||||
|
</div>
|
||||||
|
<small class="form-text text-muted">
|
||||||
|
Toggle this to limit this post to your followers only.
|
||||||
|
</small>
|
||||||
|
</div> --}}
|
||||||
|
|
||||||
|
<div class="form-group d-none form-preview">
|
||||||
|
<label class="font-weight-bold text-muted small">Photo Preview</label>
|
||||||
|
<figure class="filterContainer">
|
||||||
|
<img class="filterPreview img-fluid">
|
||||||
|
</figure>
|
||||||
|
<small class="form-text text-muted font-weight-bold">
|
||||||
|
No filter selected.
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
<div class="form-group d-none form-filters">
|
||||||
|
<label for="filterSelectDropdown" class="font-weight-bold text-muted small">Select Filter</label>
|
||||||
|
<select class="form-control" id="filterSelectDropdown">
|
||||||
|
<option value="none" selected="">No Filter</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<small class="form-text text-muted">
|
</div>
|
||||||
Please mark all NSFW and controversial content, as per our content policy.
|
|
||||||
</small>
|
|
||||||
</div> --}}
|
|
||||||
<button type="submit" class="btn btn-outline-primary btn-block">Post</button>
|
<button type="submit" class="btn btn-outline-primary btn-block">Post</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue