CSS and templating, Sith begins to look nice

core/management/commands/populate.py

@@ -117,7 +117,7 @@ Cette page vise à documenter la syntaxe *Markdown* utilisée sur le site.
             p.set_lock(skia)
             p.save()
             with open(os.path.join(root_path)+'/README.md', 'r') as rm:
-                PageRev(page=p, title="REAMDE", author=skia, content=rm.read()).save()
+                PageRev(page=p, title="README", author=skia, content=rm.read()).save()
 
             # Subscription
             ## Skia

core/static/core/base.css

+/*--------------------------------RESET--------------------------------*/
+/*--------------------------------RESET--------------------------------*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

core/static/core/form.css

+/* ----------------------------------------------------------------------------------------------------
+Super Form Reset
+----------------------------------------------------------------------------------------------------*/
+
+input,
+label,
+select,
+button,
+textarea
+{
+    margin: 0;
+    border: 0;
+    padding: 0;
+    display: inline-block;
+    vertical-align: middle;
+    white-space: normal;
+    background: none;
+    line-height: 1;
+
+    /* Browsers have different default form fonts */
+    font-size: 13px;
+    font-family: Arial;
+}
+
+/* Remove the stupid outer glow in Webkit */
+input:focus
+{
+    outline: 0;
+}
+
+/* Box Sizing Reset
+-----------------------------------------------*/
+
+/* All of our custom controls should be what we expect them to be */
+input,
+textarea
+{
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+/* These elements are usually rendered a certain way by the browser */
+button,
+input[type=reset],
+input[type=button],
+input[type=submit],
+input[type=checkbox],
+input[type=radio],
+select
+{
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+/* Text Inputs
+-----------------------------------------------*/
+
+input[type=date],
+input[type=datetime],
+input[type=datetime-local],
+input[type=email],
+input[type=month],
+input[type=number],
+input[type=password],
+input[type=range],
+input[type=search],
+input[type=tel],
+input[type=text],
+input[type=time],
+input[type=url],
+input[type=week]
+{
+    background-color: white;
+    border: 1px solid black;
+    padding: 2px;
+    border-radius: 2px;
+}
+
+/* Button Controls
+-----------------------------------------------*/
+
+input[type=checkbox],
+input[type=radio]
+{
+    width: 13px;
+    height: 13px;
+}
+
+/* File Uploads
+-----------------------------------------------*/
+
+input[type=file]
+{
+
+}
+
+/* Search Input
+-----------------------------------------------*/
+
+/* Make webkit render the search input like a normal text field */
+input[type=search]
+{
+    -webkit-appearance: textfield;
+    -webkit-box-sizing: content-box;
+}
+
+/* Turn off the recent search for webkit. It adds about 15px padding on the left */
+::-webkit-search-decoration
+{
+    display: none;
+}
+
+/* Buttons
+-----------------------------------------------*/
+
+button,
+input[type="reset"],
+input[type="button"],
+input[type="submit"]
+{
+    /* Fix IE7 display bug */
+    overflow: visible;
+    width: auto;
+    cursor: pointer;
+    padding: 3px;
+    border: 1px solid black;
+    border-radius: 2px;
+    background-color: white;
+}
+
+button:hover,
+input[type="reset"]:hover,
+input[type="button"]:hover,
+input[type="submit"]:hover
+{
+    box-shadow: 0 0 2px #000;
+}
+
+button:active,
+input[type="reset"]:active,
+input[type="button"]:active,
+input[type="submit"]:active
+{
+    box-shadow: inset 0 0 2px #000;
+}
+
+/* IE8 and FF freak out if this rule is within another selector */
+::-webkit-file-upload-button
+{
+    padding: 0;
+    border: 0;
+    background: none;
+}
+
+/* Textarea
+-----------------------------------------------*/
+
+textarea
+{
+    /* Move the label to the top */
+    vertical-align: top;
+
+    /* Turn off scroll bars in IE unless needed */
+    overflow: auto;
+}
+
+/* Selects
+-----------------------------------------------*/
+
+select
+{
+
+}
+
+select[multiple]
+{
+    /* Move the label to the top */
+    vertical-align: top;
+}
+
+/* Tables
+-----------------------------------------------*/
+tbody>tr{
+    display: block;
+    margin: 3px;
+}

core/static/core/style.css

-body {
-    background: #EEE;
+/*--------------------------------GENERAL------------------------------*/
+body{
+    background-color:#EEE;
+    position: relative;
+    width: 100%;
+    font-family: sans-serif;
+}
+/*--------------------------------HEADER-------------------------------*/
+#logo {
+    margin-left: 5%;
+}
+header {
+    display: block;
+    position: absolute;
+    top : 0px;
+    right : 8%;
+    left: 40%;
+    background-color:#DDD;
+    height: 3em;
+}
+header a {
+    display: inline-block;
+    color: inherit;
+    text-decoration: none;
+    padding: 1em;
+}
+header a:hover {
+    color: #2D3;
+}
+
+/*---------------------------------NAV---------------------------------*/
+nav {
+    display: block;
+    width: 90%;
+    margin: 0px auto;
+    background: grey;
+    color: white;
+}
+
+nav a {
+    color: white;
+    font-style: normal;
+    font-weight: bolder;
+    text-decoration: none;
+    display: inline-block;
+    padding: 20px;
+}
+nav a:hover {
+    background: purple;
+}
+
+/*--------------------------------CONTENT------------------------------*/
+#content {
+    width: 88%;
+    margin: 0px auto;
+    padding: 1em 1%;
+    background: white;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-weight: bold;
+    margin-top: 0.5em;
+}
+
+h1 {
+    font-size: 160%;
+    margin-left: 50px;
+}
+
+h2 {
+    font-size: 150%;
+    margin-left: 40px;
+}
+
+h3 {
+    font-size: 140%;
+    margin-left: 30px;
+}
+
+h4 {
+    font-size: 130%;
+    margin-left: 20px;
+}
+
+h5 {
+    font-size: 120%;
+    margin-left: 10px;
+}
+
+h6 {
+    font-size: 110%;
+    margin-left: 0px;
+}
+
+p, pre {
+    margin-top: 1em;
+    margin-left: 0px;
+}
+
+ul, ol {
+    margin-top: 1em;
+	list-style-type: disc;
+    margin-left: 25px;
+}
+
+.edit-bar {
+    display: block;
+    margin: 4px;
+}
+.edit-bar a {
+    display: inline-block;
+    margin: 4px;
 }
 
-div {
-    box-shadow: 2px 2px 10px #888888;
+/*-----------------------------USER PROFILE----------------------------*/
+.user_profile {
+}
+/*---------------------------------PAGE--------------------------------*/
+.page_content {
+    display: block;
     margin: 10px;
     padding: 10px;
+    background: white;
+}
+
+.page_content code {
+    font-family: monospace;
+    color: white;
+    background: black;
+    display: inline-block;
+    padding: 4px;
+    line-height: 120%;
+}
+
+/*--------------------------------FOOTER-------------------------------*/
+footer{
+    text-align: center;
+}
+
+/*--------------------------------MODALE-------------------------------*/
+.form-wrapper {
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #DDD;
+    opacity: 0.8;
+    padding: 15px;
+    border-radius: 4px;
+}
+.form-wrapper>form {
+    display: inline-block;
+    position: absolute;
+    padding: 15px;
+    border-radius: 4px;
+    left: 30%;
+    top: 40%;
+    background-color: white;
 }

core/templates/core/base.jinja

@@ -3,6 +3,8 @@
 <head>
     {% block head %}
     <title>{% block title %}Bienvenue sur le Sith de l'AE!{% endblock %}</title>
+    <link rel="stylesheet" href="{{ static('core/base.css') }}">
+    <link rel="stylesheet" href="{{ static('core/form.css') }}">
     <link rel="stylesheet" href="{{ static('core/style.css') }}">
     <script src="{{ static('core/script.js') }}"></script>
     <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
@@ -10,28 +12,24 @@
 </head>
 
 <body>
+    <div id="logo"><a href="{{ url('core:index') }}"><img src="{{ static('core/img/logo.png') }}" alt="Logo" /></a></div>
+    {% block header %}
     <header>
-        {% block header %}
-        {% if user.is_authenticated() %}Hello, {{ user.username }}!{% endif %}
-        <ul>
-            {% if not user.is_authenticated() %}
-            <li><a href="{{ url('core:register') }}">Register</a></li>
-            <li><a href="{{ url('core:login') }}">Login</a></li>
-            {% else %}
-            <li><a href="{{ url('core:logout') }}">Logout</a></li>
-            {% endif %}
-        </ul>
-        {% if user.is_authenticated() %}
-        <ul>
-            <li><a href="{{ url('core:user_profile', user_id=user.id) }}">Profile</a></li>
-            <li><a href="{{ url('core:user_tools') }}">Tools</a></li>
-            <li><a href="{{ url('core:user_list') }}">Users</a></li>
-            <li><a href="{{ url('core:page', page_name="Index") }}">Pages</a></li>
-            <li><a href="{{ url('club:club_list') }}">Clubs</a></li>
-        </ul>
+        {% if not user.is_authenticated() %}
+            <a href="{{ url('core:register') }}">Register</a> |
+            <a href="{{ url('core:login') }}">Login</a>
+        {% else %}
+            <a href="{{ url('core:user_profile', user_id=user.id) }}">{{ user.get_display_name() }}</a> |
+            <a href="{{ url('core:user_tools') }}">Tools</a> |
+            <a href="{{ url('core:logout') }}">Logout</a>
         {% endif %}
-        {% endblock %}
     </header>
+    {% endblock %}
+    <nav>
+        <a href="{{ url('core:user_list') }}">Users</a>
+        <a href="{{ url('core:page', page_name="Index") }}">Pages</a>
+        <a href="{{ url('club:club_list') }}">Clubs</a>
+    </nav>
 
     <div id="content">
         {% if error %}

core/templates/core/page_detail.jinja

@@ -11,13 +11,14 @@
     {% endif %}
     <p>You're seeing the page <strong>{{ page.get_display_name() }}</strong> -
     <a href="{{ url('core:page_hist', page_name=page.get_full_name()) }}">History</a></p>
+    <hr>
     {% if rev %}
         <h4>This may not be the last update, you are seeing revision {{ rev.id }}!</h4>
         <h3>{{ rev.title }}</h3>
-        <p>{{ rev.content|markdown }}</p>
+        <div class="page_content">{{ rev.content|markdown }}</div>
     {% else %}
         <h3>{{ page.revisions.last().title }}</h3>
-        <p>{{ page.revisions.last().content|markdown }}</p>
+        <div class="page_content">{{ page.revisions.last().content|markdown }}</div>
     {% endif %}
 {% endblock %}
 

core/templates/core/user_detail.jinja

@@ -5,24 +5,25 @@
 {% endblock %}
 
 {% block content %}
-<h3>User Profile</h3>
-<p><a href="{{ url('core:user_list') }}">Back to list</a></p>
-
-<ul>
+<div class="edit-bar">
 {% if can_edit(profile, request.user) or user.id == profile.id %}
-    <li><a href="{{ url('core:user_edit', user_id=profile.id) }}">Edit</a></li>
+    <a href="{{ url('core:user_edit', user_id=profile.id) }}">Edit</a>
 {% endif %}
 {% if can_edit_prop(profile, request.user) %}
-    <li><a href="{{ url('core:user_prop', user_id=profile.id) }}">Props</a></li>
+    <a href="{{ url('core:user_prop', user_id=profile.id) }}">Props</a>
 {% endif %}
-</ul>
+</div>
 
-<p>
-You're seeing the profile of <strong>{{ profile.get_full_name() }}</strong><br/>
-<strong>{{ profile.nick_name }}</strong><br/>
-<em>{{ profile.date_of_birth|date("d/m/Y") }}</em>
-</p>
+<h3>User Profile</h3>
+
+<hr>
+<div class="user_profile">
+<h4>{{ profile.get_full_name() }}</h4>
+<p>{{ profile.nick_name }}</p>
+<p>Born: {{ profile.date_of_birth|date("d/m/Y") }}</p>
+</div>
 
+{% if user.membership.filter(end_date=None).exists() %}
 <p>
 {% if get_subscriber(profile).is_subscribed() %}
 User is subscriber until {{ get_subscriber(profile).subscriptions.last().subscription_end }}
@@ -30,6 +31,7 @@ User is subscriber until {{ get_subscriber(profile).subscriptions.last().subscri
 User is not subscribed. <a href="{{ url('subscription:subscription') }}?member={{ profile.id }}">New subscription</a>
 {% endif %}
 </p>
+{% endif %}
 
 {% endblock %}
 

core/templates/core/user_edit.jinja

@@ -7,7 +7,9 @@
         {{ form.as_p() }}
         <p><input type="submit" value="Update" /></p>
     </form>
-    <p><a href="{{ url('core:password_change') }}">Change my password</a></p>
+    {% if form.instance == user %}
+        <p><a href="{{ url('core:password_change') }}">Change my password</a></p>
+    {% endif %}
 {% endblock %}
 
 

core/templates/core/user_tools.jinja

@@ -6,7 +6,6 @@
 
 {% block content %}
 <h3>User Tools</h3>
-<p><a href="{{ url('core:user_profile', user_id=request.user.id) }}">Back to profile</a></p>
 
 <h4>Sith management</h4>
 <ul>

counter/templates/counter/counter_main.jinja

@@ -32,7 +32,7 @@
         <form method="post" action="{{ url('counter:details', counter_id=counter.id) }}">
             {% csrf_token %}
             {{ form.as_p() }}
-        <input type="submit" value="CLICK" />
+            <p><input type="submit" value="VALIDATE" /></p>
         </form>
         {% else %}
         <p>Please, login</p>
@@ -48,7 +48,7 @@
         <form method="post" action="{{ url('counter:login', counter_id=counter.id) }}">
             {% csrf_token %}
             {{ login_form.as_p() }}
-        <input type="submit" value="login" />
+            <p><input type="submit" value="LOGIN" /></p>
         </form>
     </div>
 {% endblock %}