]> git.0d.be Git - earwig.git/commitdiff
add basic front
authorFrédéric Péters <fpeters@0d.be>
Sat, 1 Sep 2018 17:10:31 +0000 (19:10 +0200)
committerFrédéric Péters <fpeters@0d.be>
Sun, 2 Sep 2018 10:12:23 +0000 (12:12 +0200)
earwig/settings.py
earwig/static/css/style.scss [new file with mode: 0644]
earwig/static/js/earwig.js [new file with mode: 0644]
earwig/templates/earwig/base_public.html [new file with mode: 0644]
earwig/templates/earwig/home.html [new file with mode: 0644]
earwig/urls.py
earwig/views.py

index 0d77b998012f75f920da01a84ab920040ef86a9d..845e65b7617c60e2ee1658652f93088f24bbc778 100644 (file)
@@ -38,6 +38,7 @@ INSTALLED_APPS = [
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'gadjo',
+    'sorl.thumbnail',
     'earwig.sounds',
     'earwig.users',
     'earwig.manager',
@@ -56,6 +57,7 @@ MIDDLEWARE = [
 # Serve xstatic files, required for gadjo
 STATICFILES_FINDERS = list(global_settings.STATICFILES_FINDERS) + \
             ['gadjo.finders.XStaticFinder']
+STATICFILES_DIRS = [os.path.join(BASE_DIR, 'earwig', 'static')]
 
 ROOT_URLCONF = 'earwig.urls'
 
@@ -130,6 +132,10 @@ USE_TZ = True
 
 STATIC_URL = '/static/'
 
+# Media files
+MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
+MEDIA_URL = '/media/'
+
 # Login/registration
 LOGIN_REDIRECT_URL = '/'
 
diff --git a/earwig/static/css/style.scss b/earwig/static/css/style.scss
new file mode 100644 (file)
index 0000000..af18100
--- /dev/null
@@ -0,0 +1,50 @@
+html, body {
+       margin: 0;
+       padding: 0;
+       font-family: sans-serif;
+}
+
+audio {
+       width: 100%;
+}
+
+div.tile {
+       background: transparent center center no-repeat;
+       background-size: contain;
+       float: left;
+       position: relative;
+       text-align: center;
+       margin: 1rem;
+       overflow: hidden;
+       a {
+               text-decoration: none;
+               display: block;
+               width: 14vw;
+               height: 14vw;
+               box-sizing: border-box;
+               padding: 1rem;
+               span.channel,
+               span.sound {
+                       background: rgba(0, 0, 50, 0.5);
+                       font-weight: bold;
+                       color: white;
+                       display: block;
+               }
+               span.sound {
+                       background: rgba(0, 0, 50, 0.7);
+                       font-weight: normal;
+                       margin-top: 1rem;
+               }
+               transition: transform 0.2s linear;
+               &:hover {
+                       transform: scale(1.1);
+               }
+       }
+}
+
+form#filter {
+       display: flex;
+       input {
+               flex: 1;
+       }
+}
diff --git a/earwig/static/js/earwig.js b/earwig/static/js/earwig.js
new file mode 100644 (file)
index 0000000..25ec16a
--- /dev/null
@@ -0,0 +1,19 @@
+$(function() {
+  $('#content').delegate('div.tile a', 'click', function() {
+    $('audio').empty();
+    var source = $('<source>', {src: $(this).data('sound-uri')});
+    $('audio').append(source);
+    $('audio')[0].pause();
+    $('audio')[0].load();
+    $('audio')[0].play();
+  });
+  $('#filter').on('submit', function() {
+    $.ajax({
+      url: '/',
+      data: {q: $('#filter input').val()}
+    }).done(function(result) {
+      $('#content').html($(result).find('div.tile'));
+    });
+    return false;
+  });
+});
diff --git a/earwig/templates/earwig/base_public.html b/earwig/templates/earwig/base_public.html
new file mode 100644 (file)
index 0000000..46fd3c5
--- /dev/null
@@ -0,0 +1,14 @@
+{% load static gadjo %}<!DOCTYPE html>
+<html>
+ <head>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css">
+  <script src="{% xstatic 'jquery' 'jquery.min.js' %}"></script>
+  <script src="{% static 'js/earwig.js' %}"></script>
+  <title>Earwig</title>
+ </head>
+ <body>
+ {% block body %}
+ {% endblock %}
+ </body>
+</html>
diff --git a/earwig/templates/earwig/home.html b/earwig/templates/earwig/home.html
new file mode 100644 (file)
index 0000000..7633276
--- /dev/null
@@ -0,0 +1,25 @@
+{% extends "earwig/base_public.html" %}
+{% load i18n %}
+
+{% block body %}
+
+<header>
+<audio controls></audio>
+</header>
+
+<form id="filter">
+<input type="search"> <button>{% trans "Search" %}</button>
+</form>
+
+<div id="content">
+{% for sound in object_list|slice:":50" %}
+<div class="tile" style="background-image: url({% url 'sound-image' pk=sound.pk %})">
+  <a href="#" data-sound-uri="{{ sound.sound_url }}">
+    <span class="channel">{{ sound.channel.title }}</span>
+    <span class="sound">{{ sound.title }}</span>
+  </a>
+</div>
+{% endfor %}
+</div>
+
+{% endblock %}
index dbf91600285547a240f21d2d5a0835e66e997e6b..31b7531f43a3c6a6910bdca06c86c47bebeeedc5 100644 (file)
@@ -1,6 +1,8 @@
 """earwig URL Configuration
 """
+from django.conf import settings
 from django.conf.urls import url, include
+from django.conf.urls.static import static
 from django.contrib import admin
 
 from .urls_utils import decorated_includes, manager_required
@@ -9,8 +11,11 @@ from .manager.urls import urlpatterns as manager_urls
 from . import views
 
 urlpatterns = [
-    url(r'^$', views.redirect_to_manager),
+    url(r'^$', views.homepage),
+    url(r'^sounds/(?P<pk>\d+)/image/$', views.sound_image, name='sound-image'),
     url(r'^admin/', admin.site.urls),
     url(r'^accounts/', include('registration.backends.default.urls')),
     url(r'^manage/', decorated_includes(manager_required, include(manager_urls))),
 ]
+
+urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
index 9efdc39d6d66fe3e3bd6f4862cc7a32e46d4bdfe..0c19e12139d27116eb763947bf18ca97388da1b2 100644 (file)
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-from django.shortcuts import redirect
+from django.db.models import Q
+from django.http import HttpResponseRedirect
+from django.views.generic import ListView, DetailView
 
+from sorl.thumbnail import get_thumbnail
 
-def redirect_to_manager(request):
-    return redirect('earwig-manager-homepage')
+from .sounds.models import Sound
+
+
+class Homepage(ListView):
+    model = Sound
+    template_name = 'earwig/home.html'
+
+    def get_queryset(self):
+        qs = super(Homepage, self).get_queryset().select_related()
+        qs = qs.filter(status='published')
+        query = self.request.GET.get('q')
+        if query:
+            qs = qs.filter(Q(title__icontains=query) |
+                           Q(channel__title__icontains=query))
+        else:
+            qs = qs.order_by('?')  # random selection
+        return qs
+
+homepage = Homepage.as_view()
+
+
+class SoundImage(DetailView):
+    model = Sound
+
+    def get(self, *args, **kwargs):
+        im = get_thumbnail(self.get_object().channel.image_url, '300x300', crop='center')
+        return HttpResponseRedirect(im.url)
+
+sound_image = SoundImage.as_view()