import static & templates for rdio

diff --git a/MANIFEST.in b/MANIFEST.in
index eac17a9bb3484cf1344cdb1f0ea95b81ea64a355..48cd50083d485b90dac45c110adfe95b51d41221 100644 (file)
--- a/MANIFEST.in
+++ b/MANIFEST.in
@@ -3,3 +3,5 @@ include MANIFEST.in
 
 recursive-include chloro/phyll/static *.css *.scss *.js *.json *.png
 recursive-include chloro/phyll/templates *.html
+recursive-include chloro/rdio/static *.css *.scss *.js *.json *.png
+recursive-include chloro/rdio/templates *.html

diff --git a/chloro/rdio/__init__.py b/chloro/rdio/__init__.py
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/chloro/rdio/static/css/6138240034_68f81350a2_o-x.jpg b/chloro/rdio/static/css/6138240034_68f81350a2_o-x.jpg
new file mode 100644 (file)
index 0000000..3b98267
Binary files /dev/null and b/chloro/rdio/static/css/6138240034_68f81350a2_o-x.jpg differ

diff --git a/chloro/rdio/static/css/style.scss b/chloro/rdio/static/css/style.scss
new file mode 100644 (file)
index 0000000..b3fcec8
--- /dev/null
+++ b/chloro/rdio/static/css/style.scss
@@ -0,0 +1,260 @@
+@charset "UTF-8";
+
+$text-color: #222;
+$link-color: #386ede;
+$visited-link-color: #551a8b;
+
+@import "../../../phyll/static/css/_opensans.scss";
+
+body {
+       font-family: "Open Sans", sans-serif;
+       background: url(6138240034_68f81350a2_o-x.jpg) top center no-repeat fixed;
+       background-size: cover;
+       color: $text-color;
+       font-size: 100%;
+}
+
+a {
+       color: $link-color;
+       text-decoration: none;
+       border-bottom: 1px dotted $link-color;
+       &:visited {
+               color: $visited-link-color;
+               border-color: $visited-link-color;
+       }
+       &:hover {
+               border-bottom-style: solid;
+       }
+}
+
+header {
+       display: block;
+       margin: 0 auto;
+       padding: 0 0 0em 0;
+       max-width: 45em;
+       position: relative;
+       z-index: 10;
+       span {
+               font-weight: normal;
+               font-size: 2em;
+               text-transform: uppercase;
+               margin: 0 0 0 1em;
+               padding: 0 0.5em;
+               color: lighten($text-color, 20%);
+               background: #eaeaff;
+               display: inline-block;
+               box-shadow: 0 0 3px 1px #b2987f;
+               a {
+                       border: none;
+               }
+       }
+       transform: rotate(-1deg);
+}
+
+main, footer {
+       position: relative;
+       z-index: 0;
+       margin: 0 auto;
+       padding: 1em;
+       max-width: 45em;
+       @media screen and (max-width: 50em) {
+               margin: 0;
+       }
+}
+
+main {
+       position: relative;
+       background: #fafaff;
+       min-height: 80vh;
+       border: 1px solid #555;
+}
+
+footer {
+       border: 1px solid #555;
+       margin-top: 1em;
+       background: #fafaff;
+       display: flex;
+       justify-content: space-between;
+       p {
+               margin: 0;
+       }
+}
+
+article {
+       h1 {
+               font-size: 1.5em;
+       }
+       h2 {
+               font-size: 1.2em;
+               margin-left: -0.9em;
+               border-left: 0.3em solid #555;
+               padding-left: 0.5em;
+       }
+       a {
+               box-shadow: inset 0 -8px 0 0 rgba(34, 27, 242, 0.1);
+               transition: box-shadow ease 0.2s;;
+               &:hover {
+                       box-shadow: inset 0 -21px 0 0 rgba(34, 27, 242, 0.3);
+               }
+       }
+
+       [contenteditable=true] div.figure {
+               cursor: pointer;
+       }
+       div.figure {
+               text-align: center;
+               line-height: initial;
+               span.empty::before {
+                       min-height: 50px;
+                       margin: 0 auto;
+                       display: block;
+                       width: 90%;
+                       background: #eee;
+                       padding: 1rem;
+                       font-size: 150px;
+                       content: "(image)";
+                       color: #aaa;
+               }
+               img {
+                       max-width: 90%;
+               }
+       }
+       p {
+               line-height: 160%;
+       }
+       code,
+       pre.screen {
+               background: #111;
+               color: white;
+               padding: 2px;
+               overflow: scroll;
+       }
+       div.meta {
+               margin-top: 3em;
+               color: lighten($text-color, 30%);
+       }
+       div.note {
+               background: #fbf7c1 url(yelp-note.png) 5px 10px no-repeat;
+               padding: 0.2em 0.5em 0.2em 2em;
+               p {
+                       margin: 0.5em 0;
+               }
+       }
+       blockquote {
+               background: #eeeefd;
+               padding: 0.1em 1em;
+               clip-path: polygon(0px 0px, 94.27% 2px, 99.63% 2.65%, 98.39% 97.48%, 10% 100%, 0% 100%, 0px 0px);
+       }
+}
+
+.latest-changes {
+       border-top: 1px solid #555;
+       padding-top: 0;
+       h3 {
+               font-weight: normal;
+       }
+       &--date {
+               font-size: 80%;
+               color: lighten($link-color, 10%);
+       }
+}
+
+.inline-style-popup,
+.block-style-popup {
+       background: white;
+       box-shadow: 0 0 5px #666;
+       input {
+               display: none;
+               padding: 3px;
+               border: 1px inset #ccc;
+               background: white;
+               width: 0px;
+               transition: width ease 2s;
+               &.shown {
+                       display: inline-block;
+                       width: 400px;
+               }
+       }
+       button {
+               padding: 0 0.5em;
+               height: 2em;
+               text-align: center;
+               background: #eee;
+               border: 0px;
+               &:hover {
+                       background: #ccc;
+               }
+               &[data-action=createLink] {
+                       color: blue;
+                       text-decoration: underline;
+               }
+               &.on {
+                       background: #444;
+                       color: white;
+               }
+       }
+       &.inline-style-popup button {
+               width: 2em;
+               padding: 0;
+       }
+       &.block-style-popup {
+               &.selected button {
+                       display: none;
+                       &.on {
+                               display: block;
+                       }
+               }
+       }
+}
+
+input#image-upload, input#document-upload {
+       display: none;
+}
+
+#quickedit {
+       position: sticky;
+       bottom: 10px;
+       display: flex;
+       justify-content: flex-end;
+       label {
+               display: inline-block;
+               margin-left: 6px;
+               cursor: pointer;
+       }
+       input {
+               display: none;
+       }
+
+       button,
+       span {
+               display: inline-block;
+               font-weight: normal;
+               background: white;
+               border: 1px solid #386ede;
+               box-shadow: 0 0 0 5px white;
+               padding: 1ex;
+               border-radius: 3px;
+               color: #386ede;
+               font-size: inherit;
+               letter-spacing: inherit;
+               line-height: inherit;
+       }
+       button {
+               &:hover {
+                       color: white;
+                       background: #386ede;
+               }
+       }
+       button.error {
+               background: red;
+               color: white;
+               &:hover {
+                       background: darken(red, 10%);
+               }
+       }
+
+       input:checked + span {
+               background: #386ede;
+               color: white;
+       }
+}

