First commit - databasbaserat system snarare än filer

Kvar att göra:
Hantera foton
Putsa på interface

app/templates/admin.html

@@ -0,0 +1,153 @@
+{% extends "base.html" %}
+{% block navbar %}
+{% endblock %}
+{% block styles %}
+{{ super() }}
+<style>
+.just-padding {
+  padding: 15px;
+}
+.list-group.list-group-root {
+  padding: 0;
+  overflow: hidden;
+}
+.list-group.list-group-root .list-group {
+  margin-bottom: 0;
+}
+.list-group.list-group-root .list-group-item {
+  border-radius: 0;
+  border-width: 1px 0 0 0;
+}
+.list-group.list-group-root > .list-group-item:first-child {
+  border-top-width: 0;
+}
+.list-group.list-group-root > .list-group > .list-group-item {
+  padding-left: 30px;
+}
+.list-group.list-group-root > .list-group > .list-group > .list-group-item {
+  padding-left: 45px;
+}
+.list-group.list-group-root > .list-group > .list-group > .list-group > .list-group-item {
+  padding-left: 60px;
+}
+.list-group.list-group-root > .list-group > .list-group > .list-group > .list-group > .list-group-item {
+  padding-left: 75px;
+}
+
+</style>
+{% endblock %}
+
+{% macro delete_button(type, title, id) -%}
+<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deletemodal" data-type="{{type}}" data-id="{{id}}" data-title="{{title}}"><span class="glyphicon glyphicon-remove"></button>
+{%- endmacro %}
+
+{% block content %}
+<div class="modal fade" id="deletemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><!-- Delete modal -->
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4>Är du säker?</h4>
+      </div>
+      <div class="modal-body">
+        <p>Vill du verkligen ta bort sidan?</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Nej</button>
+        <a href="#" class="btn btn-primary">Ja</a>
+      </div>
+    </div>
+  </div>
+</div><!-- Delete modal -->
+
+
+
+<div class="container">
+  <div class="col-md-12">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <h3 class="panel-title"> Sidor </h3>
+      </div>
+      <div class="panel-body">
+        <div class="just-padding">
+          <div class="list-group list-group-root well">
+            {% for page in pages recursive %}
+            <div class="list-group-item">
+              /{{ page.permalink }} - {{ page.title }}
+              <a href="{{url_for('admin_page', id=page.id)}}" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></a>
+              {% if page.endpoint %}
+              {% else %}
+              <a href="{{url_for('admin_newpage', parent=page.id)}}" class="btn btn-success"><span class="glyphicon glyphicon-plus"></a>
+              {% endif %}
+              {% if page.id != 1 %}
+              {% if not page.children %}
+              {{ delete_button('page', page.title, page.id) }}
+              {% endif %}
+              {% endif %}
+            </div>
+            {% if page.children %}
+            <div class="list-group">
+              {{ loop(page.children) }}
+            </div>
+            {% endif %}
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-md-12">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <h3 class="panel-title"> Foton </h3>
+      </div>
+      <div class="panel-body">
+        <div class="panel panel-primary">
+          <div class="panel-body">
+            <form class="form-inline">
+              <div class="form-group">
+                <input type="file">
+              </div>
+              <button type="submit" class="btn btn-default">Ladda upp foto</button>
+            </form>
+          </div>
+        </div>
+        {% for photo in photos %}
+        <div class="col-md-2">
+          <div class="thumbnail">
+            <img src="{{ photo.thumbnail }}" class="img-responsive">
+            <div class="panel-footer">
+              <a class="btn btn-default"><span class="glyphicon glyphicon-pencil"></a>
+              {{ delete_button('photo', photo.alt, photo.id) }}
+            </div>
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+    </div>
+</div>
+{% endblock %}
+
+
+{% block scripts %}
+{{super()}}
+<script>
+$('#deletemodal').on('show.bs.modal', function (event) {
+  var button = $(event.relatedTarget)
+  var type = button.data('type')
+  var id = button.data('id')
+  var title = button.data('title')
+
+  var modal = $(this)
+  if(type == 'page') {
+    var message = 'Vill du verkligen ta bort sidan - ' + title + '?'
+    var href = '/admin/delpage/' + id
+  } else {
+    var message = 'Vill du verkligen ta bort bilden - ' + title + '?'
+    var href = '##'
+  }
+  modal.find('.modal-body p').text(message)
+  modal.find('.modal-footer a').attr('href', href)
+})
+</script>
+{% endblock %}

