Design 2.0

Pipfile

@@ -7,6 +7,7 @@ verify_ssl = true
 
 [packages]
 django = "*"
+django-bootstrap4 = "*"
 
 [requires]
 python_version = "3.7"

Pipfile.lock

 {
     "_meta": {
         "hash": {
-            "sha256": "627ef89f247ecee27e9ef0dabe116108d09c47abf171c900a8817befa64f9dd2"
+            "sha256": "2d89fabddb89aa5f1cb3a06bf1fa034476becb0882f11225d5d37564b3cf94eb"
         },
         "pipfile-spec": 6,
         "requires": {
@@ -24,6 +24,13 @@
             "index": "pypi",
             "version": "==2.2.1"
         },
+        "django-bootstrap4": {
+            "hashes": [
+                "sha256:9f115534ae8d052d397201f3d716c10d7c9832b422e44dd7382418c6f274df18"
+            ],
+            "index": "pypi",
+            "version": "==0.0.8"
+        },
         "pytz": {
             "hashes": [
                 "sha256:303879e36b721603cc54604edcac9d20401bdbe31e1e4fdee5b9f98d5d31dfda",

aspava/settings.py

@@ -37,7 +37,8 @@ INSTALLED_APPS = [
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
-    'social'
+    'social',
+    'bootstrap4'
 ]
 
 MIDDLEWARE = [
@@ -85,20 +86,7 @@ DATABASES = {
 # Password validation
 # https://docs.djangoproject.com/en/2.0/ref/settings/#auth-password-validators
 
-AUTH_PASSWORD_VALIDATORS = [
-    {
-        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
-    },
-    {
-        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
-    },
-    {
-        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
-    },
-    {
-        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
-    },
-]
+AUTH_PASSWORD_VALIDATORS = []
 
 
 # Internationalization
@@ -120,6 +108,7 @@ USE_TZ = True
 
 STATIC_URL = '/static/'
 
+
 # Settings
 LOGIN_REDIRECT_URL = '/'
 LOGOUT_REDIRECT_URL = '/'
@@ -128,3 +117,4 @@ AUTH_USER_MODEL = 'social.SocialUser'
 # Extra Settings
 MAX_POST_LENGTH = 144 * 2
 AVATAR = 'http://www.iconarchive.com/download/i106224/papirus-team/papirus-apps/python.ico'
+DESC = "Apparently, this user prefers to keep an air of mystery about them."

aspava/urls.py

@@ -13,10 +13,12 @@ Including another URLconf
     1. Import the include() function: from django.urls import include, path
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
+from django.conf import settings
+from django.conf.urls.static import static
 from django.contrib import admin
 from django.urls import include, path
 
 urlpatterns = [
     path('', include('social.urls')),
     path('admin/', admin.site.urls),
-]
+] + static(settings.STATIC_URL)

social/admin.py

@@ -4,12 +4,13 @@ from django.contrib.auth.admin import UserAdmin
 
 from social.forms import SocialUserChangeForm, SocialUserCreationForm
 from social.models import Link, Post, Snippet, SocialUser
+from django.contrib.auth import get_user_model
 
 
 class SocialUserAdmin(UserAdmin):
     add_form = SocialUserCreationForm
     form = SocialUserChangeForm
-    model = SocialUser
+    model = get_user_model()
     list_display = ["email", "username"]
 
 

social/forms.py

 from django import forms
 from django.contrib.auth.forms import UserChangeForm, UserCreationForm
+from django.contrib.auth import get_user_model
 
 from social.models import SocialUser
 
 
 class SocialUserCreationForm(UserCreationForm):
-    class Meta(UserCreationForm):
-        model = SocialUser
-        fields = ("username", "email")
-
+    class Meta:
+        model = get_user_model()
+        fields = ("username", "email", "avatar")
 
 class SocialUserChangeForm(UserChangeForm):
     class Meta:
-        model = SocialUser
-        fields = ("username", "email")
+        model = get_user_model()
+        fields = ("username", "email", "avatar")

social/migrations/0005_auto_20190506_0252.py

+# Generated by Django 2.2.1 on 2019-05-06 02:52
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('social', '0004_link'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='socialuser',
+            name='desc',
+            field=models.TextField(blank=True),
+        ),
+        migrations.AlterField(
+            model_name='socialuser',
+            name='avatar',
+            field=models.URLField(blank=True),
+        ),
+    ]

social/models.py

@@ -4,7 +4,13 @@ from django.db import models
 
 
 class SocialUser(AbstractUser):
-    avatar = models.URLField(blank=True, default=settings.AVATAR)
+    avatar = models.URLField(blank=True)
+    desc = models.TextField(blank=True)
+    
+    def save(self, *args, **kwargs):
+        self.avatar = settings.AVATAR
+        self.desc = settings.DESC
+        super().save(*args, **kwargs)
 
     @property
     def slug(self):

social/static/css/init.css

+body {
+  padding-top: 5rem;
+}
+
+legend.scheduler-border {
+    width:inherit; /* Or auto */
+    padding:0 10px; /* To give a bit of padding on the left and right */
+    border-bottom:none;
+}
+
+.feeded {
+  padding: 3rem 1.5rem;
+  text-align: center;
+}
+
+.feeddate {
+  position: absolute;
+  top: -0.2em;
+  right: 20px;
+  background: #fff;
+  line-height:1.2em;
+}

social/templates/base.html

-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>{% block title %}Aspava{% endblock %}</title>
-  <style>
-    .col-1 {width: 8.33%;}
-    .col-2 {width: 16.66%;}
-    .col-3 {width: 25%;}
-    .col-4 {width: 33.33%;}
-    .col-5 {width: 41.66%;}
-    .col-6 {width: 50%;}
-    .col-7 {width: 58.33%;}
-    .col-8 {width: 66.66%;}
-    .col-9 {width: 75%;}
-    .col-10 {width: 83.33%;}
-    .col-11 {width: 91.66%;}
-    .col-12 {width: 100%;}
-    
-    .row::after {
-      content: "";
-      clear: both;
-      display: table;
-    }
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="Aspava">
+    <meta name="author" content="Batuhan Taşkaya">
+    <title>{% block title %}Aspava{% endblock %}</title>
+    {% load static %}
+    {% load bootstrap4 %}
+    {% bootstrap_css %}
+    <link href="{% static 'css/init.css' %}" rel="stylesheet">
+    {% block css %}{% endblock %}
+  </head>
 
-    [class*="col-"] {
-      float: left;
-      padding: 15px;
-      border: 1px solid red;
-    }
-  </style>
-  {% block css %}{% endblock %}
-</head>
-<body>
-  <main>
-    {% block content %}
-    {% endblock %}
-  </main>
-  {% block js %}{% endblock %}
-</body>
+  <body>
+
+    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
+      <a class="navbar-brand" href="#">Aspava</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item active">
+            <a class="nav-link" href="{% url 'home' %}">Home</a>
+          </li>
+          {% if user.is_authenticated %}
+          <li class="nav-item">
+            <a class="nav-link" href="#">Post</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="{% url 'logout' %}">Logout</a>
+          </li>
+          {% else %}
+          <li class="nav-item">
+            <a class="nav-link" href="{% url 'login' %}">Login</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="{% url 'register' %}">Register</a>
+          </li>
+          {% endif %}
+        </ul>
+      </div>
+    </nav>
+
+    <main role="main" class="container">
+
+      <div class="feeded">
+        {% block content %}{% endblock %}
+      </div>
+
+    </main>
+    {% bootstrap_javascript jquery='full' %}
+    {% block js %}{% endblock %}
+  </body>
 </html>
+

social/templates/home.html

@@ -6,22 +6,16 @@
           href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
 {% endblock %}
 {% block content %}
-    {% if user.is_authenticated %}
-        Hi {{ user.username }}!
-        <p><a href="{% url 'logout' %}">logout</a></p>
-        {% load renderer %}
-        {% for item in feed %}
-        <div class="{{ item | get_class }}">
-            <fieldset>
-                <legend><a href="{% url 'profile' item.author %}">{{ item.author }}</a></legend>
-                {% as_html item %}
-            </fieldset>
-        </div>
-        {% endfor %}
-    {% else %}
-        <p>You are not logged in</p>
-        <a href="{% url 'login' %}">login</a>
-    {% endif %}
+    {% load renderer %}
+    {% for item in feed %}
+    <div class="container-fluid __{{ item | get_class }}">
+        <fieldset class="border p-2">
+            <legend class="w-auto"><a href="{% url 'profile' item.author %}">{{ item.author }}</a></legend>
+            {% as_html item %}
+            <small class="text-muted">{{ item.pub_date }}</small>
+        </fieldset>
+    </div>
+    {% endfor %}
 {% endblock %}
 {% block js %}
     <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>    

social/templates/registration/login.html

@@ -3,10 +3,13 @@
 {% block title %}Login{% endblock %}
 
 {% block content %}
-<h2>Login</h2>
-<form method="post">
-  {% csrf_token %}
-  {{ form.as_p }}
-  <button type="submit">Login</button>
-</form>
+    {% load bootstrap4 %}
+    <h2>Login</h2>
+    <form action="{% url 'login' %}" method="post" class="form">
+        {% csrf_token %}
+        {% bootstrap_form form %}
+        {% buttons %}
+            <button type="submit" class="btn btn-primary">Submit</button>
+        {% endbuttons %}
+    </form>
 {% endblock %}

social/templates/registration/register.html

@@ -2,11 +2,15 @@
 
 {% block title %}Sign Up{% endblock %}
 
+
 {% block content %}
-  <h2>Sign up</h2>
-  <form method="post">
-    {% csrf_token %}
-    {{ form.as_p }}
-    <button type="submit">Sign up</button>
-  </form>
+    {% load bootstrap4 %}
+    <h2>Sign up</h2>
+    <form action="{% url 'register' %}" method="post" class="form">
+        {% csrf_token %}
+        {% bootstrap_form form %}
+        {% buttons %}
+            <button type="submit" class="btn btn-primary">Submit</button>
+        {% endbuttons %}
+    </form>
 {% endblock %}

social/templates/repr/_basic_feed.html

+<div class="row">
+    <div class="col-3">
+        <img src="{% block img %}{% endblock %}" class="img-thumbnail" alt="{% block alt %}Aspava image{% endblock %}">
+    </div>
+    <div class="col-9">
+        {% block content %}{% endblock %}
+    </div>
+</div>

social/templates/repr/post.html

-<p> {{ item.text }} </p><br>
+{% extends 'repr/_basic_feed.html' %}
+{% block img %}{{ item.author.avatar }}{% endblock %}
+{% block alt %}Profile picture of  {{ item.author }}{% endblock %}
+{% block content %}
+    <p> {{ item.text }} </p><br>
+{% endblock %}

social/templates/repr/snippet.html

-<pre>
-    <code class="python">
+{% extends 'repr/_basic_feed.html' %}
+{% block img %}{{ item.author.avatar }}{% endblock %}
+{% block alt %}Profile picture of  {{ item.author }}{% endblock %}
+{% block content %}
+    <pre>
+        <code class="python">
 {{ item.text }}
-    </code>
-</pre>
-
+        </code>
+    </pre>
+{% endblock %}

social/templates/user/profile.html

 {% extends 'base.html' %}
 {% block title %}Profile{% endblock %}
-{% block css %}
-    <style>
-    .container {
-        width: 100%;
-        height: 200px;
-        margin: auto;
-        padding: 10px;
-    }
-    .avatar {
-        width: 45%;
-        height: 200px;
-        float: left;
-    }
-    .content {
-        margin-left: 45%;
-        height: 200px;
-    }
-    </style>    
-{% endblock %}
 {% block content %}
-<section class="container">
-    <div class="avatar">
-        <img src="{{ object.avatar }}" alt="{{ object.username }}'s Avatar">
-    </div>
-    <div class="content">
-    <h3>{{ object.username }}</h3>
-    <ul>
-        <li>Mail: {{ object.email }}</li>
-    </ul>
+<center>
+    <div class="card d-flex justify-content-center" style="width: 18rem;">
+      <img class="card-img-top" src="{{ user.avatar }}" alt="Card image cap">
+      <div class="card-body">
+        <h5 class="card-title">{{ user.username }}</h5>
+        <p class="card-text">{{ user.desc }}</p>
+      </div>
     </div>
-</section>
+</center>
 {% endblock %}

social/templatetags/renderer.py

-from contextlib import contextmanager
-from html.parser import HTMLParser
-from io import StringIO
-from urllib.request import urlopen
+from urllib.parse import urlparse
 
 from django import template
 from django.template.loader import render_to_string
-from purima.utils.get_preview import get_preview
+from purima.utils.get_preview import get_preview as _get_preview
 
 register = template.Library()
 
@@ -23,4 +20,12 @@ def as_html(item):
     return result
 
 
-register.simple_tag(get_preview)
+@register.simple_tag
+def get_preview(url):
+    try:
+        preview = _get_preview(url)
+    except:
+        _url = urlparse(url)
+        preview = f"<a href='{url}'>URL to {_url.netloc}</a>"
+    
+    return preview

social/urls.py

@@ -14,7 +14,7 @@ class SocialPatterns(PatternManager):
     register = "accounts/register/", Register
 
     includes = {
-        "accounts": IncludeFilter(
+        "accounts/": IncludeFilter(
             "django.contrib.auth.urls", whitelist=("login", "logout")
         )
     }

social/views.py

@@ -7,7 +7,7 @@ from django.views.generic import CreateView, DetailView, ListView
 from django.views.generic.base import TemplateView
 
 from social.models import Link, Post, Snippet
-
+from social.forms import SocialUserCreationForm
 
 class ExtendedListView(ListView):
     def get_queryset(self):
@@ -28,7 +28,7 @@ class Home(ExtendedListView):
 
 
 class Register(CreateView):
-    form_class = UserCreationForm
+    form_class = SocialUserCreationForm
     success_url = reverse_lazy("login")
     template_name = "registration/register.html"