diff --git a/chloro/rdio/static/css/yelp-note.png b/chloro/rdio/static/css/yelp-note.png
new file mode 100644 (file)
index 0000000..6c9a9fe
Binary files /dev/null and b/chloro/rdio/static/css/yelp-note.png differ

diff --git a/chloro/rdio/static/icon.png b/chloro/rdio/static/icon.png
new file mode 100644 (file)
index 0000000..f0ceb37
Binary files /dev/null and b/chloro/rdio/static/icon.png differ

diff --git a/chloro/rdio/templates/phyll/base.html b/chloro/rdio/templates/phyll/base.html
new file mode 100644 (file)
index 0000000..947495e
--- /dev/null
+++ b/chloro/rdio/templates/phyll/base.html
@@ -0,0 +1,36 @@
+{% load gadjo i18n %}<!DOCTYPE html>
+<html lang="{% block html-lang %}fr{% endblock %}">
+  <head>
+    <meta charset="utf-8"/> <!-- 📻 -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block page-title %}rdio.space - gestion radio{% endblock %}</title>
+    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
+    <link rel="shortcut icon" href="/static/icon.png">
+    <link rel="manifest" href="/static/manifest.json">
+    {% if request.user.is_staff %}
+    <script src="{% xstatic 'jquery' 'jquery.min.js' %}"></script>
+    <script src="/static/js/chloro.js"></script>
+    {% endif %}
+    {% block bottom-head %}
+    {% endblock %}
+  </head>
+  <body>
+    <header>
+      <span><a href="/">rdio.space - gestion radio</a></span>
+    </header>
+    <main class="{% block content-class %}{% endblock %}">
+      {% block body %}
+      {% endblock %}
+    </main>
+    <footer>
+      <p>Contact : <a href="mailto:fred@rdio.space">fred@rdio.space</a></p>
+      {% if request.user.is_staff %}
+      <p class="actions">
+        <a href="/new-note/">{% trans "New Page" %}</a>
+        {% block bottom-actions %}
+        {% endblock %}
+      </p>
+      {% endif %}
+    </footer>
+  </body>
+</html>