app/templates/admin_page.html

@@ -0,0 +1,76 @@
+{% extends "base.html" %}
+{% import "bootstrap/wtf.html" as wtf %}
+{% block navbar %}
+{% endblock %}
+
+{% block content %}
+<div class="container">
+  <div class="row">
+    <div class="col-md-6">
+      <div class="panel panel-default">
+        <form class="form-horizontal" method="post" role="form">
+
+          {{ wtf.form_field(form.name, form_type="horizontal") }}
+
+          {{ wtf.form_field(form.title, form_type="horizontal") }}
+
+          <div class="form-group">
+            <label class="control-label col-lg-2" for="description">Beskrivning</label>
+            <div class="col-lg-10">
+              {{ form.description(rows=20, class_="form-control") }}
+            </div>
+          </div>
+
+          {{ wtf.form_field(form.endpoint, form_type="horizontal") }}
+
+          <div class="form-group">
+            <label class="control-label col-lg-2" for="thumbnail">Bild</label>
+            <div class="col-lg-8">
+              {{ form.thumbnail(class_="form-control") }}
+            </div>
+            <div class="col-lg-2">
+              <img src="{{url_for('thumbnail', id=form.thumbnail.data)}}" class="thumbnail img-responsive">
+            </div>
+          </div>
+
+          <div id="gallery-group" class="form-group"{% if not form.endpoint.data %} style="display: none;"{%endif%}>
+            <label class="control-label col-lg-2" for="photos">Galleri</label>
+            <div class="col-lg-10">
+              {{ form.photos }}
+            </div>
+          </div>
+
+          {{ wtf.form_field(form.submit, form_type="horizontal") }}
+
+        </form>
+      </div>
+    </div>
+    <div class="col-md-6">
+      <div class="panel panel-default">
+        <div id="preview" class="panel-body">
+      {{ page.description | markdown }}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+{{super()}}
+  <script>
+$('#endpoint').change(function() {
+  var gallery_group = $('#gallery-group');
+  if(this.checked){
+    gallery_group.show();
+  } else {
+    gallery_group.hide();
+  }
+});
+$('#description').change(function() {
+  $.post("/admin/markdown", {md: $('#description').val()}).done(function(data) {
+    $('#preview').html(data);
+  });
+});
+  </script>
+{% endblock %}

app/templates/base.html

@@ -0,0 +1,45 @@
+{% extends "bootstrap/base.html" %}
+{% block title %} -- Design by Lovén -- {% endblock %}
+{% block styles %}
+{{super()}}
+<style>
+body {
+  font-family: sans-serif;
+}
+.selected img {
+  opacity: 0.5;
+}
+</style>
+{% endblock %}
+{% block navbar %}
+<nav class="navbar navbar-default">
+  <div class="container">
+    <div class="navbar-header col-xs-11">
+      <ol class="breadcrumb">
+        {% for b in page.breadcrumbs %}
+        {% if loop.last %}
+        <li class="active">
+        {% else %}
+        <li>
+        {% endif %}
+          {% if loop.first %}
+          <a href="/"><img src="{{ url_for('static', filename='favicon.ico')}}"></a>
+          {% endif %}
+          {% if loop.last %}
+          {{ b.title }}
+          {% else %}
+          <a href="/{{ b.permalink }}"> {{ b.title }} </a>
+          {% endif %}
+        </li>
+        {% endfor %}
+      </ol>
+    </div>
+    <div class="navbar-header col-xs-1">
+      <ul class="nav navbar-nav">
+        <li><a href="mailto:kontakt@designbyloven.se"><span class="glyphicon glyphicon-envelope"></span></a></li>
+      </ul>
+    </div>
+  </div>
+</nav>
+{% endblock %}
+

app/templates/page.html

