mirror of
https://github.com/pinry/pinry.git
synced 2026-02-24 15:21:02 +01:00
Refactor: Remove old views and templates
This commit is contained in:
winkidney
committed by
Isaac Bythewood
Isaac Bythewood
parent
ff0cc4ad68
commit
0f456538b5
16
core/urls.py
16
core/urls.py
@@ -1,16 +0,0 @@
|
||||
from django.conf.urls import url
|
||||
from django.views.generic import TemplateView
|
||||
|
||||
|
||||
urlpatterns = [
|
||||
url(r'^pins/pin-form/$', TemplateView.as_view(template_name='core/pin_form.html'),
|
||||
name='pin-form'),
|
||||
url(r'^pins/tags/(?P<tag>(\w|-)+)/$', TemplateView.as_view(template_name='core/pins.html'),
|
||||
name='tag-pins'),
|
||||
url(r'^pins/users/(?P<username>(\w|-)+)/$', TemplateView.as_view(template_name='core/pins.html'),
|
||||
name='user-pins'),
|
||||
url(r'^(?P<pin>[0-9]+)/$', TemplateView.as_view(template_name='core/pins.html'),
|
||||
name='pin-detail'),
|
||||
url(r'^$', TemplateView.as_view(template_name='core/pins.html'),
|
||||
name='recent-pins'),
|
||||
]
|
||||
@@ -1,72 +0,0 @@
|
||||
.lightbox-background {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
z-index: 9001;
|
||||
}
|
||||
|
||||
.lightbox-wrapper {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
background-image: url("../img/loader.gif");
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
left: 50%;
|
||||
margin-bottom: 100px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.lightbox-wrapper img {
|
||||
max-width: 600px;
|
||||
-webkit-border-top-right-radius: 3px;
|
||||
-webkit-border-top-left-radius: 3px;
|
||||
-moz-border-radius-topright: 3px;
|
||||
-moz-border-radius-topleft: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
border-top-left-radius: 3px;
|
||||
}
|
||||
|
||||
.lightbox-data {
|
||||
color: white;
|
||||
-webkit-border-bottom-right-radius: 3px;
|
||||
-webkit-border-bottom-left-radius: 3px;
|
||||
-moz-border-radius-bottomright: 3px;
|
||||
-moz-border-radius-bottomleft: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
||||
.lightbox-data .description {
|
||||
border-bottom: 1px solid #333;
|
||||
font-family: "Georgia", "Times", "Times New Roman", Serif;
|
||||
font-size: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.lightbox-data .avatar img {
|
||||
display: block;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin: 5px;
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.lightbox-data .text {
|
||||
font-weight: bold;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.lightbox-data .text .dim {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.lightbox-data .extra {
|
||||
padding: 8px 6px;
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
#messages {
|
||||
list-style-type: none;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 60px;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
#messages li {
|
||||
border: 1px solid #ccc;
|
||||
font-size: 16px;
|
||||
margin: 5px 0;
|
||||
padding: 18px 28px;
|
||||
}
|
||||
|
||||
#messages li:hover {
|
||||
cursor: pointer;
|
||||
-webkit-transform: scale(1.1);
|
||||
-moz-transform: scale(1.1);
|
||||
-ms-transform: scale(1.1);
|
||||
-o-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
@@ -1,308 +0,0 @@
|
||||
/* Start Globals */
|
||||
body {
|
||||
background: #F5F5EB;
|
||||
margin-top: 80px;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 700;
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#noscript {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
margin: 0 auto;
|
||||
width: 500px;
|
||||
text-align: center;
|
||||
}
|
||||
#app{
|
||||
overflow: auto;
|
||||
}
|
||||
/* End Globals */
|
||||
|
||||
|
||||
/* Start Navigation */
|
||||
.navbar {
|
||||
background: white;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.navbar-brand img {
|
||||
font-family: 'Monoton', sans-serif;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.navbar-nav>li>a {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.9em;
|
||||
color: #111 !important;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.navbar-nav>li>a.btn {
|
||||
padding: 5px 10px;
|
||||
margin: 5px 17px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navbar-nav>li>a {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.navbar-nav>li>a.btn {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
#bookmarklet {
|
||||
cursor: move;
|
||||
}
|
||||
/* End Navigation */
|
||||
|
||||
|
||||
/* Start Forms */
|
||||
form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
#form h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#form h3 {
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#form .form-group {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
#id_username {
|
||||
-webkit-border-bottom-right-radius: 0;
|
||||
-webkit-border-bottom-left-radius: 0;
|
||||
-moz-border-radius-bottomright: 0;
|
||||
-moz-border-radius-bottomleft: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
#id_email {
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#id_password {
|
||||
margin-bottom: 15px;
|
||||
-webkit-border-top-right-radius: 0;
|
||||
-webkit-border-top-left-radius: 0;
|
||||
-moz-border-radius-topright: 0;
|
||||
-moz-border-radius-topleft: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
#submit {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.qq-upload-button {
|
||||
background: #eee;
|
||||
border: 3px dashed #888;
|
||||
-webit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
color: black;
|
||||
width: 238px;
|
||||
}
|
||||
|
||||
.qq-upload-drop-area {
|
||||
background: #275173;
|
||||
border: 3px dashed #aaa;
|
||||
-webit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.qq-upload-success {
|
||||
-webit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.qq-upload-list li {
|
||||
background-color: #eee;
|
||||
-webit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.qq-upload-spinner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
overflow: hidden;
|
||||
}
|
||||
/* End Forms */
|
||||
|
||||
|
||||
/* Start Pins */
|
||||
#pins {
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
.pin {
|
||||
background: #fff;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: 0 1px 0 #bbb;
|
||||
-moz-box-shadow: 0 1px 0 #bbb;
|
||||
box-shadow: 0 1px 0 #bbb;
|
||||
position: absolute;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.pin .editor {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
border: 2px solid rgba(255, 255, 255, 0.4);
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
top: 7px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pin:hover .editor {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pin .editor .borderable {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
padding: 5px 8px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.pin .image-wrapper {
|
||||
background-image: url("../img/loader.gif");
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.pin img {
|
||||
-webkit-border-top-left-radius: 3px;
|
||||
-moz-border-radius-topleft: 3px;
|
||||
border-top-left-radius: 3px;
|
||||
-webkit-border-top-right-radius: 3px;
|
||||
-moz-border-radius-topright: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
cursor: -webkit-zoom-in;
|
||||
cursor: -moz-zoom-in;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.pin p {
|
||||
border-bottom: 1px solid #ddd;
|
||||
font-family: 'Georgia', 'Times', 'Times New Roman', serif;
|
||||
font-size: 12px;
|
||||
margin-bottom: 0;
|
||||
padding: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.pin strong {
|
||||
color: #777;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.pin-footer {
|
||||
color: #777;
|
||||
cursor: default;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.pin-footer .dim {
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.pin-footer .avatar {
|
||||
background: white;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.pin-footer .avatar img {
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.pin-footer .text {
|
||||
line-height: 16px;
|
||||
margin-top: -1px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
background: url('../img/loader.gif');
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
height: 31px;
|
||||
margin: 0 auto;
|
||||
padding: 50px;
|
||||
width: 31px;
|
||||
}
|
||||
|
||||
#the-end {
|
||||
font-family: 'Georgia', 'Times', 'Times New Roman', serif;
|
||||
font-size: 1.4em;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
padding: 50px;
|
||||
}
|
||||
/* End Pins */
|
||||
@@ -1,16 +0,0 @@
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity .3s;
|
||||
}
|
||||
|
||||
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
.fake-hide {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.pin {
|
||||
transition: opacity .3s;
|
||||
}
|
||||
@@ -1,88 +0,0 @@
|
||||
/**
|
||||
* Helpers for Pinry
|
||||
* Descrip: A hodgepodge of useful things to help clean up Pinry's JavaScript.
|
||||
* Authors: Pinry Contributors
|
||||
* Updated: Feb 26th, 2013
|
||||
* Require: jQuery
|
||||
*/
|
||||
var API_BASE = "/api/v2/";
|
||||
|
||||
|
||||
function _getCookie(name) {
|
||||
var cookieValue = null;
|
||||
if (document.cookie && document.cookie !== '') {
|
||||
var cookies = document.cookie.split(';');
|
||||
for (var i = 0; i < cookies.length; i++) {
|
||||
var cookie = jQuery.trim(cookies[i]);
|
||||
// Does this cookie string begin with the name we want?
|
||||
if (cookie.substring(0, name.length + 1) === (name + '=')) {
|
||||
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return cookieValue;
|
||||
}
|
||||
|
||||
|
||||
function getCSRFToken() {
|
||||
return _getCookie('csrftoken');
|
||||
}
|
||||
|
||||
|
||||
function csrfSafeMethod(method) {
|
||||
// these HTTP methods do not require CSRF protection
|
||||
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
|
||||
}
|
||||
|
||||
$.ajaxSetup({
|
||||
beforeSend: function (xhr, settings) {
|
||||
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
|
||||
xhr.setRequestHeader("X-CSRFToken", getCSRFToken());
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function cleanTags(tags) {
|
||||
if (typeof tags === 'string' && tags.length > 0) {
|
||||
tags = tags.split(/[\s,]+/);
|
||||
for (var i in tags) {
|
||||
tags[i] = tags[i].trim();
|
||||
}
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
return tags;
|
||||
}
|
||||
|
||||
function getPinData(pinId) {
|
||||
var apiUrl = API_BASE + "pins/" + pinId + '/?format=json';
|
||||
return $.get(apiUrl);
|
||||
}
|
||||
|
||||
|
||||
function deletePinData(pinId) {
|
||||
var apiUrl = API_BASE + 'pins/' + pinId + '/?format=json';
|
||||
return $.ajax(apiUrl, {
|
||||
type: 'DELETE'
|
||||
});
|
||||
}
|
||||
|
||||
function postPinData(data) {
|
||||
return $.ajax({
|
||||
type: "post",
|
||||
url: API_BASE + "pins/",
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify(data)
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function getUrlParameter(name) {
|
||||
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null;
|
||||
}
|
||||
|
||||
function getDocumentScrollTop() {
|
||||
var doc = document.documentElement;
|
||||
return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
|
||||
}
|
||||
@@ -1,105 +0,0 @@
|
||||
/**
|
||||
* Lightbox for Pinry
|
||||
* Descrip: A lightbox plugin for pinry so that I don't have to rely on some of
|
||||
* the massive code bases of other lightboxes, this one uses data
|
||||
* fields to acquire the info we need and dynamically loads comments.
|
||||
* It also has a nice parallax view mode where the top scrolls and the
|
||||
* background stays stationary.
|
||||
* Authors: Pinry Contributors
|
||||
* Updated: Feb 4th, 2016
|
||||
* Require: jQuery, Pinry JavaScript Helpers
|
||||
*/
|
||||
|
||||
|
||||
$(window).load(function() {
|
||||
// Start Helper Functions
|
||||
function freezeScroll(freeze) {
|
||||
freeze = typeof freeze !== 'undefined' ? freeze : true;
|
||||
if (freeze) {
|
||||
$('body').data('scroll-level', $(window).scrollTop());
|
||||
$('#pins').css({
|
||||
'position': 'fixed',
|
||||
'margin-top': -$('body').data('scroll-level')
|
||||
});
|
||||
$(window).scrollTop(0);
|
||||
/* disable the global pin-loading scroll handler so we don't
|
||||
load pins when scrolling a selected image */
|
||||
$(window).off('scroll');
|
||||
} else {
|
||||
$('#pins').css({
|
||||
'position': 'static',
|
||||
'margin-top': 0
|
||||
});
|
||||
$(window).scrollTop($('body').data('scroll-level'));
|
||||
/* enable the pin-loading scroll handler unless we've already
|
||||
loaded all pins from the server (in which case an element
|
||||
with id 'the-end' exists */
|
||||
var theEnd = document.getElementById('the-end');
|
||||
if (!theEnd) {
|
||||
$(window).scroll(scrollHandler);
|
||||
}
|
||||
}
|
||||
}
|
||||
// End Helper Functions
|
||||
|
||||
|
||||
// Start View Functions
|
||||
function createBox(context) {
|
||||
freezeScroll();
|
||||
$('body').append(renderTemplate('#lightbox-template', context));
|
||||
var box = $('.lightbox-background');
|
||||
box.css('height', $(document).height());
|
||||
$('.lightbox-image-wrapper').css('height', context.image.standard.height);
|
||||
box.fadeIn(200);
|
||||
$('.lightbox-image').load(function() {
|
||||
$(this).fadeIn(200);
|
||||
});
|
||||
$('.lightbox-wrapper').css({
|
||||
'width': context.image.standard.width,
|
||||
'margin-top': 80,
|
||||
'margin-bottom': 80,
|
||||
'margin-left': -context.image.standard.width/2
|
||||
});
|
||||
if ($('.lightbox-wrapper').height()+140 > $(window).height())
|
||||
$('.lightbox-background').height($('.lightbox-wrapper').height()+160);
|
||||
|
||||
box.click(function() {
|
||||
$(this).fadeOut(200);
|
||||
setTimeout(function() {
|
||||
box.remove();
|
||||
}, 200);
|
||||
freezeScroll(false);
|
||||
});
|
||||
}
|
||||
// End View Functions
|
||||
|
||||
|
||||
// Start Global Init Function
|
||||
window.lightbox = function() {
|
||||
var links = $('body').find('.lightbox');
|
||||
if (pinFilter) {
|
||||
var promise = getPinData(pinFilter);
|
||||
promise.success(function(pin) {
|
||||
createBox(pin);
|
||||
});
|
||||
promise.error(function() {
|
||||
message('Problem problem fetching pin data.', 'alert alert-danger');
|
||||
});
|
||||
}
|
||||
return links.each(function() {
|
||||
$(this).off('click');
|
||||
$(this).click(function(e) {
|
||||
e.preventDefault();
|
||||
var promise = getPinData($(this).data('id'));
|
||||
promise.success(function(pin) {
|
||||
createBox(pin);
|
||||
});
|
||||
promise.error(function() {
|
||||
message('Problem problem fetching pin data.', 'alert alert-danger');
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// End Global Init Function
|
||||
});
|
||||
@@ -1,23 +0,0 @@
|
||||
$(document).ready(function() {
|
||||
window.message = function(text, classes) {
|
||||
classes = typeof classes !== 'undefined' ? classes : 'alert';
|
||||
messageHtml = renderTemplate('#messages-template', {
|
||||
text: text,
|
||||
classes: classes
|
||||
});
|
||||
$('#messages').append(messageHtml);
|
||||
$('#messages li').each(function() {
|
||||
$(this).delay(3000).fadeOut(300);
|
||||
var messageDelayed = $(this);
|
||||
setTimeout(function() {
|
||||
messageDelayed.remove();
|
||||
}, 3300);
|
||||
});
|
||||
}
|
||||
|
||||
if (errors) {
|
||||
for (var i in errors) {
|
||||
message(errors[i].text, errors[i].tags);
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1,212 +0,0 @@
|
||||
/**
|
||||
* Pin Form for Pinry
|
||||
* Descrip: This is for creation new pins on everything, the bookmarklet, on the
|
||||
* site and even editing pins in some limited situations.
|
||||
* Authors: Pinry Contributors
|
||||
* Updated: March 3rd, 2013
|
||||
* Require: jQuery, Pinry JavaScript Helpers
|
||||
*/
|
||||
|
||||
|
||||
$(window).load(function() {
|
||||
var uploadedImage = false;
|
||||
var editedPin = null;
|
||||
|
||||
// Start Helper Functions
|
||||
function getFormData() {
|
||||
return {
|
||||
url: $('#pin-form-image-url').val(),
|
||||
referer: $('#pin-form-referer').val(),
|
||||
description: $('#pin-form-description').val(),
|
||||
tags: cleanTags($('#pin-form-tags').val())
|
||||
}
|
||||
}
|
||||
|
||||
function createPinPreviewFromForm() {
|
||||
var context = {pins: [{
|
||||
image: {thumbnail: {image: $('#pin-form-image-url').val()}},
|
||||
referer: $('#pin-form-referer').val(),
|
||||
description: $('#pin-form-description').val(),
|
||||
tags: cleanTags($('#pin-form-tags').val()),
|
||||
submitter: currentUser,
|
||||
}]},
|
||||
html = renderTemplate('#pins-template', context),
|
||||
preview = $('#pin-form-image-preview');
|
||||
preview.html(html);
|
||||
preview.find('.pin').width(240);
|
||||
preview.find('.pin').fadeIn(300);
|
||||
if (getFormData().url == "")
|
||||
preview.find('.image-wrapper').height(255);
|
||||
preview.find('.image-wrapper img').fadeIn(300);
|
||||
setTimeout(function() {
|
||||
if (preview.find('.pin').height() > 305) {
|
||||
$('#pin-form .modal-body').animate({
|
||||
'height': preview.find('.pin').height()+25
|
||||
}, 300);
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
|
||||
function dismissModal(modal) {
|
||||
modal.modal('hide');
|
||||
modal.on('hidden.bs.modal', function() {
|
||||
modal.remove();
|
||||
});
|
||||
}
|
||||
// End Helper Functions
|
||||
|
||||
|
||||
// Start View Functions
|
||||
function createPinForm(editPinId) {
|
||||
$('body').append(renderTemplate('#pin-form-template', ''));
|
||||
var modal = $('#pin-form'),
|
||||
formFields = [
|
||||
$('#pin-form-image-url'),
|
||||
$('#pin-form-referer'),
|
||||
$('#pin-form-description'),
|
||||
$('#pin-form-tags')
|
||||
],
|
||||
pinFromUrl = getUrlParameter('pin-image-url'),
|
||||
pinFromDescription = getUrlParameter('description'),
|
||||
pinFromReferer = getUrlParameter('referer');
|
||||
// If editable grab existing data
|
||||
if (editPinId) {
|
||||
var promise = getPinData(editPinId);
|
||||
promise.success(function(data) {
|
||||
editedPin = data;
|
||||
$('#pin-form-image-url').val(editedPin.image.thumbnail.image);
|
||||
$('#pin-form-image-url').parent().hide();
|
||||
$('#pin-form-referer').parent().hide();
|
||||
$('#pin-form-image-upload').parent().hide();
|
||||
$('#pin-form-description').val(editedPin.description);
|
||||
$('#pin-form-tags').val(editedPin.tags);
|
||||
createPinPreviewFromForm();
|
||||
});
|
||||
}
|
||||
modal.modal('show');
|
||||
// Auto update preview on field changes
|
||||
var timer;
|
||||
for (var i in formFields) {
|
||||
formFields[i].bind('propertychange keyup input paste', function() {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(function() {
|
||||
createPinPreviewFromForm()
|
||||
}, 700);
|
||||
if (!uploadedImage)
|
||||
$('#pin-form-image-upload').parent().fadeOut(300);
|
||||
});
|
||||
}
|
||||
// Drag and drop upload
|
||||
$('#pin-form-image-upload').dropzone({
|
||||
url: API_BASE + "images/",
|
||||
paramName: 'image',
|
||||
parallelUploads: 1,
|
||||
uploadMultiple: false,
|
||||
maxFiles: 1,
|
||||
acceptedFiles: 'image/*',
|
||||
headers: {
|
||||
'X-CSRFToken': getCSRFToken(),
|
||||
},
|
||||
success: function(file, resp) {
|
||||
var image_url = $('#pin-form-image-url');
|
||||
image_url.parent().fadeOut(300);
|
||||
uploadedImage = resp.id;
|
||||
image_url.val(resp.thumbnail.image);
|
||||
createPinPreviewFromForm();
|
||||
},
|
||||
error: function (error) {
|
||||
message('Problem uploading image.', 'alert alert-error');
|
||||
},
|
||||
});
|
||||
// If bookmarklet submit
|
||||
if (pinFromUrl) {
|
||||
$('#pin-form-image-upload').parent().css('display', 'none');
|
||||
$('#pin-form-image-url').val(pinFromUrl);
|
||||
$('#pin-form-referer').val(pinFromReferer);
|
||||
$('#pin-form-description').val(pinFromDescription);
|
||||
$('.navbar').css('display', 'none');
|
||||
modal.css({
|
||||
'margin-top': -35,
|
||||
'margin-left': -281
|
||||
});
|
||||
}
|
||||
// Submit pin on post click
|
||||
$('#pin-form-submit').click(function(e) {
|
||||
e.preventDefault();
|
||||
$(this).off('click');
|
||||
$(this).addClass('disabled');
|
||||
if (editedPin) {
|
||||
var apiUrl = API_BASE + 'pins/' + editedPin.id + '/?format=json';
|
||||
var data = {
|
||||
description: $('#pin-form-description').val(),
|
||||
tags: cleanTags($('#pin-form-tags').val())
|
||||
};
|
||||
var promise = $.ajax({
|
||||
type: "patch",
|
||||
url: apiUrl,
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify(data)
|
||||
});
|
||||
promise.success(function(pin) {
|
||||
pin.editable = true;
|
||||
var renderedPin = renderTemplate('#pins-template', {
|
||||
pins: [
|
||||
pin
|
||||
]
|
||||
});
|
||||
$('#pins').find('.pin[data-id="'+pin.id+'"]').replaceWith(renderedPin);
|
||||
tileLayout();
|
||||
lightbox();
|
||||
dismissModal(modal);
|
||||
editedPin = null;
|
||||
});
|
||||
promise.error(function() {
|
||||
message('Problem updating image.', 'alert alert-danger');
|
||||
});
|
||||
} else {
|
||||
var data = {
|
||||
referer: $('#pin-form-referer').val(),
|
||||
description: $('#pin-form-description').val(),
|
||||
tags: cleanTags($('#pin-form-tags').val())
|
||||
};
|
||||
if (uploadedImage) {
|
||||
data.image_by_id = uploadedImage;
|
||||
} else {
|
||||
data.url = $('#pin-form-image-url').val();
|
||||
}
|
||||
var promise = postPinData(data);
|
||||
promise.success(function(pin) {
|
||||
if (pinFromUrl) return window.close();
|
||||
pin.editable = true;
|
||||
pin = renderTemplate('#pins-template', {pins: [pin]});
|
||||
$('#pins').prepend(pin);
|
||||
tileLayout();
|
||||
lightbox();
|
||||
dismissModal(modal);
|
||||
uploadedImage = false;
|
||||
});
|
||||
promise.error(function() {
|
||||
message('Problem saving image.', 'alert alert-danger');
|
||||
});
|
||||
}
|
||||
});
|
||||
$('#pin-form-close').click(function() {
|
||||
if (pinFromUrl) return window.close();
|
||||
dismissModal(modal);
|
||||
});
|
||||
createPinPreviewFromForm();
|
||||
}
|
||||
// End View Functions
|
||||
|
||||
|
||||
// Start Init
|
||||
window.pinForm = function(editPinId) {
|
||||
editPinId = typeof editPinId !== 'undefined' ? editPinId : null;
|
||||
createPinForm(editPinId);
|
||||
}
|
||||
|
||||
if (getUrlParameter('pin-image-url')) {
|
||||
createPinForm();
|
||||
}
|
||||
// End Init
|
||||
});
|
||||
@@ -1,187 +0,0 @@
|
||||
/**
|
||||
* Pinry
|
||||
* Descrip: Core of pinry, loads and tiles pins.
|
||||
* Authors: Pinry Contributors
|
||||
* Updated: Apr 5th, 2013
|
||||
* Require: jQuery, Pinry JavaScript Helpers
|
||||
*/
|
||||
|
||||
|
||||
$(window).load(function() {
|
||||
/**
|
||||
* tileLayout will simply tile/retile the block/pin container when run. This
|
||||
* was put into a function in order to adjust frequently on screen size
|
||||
* changes.
|
||||
*/
|
||||
window.tileLayout = function() {
|
||||
var blockContainer = $('#pins'),
|
||||
blocks = blockContainer.children('.pin'),
|
||||
blockMargin = 15,
|
||||
blockWidth = 240,
|
||||
rowSize = Math.floor(blockContainer.width()/(blockWidth+blockMargin)),
|
||||
colHeights = [],
|
||||
rowMargins = [],
|
||||
marginLeft = 0;
|
||||
|
||||
// Fill our colHeights array with 0 for each row we have
|
||||
for (var i=0; i < rowSize; i++) colHeights[i] = 0;
|
||||
// Fill out our rowMargins which will be static after this
|
||||
for (var i=0; i < rowSize; i++) {
|
||||
// Our first item has a special margin to keep things centered
|
||||
if (i == 0) rowMargins[0] = (blockContainer.width()-rowSize*(blockWidth+blockMargin))/2;
|
||||
else rowMargins[i] = rowMargins[i-1]+(blockWidth+blockMargin);
|
||||
}
|
||||
// Loop through every block
|
||||
for (var b=0; b < blocks.length; b++) {
|
||||
// Get the jQuery object of the current block
|
||||
block = blocks.eq(b);
|
||||
// Position our new pin in the shortest column
|
||||
var sCol = 0;
|
||||
for (var i=0; i < rowSize; i++) {
|
||||
if (colHeights[sCol] > colHeights[i]) sCol = i;
|
||||
}
|
||||
block.css({
|
||||
'margin-left': rowMargins[sCol],
|
||||
'margin-top': colHeights[sCol],
|
||||
});
|
||||
block.fadeIn(300);
|
||||
colHeights[sCol] += block.height()+(blockMargin);
|
||||
}
|
||||
|
||||
// Open add-to-board panel
|
||||
$('.glyphicon-heart').each(function() {
|
||||
var thisPin = $(this);
|
||||
thisPin.off('click');
|
||||
thisPin.click(function() {
|
||||
thisPin.off('click');
|
||||
pinForm($(thisPin).data('id'));
|
||||
});
|
||||
});
|
||||
|
||||
// Edit pin if pencil icon clicked
|
||||
$('.glyphicon-pencil').each(function() {
|
||||
var thisPin = $(this);
|
||||
thisPin.off('click');
|
||||
thisPin.click(function() {
|
||||
thisPin.off('click');
|
||||
pinForm(thisPin.data('id'));
|
||||
});
|
||||
});
|
||||
|
||||
// Delete pin if trash icon clicked
|
||||
$('.glyphicon-trash').each(function() {
|
||||
var thisPin = $(this);
|
||||
thisPin.off('click');
|
||||
thisPin.click(function() {
|
||||
thisPin.off('click');
|
||||
var promise = deletePinData(thisPin.data('id'));
|
||||
promise.success(function() {
|
||||
thisPin.closest('.pin').remove();
|
||||
tileLayout();
|
||||
});
|
||||
promise.error(function() {
|
||||
message('Problem deleting image.', 'alert alert-danger');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Show edit-buttons only on mouse over
|
||||
$('.pin').each(function(){
|
||||
var thisPin = $(this);
|
||||
thisPin.find('.editor').hide();
|
||||
thisPin.off('hover');
|
||||
thisPin.hover(function() {
|
||||
thisPin.find('.editor').stop(true, true).fadeIn(300);
|
||||
}, function() {
|
||||
thisPin.find('.editor').stop(true, false).fadeOut(300);
|
||||
});
|
||||
});
|
||||
|
||||
$('.spinner').css('display', 'none');
|
||||
blockContainer.css('height', colHeights.sort().slice(-1)[0]);
|
||||
}
|
||||
|
||||
/**
|
||||
* On scroll load more pins from the server
|
||||
*/
|
||||
window.scrollHandler = function() {
|
||||
var windowPosition = $(window).scrollTop() + $(window).height();
|
||||
var bottom = $(document).height() - 100;
|
||||
if(windowPosition > bottom) loadPins();
|
||||
}
|
||||
|
||||
/**
|
||||
* Load our pins using the pins template into our UI, be sure to define a
|
||||
* offset outside the function to keep a running tally of your location.
|
||||
*/
|
||||
|
||||
function isPinEditable(pinObject) {
|
||||
return pinObject.submitter.username === currentUser.username
|
||||
}
|
||||
|
||||
function loadPins() {
|
||||
// Disable scroll
|
||||
$(window).off('scroll');
|
||||
|
||||
// Show our loading symbol
|
||||
$('.spinner').css('display', 'block');
|
||||
|
||||
// Fetch our pins from the api using our current offset
|
||||
var apiUrl = API_BASE + 'pins/?format=json&ordering=-id&limit=50&offset='+String(offset);
|
||||
if (tagFilter) apiUrl = apiUrl + '&tags__name=' + tagFilter;
|
||||
if (userFilter) apiUrl = apiUrl + '&submitter__username=' + userFilter;
|
||||
$.get(apiUrl, function(pins_page) {
|
||||
// Set which items are editable by the current user
|
||||
var pins = pins_page.results;
|
||||
for (var i=0; i < pins.length; i++) {
|
||||
pins[i].editable = isPinEditable(pins[i]);
|
||||
pins[i].tags.sort(function (a, b) {
|
||||
return a.toLowerCase().localeCompare(b.toLowerCase());
|
||||
});
|
||||
}
|
||||
|
||||
// Use the fetched pins as our context for our pins template
|
||||
var template = Handlebars.compile($('#pins-template').html());
|
||||
var html = template({pins: pins});
|
||||
|
||||
// Append the newly compiled data to our container
|
||||
$('#pins').append(html);
|
||||
|
||||
// We need to then wait for images to load in and then tile
|
||||
tileLayout();
|
||||
lightbox();
|
||||
$('#pins').ajaxStop(function() {
|
||||
$('img').load(function() {
|
||||
$(this).fadeIn(300);
|
||||
});
|
||||
});
|
||||
|
||||
if (pins.length < apiLimitPerPage) {
|
||||
$('.spinner').css('display', 'none');
|
||||
if ($('#pins').length !== 0) {
|
||||
var theEnd = document.createElement('div');
|
||||
theEnd.id = 'the-end';
|
||||
$(theEnd).html('— End —');
|
||||
$(theEnd).css('padding', 50);
|
||||
$('body').append(theEnd);
|
||||
}
|
||||
} else {
|
||||
$(window).scroll(scrollHandler);
|
||||
}
|
||||
});
|
||||
|
||||
// Up our offset, it's currently defined as 50 in our settings
|
||||
offset += apiLimitPerPage;
|
||||
}
|
||||
|
||||
|
||||
// Set offset for loadPins and do our initial load
|
||||
var offset = 0;
|
||||
loadPins();
|
||||
|
||||
// If our window gets resized keep the tiles looking clean and in our window
|
||||
$(window).resize(function() {
|
||||
tileLayout();
|
||||
lightbox();
|
||||
})
|
||||
});
|
||||
@@ -1,522 +0,0 @@
|
||||
var events = new Vue({});
|
||||
var eventsName = {
|
||||
pinReflowDone: "single-pin-reflow-done",
|
||||
allPinReflowDone: "all-pin-reflow-done",
|
||||
pinView: {
|
||||
open: "view-single-pin",
|
||||
close: "close-pin-view",
|
||||
},
|
||||
pinForm: {
|
||||
close: "pin_form.close",
|
||||
open: "pin_form.open",
|
||||
}
|
||||
};
|
||||
|
||||
function fetchPins(offset) {
|
||||
var apiUrl = API_BASE + 'pins/?format=json&ordering=-id&limit=50&offset=' + String(offset);
|
||||
if (tagFilter) apiUrl = apiUrl + '&tags__name=' + tagFilter;
|
||||
if (userFilter) apiUrl = apiUrl + '&submitter__username=' + userFilter;
|
||||
return axios.get(apiUrl)
|
||||
}
|
||||
|
||||
var utils = {
|
||||
getDocumentHeight: function () {
|
||||
var body = document.body,
|
||||
html = document.documentElement;
|
||||
return Math.max(
|
||||
body.scrollHeight, body.offsetHeight,
|
||||
html.clientHeight, html.scrollHeight,
|
||||
html.offsetHeight,
|
||||
);
|
||||
},
|
||||
getWindowHeight: function () {
|
||||
return window.innerHeight
|
||||
}
|
||||
};
|
||||
|
||||
function EventCounter(countEvent, triggerEvent, triggerTimes) {
|
||||
|
||||
var self = {
|
||||
id: new Date().getTime(),
|
||||
count: 0,
|
||||
targetCount: triggerTimes,
|
||||
triggerEvent: countEvent,
|
||||
countEvent: countEvent,
|
||||
};
|
||||
events.$on(
|
||||
countEvent,
|
||||
function () {
|
||||
self.count += 1;
|
||||
if (self.count >= self.targetCount) {
|
||||
events.$emit(triggerEvent)
|
||||
}
|
||||
}
|
||||
);
|
||||
self.resetAfterReflow = function (targetCount) {
|
||||
self.count = 0;
|
||||
self.targetCount = targetCount;
|
||||
};
|
||||
self.reset = function (targetCount) {
|
||||
self.targetCount = targetCount;
|
||||
};
|
||||
|
||||
return self;
|
||||
}
|
||||
|
||||
|
||||
function HeightTable(blockMargin) {
|
||||
var self = {
|
||||
data: {}
|
||||
};
|
||||
|
||||
function get(obj, index) {
|
||||
if (!obj.data.hasOwnProperty(index)) {
|
||||
return null
|
||||
}
|
||||
return obj.data[index];
|
||||
}
|
||||
|
||||
function set(obj, index, value) {
|
||||
if (!obj.data.hasOwnProperty(index)) {
|
||||
obj.data[index] = value
|
||||
}
|
||||
return obj.data[index];
|
||||
}
|
||||
|
||||
function getHeightOffset(obj, indexOfElement, rowSize) {
|
||||
var height = 0;
|
||||
for (var index = rowSize - 1; index < indexOfElement; index += rowSize) {
|
||||
var value = obj.get(index);
|
||||
if (value === null) {
|
||||
console.log("Error occurs while loading elements's height offset");
|
||||
return null
|
||||
}
|
||||
height += (value + blockMargin);
|
||||
}
|
||||
return height
|
||||
}
|
||||
|
||||
self.get = function (index) {
|
||||
return get(self, index);
|
||||
};
|
||||
|
||||
self.set = function (index, value) {
|
||||
return set(self, index, value)
|
||||
};
|
||||
self.getHeightOffset = function (index, rowSize) {
|
||||
return getHeightOffset(self, index, rowSize);
|
||||
};
|
||||
self.getMaxHeight = function (rowSize, blockMargin) {
|
||||
var size = Object.keys(self.data).length;
|
||||
var heightArray = [];
|
||||
for (var column = 0; column < rowSize; column++) {
|
||||
heightArray.push(0);
|
||||
}
|
||||
for (var index = 0; index < size; index++) {
|
||||
var column = index % rowSize;
|
||||
heightArray[column] = heightArray[column] + self.get(index) + blockMargin;
|
||||
}
|
||||
return Math.max(...heightArray);
|
||||
};
|
||||
return self;
|
||||
}
|
||||
|
||||
Vue.component(
|
||||
'pin-form',
|
||||
{
|
||||
data: function () {
|
||||
return {};
|
||||
},
|
||||
props: ['url', 'show'],
|
||||
template: "#pin-form-template",
|
||||
mounted: function () {
|
||||
this.initilize();
|
||||
events.$on(
|
||||
eventsName.pinForm.open,
|
||||
this.showModal,
|
||||
)
|
||||
},
|
||||
methods: {
|
||||
getModal: function () {
|
||||
return $('#pin-form');
|
||||
},
|
||||
initilize: function () {
|
||||
$('#pin-form-image-upload').dropzone(
|
||||
{
|
||||
url: API_BASE + "images/",
|
||||
paramName: 'image',
|
||||
parallelUploads: 1,
|
||||
uploadMultiple: false,
|
||||
maxFiles: 1,
|
||||
acceptedFiles: 'image/*',
|
||||
headers: {
|
||||
'X-CSRFToken': getCSRFToken(),
|
||||
},
|
||||
success: function (file, resp) {
|
||||
var image_url = $('#pin-form-image-url');
|
||||
image_url.parent().fadeOut(300);
|
||||
uploadedImage = resp.id;
|
||||
image_url.val(resp.thumbnail.image);
|
||||
// createPinPreviewFromForm();
|
||||
},
|
||||
error: function (error) {
|
||||
message('Problem uploading image.', 'alert alert-error');
|
||||
},
|
||||
},
|
||||
);
|
||||
},
|
||||
showModal: function () {
|
||||
var modal = this.getModal();
|
||||
modal.show();
|
||||
},
|
||||
hideModal: function () {
|
||||
var modal = this.getModal();
|
||||
modal.hide();
|
||||
},
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
Vue.component(
|
||||
'light-box',
|
||||
{
|
||||
data: function () {
|
||||
return {
|
||||
backgroundStyle: null,
|
||||
lightBoxWrapperStyle: null,
|
||||
lightBoxImageWrapperStyle: null,
|
||||
}
|
||||
},
|
||||
props: ['pin'],
|
||||
template: "#lightbox-template",
|
||||
mounted: function () {
|
||||
var documentHeight = utils.getDocumentHeight();
|
||||
var imageWidth = this.pin.image.standard.width;
|
||||
var imageHeight = this.pin.image.standard.height;
|
||||
var windowHeight = utils.getWindowHeight();
|
||||
var backgroundHeight = documentHeight;
|
||||
var lightBoxWrapperStyle = {
|
||||
'width': imageWidth + "px",
|
||||
'marginTop': '80px',
|
||||
'marginBottom': '80px',
|
||||
'margin-left': -imageWidth / 2 + "px",
|
||||
};
|
||||
var wrapper = this.$el.querySelector(".lightbox-wrapper");
|
||||
|
||||
if (wrapper.getBoundingClientRect().height + 140 > windowHeight) {
|
||||
var wrapperHeight = wrapper.getBoundingClientRect().height;
|
||||
backgroundHeight = wrapperHeight + 160;
|
||||
}
|
||||
this.backgroundStyle = {
|
||||
height: backgroundHeight + 'px',
|
||||
};
|
||||
this.lightBoxImageWrapperStyle = {
|
||||
height: imageHeight + 'px',
|
||||
};
|
||||
this.lightBoxWrapperStyle = lightBoxWrapperStyle;
|
||||
},
|
||||
methods: {
|
||||
onCloseView: function () {
|
||||
events.$emit(eventsName.pinView.close);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
Vue.component('pin', {
|
||||
data: function () {
|
||||
return {
|
||||
'loaded': false,
|
||||
'editable': true,
|
||||
'active': false,
|
||||
'imageStyle': null,
|
||||
'pinStyle': null,
|
||||
'height': null,
|
||||
'heightOffset': null,
|
||||
}
|
||||
},
|
||||
props: ['pin', 'args', 'index', 'heightTable'],
|
||||
template: '#pin-template',
|
||||
created: function () {
|
||||
var self = this;
|
||||
events.$on("reflow", function () {
|
||||
self.reflow();
|
||||
});
|
||||
},
|
||||
mounted: function () {
|
||||
this.reflow();
|
||||
this.$emit("rendered", {index: this.index, height: this.height});
|
||||
},
|
||||
updated: function () {
|
||||
events.$emit(eventsName.pinReflowDone);
|
||||
},
|
||||
methods: {
|
||||
showImageDetail: function (event) {
|
||||
events.$emit(eventsName.pinView.open, this.pin);
|
||||
if (event) event.preventDefault();
|
||||
},
|
||||
reflow: function () {
|
||||
this.heightOffset = this.heightTable.getHeightOffset(this.index, this.args.rowSize);
|
||||
this.imageStyle = this.getImageStyle();
|
||||
this.pinStyle = this.getPinStyle();
|
||||
this.height = this.getTextHeight() + this.pin.image.thumbnail.height;
|
||||
},
|
||||
getImageStyle: function () {
|
||||
return {
|
||||
width: this.pin.image.thumbnail.width + 'px',
|
||||
height: this.pin.image.thumbnail.height + 'px',
|
||||
}
|
||||
},
|
||||
getPinStyle: function () {
|
||||
var self = this;
|
||||
var marginTop = self.heightOffset;
|
||||
var marginLeft = 0;
|
||||
|
||||
function isFirstOne(rowSize, index) {
|
||||
index = index + 1;
|
||||
if ((index % rowSize) === 1) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function getRowNumber(rowSize, index) {
|
||||
index = index + 1;
|
||||
var rowNumber = Math.floor(index % rowSize);
|
||||
if (rowNumber === 0) {
|
||||
return rowSize;
|
||||
}
|
||||
return rowNumber;
|
||||
}
|
||||
|
||||
if (isFirstOne(self.args.rowSize, self.index)) {
|
||||
marginLeft = self.args.rowStartMargin;
|
||||
} else {
|
||||
var marginPerBlock = self.args.blockWidth + self.args.blockMargin;
|
||||
var rowNumber = getRowNumber(self.args.rowSize, self.index);
|
||||
marginLeft = self.args.rowStartMargin + marginPerBlock * (rowNumber - 1);
|
||||
}
|
||||
return {
|
||||
'margin-left': marginLeft + 'px',
|
||||
'margin-top': marginTop + 'px',
|
||||
};
|
||||
},
|
||||
onImageLoad: function () {
|
||||
this.loaded = true;
|
||||
},
|
||||
getAvatar: function () {
|
||||
return "//gravatar.com/avatar/" + this.pin.submitter.gravatar;
|
||||
},
|
||||
getUserLink: function () {
|
||||
return "/pins/users/" + this.pin.submitter.username + "/"
|
||||
},
|
||||
getTagLink: function (tag) {
|
||||
return "/pins/tags/" + tag + "/"
|
||||
},
|
||||
getTextHeight: function () {
|
||||
var element = this.$el.querySelector(".pin-description");
|
||||
return element.getBoundingClientRect().height;
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Vue.component('pin-container', {
|
||||
data: function () {
|
||||
return {
|
||||
args: {
|
||||
"containerWidth": 0,
|
||||
"blockWidth": 240,
|
||||
"blockMargin": 15,
|
||||
"rowSize": 0,
|
||||
"rowStartMargin": 0,
|
||||
"rowEndMargin": 0,
|
||||
},
|
||||
"pins": [],
|
||||
"heightTable": [],
|
||||
"counter": null,
|
||||
"containerStyle": null,
|
||||
status: {
|
||||
loading: true,
|
||||
hasNext: true,
|
||||
offset: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
template: "#pin-container-template",
|
||||
created: function () {
|
||||
this.heightTable = HeightTable(this.args.blockMargin);
|
||||
this.loadMore();
|
||||
var self = this;
|
||||
window.addEventListener("optimizedResize", function () {
|
||||
self.reflow();
|
||||
});
|
||||
self.bindScrollHandler();
|
||||
self.counter = EventCounter(
|
||||
eventsName.pinReflowDone,
|
||||
eventsName.allPinReflowDone,
|
||||
self.pins.length,
|
||||
);
|
||||
events.$on(eventsName.allPinReflowDone, this.updateContainerStyle);
|
||||
},
|
||||
mounted: function () {
|
||||
this.reflow();
|
||||
},
|
||||
methods: {
|
||||
updateContainerStyle: function () {
|
||||
var height = this.heightTable.getMaxHeight(
|
||||
this.args.rowSize,
|
||||
this.args.blockMargin,
|
||||
);
|
||||
this.containerStyle = {
|
||||
height: height + "px",
|
||||
};
|
||||
},
|
||||
loadMore() {
|
||||
var self = this;
|
||||
self.markAsLoading();
|
||||
fetchPins(self.status.offset).then(
|
||||
function (res) {
|
||||
var newPins = self.pins.concat(res.data.results);
|
||||
self.counter.reset(newPins.length);
|
||||
self.pins = newPins;
|
||||
self.status.offset += res.data.results.length;
|
||||
if (res.data.next === null) {
|
||||
self.markAsLoaded(false);
|
||||
} else {
|
||||
self.markAsLoaded(true);
|
||||
}
|
||||
},
|
||||
);
|
||||
},
|
||||
markAsLoaded: function (hasNext) {
|
||||
this.status.hasNext = hasNext;
|
||||
this.status.loading = false;
|
||||
this.$emit(
|
||||
"loaded",
|
||||
);
|
||||
if (!hasNext) {
|
||||
this.$emit("no-more-pins")
|
||||
}
|
||||
},
|
||||
markAsLoading: function () {
|
||||
this.status.loading = true;
|
||||
this.$emit(
|
||||
"loading",
|
||||
);
|
||||
},
|
||||
bindScrollHandler: function () {
|
||||
var self = this;
|
||||
|
||||
scrollHandler = function () {
|
||||
if (self.status.loading || !self.status.hasNext) {
|
||||
return
|
||||
}
|
||||
var windowPosition = getDocumentScrollTop() + window.innerHeight;
|
||||
var bottom = utils.getDocumentHeight() - 100;
|
||||
if (windowPosition > bottom) {
|
||||
self.loadMore();
|
||||
}
|
||||
};
|
||||
window.addEventListener('scroll', function (e) {
|
||||
scrollHandler();
|
||||
}
|
||||
);
|
||||
},
|
||||
updateChildHeight: function (childArg) {
|
||||
this.heightTable.set(childArg.index, childArg.height);
|
||||
},
|
||||
reflow: function () {
|
||||
this.counter.resetAfterReflow(self.pins.length);
|
||||
this.updateArguments();
|
||||
events.$emit("reflow");
|
||||
},
|
||||
updateArguments: function () {
|
||||
var blockContainer = this.$el;
|
||||
var containerWidth = blockContainer.clientWidth;
|
||||
var blockMargin = this.args.blockMargin,
|
||||
blockWidth = this.args.blockWidth,
|
||||
rowSize = Math.floor(containerWidth / (blockWidth + blockMargin));
|
||||
var rowStartMargin = (containerWidth - rowSize * (blockWidth + blockMargin)) / 2;
|
||||
var rowEndMargin = rowStartMargin - blockMargin;
|
||||
|
||||
this.args.containerWidth = containerWidth;
|
||||
this.args.blockWidth = blockWidth;
|
||||
this.args.blockMargin = blockMargin;
|
||||
this.args.rowSize = rowSize;
|
||||
this.args.rowStartMargin = rowStartMargin;
|
||||
this.args.rowEndMargin = rowEndMargin;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
(function () {
|
||||
var previousResize = 0;
|
||||
var throttle = function (type, name, obj) {
|
||||
obj = obj || window;
|
||||
var running = false;
|
||||
var func = function () {
|
||||
if (running) {
|
||||
return;
|
||||
}
|
||||
var now = new Date().getTime();
|
||||
if ((now - previousResize) < 200) {
|
||||
return
|
||||
}
|
||||
previousResize = now;
|
||||
running = true;
|
||||
requestAnimationFrame(function () {
|
||||
obj.dispatchEvent(new CustomEvent(name));
|
||||
running = false;
|
||||
});
|
||||
};
|
||||
obj.addEventListener(type, func);
|
||||
};
|
||||
|
||||
throttle("resize", "optimizedResize");
|
||||
})();
|
||||
|
||||
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
noMore: false,
|
||||
currentPin: null,
|
||||
}
|
||||
},
|
||||
created: function () {
|
||||
events.$on(
|
||||
eventsName.pinView.open,
|
||||
this.onViewPin,
|
||||
);
|
||||
events.$on(
|
||||
eventsName.pinView.close,
|
||||
this.onClosePin,
|
||||
);
|
||||
},
|
||||
methods: {
|
||||
showPinForm: function () {
|
||||
events.$emit(
|
||||
eventsName.pinForm.open,
|
||||
)
|
||||
},
|
||||
onViewPin: function (pin) {
|
||||
this.currentPin = pin;
|
||||
},
|
||||
onClosePin: function (pin) {
|
||||
this.currentPin = null;
|
||||
},
|
||||
onLoaded: function () {
|
||||
this.loading = false;
|
||||
},
|
||||
onLoading: function () {
|
||||
this.loading = true;
|
||||
},
|
||||
onNoMore: function () {
|
||||
this.noMore = true;
|
||||
}
|
||||
},
|
||||
});
|
||||
@@ -1,14 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}404{% endblock %}
|
||||
|
||||
{% block yield %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div id="form" class="span6 offset3">
|
||||
<h1>404</h1>
|
||||
<p>This page does not exist.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -1,16 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}500{% endblock %}
|
||||
|
||||
{% block yield %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div id="form" class="span6 offset3">
|
||||
<h1>500</h1>
|
||||
<p>Something went wrong! If you figure out what it was please
|
||||
submit an issue on Pinry's
|
||||
<a href="https://github.com/pinry/pinry/issues">GitHub Issue's page</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -1,120 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
{% load staticfiles compress %}
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
|
||||
<title>{% block title %}Pinry{% endblock %}</title>
|
||||
<link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
|
||||
<!-- CSS -->
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700"/>
|
||||
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.6/dist/css/bootstrap.min.css"/>
|
||||
<link rel="stylesheet" href="https://unpkg.com/dropzone@4.3.0/dist/min/dropzone.min.css"/>
|
||||
{% compress css %}
|
||||
<link rel="stylesheet" href="{% static "css/messages.css" %}"/>
|
||||
<link rel="stylesheet" href="{% static "css/lightbox.css" %}"/>
|
||||
<link rel="stylesheet" href="{% static "css/pinry.css" %}"/>
|
||||
<link rel="stylesheet" href="{% static "css/vue-pin.css" %}"/>
|
||||
{% endcompress %}
|
||||
{% compress css inline %}
|
||||
{% block extra_css %}{% endblock %}
|
||||
{% endcompress %}
|
||||
<!-- End CSS -->
|
||||
|
||||
<!-- Start JavaScript Variables -->
|
||||
<script>
|
||||
var apiLimitPerPage = {{ API_LIMIT_PER_PAGE }},
|
||||
errors = {% if not messages %}null,{% else %}[
|
||||
{% for message in messages %}{
|
||||
tags: "{{ message.tags }}",
|
||||
text: "{{ message }}"
|
||||
}{% endfor %}
|
||||
],{% endif %}
|
||||
currentUser = {
|
||||
id: "{{ user.id }}",
|
||||
username: "{{ user.username }}",
|
||||
gravatar: "{{ user.gravatar }}"
|
||||
},
|
||||
pinFilter = "{{ request.resolver_match.kwargs.pin }}",
|
||||
tagFilter = "{{ request.resolver_match.kwargs.tag }}",
|
||||
userFilter = "{{ request.resolver_match.kwargs.username }}";
|
||||
</script>
|
||||
<!-- End JavaScript Variables -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<!-- Navigation -->
|
||||
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a href="{% url 'core:recent-pins' %}" class="navbar-brand">
|
||||
<img src="{% static "img/logo-dark.png" %}" alt="Pinry"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
{% if user.is_authenticated %}
|
||||
<li><a v-on:click="showPinForm()">New Pin</a></li>
|
||||
<li><a href="{% url 'users:logout' %}">Logout</a></li>
|
||||
<li>{% include "includes/bookmarklet_link.html" %}</li>
|
||||
{% else %}
|
||||
<li><a href="{% url 'users:login' %}">Login</a></li>
|
||||
<li><a href="{% url 'users:register' %}">Register</a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Navigation -->
|
||||
|
||||
<!-- Messages -->
|
||||
<ul id="messages"></ul>
|
||||
<!-- End Messages -->
|
||||
|
||||
<!-- No Script -->
|
||||
<div id="noscript">
|
||||
<noscript>Scripting is not enabled in your browser, if you are using
|
||||
a plugin like NoScript *high five*! Our code is open source and
|
||||
you can view it on
|
||||
<a href="https://github.com/pinry/pinry/">GitHub</a>.
|
||||
<style>.spinner {
|
||||
display: none;
|
||||
}</style>
|
||||
</noscript>
|
||||
</div>
|
||||
<!-- End No Script -->
|
||||
|
||||
<!-- Content -->
|
||||
{% block yield %}{% endblock %}
|
||||
<!-- End Content -->
|
||||
</div>
|
||||
<!-- Templates -->
|
||||
{% include 'includes/vue-pin.html' %}
|
||||
{% include 'includes/lightbox-vue.html' %}
|
||||
{% include 'includes/pin_form-vue.html' %}
|
||||
{% block extra_templates %}{% endblock %}
|
||||
<!-- End Templates -->
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||
<script src="https://unpkg.com/jquery@2.2.4/dist/jquery.min.js"></script>
|
||||
<script src="https://unpkg.com/bootstrap@3.3.6/dist/js/bootstrap.min.js"></script>
|
||||
<script src="https://unpkg.com/dropzone@4.3.0/dist/min/dropzone.min.js"></script>
|
||||
{% compress js %}
|
||||
<script src="{% static "js/helpers.js" %}"></script>
|
||||
<script src="{% static "js/vue/main.js" %}"></script>
|
||||
{% endcompress %}
|
||||
{% compress js inline %}
|
||||
{% block extra_js %}{% endblock %}
|
||||
{% endcompress %}
|
||||
<!-- End JavaScript -->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,7 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Pin Form{% endblock %}
|
||||
|
||||
{% block yield %}
|
||||
<div id="display-pin-form"></div>
|
||||
{% endblock %}
|
||||
@@ -1,18 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block yield %}
|
||||
<pin-container
|
||||
v-on:loaded="onLoaded()"
|
||||
v-on:loading="onLoading()"
|
||||
v-on:no-more-pins="onNoMore()"
|
||||
>
|
||||
</pin-container>
|
||||
<div v-show="loading" class="spinner"></div>
|
||||
<template v-if="noMore">
|
||||
<div id="the-end">— End —</div>
|
||||
</template>
|
||||
<light-box v-if="currentPin" :pin="currentPin">
|
||||
</light-box>
|
||||
<pin-form>
|
||||
</pin-form>
|
||||
{% endblock %}
|
||||
@@ -1,8 +0,0 @@
|
||||
<a
|
||||
id="bookmarklet"
|
||||
href="javascript:void((function(d){var s=d.createElement('script');s.id='pinry-bookmarklet';s.src='//{{ request.get_host }}/static/js/bookmarklet.js?'+Math.random()*10000000000000000;d.body.appendChild(s)})(document));"
|
||||
onclick="javascript:alert('Please add a bookmark for this button');return false;"
|
||||
class="btn btn-default navbar-btn"
|
||||
>
|
||||
Bookmarklet
|
||||
</a>
|
||||
@@ -1,14 +0,0 @@
|
||||
{% load bootstrap_field %}
|
||||
|
||||
<div class="form-group{% if field.errors %} has-error{% endif %}">
|
||||
{{ field|bootstrap_field:"form-control input-lg" }}
|
||||
{% if field.errors %}
|
||||
<span class="help-block">
|
||||
{% if field.errors %}
|
||||
{% for error in field.errors %}
|
||||
{{ error|escape }}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -1,39 +0,0 @@
|
||||
{% verbatim %}
|
||||
<script id="lightbox-template" type="text/x-template">
|
||||
<transition name="fade">
|
||||
<div class="lightbox-background" :style="backgroundStyle" v-on:click.self="onCloseView()">
|
||||
<div class="lightbox-wrapper" :style="lightBoxWrapperStyle">
|
||||
<div class="lightbox-image-wrapper" :style="lightBoxImageWrapperStyle">
|
||||
<img class="lightbox-image" :src="pin.image.image" />
|
||||
</div>
|
||||
<div class="lightbox-data clearfix">
|
||||
<div class="description" v-if="pin.description">
|
||||
{{ pin.description }}
|
||||
</div>
|
||||
<div class="avatar pull-left">
|
||||
<img :src="'//gravatar.com/avatar/' + pin.submitter.gravatar + '.jpg'">
|
||||
</div>
|
||||
<div class="text pull-left">
|
||||
<span class="dim">pinned by</span> {{ pin.submitter.username }}
|
||||
<template v-if="pin.tags.length != 0">
|
||||
<br /><span class="dim">in</span>
|
||||
<template v-for="tag in pin.tags">
|
||||
<span class="tag">
|
||||
<a :href="'/pins/tags/' + tag + '/'" class="btn btn-xs btn-primary">
|
||||
{{ tag }}
|
||||
</a>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<div class="text extra pull-right">
|
||||
<a :href="pin.referer" class="btn btn-sm btn-default btn-warning" target="_blank">Referer</a>
|
||||
<a :href="pin.url" class="btn btn-sm btn-default btn-primary" target="_blank">Original URL</a>
|
||||
<a :href="'/' + pin.id + '/'" class="btn btn-sm btn-default btn-success" target="_blank">Pin URL</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</script>
|
||||
{% endverbatim %}
|
||||
@@ -1,5 +0,0 @@
|
||||
{% verbatim %}
|
||||
<script id="messages-template" type="text/x-handlebars-template">
|
||||
<li class="{{ classes }}">{{ text }}</li>
|
||||
</script>
|
||||
{% endverbatim %}
|
||||
@@ -1,42 +0,0 @@
|
||||
{% verbatim %}
|
||||
<script id="pin-form-template" type="text/x-template">
|
||||
<div class="modal" id="pin-form">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">New Pin</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="col-sm-6" id="pin-form-image-preview"></div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="pin-form-image-url">Image URL</label>
|
||||
<input type="text" name="pin-form-image-url" id="pin-form-image-url" class="form-control"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="pin-form-image-upload">Image Upload</label>
|
||||
<form action="/api/v2/images/" id="pin-form-image-upload" class="dropzone"></form>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="pin-form-referer">Referer</label>
|
||||
<input name="pin-form-referer" id="pin-form-referer" class="form-control" type="text"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="pin-form-description">Description</label>
|
||||
<textarea name="pin-form-description" id="pin-form-description" class="form-control"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="pin-form-tags">Tags</label>
|
||||
<input type="text" name="pin-form-tags" id="pin-form-tags" class="form-control"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" id="pin-form-close">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" id="pin-form-submit">Post Pin</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
{% endverbatim %}
|
||||
@@ -1,45 +0,0 @@
|
||||
{% verbatim %}
|
||||
<script id="pin-form-template" type="text/x-handlebars-template">
|
||||
<div class="modal fade" id="pin-form">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">New Pin</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="col-sm-6" id="pin-form-image-preview"></div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="pin-form-image-url">Image URL</label>
|
||||
<input type="text" name="pin-form-image-url" id="pin-form-image-url" class="form-control"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="pin-form-image-upload">Image Upload</label>
|
||||
<form action="/pins/create-image/" id="pin-form-image-upload" class="dropzone"></form>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="pin-form-referer">Referer</label>
|
||||
<input
|
||||
name="pin-form-referer" id="pin-form-referer" class="form-control" type="url"
|
||||
placeholder="Referer URL to the page which includes your pin"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="pin-form-description">Description</label>
|
||||
<textarea name="pin-form-description" id="pin-form-description" class="form-control"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="pin-form-tags">Tags</label>
|
||||
<input type="text" name="pin-form-tags" id="pin-form-tags" class="form-control"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" id="pin-form-close">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" id="pin-form-submit">Post Pin</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
{% endverbatim %}
|
||||
@@ -1,66 +0,0 @@
|
||||
{% verbatim %}
|
||||
|
||||
<script type="text/x-template" id="pin-container-template">
|
||||
<div id="pins" :style="containerStyle">
|
||||
<template v-for="(item, index) in pins">
|
||||
<pin
|
||||
:pin="item"
|
||||
:index="index"
|
||||
:args="args"
|
||||
:heightTable="heightTable"
|
||||
v-on:rendered="updateChildHeight"
|
||||
></pin>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</script>
|
||||
|
||||
<script type="text/x-template" id="pin-template">
|
||||
<div :style="pinStyle" class="pin" :class="{ 'fake-hide': !loaded }" v-on:mouseover="active = true" v-on:mouseleave="active = false">
|
||||
<transition name="fade">
|
||||
<div class="editor" v-show="active">
|
||||
<div class="borderable">
|
||||
<span class="glyphicon glyphicon-heart" data-id="{{id}}"></span>
|
||||
</div>
|
||||
<template v-if="editable">
|
||||
<div class="borderable">
|
||||
<span class="glyphicon glyphicon-trash" data-id="{{id}}"></span>
|
||||
</div>
|
||||
<div class="borderable">
|
||||
<span class="glyphicon glyphicon-pencil" data-id="{{id}}"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<a :href="pin.image.image"
|
||||
@click="showImageDetail($event)"
|
||||
class="lightbox"
|
||||
:style="imageStyle">
|
||||
<div class="image-wrapper">
|
||||
<img :src="pin.image.thumbnail.image" v-on:load="onImageLoad">
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="pin-description">
|
||||
<p v-if="pin.description">{{ pin.description }}</p>
|
||||
<div class="pin-footer clearfix">
|
||||
<div class="avatar pull-left">
|
||||
<img :src="getAvatar()">
|
||||
</div>
|
||||
<div class="text pull-right">
|
||||
<span class="dim">pinned by</span>
|
||||
<a :href="getUserLink">{{ pin.submitter.username }}</a>
|
||||
<template v-if="pin.tags.length != 0">
|
||||
<span class="dim">in</span>
|
||||
<template v-for="_tag in pin.tags">
|
||||
<span class="tag"><a :href="getTagLink(_tag)">{{ _tag }}</a></span>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</script>
|
||||
{% endverbatim %}
|
||||
@@ -1,21 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Login{% endblock %}
|
||||
|
||||
{% block yield %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div id="form" class="col-sm-4 col-sm-offset-4">
|
||||
<h1>Login</h1>
|
||||
<h3>We've missed you! Check out what's new.</h3>
|
||||
<form action="{% url "users:login" %}" method="post" class="form-horizontal">
|
||||
{% csrf_token %}
|
||||
{% for field in form %}
|
||||
{% include "includes/field.html" %}
|
||||
{% endfor %}
|
||||
<button type="submit" class="btn btn-primary btn-lg" id="submit">Login</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -1,15 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Private{% endblock %}
|
||||
|
||||
{% block yield %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div id="form" class="col-sm-6 col-sm-offset-3">
|
||||
<h1>Private</h1>
|
||||
<h3>This website is set to private. You need to login before you
|
||||
can view any content.</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -1,21 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Register{% endblock %}
|
||||
|
||||
{% block yield %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div id="form" class="col-sm-4 col-sm-offset-4">
|
||||
<h1>Join Us</h1>
|
||||
<h3>And start pinning what your interests are.</h3>
|
||||
<form action="{% url "users:register" %}" method="post" class="form-horizontal">
|
||||
{% csrf_token %}
|
||||
{% for field in form %}
|
||||
{% include "includes/field.html" %}
|
||||
{% endfor %}
|
||||
<button id="submit" type="submit" class="btn btn-lg btn-primary">Register</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -19,7 +19,6 @@ urlpatterns = [
|
||||
|
||||
# old api and views
|
||||
url(r'^admin/', include(admin.site.urls)),
|
||||
url(r'', include('core.urls', namespace='core')),
|
||||
url(r'^api/v2/profile/', include('users.urls', namespace='users')),
|
||||
]
|
||||
|
||||
|
||||
Reference in New Issue
Block a user