diff --git a/chloro/rdio/templates/phyll/home.html b/chloro/rdio/templates/phyll/home.html
new file mode 100644 (file)
index 0000000..6e8b605
--- /dev/null
+++ b/chloro/rdio/templates/phyll/home.html
@@ -0,0 +1,27 @@
+{% extends "phyll/base.html" %}
+
+{% block content-class %}home{% endblock %}
+
+{% block body %}
+
+<article>
+<h1>{{ index.title }}</h1>
+{{ index.text|safe }}
+</article>
+
+{% if request.user.is_staff %}<p><a class="button" href="/index/">(page éditable)</a></p>{% endif %}
+
+<div class="latest-changes">
+<h3>Dernières pages modifiées</h3>
+<ul>
+  {% for page in recent_changes|slice:":10" %}
+  <li><a href="{{ page.get_absolute_url }}">{{ page.title }}</a>
+    <span class="latest-changes--date">le {{ page.last_update_timestamp|date:"j E Y, H:i"|lower }}</span></li>
+  {% endfor %}
+</ul>
+</div>
+
+{% endblock %}
+
+{% block bottom-actions %}
+{% endblock %}

diff --git a/chloro/rdio/templates/phyll/note_detail.html b/chloro/rdio/templates/phyll/note_detail.html
new file mode 100644 (file)
index 0000000..9dbd1d7
--- /dev/null
+++ b/chloro/rdio/templates/phyll/note_detail.html
@@ -0,0 +1,28 @@
+{% extends "phyll/base.html" %}
+{% load i18n %}
+
+{% block html-lang %}{{ object.lang }}{% endblock %}
+{% block content-class %}post{% endblock %}
+{% block page-title %}{{ object.title }} - {{ block.super }}{% endblock %}
+
+{% block body %}
+<article>
+<h1>{{ object.title }}</h1>
+<div {% if request.user.is_staff %}data-editable="true"{% endif %}>{{ object.text|safe }}</div>
+{% if request.user.is_staff %}
+{% csrf_token %}
+<div id="quickedit">
+  <label><input type="checkbox"><span>Mode édition</span></label>
+</div>
+{% endif %}
+
+<div class="meta">Dernière modification : {{ object.last_update_timestamp|date:"j E Y, H:i"|lower }}</div>
+</article>
+{% endblock %}
+
+{% block bottom-actions %}
+-
+<a href="edit/">{% trans "Edit" %}</a>
+-
+<a href="delete/">{% trans "Delete" %}</a>
+{% endblock %}