@@ -0,0 +1,120 @@
+{% extends "base.html" %}
+{% block content %}
+
+<div class="container">
+
+  <div class="row"> <!-- Content row -->
+    <div class="col-md-6 hidden-xs hidden-sm"> <!-- Slideshow -->
+      <div class="panel panel-default">
+        <div class="panel-body">
+
+          <div id="myCarousel" class="carousel slide" data-ride="carousel">
+            <div class="carousel-inner" role="listbox">
+              {% for p in page.all_photos %}
+              <div class="item {% if loop.index==1 %}active{% endif %}" data-slide-number="{{ loop.index-1 }}">
+                {% if page.endpoint %}
+                <a href="{{ p.url }}" title="{{ p.alt }}">
+                {% else %}
+                <a href="{{ p.page }}" title="{{ p.alt }}">
+                  {% endif %}
+                  <img src=" {{ p.slide }}" class="img-responsive" alt="{{ p.alt }}">
+                </a>
+              </div>
+              {% endfor %}
+            </div>
+          </div>
+        </div>
+
+        {% if page.endpoint %}
+        <div class="panel-footer" id="slider-thumbs">
+          <ul class="list-inline">
+            {% for p in page.all_photos %}
+            <li>
+              <a id="carousel-selector-{{ loop.index-1 }}" class="thumbnail {% if loop.index==1 %}selected{% endif %}" style="width: 100px; height=100px;">
+                <img src="{{ p.thumbnail }}" width=100 height=100 alt="{{ p.alt }}">
+              </a>
+            </li>
+            {% endfor %}
+          </ul>
+        </div>
+        {% endif %}
+      </div>
+    </div> <!-- Slideshow -->
+
+    <div class="col-md-6 col-sm-12"> <!-- Content -->
+      <div class="panel panel-default">
+        <div class="panel-body">
+          <div class="panel-title"> <h2>{{ page.title }}</h2> </div>
+          {{ page.description | markdown }}
+        </div>
+        <div class="panel-footer">
+          {% if page.endpoint %}
+          <a href="mailto:order@designbyloven.se" class="btn btn-default"><span class="glyphicon glyphicon-envelope"></span>&nbsp;Beställ</a>
+          {% endif %}
+        </div>
+      </div>
+    </div> <!-- Content -->
+  </div> <!-- Content row -->
+
+  {% if page.endpoint %}
+  <div class="row"> <!-- Slideshow for small screens -->
+    <div class="col-md-6 visible-xs visible-sm">
+      <div class="well">
+        <ul class="list-inline">
+          {% for p in page.photos %}
+          <li>
+            <a class="thumbnail" style="width:100px; height=100px;" href="{{ p.url }}">
+              <img src="{{ p.thumbnail }}" width=100 height=100 alt="{{ p.alt }}">
+            </a>
+          </li>
+          {% endfor %}
+        </ul>
+      </div>
+    </div>
+  </div> <!-- Slideshow for small screens -->
+  {% else %}
+  <div class="row"> <!-- Subsection list !-->
+  {% for c in page.children %}
+    <div class="col-xs-6 col-md-3">
+      <div class="thumbnail">
+        <div class="caption" style="padding: 0;">
+          <div class="text-center"><a href="{{ c.permalink }}"><h3>{{ c.title }}</h3></a></div>
+        </div>
+        <a href="{{ c.permalink }}"><img src="{{ c.thumbnail.thumbnail }}" class="img-responsive"></a>
+      </div>
+    </div>
+  {% endfor %}
+  </div> <!-- Subsection list -->
+  {% endif %}
+
+
+</div>
+
+
+
+{% endblock %}
+
+{% block scripts %}
+{{super()}}
+<script>
+$('#myCarousel').carousel({
+  interval: 5000
+});
+
+$('[id^=carousel-selector-]').click(function() {
+  var id_selector = $(this).attr("id");
+  var id = id_selector.substr(id_selector.length -1);
+  id = parseInt(id);
+  $('#myCarousel').carousel(id);
+  $('[id^=carousel-selector-]').removeClass('selected');
+  $(this).addClass('selected');
+});
+
+$('#myCarousel').on('slid.bs.carousel', function (e) {
+  var id = $('.item.active').data('slide-number');
+  id = parseInt(id);
+  $('[id^=carousel-selector-]').removeClass('selected');
+  $('[id=carousel-selector-'+id+']').addClass('selected');
+});
+</script>
+{% endblock %}