Single quotes

strecklista/templates/strecklista/components/quote.css

@@ -0,0 +1,39 @@
+<style>
+.card {
+  align-items: center;
+  box-shadow: 0 1px 5px 0 rgba(0,0,0,.3);
+  display: flex;
+  flex: 1;
+  margin: 1em .5em;
+  padding: 1em;
+  border-radius: 2px;
+  justify-content: space-between;
+}
+.card.quote {
+  align-items: inherit;
+  flex-direction: column;
+  font-size: 1.2em;
+}
+.quote-text {
+  font-size: 1.2em;
+}
+.quote-meta {
+  font-style: italic;
+  text-align: right;
+}
+.quotee::before {
+  content: '\2014\00a0';
+}
+.detail {
+  color: #555;
+  font-size: .75em;
+}
+#status:not(.alert-success):not(.alert-danger) {
+  display: none;
+}
+
+.quote-link{
+  font-size: .6em;
+}
+
+</style>

strecklista/templates/strecklista/components/quotecard.html

@@ -4,4 +4,7 @@
     <div class="quotee">{{ quote.who }}</div>
     <div class="detail">{{ quote.timestamp }}</div>
   </div>
+  <div class="quote-link">
+    Permanent länk: <a href="{{ request.get_host }}/quote/{{ quote.id }}">{{ request.get_host }}/quote/{{ quote.id }}</a>
+  </div>
 </div>

strecklista/templates/strecklista/quotes.html

@@ -1,39 +1,7 @@
 {% extends 'strecklista/base.html' %}
 {% block content %}
-<style>
-.card {
-  align-items: center;
-  box-shadow: 0 1px 5px 0 rgba(0,0,0,.3);
-  display: flex;
-  flex: 1;
-  margin: 1em .5em;
-  padding: 1em;
-  border-radius: 2px;
-  justify-content: space-between;
-}
-.card.quote {
-  align-items: inherit;
-  flex-direction: column;
-  font-size: 1.2em;
-}
-.quote-text {
-  font-size: 1.2em;
-}
-.quote-meta {
-  font-style: italic;
-  text-align: right;
-}
-.quotee::before {
-  content: '\2014\00a0';
-}
-.detail {
-  color: #555;
-  font-size: .75em;
-}
-#status:not(.alert-success):not(.alert-danger) {
-  display: none;
-}
-</style>
+{% include 'strecklista/components/quote.css' %}
+
 <script>
 $(function() {
   $('#quoteForm').on('submit', function(e) {

strecklista/templates/strecklista/single_quote.html

@@ -0,0 +1,34 @@
+{% extends 'strecklista/base.html' %}
+{% block content %}
+{% include 'strecklista/components/quote.css' %}
+
+<script>
+$(function() {
+  $('#quoteForm').on('submit', function(e) {
+    e.preventDefault();
+    var $form = $(this);
+
+    $.post('/submitQuote/', $form.serialize())
+      .then(function (html) {
+        $('#status').text('Citat sparat!')
+          .addClass('alert-success').removeClass('alert-danger');
+        $('#quoteDiv').prepend(html);
+        $form.find('input[type=text]').val('');
+      }, function (xhr) {
+        $('#status').text(xhr.responseText)
+          .removeClass('alert-success').addClass('alert-danger');
+      });
+  });
+});
+</script>
+{% include "strecklista/snippets/navbar.html" %}
+<div class="container">
+  <h1>Citat</h1>
+
+
+  <div id="quoteDiv">
+      {% include 'strecklista/components/quotecard.html' with quote=quote %}
+  </div>
+  <a href="/quote/">Visa alla citat</a>
+</div>
+{% endblock %}

strecklista/urls.py

@@ -24,7 +24,10 @@
     url(r'^login', views.login, name='login'),
     url(r'^profile/(?P<user_id>[0-9]+)', views.profile, name='profile'),
     url(r'^bulkTransactions/', views.bulkTransactions, name='bulkTransactions'),
+
+    url(r'^quote/(?P<quote_id>[0-9]+)', views.singleQuote, name='singleQuote'),
     url(r'^quote/', views.quote, name='quote'),
+
     url(r'^submitQuote/', views.submitQuote, name='submitQuote'),
 
     url(r'^heddaHopper/', views.heddaHopper, name='heddaHopper'),

strecklista/views.py

@@ -323,6 +323,15 @@ def quote(request):
         'quotes': Quote.objects.order_by('-id'),
     })
 
+@login_required
+def singleQuote(request, quote_id):
+    return render(request, 'strecklista/single_quote.html', {
+        'form': QuoteForm(),
+        'quote': Quote.objects.filter(id=quote_id).first(),
+    })
+
+
+
 
 @login_required
 def product(request):