Mobile revamp

fars/booking/forms.py

@@ -102,8 +102,8 @@ def clean(self):
 
 
 class CustomLoginForm(AuthenticationForm):
-    username = forms.CharField(widget=TextInput(attrs={'class':'validate offset-2 col-8','placeholder': 'Username'}))
-    password = forms.CharField(widget=PasswordInput(attrs={'class':'offset-2 col-8','placeholder':'Password'}))
+    username = forms.CharField(widget=TextInput(attrs={'class':'validate offset-1 col-10 offset-md-3 col-md-6','placeholder': 'Username'}))
+    password = forms.CharField(widget=PasswordInput(attrs={'class':'offset-1 col-10 offset-md-3 col-md-6','placeholder':'Password'}))
 
 
 class RepeatingBookingForm(forms.Form):
@@ -128,6 +128,5 @@ def save_repeating_booking_group(self, booking):
             booking.pk = None
             booking.start += timedelta(days=data.get('frequency'))
             booking.end += timedelta(days=data.get('frequency'))
-
-        return skipped_bookings
 
+        return skipped_bookings

fars/booking/static/css/calendar-theme.css

@@ -47,6 +47,10 @@ html .fc {
 .fc-header td {
   white-space: nowrap; }
 
+.fc-toolbar.fc-header-toolbar {
+  margin-bottom: 0.5em;
+}
+
 .fc-header-toolbar h2 {
   font-size: calc(1em + 1vw);
 }
@@ -72,6 +76,10 @@ html .fc {
 .fc .fc-header-space {
   padding-left: 10px; }
 
+.fc button {
+  height: calc(1em + 1vw);
+}
+
 .fc-header .fc-button {
   margin-bottom: 1em;
   vertical-align: top;
@@ -177,6 +185,10 @@ thead th.fc-last {
     *margin-top: 0;
     *top: -50%; }
 
+.fc-icon {
+  height: 1.23em;
+}
+
 .fc-state-default {
   border-style: solid;
   border-color: #cccccc #bbbbbb #aaaaaa;

fars/booking/static/css/login.css

@@ -1,10 +1,13 @@
 body {
-  background-color: gray;
+  background-color: #eee;
 }
-#loginbox {
-  border-radius: 20px;
-}
-
 #maincontainer {
-  height: 100vh;
+  min-height: 100vh;
+  background-color: white;
+}
+h1 {
+  font-size: 5em;
+}
+h1, h2, h3 {
+  font-weight: 600;
 }

fars/booking/static/js/month.js

@@ -1,17 +1,19 @@
 $(document).ready(function() {
   var calendar = $('#calendar'),
     bookable = calendar.data('bookable'),
+    bookablestr = calendar.data('bookablestr'),
     locale = calendar.data('locale'),
     user = calendar.data('user');
   calendar.fullCalendar({
       height: 'auto',
       aspectRatio: 2,
       // header
       header: {
-        left: 'today prev,next title',
+        left: '',
         center: '',
-        right: ''
+        right: 'title today prev,next'
       },
+      // header: false,
       views: {
         month: {
           titleFormat: 'MMMM YYYY'
@@ -55,6 +57,7 @@ $(document).ready(function() {
               events.push(event);
             });
             callback(events);
+            $('div.fc-left').html(`<h2>${bookablestr}</h2>`);
           }
         });
       }

fars/booking/templates/base.html

@@ -6,7 +6,11 @@
   {% load i18n %}
   {% get_current_language as language_code %}
 
-  <title>{% block title %}FARS{% endblock %}</title>
+  <title>
+    {% block title %}
+      FARS
+    {% endblock %}
+  </title>
   <link rel="shortcut icon" type="image/png" href="{% static "favicon.png" %}"/>
   <!-- For calendar -->
   <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
@@ -24,36 +28,34 @@
   {% block navbar %}
     <!-- NAVBAR -->
     <nav class="navbar navbar-expand-md navbar-light justify-content-between" style="background-color: #eee; margin-bottom: 1em;">
-      <!-- TODO: Make navbar brand a block -->
-      {% if date %} <!-- Day view -->
-        <a href="{% url 'month' bookable=bookable.id_str %}" class="navbar-brand">{{ bookable.name }}</a>
-      {% elif bookable %}<!-- Month view -->
-        <a href="{% url 'home' %}" class="navbar-brand">{{ bookable.name }}</a>
-      {% else %}<!-- Other -->
-        <a href="#" class="navbar-brand">FARS</a>
-      {% endif %}
-      {% if user.is_authenticated %}
-        <span class="nav-item">
-          <span class="navbar-text" id="toolbar-user-name"><a href="{% url 'profile' %}">{{user.get_full_name}}</a></span>
-          <a class="btn btn-outline-danger" id="toolbar-btn" href="{% url 'logout' %}?next={{ request.build_absolute_uri }}">{% trans "Logout" %}</a>
-        </span>
-      {% else %}
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapseContent" aria-controls="collapseContent" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
-        </button>
-        <div id="collapseContent" class="collapse navbar-collapse">
-          <form class="form-inline ml-auto my-3 my-md-0" method="post" action="{% url 'login' %}?next={{ request.build_absolute_uri }}">
+      <a class="navbar-brand" href="{% url 'home' %}">FARS</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapseContent" aria-controls="collapseContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div id="collapseContent" class="collapse navbar-collapse">
+        {% if user.is_authenticated %}
+          <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
+            <li class="nav-item">
+              <span class="navbar-text" id="toolbar-user-name">
+                <a href="{% url 'profile' %}">{{user.get_full_name}}</a>
+              </span>
+            </li>
+            <li class="nav-item">
+              <a class="btn btn-sm btn-outline-danger" id="toolbar-btn" href="{% url 'logout' %}?next={{ request.build_absolute_uri }}">{% trans "Logout" %}</a>
+            </li>
+          </ul>
+        {% else %}
+          <form class="form-inline ml-auto my-2 my-md-1" method="post" action="{% url 'login' %}?next={{ request.build_absolute_uri }}">
             {% csrf_token %}
             <input class="form-control mr-sm-2" id="id_username" name="username" type="text" required placeholder="Username" maxlength="254"/>
             <input class="form-control mr-sm-2" id="id_password" name="password" type="password" required placeholder="Password"/>
-            <button type="submit" class="btn btn-outline-success my-2 my-sm-0">{% trans "Login" %}</button>
+            <button type="submit" class="btn btn-sm btn-outline-success my-2 my-sm-0">{% trans "Login" %}</button>
           </form>
-        </div>
-      {% endif %}
+        {% endif %}
+      </div>
     </nav>
   {% endblock %}
   {% block calendar %}
-
     <!-- BOOKABLES -->
     <div class="container">
       <div class="row justify-content-center">

fars/booking/templates/login.html

@@ -4,28 +4,29 @@
 
 {% block css %}
   <link rel="stylesheet" href="{% static 'css/calendar-theme.css' %}">
-  <link rel="stylesheet" href="{% static 'css/login.css'%}">
+  <link rel="stylesheet" href="{% static 'css/login.css' %}">
 {% endblock %}
 
-{% block navbar %}{% endblock %}
+{% block navbar %}{% endblock %} <!-- Hide navbar -->
 
 {% block calendar %}
   <div id="maincontainer" class="container">
-    <div class="row h-100">
-      <div id="loginbox" class="offset-3 col-6 my-auto py-5 border bg-light">
-        <h1 class="d-flex justify-content-center offset-2 col-8 pb-3">FARS</h1>
-        {% if form.errors %}
-          <p class="offset-2 col-8 text-danger">{% trans "Your username and password didn't match. Please try again." %}</p>
-        {% endif %}
-
-        <form method="post" action="{% url 'login' %}">
-          {% csrf_token %}
-          <div class="form-group">{{ form.username }}</div>
-          <div class="form-group">{{ form.password }}</div>
-          <input class="form-group offset-2 col-8 btn btn-success" type="submit" value="Login">
-          <input type="hidden" name="next" value="{{ next }}">
-        </form>
-      </div>
-    </div>
+    <h1 class="d-flex justify-content-center col-12 py-5">FARS</h1>
+    <hr>
+    <form method="post" action="{% url 'login' %}">
+      {% csrf_token %}
+      <h3 class="offset-1 col-10 offset-md-3 col-md-6 py-3">Login</h3>
+      {% if form.errors %}
+        <p class="offset-1 col-10 offset-md-3 col-md-6 text-danger border border-danger rounded p-2">{% trans "Your username and password didn't match. Please try again." %}</p>
+      {% endif %}
+      <div class="form-group">{{ form.username }}</div>
+      <div class="form-group">{{ form.password }}</div>
+      <input class="form-group offset-8 col-3 offset-md-6 btn btn-outline-success" type="submit" value="Login">
+      <input type="hidden" name="next" value="{{ next }}">
+    </form>
+    <hr>
+    <h2 class="d-flex justify-content-center col-12 py-3">WHAT IS FARS?</h3>
+    <p class="offset-1 col-10 offset-md-3 col-md-6">Reservation system with modifiable bookables and timeslots.</p>
+    <!-- TODO: Write better description -->
   </div>
 {% endblock %}

fars/booking/templates/month.html

@@ -16,7 +16,7 @@
 {% endblock %}
 
 {% block calendar %}
-  <div class="col-md-10 col-sm-12 offset-md-1">
-    <div id="calendar" data-bookable="{{bookable.id_str}}" data-user="{{user.id}}" data-locale="{{language_code}}"></div>
+  <div class="col-12 offset-lg-1 col-lg-10">
+    <div id="calendar" data-bookable="{{ bookable.id_str }}" data-bookablestr="{{ bookable }}" data-user="{{ user.id }}" data-locale="{{ language_code }}"></div>
   </div>
 {% endblock %}

fars/booking/tests.py

@@ -1,3 +1,11 @@
 from django.test import TestCase
-
+from booking.models import *
 # Create your tests here.
+class BookableTestCase(TestCase):
+    def setUp(self):
+        Bookable.objects.create(id_str="bookable1", name="Bookable1", description="A bookable")
+
+    def test_string_representation(self):
+        """Testing that string representation works correctly"""
+        bookable = Bookable.objects.get(id_str="bookable1")
+        self.assertEqual(str(bookable), "Bookable1")