heuzef
/
pinry
réplica de https://github.com/pinry/pinry.git
1
0
Fork 0
Código Incidencias 0 Lanzamientos 44 Wiki Actividad
Explorar el Código

Feature: Try to add initial structure for pin-form

pull/169/head
winkidney hace 5 años
committed by Isaac Bythewood
padre
897d80170f
commit
9b066771a9
Se han modificado 4 ficheros con 170 adiciones y 109 borrados
Dividir vista
Opciones de diferencias
Mostrar estadísticas Descargar archivo de parche Descargar archivo de diferencias
  1. +16
    -0
      pinry/static/js/vue/main.js
  2. +110
    -109
      pinry/templates/base.html
  3. +2
    -0
      pinry/templates/core/pins.html
  4. +42
    -0
      pinry/templates/includes/pin_form-vue.html

+ 16
- 0
pinry/static/js/vue/main.js Ver fichero

@@ -116,6 +116,19 @@ function HeightTable(blockMargin) {
return self;
}

Vue.component(
'pin-form',
{
data: function () {
return {};
},
props: ['url'],
template: "#pin-form-template",
mounted: function () {},
methods: {}
}
);


Vue.component(
'light-box',
@@ -435,6 +448,9 @@ var app = new Vue({
);
},
methods: {
showPinForm: function() {

},
onViewPin: function(pin) {
this.currentPin = pin;
},


+ 110
- 109
pinry/templates/base.html Ver fichero

@@ -1,119 +1,120 @@
<!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>
<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 -->

<link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
<!-- 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>

<!-- 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 -->
<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 -->

<!-- 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>
<!-- Messages -->
<ul id="messages"></ul>
<!-- End Messages -->

<body>
<!-- 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 onclick="pinForm()">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 -->
<!-- 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 -->

<!-- Messages -->
<ul id="messages"></ul>
<!-- End Messages -->
<!-- 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 -->

<!-- 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 -->
<div id="app">
{% block yield %}{% endblock %}
</div>
<!-- End Content -->

<!-- Templates -->
{% include 'includes/vue-pin.html' %}
{% include 'includes/lightbox-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>
<!-- 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>

+ 2
- 0
pinry/templates/core/pins.html Ver fichero

@@ -13,4 +13,6 @@
</template>
<light-box v-if="currentPin" :pin="currentPin">
</light-box>
<pin-form>
</pin-form>
{% endblock %}

+ 42
- 0
pinry/templates/includes/pin_form-vue.html Ver fichero

@@ -0,0 +1,42 @@
{% 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="/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="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 %}

Escribir Vista previa
Cargando…
Cancelar
Guardar