From cf5b06bd8e8d883fb36006c2d5cc1fa49e961b2b Mon Sep 17 00:00:00 2001 From: Felipe Borges Date: Thu, 5 Oct 2017 01:56:28 -0300 Subject: [PATCH 1/6] #12 - Rearranging files and starting patient dashboard. Signed-off-by: Felipe Borges Signed-off-by: Guilherme Marques Moreira da Silva --- .../templates/healthprofessional.html | 4 - .../__init__.py | 0 .../admin.py | 0 .../apps.py | 0 .../migrations/__init__.py | 0 .../models.py | 0 .../templates/healthprofessional.html | 4 + .../tests.py | 0 .../urls.py | 2 +- .../views.py | 0 .../dashboardPatient/__init__.py | 0 .../dashboardPatient/admin.py | 3 + medical_prescription/dashboardPatient/apps.py | 5 + .../dashboardPatient/migrations/__init__.py | 0 .../dashboardPatient/models.py | 3 + .../template/patient_dashboard.html | 0 .../dashboardPatient/tests.py | 3 + .../dashboardPatient/views.py | 3 + .../medical_prescription/settings.py | 14 ++- .../medical_prescription/urls.py | 2 +- .../head.html | 0 .../nav_bar.html | 2 +- .../side_bar.html | 0 .../template.html | 16 +-- .../templates/dashboardPatient/nav_bar.html | 110 ++++++++++++++++++ .../templates/dashboardPatient/side_bar.html | 54 +++++++++ .../templates/dashboardPatient/template.html | 47 ++++++++ medical_prescription/user/views/loginview.py | 2 +- 28 files changed, 253 insertions(+), 21 deletions(-) delete mode 100644 medical_prescription/dashboard/templates/healthprofessional.html rename medical_prescription/{dashboard => dashboardHealthProfessional}/__init__.py (100%) rename medical_prescription/{dashboard => dashboardHealthProfessional}/admin.py (100%) rename medical_prescription/{dashboard => dashboardHealthProfessional}/apps.py (100%) rename medical_prescription/{dashboard => dashboardHealthProfessional}/migrations/__init__.py (100%) rename medical_prescription/{dashboard => dashboardHealthProfessional}/models.py (100%) create mode 100644 medical_prescription/dashboardHealthProfessional/templates/healthprofessional.html rename medical_prescription/{dashboard => dashboardHealthProfessional}/tests.py (100%) rename medical_prescription/{dashboard => dashboardHealthProfessional}/urls.py (70%) rename medical_prescription/{dashboard => dashboardHealthProfessional}/views.py (100%) create mode 100644 medical_prescription/dashboardPatient/__init__.py create mode 100644 medical_prescription/dashboardPatient/admin.py create mode 100644 medical_prescription/dashboardPatient/apps.py create mode 100644 medical_prescription/dashboardPatient/migrations/__init__.py create mode 100644 medical_prescription/dashboardPatient/models.py create mode 100644 medical_prescription/dashboardPatient/template/patient_dashboard.html create mode 100644 medical_prescription/dashboardPatient/tests.py create mode 100644 medical_prescription/dashboardPatient/views.py rename medical_prescription/templates/{healthProfessionalDashboard => dashboard}/head.html (100%) rename medical_prescription/templates/{healthProfessionalDashboard => dashboardHealthProfessional}/nav_bar.html (99%) rename medical_prescription/templates/{healthProfessionalDashboard => dashboardHealthProfessional}/side_bar.html (100%) rename medical_prescription/templates/{healthProfessionalDashboard => dashboardHealthProfessional}/template.html (80%) create mode 100644 medical_prescription/templates/dashboardPatient/nav_bar.html create mode 100644 medical_prescription/templates/dashboardPatient/side_bar.html create mode 100644 medical_prescription/templates/dashboardPatient/template.html diff --git a/medical_prescription/dashboard/templates/healthprofessional.html b/medical_prescription/dashboard/templates/healthprofessional.html deleted file mode 100644 index 71b57810..00000000 --- a/medical_prescription/dashboard/templates/healthprofessional.html +++ /dev/null @@ -1,4 +0,0 @@ -{% extends "healthProfessionalDashboard/template.html" %} {% block content %} {% load staticfiles %} {% load static %} - -

Em breve!

-{%endblock %} \ No newline at end of file diff --git a/medical_prescription/dashboard/__init__.py b/medical_prescription/dashboardHealthProfessional/__init__.py similarity index 100% rename from medical_prescription/dashboard/__init__.py rename to medical_prescription/dashboardHealthProfessional/__init__.py diff --git a/medical_prescription/dashboard/admin.py b/medical_prescription/dashboardHealthProfessional/admin.py similarity index 100% rename from medical_prescription/dashboard/admin.py rename to medical_prescription/dashboardHealthProfessional/admin.py diff --git a/medical_prescription/dashboard/apps.py b/medical_prescription/dashboardHealthProfessional/apps.py similarity index 100% rename from medical_prescription/dashboard/apps.py rename to medical_prescription/dashboardHealthProfessional/apps.py diff --git a/medical_prescription/dashboard/migrations/__init__.py b/medical_prescription/dashboardHealthProfessional/migrations/__init__.py similarity index 100% rename from medical_prescription/dashboard/migrations/__init__.py rename to medical_prescription/dashboardHealthProfessional/migrations/__init__.py diff --git a/medical_prescription/dashboard/models.py b/medical_prescription/dashboardHealthProfessional/models.py similarity index 100% rename from medical_prescription/dashboard/models.py rename to medical_prescription/dashboardHealthProfessional/models.py diff --git a/medical_prescription/dashboardHealthProfessional/templates/healthprofessional.html b/medical_prescription/dashboardHealthProfessional/templates/healthprofessional.html new file mode 100644 index 00000000..675f9f02 --- /dev/null +++ b/medical_prescription/dashboardHealthProfessional/templates/healthprofessional.html @@ -0,0 +1,4 @@ +{% extends "dashboardHealthProfessional/template.html" %} {% block content %} {% load staticfiles %} {% load static %} + +

Em breve!

+{%endblock %} diff --git a/medical_prescription/dashboard/tests.py b/medical_prescription/dashboardHealthProfessional/tests.py similarity index 100% rename from medical_prescription/dashboard/tests.py rename to medical_prescription/dashboardHealthProfessional/tests.py diff --git a/medical_prescription/dashboard/urls.py b/medical_prescription/dashboardHealthProfessional/urls.py similarity index 70% rename from medical_prescription/dashboard/urls.py rename to medical_prescription/dashboardHealthProfessional/urls.py index 67753da9..8d40b47b 100644 --- a/medical_prescription/dashboard/urls.py +++ b/medical_prescription/dashboardHealthProfessional/urls.py @@ -1,6 +1,6 @@ # Django from django.conf.urls import url -from dashboard.views import (home) +from dashboardHealthProfessional.views import (home) urlpatterns = ( diff --git a/medical_prescription/dashboard/views.py b/medical_prescription/dashboardHealthProfessional/views.py similarity index 100% rename from medical_prescription/dashboard/views.py rename to medical_prescription/dashboardHealthProfessional/views.py diff --git a/medical_prescription/dashboardPatient/__init__.py b/medical_prescription/dashboardPatient/__init__.py new file mode 100644 index 00000000..e69de29b diff --git a/medical_prescription/dashboardPatient/admin.py b/medical_prescription/dashboardPatient/admin.py new file mode 100644 index 00000000..8c38f3f3 --- /dev/null +++ b/medical_prescription/dashboardPatient/admin.py @@ -0,0 +1,3 @@ +from django.contrib import admin + +# Register your models here. diff --git a/medical_prescription/dashboardPatient/apps.py b/medical_prescription/dashboardPatient/apps.py new file mode 100644 index 00000000..e9d2a149 --- /dev/null +++ b/medical_prescription/dashboardPatient/apps.py @@ -0,0 +1,5 @@ +from django.apps import AppConfig + + +class PatientDashboardConfig(AppConfig): + name = 'patient_dashboard' diff --git a/medical_prescription/dashboardPatient/migrations/__init__.py b/medical_prescription/dashboardPatient/migrations/__init__.py new file mode 100644 index 00000000..e69de29b diff --git a/medical_prescription/dashboardPatient/models.py b/medical_prescription/dashboardPatient/models.py new file mode 100644 index 00000000..71a83623 --- /dev/null +++ b/medical_prescription/dashboardPatient/models.py @@ -0,0 +1,3 @@ +from django.db import models + +# Create your models here. diff --git a/medical_prescription/dashboardPatient/template/patient_dashboard.html b/medical_prescription/dashboardPatient/template/patient_dashboard.html new file mode 100644 index 00000000..e69de29b diff --git a/medical_prescription/dashboardPatient/tests.py b/medical_prescription/dashboardPatient/tests.py new file mode 100644 index 00000000..7ce503c2 --- /dev/null +++ b/medical_prescription/dashboardPatient/tests.py @@ -0,0 +1,3 @@ +from django.test import TestCase + +# Create your tests here. diff --git a/medical_prescription/dashboardPatient/views.py b/medical_prescription/dashboardPatient/views.py new file mode 100644 index 00000000..91ea44a2 --- /dev/null +++ b/medical_prescription/dashboardPatient/views.py @@ -0,0 +1,3 @@ +from django.shortcuts import render + +# Create your views here. diff --git a/medical_prescription/medical_prescription/settings.py b/medical_prescription/medical_prescription/settings.py index 533492f2..9e57f2b6 100644 --- a/medical_prescription/medical_prescription/settings.py +++ b/medical_prescription/medical_prescription/settings.py @@ -40,7 +40,8 @@ 'django.contrib.staticfiles', 'user', 'landing', - 'dashboard', + 'dashboardPatient', + 'dashboardHealthProfessional', ] # ====== DONT REMOVE -ME @@ -77,7 +78,14 @@ TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', - 'DIRS': [os.path.join(BASE_DIR, 'templates'), 'medical_prescription/templates', 'landing/templates', 'user/templates', 'dashboard/templates'], + 'DIRS': [ + os.path.join(BASE_DIR, 'templates'), + 'medical_prescription/templates', + 'landing/templates', + 'user/templates', + 'dashboardPatient/templates', + 'dashboardHealthProfessional/templates', + ], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': @@ -109,7 +117,7 @@ } elif 'DYNO' in os.environ: default_dburl = 'sqlite:///' + os.path.join(BASE_DIR, 'db.sqlite3') - DATABASES = { 'default': config('DATABASE_URL', default=default_dburl, cast=dburl), } + DATABASES = {'default': config('DATABASE_URL', default=default_dburl, cast=dburl), } else: DATABASES = { 'default': { diff --git a/medical_prescription/medical_prescription/urls.py b/medical_prescription/medical_prescription/urls.py index 4f1ed0ad..2041be62 100644 --- a/medical_prescription/medical_prescription/urls.py +++ b/medical_prescription/medical_prescription/urls.py @@ -5,7 +5,7 @@ urlpatterns = [ url(r'^user/', include('user.urls')), - url(r'^dashboard/', include('dashboard.urls')), + url(r'^dashboardHealthProfessional/', include('dashboardHealthProfessional.urls')), url(r'^admin/', admin.site.urls), url(r'^$', home, name='landing_page'), ] diff --git a/medical_prescription/templates/healthProfessionalDashboard/head.html b/medical_prescription/templates/dashboard/head.html similarity index 100% rename from medical_prescription/templates/healthProfessionalDashboard/head.html rename to medical_prescription/templates/dashboard/head.html diff --git a/medical_prescription/templates/healthProfessionalDashboard/nav_bar.html b/medical_prescription/templates/dashboardHealthProfessional/nav_bar.html similarity index 99% rename from medical_prescription/templates/healthProfessionalDashboard/nav_bar.html rename to medical_prescription/templates/dashboardHealthProfessional/nav_bar.html index e1b0d9e7..fa1a9220 100644 --- a/medical_prescription/templates/healthProfessionalDashboard/nav_bar.html +++ b/medical_prescription/templates/dashboardHealthProfessional/nav_bar.html @@ -107,4 +107,4 @@ - \ No newline at end of file + diff --git a/medical_prescription/templates/healthProfessionalDashboard/side_bar.html b/medical_prescription/templates/dashboardHealthProfessional/side_bar.html similarity index 100% rename from medical_prescription/templates/healthProfessionalDashboard/side_bar.html rename to medical_prescription/templates/dashboardHealthProfessional/side_bar.html diff --git a/medical_prescription/templates/healthProfessionalDashboard/template.html b/medical_prescription/templates/dashboardHealthProfessional/template.html similarity index 80% rename from medical_prescription/templates/healthProfessionalDashboard/template.html rename to medical_prescription/templates/dashboardHealthProfessional/template.html index a124fc5f..4f6c8827 100644 --- a/medical_prescription/templates/healthProfessionalDashboard/template.html +++ b/medical_prescription/templates/dashboardHealthProfessional/template.html @@ -3,22 +3,22 @@ - {% load staticfiles %} {% csrf_token %} {% include "healthProfessionalDashboard/head.html" %} + {% load staticfiles %} {% csrf_token %} {% include "dashboard/head.html" %}
- + - {% include "healthProfessionalDashboard/nav_bar.html" %} + {% include "dashboardHealthProfessional/nav_bar.html" %} - {% include "healthProfessionalDashboard/side_bar.html" %} + {% include "dashboardHealthProfessional/side_bar.html" %}
- +
@@ -42,10 +42,6 @@ - - - - - \ No newline at end of file + diff --git a/medical_prescription/templates/dashboardPatient/nav_bar.html b/medical_prescription/templates/dashboardPatient/nav_bar.html new file mode 100644 index 00000000..fa1a9220 --- /dev/null +++ b/medical_prescription/templates/dashboardPatient/nav_bar.html @@ -0,0 +1,110 @@ +{% load static %} {% load staticfiles %} + + +
+ + + + + + +
diff --git a/medical_prescription/templates/dashboardPatient/side_bar.html b/medical_prescription/templates/dashboardPatient/side_bar.html new file mode 100644 index 00000000..e75017b2 --- /dev/null +++ b/medical_prescription/templates/dashboardPatient/side_bar.html @@ -0,0 +1,54 @@ +{% load static %} {% load staticfiles %} + + + diff --git a/medical_prescription/templates/dashboardPatient/template.html b/medical_prescription/templates/dashboardPatient/template.html new file mode 100644 index 00000000..2497958d --- /dev/null +++ b/medical_prescription/templates/dashboardPatient/template.html @@ -0,0 +1,47 @@ + + + + + + {% load staticfiles %} {% csrf_token %} {% include "dashboard/head.html" %} + + + + +
+ + + {% include "dashboardPatient/nav_bar.html" %} + + + {% include "dashboardPatient/side_bar.html" %} + + +
+ + +
+ + {% block content %} {% endblock %} + +
+ +
+ +
+
+ +{% load static %}{% load staticfiles %} + + + + + + + + + + + + + diff --git a/medical_prescription/user/views/loginview.py b/medical_prescription/user/views/loginview.py index 43116378..7203d048 100644 --- a/medical_prescription/user/views/loginview.py +++ b/medical_prescription/user/views/loginview.py @@ -42,4 +42,4 @@ def post(self, request, *args, **kwargs): def user_authentication(self, request, user): if user.is_active: auth.login(request, user) - return redirect('/dashboard/health_professional') + return redirect('/dashboardHealthProfessional/health_professional') From 2bab34201d8e00f55790400757d835015f9fb608 Mon Sep 17 00:00:00 2001 From: Felipe Borges Date: Thu, 5 Oct 2017 20:09:17 -0300 Subject: [PATCH 2/6] #12 - Creating patient login template and spliting template of health professional login and patient login. Signed-off-by: Felipe Borges --- .../template/patient_dashboard.html | 3 + .../landing/templates/landing.html | 18 +++--- medical_prescription/landing/views.py | 3 +- .../templates/landing/nav_bar.html | 8 +-- ...gin.html => login_healthprofessional.html} | 10 ++-- .../user/templates/login_patient.html | 57 +++++++++++++++++++ .../register_health_professional.html | 8 +-- medical_prescription/user/urls.py | 3 +- medical_prescription/user/views/loginview.py | 13 ++++- 9 files changed, 96 insertions(+), 27 deletions(-) rename medical_prescription/user/templates/{login.html => login_healthprofessional.html} (95%) create mode 100644 medical_prescription/user/templates/login_patient.html diff --git a/medical_prescription/dashboardPatient/template/patient_dashboard.html b/medical_prescription/dashboardPatient/template/patient_dashboard.html index e69de29b..d59604f1 100644 --- a/medical_prescription/dashboardPatient/template/patient_dashboard.html +++ b/medical_prescription/dashboardPatient/template/patient_dashboard.html @@ -0,0 +1,3 @@ +{% extends "dasboardPatient/template.html" %} {% block content %} {% load staticfiles %} {% load static %} +

Em breve!

+{%endblock %} diff --git a/medical_prescription/landing/templates/landing.html b/medical_prescription/landing/templates/landing.html index e8e703b6..17e6b7c7 100644 --- a/medical_prescription/landing/templates/landing.html +++ b/medical_prescription/landing/templates/landing.html @@ -5,7 +5,7 @@
-
+
@@ -15,7 +15,7 @@

Já possui uma conta?

- Logue-se Agora + Logue-se Agora

Não possui?

@@ -25,7 +25,7 @@

@@ -37,12 +37,12 @@

Já possui uma conta?

- Logue-se Agora + Logue-se Agora

Não possui?

Converse com seu médico agora para receber seu convite de acesso!

- +

@@ -150,7 +150,7 @@

Parallax Support

- + - - + +
-{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/medical_prescription/landing/views.py b/medical_prescription/landing/views.py index 8252a0ba..99347dd5 100644 --- a/medical_prescription/landing/views.py +++ b/medical_prescription/landing/views.py @@ -5,5 +5,4 @@ def home(request): - - return render(request, 'landing.html') \ No newline at end of file + return render(request, 'landing.html') diff --git a/medical_prescription/templates/landing/nav_bar.html b/medical_prescription/templates/landing/nav_bar.html index 597df896..9bbd8b22 100644 --- a/medical_prescription/templates/landing/nav_bar.html +++ b/medical_prescription/templates/landing/nav_bar.html @@ -17,7 +17,7 @@
- - +
-
Já possui conta?Faça login agora!
+
Já possui conta?Faça login agora!
diff --git a/medical_prescription/user/urls.py b/medical_prescription/user/urls.py index 2fdab83d..2acc86db 100644 --- a/medical_prescription/user/urls.py +++ b/medical_prescription/user/urls.py @@ -16,7 +16,8 @@ urlpatterns = ( - url(r'^login/$', LoginView.as_view(), name='login'), + url(r'^login_patient/$', LoginView.as_view(), name='login_patient'), + url(r'^login_healthprofessional/$', LoginView.as_view(), name='login_healthprofessional'), url(r'^logout/$', LogoutView.as_view(), name='logout'), url(r'^reset/$', ResetPasswordView.as_view(), name='reset_password'), url(r'^reset_confirm/(?P\w+)/$', ConfirmPasswordView.as_view(), name='confirm_password'), diff --git a/medical_prescription/user/views/loginview.py b/medical_prescription/user/views/loginview.py index 7203d048..94e52c1d 100644 --- a/medical_prescription/user/views/loginview.py +++ b/medical_prescription/user/views/loginview.py @@ -13,12 +13,19 @@ class LoginView(FormView): ''' form_class = UserLoginForm - template_name = 'login.html' + template_name_patient = 'login_patient.html' + template_name_healthProfessional = 'login_healthprofessional.html' + template_name = '' + # TODO(Felipe) Renderizar o template de acordo com o tipo de Usuário # Render the login page. def get(self, request, *args, **kwargs): form = self.form_class(initial=self.initial) - return render(request, self.template_name, {'form': form}) + + if(request.path == '/user/login_healthprofessional/'): + return render(request, self.template_name_healthProfessional, {'form': form}) + else: + return render(request, self.template_name_patient, {'form': form}) # Login user. def post(self, request, *args, **kwargs): @@ -41,5 +48,7 @@ def post(self, request, *args, **kwargs): # Login valid user. def user_authentication(self, request, user): if user.is_active: + + # TODO(Felipe) Redirecionar a página da acordo com o tipo de usuário auth.login(request, user) return redirect('/dashboardHealthProfessional/health_professional') From a1600f033d15f759f36a14c3aad0c0b83992ae3a Mon Sep 17 00:00:00 2001 From: Felipe Borges Date: Fri, 6 Oct 2017 23:09:20 -0300 Subject: [PATCH 3/6] #12 - Redirecting dashboards. Signed-off-by: Felipe Borges Signed-off-by: Guilherme Marques --- .../dashboardPatient/__init__.py | 0 .../dashboardPatient/admin.py | 0 medical_prescription/dashboardPatient/apps.py | 0 .../dashboardPatient/migrations/__init__.py | 0 .../dashboardPatient/models.py | 0 .../template/patient_dashboard.html | 3 +- .../dashboardPatient/tests.py | 0 medical_prescription/dashboardPatient/urls.py | 9 ++ .../dashboardPatient/views.py | 10 +- .../medical_prescription/urls.py | 2 +- .../templates/dashboardPatient/nav_bar.html | 110 ------------------ .../templates/dashboardPatient/side_bar.html | 54 --------- .../templates/dashboardPatient/template.html | 51 ++------ medical_prescription/user/forms.py | 9 +- .../user/test/test_login_view.py | 14 ++- medical_prescription/user/urls.py | 4 +- medical_prescription/user/views/loginview.py | 25 ++-- 17 files changed, 61 insertions(+), 230 deletions(-) mode change 100644 => 100755 medical_prescription/dashboardPatient/__init__.py mode change 100644 => 100755 medical_prescription/dashboardPatient/admin.py mode change 100644 => 100755 medical_prescription/dashboardPatient/apps.py mode change 100644 => 100755 medical_prescription/dashboardPatient/migrations/__init__.py mode change 100644 => 100755 medical_prescription/dashboardPatient/models.py mode change 100644 => 100755 medical_prescription/dashboardPatient/template/patient_dashboard.html mode change 100644 => 100755 medical_prescription/dashboardPatient/tests.py create mode 100755 medical_prescription/dashboardPatient/urls.py mode change 100644 => 100755 medical_prescription/dashboardPatient/views.py delete mode 100644 medical_prescription/templates/dashboardPatient/nav_bar.html delete mode 100644 medical_prescription/templates/dashboardPatient/side_bar.html diff --git a/medical_prescription/dashboardPatient/__init__.py b/medical_prescription/dashboardPatient/__init__.py old mode 100644 new mode 100755 diff --git a/medical_prescription/dashboardPatient/admin.py b/medical_prescription/dashboardPatient/admin.py old mode 100644 new mode 100755 diff --git a/medical_prescription/dashboardPatient/apps.py b/medical_prescription/dashboardPatient/apps.py old mode 100644 new mode 100755 diff --git a/medical_prescription/dashboardPatient/migrations/__init__.py b/medical_prescription/dashboardPatient/migrations/__init__.py old mode 100644 new mode 100755 diff --git a/medical_prescription/dashboardPatient/models.py b/medical_prescription/dashboardPatient/models.py old mode 100644 new mode 100755 diff --git a/medical_prescription/dashboardPatient/template/patient_dashboard.html b/medical_prescription/dashboardPatient/template/patient_dashboard.html old mode 100644 new mode 100755 index d59604f1..f99cc03e --- a/medical_prescription/dashboardPatient/template/patient_dashboard.html +++ b/medical_prescription/dashboardPatient/template/patient_dashboard.html @@ -1,3 +1,4 @@ -{% extends "dasboardPatient/template.html" %} {% block content %} {% load staticfiles %} {% load static %} +{% extends "dashboardPatient/template.html" %} {% block content %} {% load staticfiles %} {% load static %} +

Em breve!

{%endblock %} diff --git a/medical_prescription/dashboardPatient/tests.py b/medical_prescription/dashboardPatient/tests.py old mode 100644 new mode 100755 diff --git a/medical_prescription/dashboardPatient/urls.py b/medical_prescription/dashboardPatient/urls.py new file mode 100755 index 00000000..aec0f261 --- /dev/null +++ b/medical_prescription/dashboardPatient/urls.py @@ -0,0 +1,9 @@ +# Django +from django.conf.urls import url +from dashboardHealthProfessional.views import (home) + + +urlpatterns = ( + url(r'^patient/$', home, name='dashboard_hp'), + +) diff --git a/medical_prescription/dashboardPatient/views.py b/medical_prescription/dashboardPatient/views.py old mode 100644 new mode 100755 index 91ea44a2..776d3c80 --- a/medical_prescription/dashboardPatient/views.py +++ b/medical_prescription/dashboardPatient/views.py @@ -1,3 +1,11 @@ +# -*- coding: utf-8 -*- +from __future__ import unicode_literals + +from django.contrib.auth.decorators import login_required from django.shortcuts import render -# Create your views here. + +@login_required() +def home(request): + + return render(request, 'patient_dashboard.html') diff --git a/medical_prescription/medical_prescription/urls.py b/medical_prescription/medical_prescription/urls.py index 2041be62..359705bf 100644 --- a/medical_prescription/medical_prescription/urls.py +++ b/medical_prescription/medical_prescription/urls.py @@ -5,7 +5,7 @@ urlpatterns = [ url(r'^user/', include('user.urls')), - url(r'^dashboardHealthProfessional/', include('dashboardHealthProfessional.urls')), + url(r'^dashboard/', include('dashboardHealthProfessional.urls')), url(r'^admin/', admin.site.urls), url(r'^$', home, name='landing_page'), ] diff --git a/medical_prescription/templates/dashboardPatient/nav_bar.html b/medical_prescription/templates/dashboardPatient/nav_bar.html deleted file mode 100644 index fa1a9220..00000000 --- a/medical_prescription/templates/dashboardPatient/nav_bar.html +++ /dev/null @@ -1,110 +0,0 @@ -{% load static %} {% load staticfiles %} - - -
- - - - - - -
diff --git a/medical_prescription/templates/dashboardPatient/side_bar.html b/medical_prescription/templates/dashboardPatient/side_bar.html deleted file mode 100644 index e75017b2..00000000 --- a/medical_prescription/templates/dashboardPatient/side_bar.html +++ /dev/null @@ -1,54 +0,0 @@ -{% load static %} {% load staticfiles %} - - - diff --git a/medical_prescription/templates/dashboardPatient/template.html b/medical_prescription/templates/dashboardPatient/template.html index 2497958d..0f3bf759 100644 --- a/medical_prescription/templates/dashboardPatient/template.html +++ b/medical_prescription/templates/dashboardPatient/template.html @@ -1,47 +1,12 @@ - - - {% load staticfiles %} {% csrf_token %} {% include "dashboard/head.html" %} - - - - -
- - - {% include "dashboardPatient/nav_bar.html" %} - - - {% include "dashboardPatient/side_bar.html" %} - - -
- - -
- - {% block content %} {% endblock %} - -
- -
- -
-
- -{% load static %}{% load staticfiles %} - - - - - - - - - - - - + + {% load staticfiles %} {% csrf_token %} {% include "dashboardPatient/head.html" %} + + + + "red", "green", "indigo" ... +// $variation-color-full-name ---> "red", "green-50", "indigo-400" ... +// $variation-color ---> #f44336, #e8f5e9, #5c6bc0 ... +// $variation-color-text ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ... +// + +@mixin generic-variations($component, $selector-suffix, $color-default, $mixin-name, $mdb-param-1) { + + //setup map to pass parameters (instead of the incredibly long-error-prone list for each and every @include) + $args: ( + //extra: $selector-suffix, + //default: $color-default, + mixin-name: $mixin-name, + material-param-1: $mdb-param-1 + ); + + // bootstrap styles + &#{$selector-suffix}, + &#{$component}-default#{$selector-suffix} { + + $args-extra: map-merge($args, ( + variation-color: $white-color, + variation-color-text: $gray + )); + @include call-variations-content-mixin($args-extra); + } + &#{$component}-inverse#{$selector-suffix} { + $args-inverse: map-merge($args, ( + variation-color: #212121, + variation-color-text: #fff + )); + @include call-variations-content-mixin($args-inverse); + } + &#{$component}-primary#{$selector-suffix} { + $args-primary: map-merge($args, ( + variation-color: $brand-primary, + variation-color-text: $mdb-text-color-light + )); + @include call-variations-content-mixin($args-primary); + } + &#{$component}-success#{$selector-suffix} { + $args-success: map-merge($args, ( + variation-color: $brand-success, + variation-color-text: $mdb-text-color-light + )); + @include call-variations-content-mixin($args-success); + } + &#{$component}-info#{$selector-suffix} { + $args-info: map-merge($args, ( + variation-color: $brand-info, + variation-color-text: $mdb-text-color-light + )); + @include call-variations-content-mixin($args-info); + } + &#{$component}-warning#{$selector-suffix} { + $args-warning: map-merge($args, ( + variation-color: $brand-warning, + variation-color-text: $mdb-text-color-light + )); + @include call-variations-content-mixin($args-warning); + } + &#{$component}-danger#{$selector-suffix} { + $args-danger: map-merge($args, ( + variation-color: $brand-danger, + variation-color-text: $mdb-text-color-light + )); + @include call-variations-content-mixin($args-danger); + } + + &#{$component}-rose#{$selector-suffix} { + $args-rose: map-merge($args, ( + variation-color: $brand-rose, + variation-color-text: $mdb-text-color-light + )); + @include call-variations-content-mixin($args-rose); + } + +} + +@mixin transition($time, $type){ + -webkit-transition: all $time $type; + -moz-transition: all $time $type; + -o-transition: all $time $type; + -ms-transition: all $time $type; + transition: all $time $type; +} + +@mixin transform-scale($value){ + -webkit-transform: scale($value); + -moz-transform: scale($value); + -o-transform: scale($value); + -ms-transform: scale($value); + transform: scale($value); +} + +@mixin transform-scale3d($value){ + -webkit-transform: scale3d($value); + -moz-transform: scale3d($value); + -o-transform: scale3d($value); + -ms-transform: scale3d($value); + transform: scale3d($value); +} + +@mixin transform-translate-x($value){ + -webkit-transform: translate3d($value, 0, 0); + -moz-transform: translate3d($value, 0, 0); + -o-transform: translate3d($value, 0, 0); + -ms-transform: translate3d($value, 0, 0); + transform: translate3d($value, 0, 0); +} + +@mixin transform-translate-y($value){ + -webkit-transform: translate3d(0,$value, 0); + -moz-transform: translate3d(0, $value, 0); + -o-transform: translate3d(0, $value, 0); + -ms-transform: translate3d(0, $value, 0); + transform: translate3d(0, $value, 0); +} + +@mixin transform-origin($coordinates){ + -webkit-transform-origin: $coordinates; + -moz-transform-origin: $coordinates; + -o-transform-origin: $coordinates; + -ms-transform-origin: $coordinates; + transform-origin: $coordinates; +} + +@mixin black-filter(){ + background: rgba(0,0,0,.55); + position: absolute; + width: 100%; + height: 100%; + content: ""; + z-index: 0; + left: 0; + top: 0; +} + +@mixin animation($value){ + -webkit-animation: $value; + -moz-animation: $value; + -o-animation: $value; + -ms-animation: $value; + animation: $value; +} + +@mixin radial-gradient($extern-color, $center-color){ + background: $extern-color; + background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */ + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$center-color), color-stop(100%,$extern-color)); /* Chrome,Safari4+ */ + background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Chrome10+,Safari5.1+ */ + background: -o-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Opera 12+ */ + background: -ms-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* IE10+ */ + background: radial-gradient(ellipse at center, $center-color 0%,$extern-color 100%); /* W3C */ + background-size: 550% 450%; +} + +@mixin tag-color ($color){ + .tag{ + background-color: $color; + color: $white-color; + .tagsinput-remove-link{ + color: $white-color; + } + } + .tagsinput-add{ + color: $color; + } +} +@mixin create-colored-tags(){ + &.tag-primary{ + @include tag-color($brand-primary); + } + &.tag-info { + @include tag-color($brand-info); + } + &.tag-success{ + @include tag-color($brand-success); + } + &.tag-warning{ + @include tag-color($brand-warning); + } + &.tag-danger{ + @include tag-color($brand-danger); + } + &.tag-rose{ + @include tag-color($brand-rose); + } +} + +@mixin rotate-180(){ + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +@mixin rotate() { + -webkit-transform: rotate( 45deg ); + -moz-transform: rotate( 45deg ); + -o-transform: rotate( 45deg ); + -ms-transform: rotate(45deg); + transform: rotate( 45deg ); +} + +@mixin linear-gradient($color1, $color2){ + background: $color1; /* For browsers that do not support gradients */ + background: -webkit-linear-gradient(60deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */ + background: -o-linear-gradient(60deg, $color1, $color2); /* For Opera 11.1 to 12.0 */ + background: -moz-linear-gradient(60deg, $color1, $color2); /* For Firefox 3.6 to 15 */ + background: linear-gradient(60deg, $color1 , $color2); /* Standard syntax */ +} + + + +// Mixins for buttons + +@mixin btn-styles($btn-color) { + + // remove this line if you want black shadows + @include shadow-2dp-color($btn-color); + + &, + &:hover, + &:focus, + &:active, + &.active, + &:active:focus, + &:active:hover, + &.active:focus, + &.active:hover, + .open > &.dropdown-toggle, + .open > &.dropdown-toggle:focus, + .open > &.dropdown-toggle:hover { + background-color: $btn-color; + color: $white-color; + } + + &:focus, + &:active, + &:hover{ + // remove this line if you want black shadows + @include button-shadow-color($btn-color); + } + + &.disabled, + &:disabled, + &[disabled], + fieldset[disabled] & { + &, + &:hover, + &:focus, + &.focus, + &:active, + &.active { + box-shadow: none; + } + } + + &.btn-simple{ + background-color: transparent; + color: $btn-color; + box-shadow: none; + + &:hover, + &:focus, + &:active{ + background-color: transparent; + color: $btn-color; + } + } + +} + +// for social buttons +@mixin social-buttons-color ($color){ + background-color: $color; + color: #fff; + @include shadow-2dp-color($color); + + &:focus, + &:active, + &:hover{ + background-color: $color; + color: #fff; + @include button-shadow-color($color); + } + + &.btn-simple{ + color: $color; + background-color: transparent; + box-shadow: none; + } +} diff --git a/medical_prescription/static/dashboard_patient/sass/md/_navbars.scss b/medical_prescription/static/dashboard_patient/sass/md/_navbars.scss new file mode 100644 index 00000000..8a5efc38 --- /dev/null +++ b/medical_prescription/static/dashboard_patient/sass/md/_navbars.scss @@ -0,0 +1,348 @@ +// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. + +.navbar { +// background-color: $brand-primary; + border: 0; + border-radius: $border-radius-base; + // @include shadow-big-navbar(); + + border-bottom: 1px solid #ededf3; + @extend .animation-transition-fast; + + padding: 10px 0; + + .navbar-brand { + position: relative; + height: 50px; + line-height: 30px; + color: inherit; + padding: 10px 15px; + + &:hover, + &:focus { + color: inherit; + background-color: transparent; + } + } + + .navbar-minimize{ + float: left; + padding: 3px 0 0 15px; + } + + .notification{ + position: absolute; + top: 5px; + border: 1px solid #FFF; + right: 10px; + font-size: 9px; + background: #f44336; + color: #FFFFFF; + min-width: 20px; + padding: 0px 5px; + height: 20px; + border-radius: 10px; + text-align: center; + line-height: 19px; + vertical-align: middle; + display: block; + } + + + + .navbar-text { + color: inherit; + margin-top: 15px; + margin-bottom: 15px; + } + + .navbar-nav { + > li > a { + color: inherit; + padding-top: 15px; + padding-bottom: 15px; + + font-weight: $font-weight-default; + font-size: $mdb-btn-font-size-base; + text-transform: uppercase; + + border-radius: $border-radius-base; + + &:hover, + &:focus { + color: inherit; + background-color: transparent; + } + + + .material-icons, + .fa{ + font-size: 20px; + } + + &.btn:not(.btn-just-icon){ + .fa{ + position: relative; + top: 2px; + margin-top: -4px; + margin-right: 4px; + } + } + } + + > li > .dropdown-menu{ + margin-top: -20px; + } + + > li.open > .dropdown-menu{ + margin-top: 0; + } + + > .active > a { + &, + &:hover, + &:focus { + color: inherit; + background-color: rgba(255, 255, 255, 0.1); + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: inherit; + background-color: transparent; + opacity: 0.9; + } + } + .profile-photo{ + padding: 0 5px 0; + .profile-photo-small{ + height: 40px; + width: 40px; + } + } + + } + + // Darken the responsive nav toggle + .navbar-toggle { + border: 0; + &:hover, + &:focus { + background-color: transparent; + } + .icon-bar { + background-color: inherit; + border: 1px solid; + } + } + + .navbar-default .navbar-toggle, + .navbar-inverse .navbar-toggle { + border-color: transparent; + } + + .navbar-collapse, + .navbar-form { + border-top: none; + box-shadow: none; + } + + // Dropdowns + .navbar-nav { + > .open > a { + &, + &:hover, + &:focus { + background-color: transparent; + color: inherit; + } + } + + @media (max-width: $grid-float-breakpoint-max) { + .navbar-text { + color: inherit; + margin-top: 15px; + margin-bottom: 15px; + } + + // Dropdowns get custom display + .open .dropdown-menu { + > .dropdown-header { + border: 0; + color: inherit; + } + .divider { + border-bottom: 1px solid; + opacity: 0.08; + } + > li > a { + color: inherit; + &:hover, + &:focus { + color: inherit; + background-color: transparent; + } + } + > .active > a { + &, + &:hover, + &:focus { + color: inherit; + background-color: transparent; + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: inherit; + background-color: transparent; + } + } + } + } + } + + &.navbar-default{ + .logo-container .brand{ + color: $gray; + } + } + + .navbar-link { + color: inherit; + &:hover { + color: inherit; + } + } + + .btn{ + margin-top: 0; + margin-bottom: 0; + } + .btn-link { + color: inherit; + &:hover, + &:focus { + color: inherit; + } + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus { + color: inherit; + } + } + } + + .navbar-form { + margin: 4px 0 0; + .form-group { + margin: 0; + padding: 0; + + .material-input:before, + &.is-focused .material-input:after { + background-color: inherit; + } + } + + .form-group .form-control, + .form-control { + border-color: inherit; + color: inherit; + padding: 0; + margin: 0; + + // re-normalize inputs in a navbar the size of standard bootstrap since our normal inputs are larger by spec than bootstrap + //--- + //height: $mdb-input-height-base; + $bs-line-height-base: 1.428571429 !default; + $bs-line-height-computed: floor(($font-size-base * $bs-line-height-base)) !default; // ~20px + height: ($bs-line-height-computed + 8px); + font-size: $font-size-base; + line-height: $bs-line-height-base; + //--- + } + } + + + // SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content + @include navbar-variations(unquote(".navbar"), unquote(""), $brand-primary); + + + &-inverse { + background-color: $indigo; + } + + &.navbar-transparent{ + background-color: transparent; + box-shadow: none; + border-bottom: 0; + + .logo-container .brand{ + color: $white-color; + } + } + &-fixed-top{ + border-radius: 0; + } + @media (max-width: $screen-md-max) { + + .navbar-brand { + height: 50px; + padding: 10px 15px; + } +/* + .navbar-form { + margin-top: 10px; + } +*/ + + .navbar-nav > li > a { + padding-top: 15px; + padding-bottom: 15px; + } + } + + .alert{ + border-radius: 0; + left: 0; + position: absolute; + right: 0; + top: 85px; + width: 100%; + z-index: 3; + transition: all 0.3s; + } + +} + +.navbar-fixed{ + position: fixed; + z-index: 1032; + right: 0; + width: 100%; +} + +.nav-align-center{ + text-align: center; + + .nav-pills{ + display: inline-block; + } +} +.navbar-absolute{ + position: absolute; + width: 100%; + padding-top: 10px; + z-index: 1029; +} + +@media (min-width: 991px){ + .navbar-fixed{ + width:calc(100% - 260px); + } +} diff --git a/medical_prescription/static/dashboard_patient/sass/md/_pagination.scss b/medical_prescription/static/dashboard_patient/sass/md/_pagination.scss new file mode 100644 index 00000000..3671d4dd --- /dev/null +++ b/medical_prescription/static/dashboard_patient/sass/md/_pagination.scss @@ -0,0 +1,92 @@ +.pagination{ + > li > a, + > li > span{ + border: 0; + border-radius: 30px !important; + transition: all .3s; + padding: 0px 11px; + margin: 0 3px; + min-width: 30px; + height: 30px; + line-height: 30px; + color: $gray-color; + font-weight: $font-weight-default; + font-size: $mdb-btn-font-size-base; + text-transform: uppercase; + background: transparent; + + &:hover, + &:focus{ + color: $gray-color; + } + } + + > .active > a, + > .active > span{ + color: $gray-color; + text-align: center; + + &, + &:focus, + &:hover{ + background-color: $brand-primary; + border-color: $brand-primary; + color: $white-color; + @include shadow-4dp-color($brand-primary); + } + + } + + // Colors + &.pagination-info{ + > .active > a, + > .active > span{ + &, + &:focus, + &:hover{ + background-color: $brand-info; + border-color: $brand-info; + @include shadow-4dp-color($brand-info); + } + } + } + + &.pagination-success{ + > .active > a, + > .active > span{ + &, + &:focus, + &:hover{ + background-color: $brand-success; + border-color: $brand-success; + @include shadow-4dp-color($brand-success); + } + } + } + + &.pagination-warning{ + > .active > a, + > .active > span{ + &, + &:focus, + &:hover{ + background-color: $brand-warning; + border-color: $brand-warning; + @include shadow-4dp-color($brand-warning); + } + } + } + + &.pagination-danger{ + > .active > a, + > .active > span{ + &, + &:focus, + &:hover{ + background-color: $brand-danger; + border-color: $brand-danger; + @include shadow-4dp-color($brand-danger); + } + } + } +} diff --git a/medical_prescription/static/dashboard_patient/sass/md/_pills.scss b/medical_prescription/static/dashboard_patient/sass/md/_pills.scss new file mode 100644 index 00000000..b9a9926f --- /dev/null +++ b/medical_prescription/static/dashboard_patient/sass/md/_pills.scss @@ -0,0 +1,117 @@ +.nav-pills{ + + .section-dark &, + .section-image &{ + > li > a{ + color: $gray-color; + } + > li{ + > a:hover, + > a:focus{ + background-color: #EEEEEE; + } + } + } + + > li { + > a{ + line-height: $mdb-btn-font-size-base * 2; + text-transform: uppercase; + font-size: $mdb-btn-font-size-base; + font-weight: $font-weight-bold; + min-width: 100px; + text-align: center; + color: $gray; + transition: all .3s; + + &:hover{ + background-color: rgba(200, 200, 200, 0.2); + } + } + + i{ + display: block; + font-size: 30px; + padding: 15px 0; + } + + &.active > a{ + &, + &:focus, + &:hover{ + background-color: $brand-primary; + color: $white-color; + @include shadow-big-color($brand-primary); + } + } + + } + + &:not(.nav-pills-icons){ + > li > a{ + border-radius: $border-radius-extreme; + } + } + + &.nav-stacked{ + > li + li{ + margin-top: 5px; + } + } + + &.nav-pills-info{ + > li { + &.active > a{ + &, + &:focus, + &:hover{ + background-color: $brand-info; + @include shadow-big-color($brand-info); + } + } + } + } + + &.nav-pills-success{ + > li { + &.active > a{ + &, + &:focus, + &:hover{ + background-color: $brand-success; + @include shadow-big-color($brand-success); + } + } + } + } + + &.nav-pills-warning{ + > li { + &.active > a{ + &, + &:focus, + &:hover{ + background-color: $brand-warning; + @include shadow-big-color($brand-warning); + } + } + } + } + + &.nav-pills-danger{ + > li { + &.active > a{ + &, + &:focus, + &:hover{ + background-color: $brand-danger; + @include shadow-big-color($brand-warning); + } + } + } + } + +} +.tab-space{ + padding: 20px 0 50px 0px; +} diff --git a/medical_prescription/static/dashboard_patient/sass/md/_popups.scss b/medical_prescription/static/dashboard_patient/sass/md/_popups.scss new file mode 100644 index 00000000..a73ea0ee --- /dev/null +++ b/medical_prescription/static/dashboard_patient/sass/md/_popups.scss @@ -0,0 +1,77 @@ +// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. + +.popover, .tooltip-inner { + color: $gray; + line-height: 1.5em; + background: $white-color; + border: none; + border-radius: $border-radius-base; + @include shadow-8dp(); +} + +.popover{ + padding: 0; + @include shadow-16dp(); + + &.left, + &.right, + &.top, + &.bottom{ + > .arrow{ + border: none; + } + } +} + +.popover-title{ + background-color: $white-color; + border: none; + padding: 15px 15px 5px; + font-size: $font-size-h4; +} + +.popover-content{ + padding: 10px 15px 15px; + line-height: 1.4; +} + +.tooltip, .tooltip.in { + //opacity: 1; +} +.tooltip.in{ + opacity: 1; + @include transform-translate-y(0px); + + +} +.tooltip{ + opacity: 0; + transition: opacity, transform .2s ease; + @include transform-translate-y(5px); + + &.left{ + .tooltip-arrow{ + border-left-color: $white-color; + } + } + &.right{ + .tooltip-arrow{ + border-right-color: $white-color; + } + } + &.top{ + .tooltip-arrow{ + border-top-color: $white-color; + } + } + &.bottom{ + .tooltip-arrow{ + border-bottom-color: $white-color; + } + } +} + +.tooltip-inner{ + padding: 10px 15px; + min-width: 130px; +} diff --git a/medical_prescription/static/dashboard_patient/sass/md/_radios.scss b/medical_prescription/static/dashboard_patient/sass/md/_radios.scss new file mode 100644 index 00000000..38ae3b6c --- /dev/null +++ b/medical_prescription/static/dashboard_patient/sass/md/_radios.scss @@ -0,0 +1,114 @@ +// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. + +@mixin radio-color($color, $opacity){ + & ~ .check, + & ~ .circle { + opacity: $opacity; + } + + & ~ .check { + background-color: $color; + } + + & ~ .circle { + border-color: $color; + } +} + +.radio { + label { + cursor: pointer; + padding-left: 35px; + position: relative; + color: $mdb-radio-label-color; + @include mdb-label-color-toggle-focus(); + + span { + display: block; + position: absolute; + left: 10px; + top: 2px; + transition-duration: 0.2s; + } + .circle { + border: 1px solid $mdb-radio-color-off; + height: 15px; + width: 15px; + border-radius: 100%; + } + .check { + height: 15px; + width: 15px; + border-radius: 100%; + background-color: $mdb-radio-color-on; + transform: scale3d(0, 0, 0); + } + .check:after { + display: block; + position: absolute; + content: ""; + background-color: $mdb-text-color-primary; + left: -18px; + top: -18px; + height: 50px; + width: 50px; + border-radius: 100%; + z-index: 1; + opacity: 0; + margin: 0; + transform: scale3d(1.5, 1.5, 1); + } + input[type=radio]:not(:checked) ~ .check:after { + animation: rippleOff 500ms; + } + input[type=radio]:checked ~ .check:after { + animation: rippleOn 500ms; + } + + } + + input[type=radio] { + opacity: 0; + height: 0; + width: 0; + overflow: hidden; + + &:checked { + @include radio-color($mdb-radio-color-on, 1); + } + &:checked ~ .check { + transform: scale3d(0.65, 0.65, 1); + } + } + + input[type=radio][disabled] { + + // light theme spec: Disabled: #000000, Opacity 26% + @include radio-color($black, 0.26); + + } +} + +@keyframes rippleOn { + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } +} + +@keyframes rippleOff { + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } +} diff --git a/medical_prescription/static/dashboard_patient/sass/md/_responsive.scss b/medical_prescription/static/dashboard_patient/sass/md/_responsive.scss new file mode 100644 index 00000000..c4930a7b --- /dev/null +++ b/medical_prescription/static/dashboard_patient/sass/md/_responsive.scss @@ -0,0 +1,474 @@ +@media (min-width: 992px){ + .navbar-form { + margin-top: 21px; + margin-bottom: 21px; + padding-left: 5px; + padding-right: 5px; + } + + + .navbar-nav.navbar-right > li > .dropdown-menu:before{ + left: auto; + right: 12px; + } + + .navbar-nav.navbar-right > li > .dropdown-menu:after{ + left: auto; + right: 12px; + } + + .footer:not(.footer-big){ + nav > ul{ + li:first-child{ + margin-left: 0; + } + } + } + + body > .navbar-collapse.collapse{ + display: none !important; + } + + .card{ + form{ + [class*="col-"]{ + padding: 6px; + } + [class*="col-"]:first-child{ + padding-left: 15px; + } + [class*="col-"]:last-child{ + padding-right: 15px; + } + } + } + + .sidebar{ + .navbar-form{ + display: none !important; + } + .nav-mobile-menu{ + display: none; + } + } +} + +/* Changes for small display */ + +@media (max-width: 991px){ + .sidebar{ + display: none; + box-shadow: none; + + .sidebar-wrapper{ + padding-bottom: 60px; + } + + .nav-mobile-menu{ + margin-top: 0; + + .notification{ + float: left; + line-height: 30px; + margin-right: 8px; + } + + .open .dropdown-menu { + position: static; + float: none; + width: auto; + margin-top: 0; + background-color: transparent; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; + } + } + } + + html, + body{ + overflow-x: hidden; + } + + .menu-on-left{ + .nav-open &{ + .main-panel, + .wrapper-full-page, + .navbar-fixed > div{ + @include transform-translate-x(260px); + } + } + + .main-panel{ + position: initial; + } + + .sidebar, + .off-canvas-sidebar{ + left: 0; + right: auto; + @include transform-translate-x(-260px); + } + + #bodyClick{ + left: 260px; + right: auto; + } + } + + .main-panel{ + width: 100%; + } + .navbar-transparent{ + padding-top: 15px; + background-color: rgba(0, 0, 0, 0.45); + } + body, + html{ + position: relative; + overflow-x: hidden; + } + .navbar .container{ + left: 0; + width: 100%; + @include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + position: relative; + } + .navbar .navbar-collapse.collapse, + .navbar .navbar-collapse.collapse.in, + .navbar .navbar-collapse.collapsing{ + display: none !important; + } + + .navbar-nav > li{ + float: none; + position: relative; + display: block; + } + + .sidebar, + .off-canvas-sidebar{ + position: fixed; + display: block; + top: 0; + height: 100vh; + width: 260px; + right: 0; + left: auto; + z-index: 1032; + visibility: visible; + background-color: #9A9A9A; + overflow-y: visible; + border-top: none; + text-align: left; + padding-right: 0px; + padding-left: 0; + + @include transform-translate-x(260px); + @include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + > ul { + position: relative; + z-index: 4; + overflow-y:scroll; + height: calc(100vh - 61px); + width: 100%; + } + &::before{ + top: 0; + left: 0; + height: 100%; + width: 100%; + position: absolute; + background-color: #282828; + display: block; + content: ""; + z-index: 1; + } + + .logo{ + position: relative; + z-index: 4; + } + + .navbar-form{ + margin: 10px 15px; + float: none !important; + padding-top: 1px; + padding-bottom: 1px; + } + + .table-responsive { + width: 100%; + margin-bottom: 15px; + overflow-x: scroll; + overflow-y: hidden; + -ms-overflow-style: -ms-autohiding-scrollbar; + -webkit-overflow-scrolling: touch; + } + } + + .form-group{ + .form-control{ + font-size: 16px; + height: 37px + } + } + + .navbar-form{ + .btn{ + position: absolute; + top: 27px; + right: 15px; + } + } + + .nav-open .navbar-collapse{ + @include transform-translate-x(0px); + } + .nav-open .navbar .container{ + left: -250px; + } + .nav-open .main-panel{ + left: 0; + @include transform-translate-x(-260px); + } + + .nav-open .sidebar{ + @include shadow-big(); + } + + .nav-open{ + .off-canvas-sidebar, + .sidebar{ + @include transform-translate-x(0); + } + } + + .close-layer{ + height: 100%; + width: 100%; + position: absolute; + opacity: 0; + top: 0; + left: auto; + + content: ""; + z-index: 9999; + overflow-x: hidden; + + @include transition($slow-transition-time, $transition-ease-in); + + &.visible{ + opacity: 1; + } + } + + .navbar-toggle .icon-bar { + display: block; + position: relative; + background: #fff; + width: 24px; + height: 2px; + border-radius: 1px; + margin: 0 auto; + } + + .navbar-header .navbar-toggle { + margin: 10px 15px 10px 0; + width: 40px; + height: 40px; + } + .bar1, + .bar2, + .bar3 { + outline: 1px solid transparent; + } + + @-webkit-keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} + } + @-moz-keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} + } + @keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} + } + + .dropdown-menu .divider{ + background-color: rgba(229, 229, 229, 0.15); + } + + .navbar-nav { + margin: 1px 0; + + .open .dropdown-menu > li { + & > a{ + padding: 15px 15px 5px 50px; + } + + &:first-child > a{ + padding: 5px 15px 5px 50px; + } + + &:last-child > a { + padding: 15px 15px 25px 50px; + } + } + } + + [class*="navbar-"] .navbar-nav { + & > li > a, + > li > a:hover, + > li > a:focus, + .active > a, + .active > a:hover, + .active > a:focus, + .open .dropdown-menu > li > a, + .open .dropdown-menu > li > a:hover, + .open .dropdown-menu > li > a:focus, + .navbar-nav .open .dropdown-menu > li > a:active { + color: white; + } + + & > li > a, + > li > a:hover, + > li > a:focus, + .open .dropdown-menu > li > a, + .open .dropdown-menu > li > a:hover, + .open .dropdown-menu > li > a:focus{ + opacity: .7; + background: transparent; + } + + &.navbar-nav .open .dropdown-menu > li > a:active { + opacity: 1; + } + + & .dropdown > a{ + &:hover .caret { + border-bottom-color: #777; + border-top-color: #777; + } + &:active .caret { + border-bottom-color: white; + border-top-color: white; + } + } + + } + + .dropdown-menu { + display: none; + } + .navbar-fixed-top { + -webkit-backface-visibility: hidden; + } + #bodyClick { + height: 100%; + width: 100%; + position: fixed; + opacity: 0; + top: 0; + left: auto; + right: 260px; + content: ""; + z-index: 9999; + overflow-x: hidden; + } + + .social-line .btn{ + margin: $margin-bottom; + } + .subscribe-line .form-control{ + margin: $margin-bottom; + } + .social-line.pull-right{ + float: none; + } + .footer:not(.footer-big) nav > ul li{ + float: none; + } + .social-area.pull-right{ + float: none !important; + } + .form-control + .form-control-feedback{ + margin-top: -8px; + } + .navbar-toggle:hover,.navbar-toggle:focus { + background-color: transparent !important; + } + .btn.dropdown-toggle{ + margin-bottom: 0; + } + .media-post .author{ + width: 20%; + float: none !important; + display: block; + margin: 0 auto 10px; + } + .media-post .media-body{ + width: 100%; + } + + .navbar-collapse.collapse{ + height: 100% !important; + } + .navbar-collapse.collapse.in { + display: block; + } + .navbar-header .collapse, .navbar-toggle { + display:block !important; + } + .navbar-header { + float:none; + } + .navbar-collapse{ + .nav p{ + font-size: $font-size-base; + margin: 0; + } + + [class^="pe-7s-"]{ + float: left; + font-size: 20px; + margin-right: 10px; + } + } +} + +//overwrite table responsive for 768px screens + +@media (min-width: 768px){ + .navbar> .container-fluid .navbar-brand{ + margin-left: 0; + } +} + +@media (max-width: 480px), (max-width: 767px){ + .form-group{ + .form-control{ + width: 83%; + } + } + + .navbar-form{ + .form-group{ + margin-bottom: 0; + } + } +} + +@media (min-width: 992px){ + .table-full-width{ + margin-left: -20px; + margin-right: -20px; + } + .table-responsive{ + overflow: visible; + } + +} diff --git a/medical_prescription/static/dashboard_patient/sass/md/_ripples.scss b/medical_prescription/static/dashboard_patient/sass/md/_ripples.scss new file mode 100644 index 00000000..c305be09 --- /dev/null +++ b/medical_prescription/static/dashboard_patient/sass/md/_ripples.scss @@ -0,0 +1,40 @@ +.withripple { + position: relative; +} +.ripple-container { + position: absolute; + top: 0; + left: 0; + z-index: 1; + width: 100%; + height: 100%; + overflow: hidden; + border-radius: inherit; + pointer-events: none; + + .disabled &{ + display: none; + } +} +.ripple { + position: absolute; + width: 20px; + height: 20px; + margin-left: -10px; + margin-top: -10px; + border-radius: 100%; + background-color: #000; // fallback color + background-color: rgba(0,0,0,0.05); + transform: scale(1); + transform-origin: 50%; + opacity: 0; + pointer-events: none; +} +.ripple.ripple-on { + transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; + opacity: 0.1; +} +.ripple.ripple-out { + transition: opacity 0.1s linear 0s !important; + opacity: 0; +} diff --git a/medical_prescription/static/dashboard_patient/sass/md/_shadows.scss b/medical_prescription/static/dashboard_patient/sass/md/_shadows.scss new file mode 100644 index 00000000..2ac17688 --- /dev/null +++ b/medical_prescription/static/dashboard_patient/sass/md/_shadows.scss @@ -0,0 +1,138 @@ +// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. + +@mixin shadow-z-1(){ + box-shadow: + 0 1px 6px 0 rgba(0, 0, 0, 0.12), + 0 1px 6px 0 rgba(0, 0, 0, 0.12); +} + +@mixin shadow-z-1-hover(){ + box-shadow: + 0 5px 11px 0 rgba(0, 0, 0, 0.18), + 0 4px 15px 0 rgba(0, 0, 0, 0.15); +} + +@mixin shadow-z-2(){ + box-shadow: + 0 8px 17px 0 rgba(0, 0, 0, 0.2), + 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +@mixin shadow-z-3(){ + box-shadow: + 0 12px 15px 0 rgba(0, 0, 0, 0.24), + 0 17px 50px 0 rgba(0, 0, 0, 0.19); +} + +@mixin shadow-z-4(){ + box-shadow: + 0 16px 28px 0 rgba(0, 0, 0, 0.22), + 0 25px 55px 0 rgba(0, 0, 0, 0.21); +} + +@mixin shadow-z-5(){ + box-shadow: + 0 27px 24px 0 rgba(0, 0, 0, 0.2), + 0 40px 77px 0 rgba(0, 0, 0, 0.22); +} + + +/* Shadows (from mdl http://www.getmdl.io/) */ + +// Focus shadow mixin. +@mixin big-shadow(){ + box-shadow: 0 0 8px rgba(0, 0, 0,.18), + 0 8px 16px rgba(0, 0, 0,.36); +} + +@mixin button-shadow-color($color){ + box-shadow: 0 14px 26px -12px rgba($color, $mdb-shadow-key-penumbra-opacity * 3), + 0 4px 23px 0px rgba(0,0,0, $mdb-shadow-ambient-shadow-opacity), + 0 8px 10px -5px rgba($color, $mdb-shadow-key-umbra-opacity); +} + +@mixin shadow-2dp(){ + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity), + 0 3px 1px -2px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity), + 0 1px 5px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity); +} +@mixin shadow-2dp-color($color){ + box-shadow: 0 2px 2px 0 rgba($color, $mdb-shadow-key-penumbra-opacity), + 0 3px 1px -2px rgba($color, $mdb-shadow-key-umbra-opacity), + 0 1px 5px 0 rgba($color, $mdb-shadow-ambient-shadow-opacity); +} + +@mixin shadow-3dp(){ + box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity), + 0 3px 3px -2px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity), + 0 1px 8px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity); +} +@mixin shadow-4dp(){ + box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity), + 0 1px 10px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity), + 0 2px 4px -1px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity); +} +@mixin shadow-4dp-color($color){ + box-shadow: 0 4px 5px 0 rgba($color, $mdb-shadow-key-penumbra-opacity), + 0 1px 10px 0 rgba($color, $mdb-shadow-ambient-shadow-opacity), + 0 2px 4px -1px rgba($color, $mdb-shadow-key-umbra-opacity); +} +@mixin shadow-6dp(){ + box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity), + 0 1px 18px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity), + 0 3px 5px -1px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity); +} +@mixin shadow-8dp(){ + box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity), + 0 3px 14px 2px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity), + 0 5px 5px -3px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity); +} +@mixin shadow-8dp-color($color){ + box-shadow: 0 8px 10px 1px rgba($color, $mdb-shadow-key-penumbra-opacity), + 0 3px 14px 2px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity), + 0 5px 5px -3px rgba($color, $mdb-shadow-key-umbra-opacity); +} + +@mixin shadow-16dp(){ + box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity), + 0 6px 30px 5px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity), + 0 8px 10px -5px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity); +} + +@mixin shadow-16dp-color($color){ + box-shadow: 0 16px 24px 2px rgba($color, $mdb-shadow-key-penumbra-opacity), + 0 6px 30px 5px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity), + 0 8px 10px -5px rgba($color, $mdb-shadow-key-umbra-opacity); +} + +@mixin shadow-24dp(){ + box-shadow: 0 9px 46px 8px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity), + 0 11px 15px -7px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity), + 0 24px 38px 3px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity); +} + +@mixin shadow-big(){ + box-shadow: 0 10px 30px -12px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity * 3), + 0 4px 25px 0px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity), + 0 8px 10px -5px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity); +} + +@mixin shadow-big-navbar(){ + box-shadow: 0 10px 20px -12px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity * 3), + 0 3px 20px 0px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity), + 0 8px 10px -5px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity); +} + +@mixin shadow-big-color($color){ + box-shadow: 0 12px 20px -10px rgba($color, $mdb-shadow-key-penumbra-opacity * 2), + 0 4px 20px 0px rgba(0,0,0, $mdb-shadow-ambient-shadow-opacity), + 0 7px 8px -5px rgba($color, $mdb-shadow-key-umbra-opacity); + +} + +// shadow backup for Sketch/Photoshop +// @mixin shadow-big-color($color){ +// box-shadow: 0 16px 38px -12px rgba($color, $mdb-shadow-key-penumbra-opacity * 4), +// 0 4px 25px 0px rgba($color, $mdb-shadow-ambient-shadow-opacity), +// 0 8px 10px -5px rgba($color, $mdb-shadow-key-umbra-opacity); +// } diff --git a/medical_prescription/static/dashboard_patient/sass/md/_sidebar-and-main-panel.scss b/medical_prescription/static/dashboard_patient/sass/md/_sidebar-and-main-panel.scss new file mode 100644 index 00000000..ac98cb0f --- /dev/null +++ b/medical_prescription/static/dashboard_patient/sass/md/_sidebar-and-main-panel.scss @@ -0,0 +1,293 @@ +.wrapper{ + position: relative; + top: 0; + height: 100vh; +} + +.sidebar, +.off-canvas-sidebar{ + position: fixed; + top: 0; + bottom: 0; + left: 0; + z-index: 1; + @include shadow-big(); + + + .sidebar-wrapper{ + position: relative; + height: calc(100vh - 75px); + overflow: auto; + width: 260px; + z-index: 4; + + .dropdown .dropdown-backdrop{ + display: none !important; + } + + .navbar-form{ + border: none; + } + + .nav{ + + [data-toggle="collapse"] ~ div > ul > li > a{ + padding-left: 60px; + } + + .caret{ + margin-top: 13px; + position: absolute; + right: 18px; + } + } + + } + + .logo-tim{ + border-radius: 50%; + border: 1px solid #333; + display: block; + height: 61px; + width: 61px; + float: left; + overflow: hidden; + + img{ + width: 60px; + height: 60px; + } + } + + + + .nav{ + margin-top: 20px; + + li{ + > a{ + margin: 10px 15px 0; + border-radius: $border-radius-base; + color: $black-color; + @extend .animation-transition-general; + } + + &:first-child > a{ + margin: 0 15px; + } + + &:hover > a{ + background: rgba(200, 200, 200, 0.2); + color: $black-color; + } + + &.active > a{ + color: #FFFFFF; + + i{ + color: #FFFFFF; + } + } + } + + p{ + margin: 0; + line-height: 30px; + font-size: 14px; + // font-weight: 600; + // text-transform: uppercase; + } + + i{ + font-size: 24px; + float: left; + margin-right: 15px; + line-height: 30px; + width: 30px; + text-align: center; + color: #a9afbb; + } + } + + .sidebar-background{ + position: absolute; + z-index: 1; + height: 100%; + width: 100%; + display: block; + top: 0; + left: 0; + background-size: cover; + background-position: center center; + + &:after{ + position: absolute; + z-index: 3; + width: 100%; + height: 100%; + content: ""; + display: block; + background: #FFFFFF; + opacity: .93; + } + } + + .logo{ + position: relative; + padding: $padding-base $padding-base; + z-index: 4; + + &:after{ + content: ''; + position: absolute; + bottom: 0; + right: 10%; + height: 1px; + width: 80%; + background-color: rgba(180,180,180, .3); + + } + + p{ + float: left; + font-size: 20px; + margin: 10px 10px; + color: $white-color; + line-height: 20px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + } + + .simple-text{ + text-transform: uppercase; + padding: $padding-small-vertical $padding-zero; + display: block; + font-size: $font-size-large; + color: $black-color; + text-align: center; + font-weight: $font-weight-default; + line-height: 30px; + } + } + + .logo-tim{ + border-radius: 50%; + border: 1px solid #333; + display: block; + height: 61px; + width: 61px; + float: left; + overflow: hidden; + + img{ + width: 60px; + height: 60px; + } + } + + &:after, + &:before{ + display: block; + content: ""; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 2; + } + + &:before{ + opacity: .33; + // background: #000000; + } + + &:after{ + // @include set-background-color-button($font-background-light-grey, $background-lighter-grey); + z-index: 3; + opacity: 1; + } + + &[data-image]:after, + &.has-image:after{ + opacity: .77; + } + + &[data-color="blue"]{ + @include set-background-color-button($brand-info); + } + &[data-color="green"]{ + @include set-background-color-button($brand-success); + } + &[data-color="orange"]{ + @include set-background-color-button($brand-warning); + } + &[data-color="red"]{ + @include set-background-color-button($brand-danger); + } + &[data-color="purple"]{ + @include set-background-color-button($brand-primary); + } +} + +.off-canvas-sidebar{ + .nav { + > li > a, + > li > a:hover{ + color: $white-color; + } + + > li > a:focus{ + background: rgba(200, 200, 200, 0.2); + } + } +} + +// windows os settings for perfect scrollbar off +.sidebar .sidebar-wrapper, +.main-panel{ + .perfect-scrollbar-on &, + &{ + overflow: hidden; + } +} + +// regular settings for perfect scrollbar off +.perfect-scrollbar-off{ + .sidebar .sidebar-wrapper, + .main-panel{ + overflow: auto; + } +} + + +.main-panel{ + position: relative; + float: right; + width: $sidebar-width; + @include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + max-height: 100%; + + > .content{ + margin-top: 70px; + padding: 30px 15px; + min-height: calc(100% - 123px); + } + + > .footer{ + border-top: 1px solid #e7e7e7; + } + + > .navbar{ + margin-bottom: 0; + } +} +// .sidebar, +// .main-panel{ +// -webkit-transition-property: top,bottom; +// transition-property: top,bottom; +// -webkit-transition-duration: .2s,.2s; +// transition-duration: .2s,.2s; +// -webkit-transition-timing-function: linear,linear; +// transition-timing-function: linear,linear; +// -webkit-overflow-scrolling: touch; +// } diff --git a/medical_prescription/static/dashboard_patient/sass/md/_tables.scss b/medical_prescription/static/dashboard_patient/sass/md/_tables.scss new file mode 100644 index 00000000..fbe5b40f --- /dev/null +++ b/medical_prescription/static/dashboard_patient/sass/md/_tables.scss @@ -0,0 +1,45 @@ +.table{ + > thead > tr > th{ + border-bottom-width: 1px; + font-size: $font-size-h6; + font-weight: $font-weight-light; + } + + .radio, + .checkbox{ + margin-top: 0; + margin-bottom: 0; + margin-left: 10px; + padding: 0; + width: 15px; + + .icons{ + position: relative; + } + } + > thead > tr > th, + > tbody > tr > th, + > tfoot > tr > th, + > thead > tr > td, + > tbody > tr > td, + > tfoot > tr > td{ + padding: 12px 8px; + vertical-align: middle; + } + + > thead > tr > th{ + padding-bottom: 4px; + } + + .td-actions{ + display: flex; + + .btn{ + margin: 0px; + padding: 5px; + } + } + > tbody > tr{ + position: relative; + } +} diff --git a/medical_prescription/static/dashboard_patient/sass/md/_tabs.scss b/medical_prescription/static/dashboard_patient/sass/md/_tabs.scss new file mode 100644 index 00000000..2d1e4606 --- /dev/null +++ b/medical_prescription/static/dashboard_patient/sass/md/_tabs.scss @@ -0,0 +1,53 @@ +// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. + +.nav-tabs { + background: $brand-primary; + border: 0; + border-radius: $border-radius-base; + padding: 0 $padding-base; + + > li { + > a { + color: #FFFFFF; + border: 0; + margin: 0; + + border-radius: $border-radius-base; + + line-height: $mdb-btn-font-size-base * 2; + text-transform: uppercase; + font-size: $mdb-btn-font-size-base; + + &:hover { + background-color: transparent; + border: 0; + } + } + & > a, + & > a:hover, + & > a:focus { + background-color: transparent; + border: 0 !important; + color: #FFFFFF !important; + font-weight: $font-weight-bold; + } + &.disabled > a, + &.disabled > a:hover { + color: rgba(255,255,255,0.5); + } + + .material-icons{ + margin: -1px 5px 0 0; + } + } + + >li.active{ + & > a, + & > a:hover, + & > a:focus { + background-color: rgba(255,255,255, .2); + transition: background-color .1s .2s; + } + } + +} diff --git a/medical_prescription/static/dashboard_patient/sass/md/_togglebutton.scss b/medical_prescription/static/dashboard_patient/sass/md/_togglebutton.scss new file mode 100644 index 00000000..9e676907 --- /dev/null +++ b/medical_prescription/static/dashboard_patient/sass/md/_togglebutton.scss @@ -0,0 +1,87 @@ +// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. + +.togglebutton { + vertical-align: middle; + &, label, input, .toggle { + user-select: none; + } + label { + cursor: pointer; + color: $mdb-toggle-label-color; + @include mdb-label-color-toggle-focus(); + + // Hide original checkbox + input[type=checkbox] { + opacity: 0; + width: 0; + height: 0; + } + + .toggle { + text-align: left; // Issue #737 horizontal form + margin-left: 5px; + } + // Switch bg off and disabled + .toggle, + input[type=checkbox][disabled] + .toggle { + content: ""; + display: inline-block; + width: 30px; + height: 15px; + background-color: rgba(80, 80, 80, 0.7); + border-radius: 15px; + margin-right: 15px; + transition: background 0.3s ease; + vertical-align: middle; + } + // Handle off + .toggle:after { + content: ""; + display: inline-block; + width: 20px; + height: 20px; + background-color: #FFFFFF; + border-radius: 20px; + position: relative; + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4); + left: -5px; + top: -3px; + border: 1px solid $mdb-checkbox-border-color; + transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease; + } + input[type=checkbox] { + // Handle disabled + &[disabled] { + & + .toggle:after, + &:checked + .toggle:after { + background-color: #BDBDBD; + } + } + + & + .toggle:active:after, + &[disabled] + .toggle:active:after { + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1); + } + + // Ripple off and disabled + &:checked + .toggle:after { + left: 15px; + } + } + + // set bg when checked + input[type=checkbox]:checked { + + .toggle { + background-color: rgba($brand-primary, (70/100)); // Switch bg on + } + + + .toggle:after { + border-color: $brand-primary; // Handle on + } + + + .toggle:active:after { + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba($brand-primary, (10/100)); // Ripple on + } + } + } +} diff --git a/medical_prescription/static/dashboard_patient/sass/md/_typography.scss b/medical_prescription/static/dashboard_patient/sass/md/_typography.scss new file mode 100644 index 00000000..c821020e --- /dev/null +++ b/medical_prescription/static/dashboard_patient/sass/md/_typography.scss @@ -0,0 +1,75 @@ +h1, .h1 { + font-size: $font-size-h1; + line-height: 1.15em; +} +h2, .h2{ + font-size: $font-size-h2; +} +h3, .h3{ + font-size: $font-size-h3; + line-height: 1.4em; + margin: 20px 0 10px; +} +h4, .h4{ + font-size: $font-size-h4; + line-height: 1.4em; +} +h5, .h5 { + font-size: $font-size-h5; + line-height: 1.4em; + margin-bottom: 15px; +} +h6, .h6{ + font-size: $font-size-h6; + text-transform: uppercase; + font-weight: $font-weight-bold; +} + +/*.title, +.card-title, +.info-title, +.footer-brand, +.footer-big h5, +.footer-big h4, +.media .media-heading{ + font-weight: $font-weight-extra-bold; + font-family: $font-family-serif; + + &, + a{ + color: $black-color; + text-decoration: none; + } +}*/ + +h2.title{ + margin-bottom: $margin-base * 2; +} + +.description, +.card-description, +.footer-big p{ + color: $gray-light; +} + +.text-warning { + color: $brand-warning; +} +.text-primary { + color: $brand-primary; +} +.text-danger { + color: $brand-danger; +} +.text-success { + color: $brand-success; +} +.text-info { + color: $brand-info; +} +.text-rose{ + color: $brand-rose; +} +.text-gray{ + color: $gray-color; +} diff --git a/medical_prescription/static/dashboard_patient/sass/md/_variables.scss b/medical_prescription/static/dashboard_patient/sass/md/_variables.scss new file mode 100644 index 00000000..d91172d6 --- /dev/null +++ b/medical_prescription/static/dashboard_patient/sass/md/_variables.scss @@ -0,0 +1,1127 @@ +// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. + +@import '_colors'; + +// Typography elements +$mdb-font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !default; +$mdb-text-color-light: $white !default; +$mdb-text-color-light-hex: $white !default; // for contrast function in inverse +$mdb-text-color-primary: unquote("rgba(#{$rgb-black}, 0.87)") !default; +$mdb-text-color-primary-hex: $black !default; // for contrast function in inverse +$icon-color: rgba(0,0,0,0.5) !default; + + +$mdb-label-color: unquote("rgba(#{$rgb-black}, 0.26)") !default; +$mdb-label-color-toggle-focus: unquote("rgba(#{$rgb-black}, .54)") !default; + + +//--- +// Converted bs variables + +// Bootstrap brand color customization +$white-color: #FFFFFF !default; + +$white-transparent: rgba($white-color, .8); + +$gray-color: #999999 !default; + +$brand-primary: $purple !default; +$brand-success: $green !default; +$brand-danger: $red !default; +$brand-warning: $orange !default; +$brand-info: $cyan !default; +$brand-rose: $pink !default; + +$border-radius-base: 3px !default; +$border-radius-small: 2px !default; +$border-radius-large: 6px !default; +$border-radius-huge: 10px !default; +$border-radius-label: 12px !default; +$border-radius-extreme: 30px !default; + +// Typography +$font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif !default; +$font-family-serif: 'Roboto Slab', 'Times New Roman', serif !default; + +$headings-font-weight: 300 !default; + +$font-weight-light: 300 !default; +$font-weight-default: 400 !default; +$font-weight-bold: 500 !default; +$font-weight-extra-bold: 700 !default; +$font-weight-ultra-bold: 900 !default; + +$body-bg: #EEEEEE !default; +//--- + +// import bs variables for sass, first declared wins. +$bootstrap-sass-asset-helper: false !default; +// +// Variables +// -------------------------------------------------- + + +//== Colors +// +//## Gray and brand colors for use across Bootstrap. + +$gray-base: #000 !default; +$gray-darker: lighten($gray-base, 13.5%) !default; // #222 +$gray-dark: lighten($gray-base, 20%) !default; // #333 +$gray: lighten($gray-base, 33.5%) !default; // #555 +$gray-light: #999999 !default; // #999999 +$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee + +$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7 +$brand-success: #5cb85c !default; +$brand-info: #5bc0de !default; +$brand-warning: #f0ad4e !default; +$brand-danger: #d9534f !default; + +$black-color: #3C4858 !default; + + +//== Scaffolding +// +//## Settings for some of the most global styles. + +//** Background color for ``. +$body-bg: #fff !default; +//** Global text color on ``. +$text-color: $gray-dark !default; + +//** Global textual link color. +$link-color: $brand-primary !default; +//** Link hover color set via `darken()` function. +$link-hover-color: darken($link-color, 15%) !default; +//** Link hover decoration. +$link-hover-decoration: underline !default; + + +//== Typography +// +//## Font, line-height, and color for body text, headings, and more. + +$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; +$font-family-serif: Georgia, "Times New Roman", Times, serif !default; +//** Default monospace fonts for ``, ``, and `
`.
+$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
+$font-family-base:        $font-family-sans-serif !default;
+
+$font-size-base:          14px !default;
+$font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
+$font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px
+
+$font-size-h1:                 3.8em !default;
+$font-size-h2:                 2.6em !default;
+$font-size-h3:                 1.825em !default;
+$font-size-h4:                 1.3em !default;
+$font-size-h5:                 1.25em !default;
+$font-size-h6:                 1em !default;
+$font-paragraph:               16px !default;
+$font-size-navbar:             16px !default;
+$font-size-small:              12px !default;
+
+//** Unit-less `line-height` for use in components like buttons.
+$line-height-base:        1.428571429 !default; // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+$line-height-computed:    floor(($font-size-base * $line-height-base)) !default; // ~20px
+
+//** By default, this inherits from the ``.
+$headings-font-family:    inherit !default;
+$headings-font-weight:    500 !default;
+$headings-line-height:    1.1 !default;
+$headings-color:          inherit !default;
+
+
+//== Iconography
+//
+//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
+
+//** Load fonts from this directory.
+
+// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
+// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
+$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
+
+//** File name for all font files.
+$icon-font-name:          "glyphicons-halflings-regular" !default;
+//** Element ID within SVG icon file.
+$icon-font-svg-id:        "glyphicons_halflingsregular" !default;
+
+
+//== Components
+//
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+
+$padding-base:              15px !default;
+$margin-base:               15px !default;
+
+$padding-base-vertical:     6px !default;
+$padding-base-horizontal:   12px !default;
+
+$padding-large-vertical:    10px !default;
+$padding-large-horizontal:  16px !default;
+
+$padding-small-vertical:    5px !default;
+$padding-small-horizontal:  10px !default;
+
+$padding-xs-vertical:       1px !default;
+$padding-xs-horizontal:     5px !default;
+
+$line-height-large:         1.3333333 !default; // extra decimals for Win 8.1 Chrome
+$line-height-small:         1.5 !default;
+
+$border-radius-base:        4px !default;
+$border-radius-large:       6px !default;
+$border-radius-small:       3px !default;
+
+//** Global color for active items (e.g., navs or dropdowns).
+$component-active-color:    #fff !default;
+//** Global background color for active items (e.g., navs or dropdowns).
+$component-active-bg:       $brand-primary !default;
+
+//** Width of the `border` for generating carets that indicator dropdowns.
+$caret-width-base:          4px !default;
+//** Carets increase slightly in size for larger components.
+$caret-width-large:         5px !default;
+
+
+//== Tables
+//
+//## Customizes the `.table` component with basic values, each used across all table variations.
+
+//** Padding for ``s and ``s.
+$table-cell-padding:            8px !default;
+//** Padding for cells in `.table-condensed`.
+$table-condensed-cell-padding:  5px !default;
+
+//** Default background color used for all tables.
+$table-bg:                      transparent !default;
+//** Background color used for `.table-striped`.
+$table-bg-accent:               #f9f9f9 !default;
+//** Background color used for `.table-hover`.
+$table-bg-hover:                #f5f5f5 !default;
+$table-bg-active:               $table-bg-hover !default;
+
+//** Border color for table and cell borders.
+$table-border-color:            #ddd !default;
+
+
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+$btn-font-weight:                normal !default;
+
+$btn-default-color:              #333 !default;
+$btn-default-bg:                 #fff !default;
+$btn-default-border:             #ccc !default;
+
+$btn-primary-color:              #fff !default;
+$btn-primary-bg:                 $brand-primary !default;
+$btn-primary-border:             darken($btn-primary-bg, 5%) !default;
+
+$btn-success-color:              #fff !default;
+$btn-success-bg:                 $brand-success !default;
+$btn-success-border:             darken($btn-success-bg, 5%) !default;
+
+$btn-info-color:                 #fff !default;
+$btn-info-bg:                    $brand-info !default;
+$btn-info-border:                darken($btn-info-bg, 5%) !default;
+
+$btn-warning-color:              #fff !default;
+$btn-warning-bg:                 $brand-warning !default;
+$btn-warning-border:             darken($btn-warning-bg, 5%) !default;
+
+$btn-danger-color:               #fff !default;
+$btn-danger-bg:                  $brand-danger !default;
+$btn-danger-border:              darken($btn-danger-bg, 5%) !default;
+
+$btn-link-disabled-color:        $gray-light !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius-base:         $border-radius-base !default;
+$btn-border-radius-large:        $border-radius-large !default;
+$btn-border-radius-small:        $border-radius-small !default;
+
+
+//== Forms
+//
+//##
+
+//** `` background color
+$input-bg:                       #fff !default;
+//** `` background color
+$input-bg-disabled:              $gray-lighter !default;
+
+//** Text color for ``s
+$input-color:                    $gray !default;
+//** `` border color
+$input-border:                   #ccc !default;
+
+// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
+//** Default `.form-control` border radius
+// This has no effect on ``s in CSS.
+$input-border-radius:            $border-radius-base !default;
+//** Large `.form-control` border radius
+$input-border-radius-large:      $border-radius-large !default;
+//** Small `.form-control` border radius
+$input-border-radius-small:      $border-radius-small !default;
+
+//** Border color for inputs on focus
+$input-border-focus:             #66afe9 !default;
+
+//** Placeholder text color
+$input-color-placeholder:        #999 !default;
+
+//** Default `.form-control` height
+$input-height-base:              ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
+//** Large `.form-control` height
+$input-height-large:             (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
+//** Small `.form-control` height
+$input-height-small:             (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
+
+//** `.form-group` margin
+$form-group-margin-bottom:       15px !default;
+
+$legend-color:                   $gray-dark !default;
+$legend-border-color:            #e5e5e5 !default;
+
+//** Background color for textual input addons
+$input-group-addon-bg:           $gray-lighter !default;
+//** Border color for textual input addons
+$input-group-addon-border-color: $input-border !default;
+
+//** Disabled cursor for form controls and buttons.
+$cursor-disabled:                not-allowed !default;
+
+
+//== Dropdowns
+//
+//## Dropdown menu container and contents.
+
+//** Background for the dropdown menu.
+$dropdown-bg:                    #fff !default;
+//** Dropdown menu `border-color`.
+$dropdown-border:                rgba(0,0,0,.15) !default;
+//** Dropdown menu `border-color` **for IE8**.
+$dropdown-fallback-border:       #ccc !default;
+//** Divider color for between dropdown items.
+$dropdown-divider-bg:            #e5e5e5 !default;
+
+//** Dropdown link text color.
+$dropdown-link-color:            $gray-dark !default;
+//** Hover color for dropdown links.
+$dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
+//** Hover background for dropdown links.
+$dropdown-link-hover-bg:         #f5f5f5 !default;
+
+//** Active dropdown menu item text color.
+$dropdown-link-active-color:     $component-active-color !default;
+//** Active dropdown menu item background color.
+$dropdown-link-active-bg:        $component-active-bg !default;
+
+//** Disabled dropdown menu item background color.
+$dropdown-link-disabled-color:   $gray-light !default;
+
+//** Text color for headers within dropdown menus.
+$dropdown-header-color:          $gray-light !default;
+
+//** Deprecated `$dropdown-caret-color` as of v3.1.0
+$dropdown-caret-color:           #000 !default;
+
+
+//-- Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+//
+// Note: These variables are not generated into the Customizer.
+
+$zindex-navbar:            1000 !default;
+$zindex-dropdown:          1000 !default;
+$zindex-popover:           1060 !default;
+$zindex-tooltip:           1070 !default;
+$zindex-navbar-fixed:      1030 !default;
+$zindex-modal-background:  1040 !default;
+$zindex-modal:             1050 !default;
+
+
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+// Extra small screen / phone
+//** Deprecated `$screen-xs` as of v3.0.1
+$screen-xs:                  480px !default;
+//** Deprecated `$screen-xs-min` as of v3.2.0
+$screen-xs-min:              $screen-xs !default;
+//** Deprecated `$screen-phone` as of v3.0.1
+$screen-phone:               $screen-xs-min !default;
+
+// Small screen / tablet
+//** Deprecated `$screen-sm` as of v3.0.1
+$screen-sm:                  768px !default;
+$screen-sm-min:              $screen-sm !default;
+//** Deprecated `$screen-tablet` as of v3.0.1
+$screen-tablet:              $screen-sm-min !default;
+
+// Medium screen / desktop
+//** Deprecated `$screen-md` as of v3.0.1
+$screen-md:                  992px !default;
+$screen-md-min:              $screen-md !default;
+//** Deprecated `$screen-desktop` as of v3.0.1
+$screen-desktop:             $screen-md-min !default;
+
+// Large screen / wide desktop
+//** Deprecated `$screen-lg` as of v3.0.1
+$screen-lg:                  1200px !default;
+$screen-lg-min:              $screen-lg !default;
+//** Deprecated `$screen-lg-desktop` as of v3.0.1
+$screen-lg-desktop:          $screen-lg-min !default;
+
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max:              ($screen-sm-min - 1) !default;
+$screen-sm-max:              ($screen-md-min - 1) !default;
+$screen-md-max:              ($screen-lg-min - 1) !default;
+
+
+//== Grid system
+//
+//## Define your custom responsive grid.
+
+//** Number of columns in the grid.
+$grid-columns:              12 !default;
+//** Padding between columns. Gets divided in half for the left and right.
+$grid-gutter-width:         30px !default;
+// Navbar collapse
+//** Point at which the navbar becomes uncollapsed.
+$grid-float-breakpoint:     $screen-sm-min !default;
+//** Point at which the navbar begins collapsing.
+$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
+
+
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
+
+// Small screen / tablet
+$container-tablet:             (720px + $grid-gutter-width) !default;
+//** For `$screen-sm-min` and up.
+$container-sm:                 $container-tablet !default;
+
+// Medium screen / desktop
+$container-desktop:            (940px + $grid-gutter-width) !default;
+//** For `$screen-md-min` and up.
+$container-md:                 $container-desktop !default;
+
+// Large screen / wide desktop
+$container-large-desktop:      (1140px + $grid-gutter-width) !default;
+//** For `$screen-lg-min` and up.
+$container-lg:                 $container-large-desktop !default;
+
+
+//== Navbar
+//
+//##
+
+// Basics of a navbar
+$navbar-height:                    50px !default;
+$navbar-margin-bottom:             $line-height-computed !default;
+$navbar-border-radius:             $border-radius-base !default;
+$navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;
+$navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2) !default;
+$navbar-collapse-max-height:       340px !default;
+
+$navbar-default-color:             #777 !default;
+$navbar-default-bg:                #f8f8f8 !default;
+$navbar-default-border:            darken($navbar-default-bg, 6.5%) !default;
+
+// Navbar links
+$navbar-default-link-color:                #777 !default;
+$navbar-default-link-hover-color:          #333 !default;
+$navbar-default-link-hover-bg:             transparent !default;
+$navbar-default-link-active-color:         #555 !default;
+$navbar-default-link-active-bg:            darken($navbar-default-bg, 6.5%) !default;
+$navbar-default-link-disabled-color:       #ccc !default;
+$navbar-default-link-disabled-bg:          transparent !default;
+
+// Navbar brand label
+$navbar-default-brand-color:               $navbar-default-link-color !default;
+$navbar-default-brand-hover-color:         darken($navbar-default-brand-color, 10%) !default;
+$navbar-default-brand-hover-bg:            transparent !default;
+
+// Navbar toggle
+$navbar-default-toggle-hover-bg:           #ddd !default;
+$navbar-default-toggle-icon-bar-bg:        #888 !default;
+$navbar-default-toggle-border-color:       #ddd !default;
+
+
+//=== Inverted navbar
+// Reset inverted navbar basics
+$navbar-inverse-color:                      lighten($gray-light, 15%) !default;
+$navbar-inverse-bg:                         #222 !default;
+$navbar-inverse-border:                     darken($navbar-inverse-bg, 10%) !default;
+
+// Inverted navbar links
+$navbar-inverse-link-color:                 lighten($gray-light, 15%) !default;
+$navbar-inverse-link-hover-color:           #fff !default;
+$navbar-inverse-link-hover-bg:              transparent !default;
+$navbar-inverse-link-active-color:          $navbar-inverse-link-hover-color !default;
+$navbar-inverse-link-active-bg:             darken($navbar-inverse-bg, 10%) !default;
+$navbar-inverse-link-disabled-color:        #444 !default;
+$navbar-inverse-link-disabled-bg:           transparent !default;
+
+// Inverted navbar brand label
+$navbar-inverse-brand-color:                $navbar-inverse-link-color !default;
+$navbar-inverse-brand-hover-color:          #fff !default;
+$navbar-inverse-brand-hover-bg:             transparent !default;
+
+// Inverted navbar toggle
+$navbar-inverse-toggle-hover-bg:            #333 !default;
+$navbar-inverse-toggle-icon-bar-bg:         #fff !default;
+$navbar-inverse-toggle-border-color:        #333 !default;
+
+
+//== Navs
+//
+//##
+
+//=== Shared nav styles
+$nav-link-padding:                          10px 15px !default;
+$nav-link-hover-bg:                         $gray-lighter !default;
+
+$nav-disabled-link-color:                   $gray-light !default;
+$nav-disabled-link-hover-color:             $gray-light !default;
+
+//== Tabs
+$nav-tabs-border-color:                     #ddd !default;
+
+$nav-tabs-link-hover-border-color:          $gray-lighter !default;
+
+$nav-tabs-active-link-hover-bg:             $body-bg !default;
+$nav-tabs-active-link-hover-color:          $gray !default;
+$nav-tabs-active-link-hover-border-color:   #ddd !default;
+
+$nav-tabs-justified-link-border-color:            #ddd !default;
+$nav-tabs-justified-active-link-border-color:     $body-bg !default;
+
+//== Pills
+$nav-pills-border-radius:                   $border-radius-base !default;
+$nav-pills-active-link-hover-bg:            $component-active-bg !default;
+$nav-pills-active-link-hover-color:         $component-active-color !default;
+
+
+//== Pagination
+//
+//##
+
+$pagination-color:                     $link-color !default;
+$pagination-bg:                        #fff !default;
+$pagination-border:                    #ddd !default;
+
+$pagination-hover-color:               $link-hover-color !default;
+$pagination-hover-bg:                  $gray-lighter !default;
+$pagination-hover-border:              #ddd !default;
+
+$pagination-active-color:              #fff !default;
+$pagination-active-bg:                 $brand-primary !default;
+$pagination-active-border:             $brand-primary !default;
+
+$pagination-disabled-color:            $gray-light !default;
+$pagination-disabled-bg:               #fff !default;
+$pagination-disabled-border:           #ddd !default;
+
+
+//== Pager
+//
+//##
+
+$pager-bg:                             $pagination-bg !default;
+$pager-border:                         $pagination-border !default;
+$pager-border-radius:                  15px !default;
+
+$pager-hover-bg:                       $pagination-hover-bg !default;
+
+$pager-active-bg:                      $pagination-active-bg !default;
+$pager-active-color:                   $pagination-active-color !default;
+
+$pager-disabled-color:                 $pagination-disabled-color !default;
+
+
+//== Jumbotron
+//
+//##
+
+$jumbotron-padding:              30px !default;
+$jumbotron-color:                inherit !default;
+$jumbotron-bg:                   $gray-lighter !default;
+$jumbotron-heading-color:        inherit !default;
+$jumbotron-font-size:            ceil(($font-size-base * 1.5)) !default;
+$jumbotron-heading-font-size:    ceil(($font-size-base * 4.5)) !default;
+
+
+//== Form states and alerts
+//
+//## Define colors for form feedback states and, by default, alerts.
+
+$state-success-text:             #3c763d !default;
+$state-success-bg:               #dff0d8 !default;
+$state-success-border:           darken(adjust-hue($state-success-bg, -10), 5%) !default;
+
+$state-info-text:                #31708f !default;
+$state-info-bg:                  #d9edf7 !default;
+$state-info-border:              darken(adjust-hue($state-info-bg, -10), 7%) !default;
+
+$state-warning-text:             #8a6d3b !default;
+$state-warning-bg:               #fcf8e3 !default;
+$state-warning-border:           darken(adjust-hue($state-warning-bg, -10), 5%) !default;
+
+$state-danger-text:              #a94442 !default;
+$state-danger-bg:                #f2dede !default;
+$state-danger-border:            darken(adjust-hue($state-danger-bg, -10), 5%) !default;
+
+
+//== Tooltips
+//
+//##
+
+//** Tooltip max width
+$tooltip-max-width:           200px !default;
+//** Tooltip text color
+$tooltip-color:               #fff !default;
+//** Tooltip background color
+$tooltip-bg:                  #000 !default;
+$tooltip-opacity:             .9 !default;
+
+//** Tooltip arrow width
+$tooltip-arrow-width:         5px !default;
+//** Tooltip arrow color
+$tooltip-arrow-color:         $tooltip-bg !default;
+
+
+//== Popovers
+//
+//##
+
+//** Popover body background color
+$popover-bg:                          #fff !default;
+//** Popover maximum width
+$popover-max-width:                   276px !default;
+//** Popover border color
+$popover-border-color:                rgba(0,0,0,.2) !default;
+//** Popover fallback border color
+$popover-fallback-border-color:       #ccc !default;
+
+//** Popover title background color
+$popover-title-bg:                    darken($popover-bg, 3%) !default;
+
+//** Popover arrow width
+$popover-arrow-width:                 10px !default;
+//** Popover arrow color
+$popover-arrow-color:                 $popover-bg !default;
+
+//** Popover outer arrow width
+$popover-arrow-outer-width:           ($popover-arrow-width + 1) !default;
+//** Popover outer arrow color
+$popover-arrow-outer-color:           fade_in($popover-border-color, 0.05) !default;
+//** Popover outer arrow fallback color
+$popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%) !default;
+
+
+//== Labels
+//
+//##
+
+//** Default label background color
+$label-default-bg:            $gray-light !default;
+//** Primary label background color
+$label-primary-bg:            $brand-primary !default;
+//** Success label background color
+$label-success-bg:            $brand-success !default;
+//** Info label background color
+$label-info-bg:               $brand-info !default;
+//** Warning label background color
+$label-warning-bg:            $brand-warning !default;
+//** Danger label background color
+$label-danger-bg:             $brand-danger !default;
+
+//** Default label text color
+$label-color:                 #fff !default;
+//** Default text color of a linked label
+$label-link-hover-color:      #fff !default;
+
+
+//== Modals
+//
+//##
+
+//** Padding applied to the modal body
+$modal-inner-padding:         15px !default;
+
+//** Padding applied to the modal title
+$modal-title-padding:         15px !default;
+//** Modal title line-height
+$modal-title-line-height:     $line-height-base !default;
+
+//** Background color of modal content area
+$modal-content-bg:                             #fff !default;
+//** Modal content border color
+$modal-content-border-color:                   rgba(0,0,0,.2) !default;
+//** Modal content border color **for IE8**
+$modal-content-fallback-border-color:          #999 !default;
+
+//** Modal backdrop background color
+$modal-backdrop-bg:           #000 !default;
+//** Modal backdrop opacity
+$modal-backdrop-opacity:      .5 !default;
+//** Modal header border color
+$modal-header-border-color:   #e5e5e5 !default;
+//** Modal footer border color
+$modal-footer-border-color:   $modal-header-border-color !default;
+
+$modal-lg:                    900px !default;
+$modal-md:                    600px !default;
+$modal-sm:                    300px !default;
+
+
+//== Alerts
+//
+//## Define alert colors, border radius, and padding.
+
+$alert-padding:               15px !default;
+$alert-border-radius:         $border-radius-base !default;
+$alert-link-font-weight:      bold !default;
+
+$alert-success-bg:            $state-success-bg !default;
+$alert-success-text:          $state-success-text !default;
+$alert-success-border:        $state-success-border !default;
+
+$alert-info-bg:               $state-info-bg !default;
+$alert-info-text:             $state-info-text !default;
+$alert-info-border:           $state-info-border !default;
+
+$alert-warning-bg:            $state-warning-bg !default;
+$alert-warning-text:          $state-warning-text !default;
+$alert-warning-border:        $state-warning-border !default;
+
+$alert-danger-bg:             $state-danger-bg !default;
+$alert-danger-text:           $state-danger-text !default;
+$alert-danger-border:         $state-danger-border !default;
+
+
+//== Progress bars
+//
+//##
+
+//** Background color of the whole progress component
+$progress-bg:                 #f5f5f5 !default;
+//** Progress bar text color
+$progress-bar-color:          #fff !default;
+//** Variable for setting rounded corners on progress bar.
+$progress-border-radius:      $border-radius-base !default;
+
+//** Default progress bar color
+$progress-bar-bg:             $brand-primary !default;
+//** Success progress bar color
+$progress-bar-success-bg:     $brand-success !default;
+//** Warning progress bar color
+$progress-bar-warning-bg:     $brand-warning !default;
+//** Danger progress bar color
+$progress-bar-danger-bg:      $brand-danger !default;
+//** Info progress bar color
+$progress-bar-info-bg:        $brand-info !default;
+
+
+//== List group
+//
+//##
+
+//** Background color on `.list-group-item`
+$list-group-bg:                 #fff !default;
+//** `.list-group-item` border color
+$list-group-border:             #ddd !default;
+//** List group border radius
+$list-group-border-radius:      $border-radius-base !default;
+
+//** Background color of single list items on hover
+$list-group-hover-bg:           #f5f5f5 !default;
+//** Text color of active list items
+$list-group-active-color:       $component-active-color !default;
+//** Background color of active list items
+$list-group-active-bg:          $component-active-bg !default;
+//** Border color of active list elements
+$list-group-active-border:      $list-group-active-bg !default;
+//** Text color for content within active list items
+$list-group-active-text-color:  lighten($list-group-active-bg, 40%) !default;
+
+//** Text color of disabled list items
+$list-group-disabled-color:      $gray-light !default;
+//** Background color of disabled list items
+$list-group-disabled-bg:         $gray-lighter !default;
+//** Text color for content within disabled list items
+$list-group-disabled-text-color: $list-group-disabled-color !default;
+
+$list-group-link-color:         #555 !default;
+$list-group-link-hover-color:   $list-group-link-color !default;
+$list-group-link-heading-color: #333 !default;
+
+
+//== Panels
+//
+//##
+
+$panel-bg:                    #fff !default;
+$panel-body-padding:          15px !default;
+$panel-heading-padding:       10px 15px !default;
+$panel-footer-padding:        $panel-heading-padding !default;
+$panel-border-radius:         $border-radius-base !default;
+
+//** Border color for elements within panels
+$panel-inner-border:          #ddd !default;
+$panel-footer-bg:             #f5f5f5 !default;
+
+$panel-default-text:          $gray-dark !default;
+$panel-default-border:        #ddd !default;
+$panel-default-heading-bg:    #f5f5f5 !default;
+
+$panel-primary-text:          #fff !default;
+$panel-primary-border:        $brand-primary !default;
+$panel-primary-heading-bg:    $brand-primary !default;
+
+$panel-success-text:          $state-success-text !default;
+$panel-success-border:        $state-success-border !default;
+$panel-success-heading-bg:    $state-success-bg !default;
+
+$panel-info-text:             $state-info-text !default;
+$panel-info-border:           $state-info-border !default;
+$panel-info-heading-bg:       $state-info-bg !default;
+
+$panel-warning-text:          $state-warning-text !default;
+$panel-warning-border:        $state-warning-border !default;
+$panel-warning-heading-bg:    $state-warning-bg !default;
+
+$panel-danger-text:           $state-danger-text !default;
+$panel-danger-border:         $state-danger-border !default;
+$panel-danger-heading-bg:     $state-danger-bg !default;
+
+
+//== Thumbnails
+//
+//##
+
+//** Padding around the thumbnail image
+$thumbnail-padding:           4px !default;
+//** Thumbnail background color
+$thumbnail-bg:                $body-bg !default;
+//** Thumbnail border color
+$thumbnail-border:            #ddd !default;
+//** Thumbnail border radius
+$thumbnail-border-radius:     $border-radius-base !default;
+
+//** Custom text color for thumbnail captions
+$thumbnail-caption-color:     $text-color !default;
+//** Padding around the thumbnail caption
+$thumbnail-caption-padding:   9px !default;
+
+
+//== Wells
+//
+//##
+
+$well-bg:                     #f5f5f5 !default;
+$well-border:                 darken($well-bg, 7%) !default;
+
+
+//== Badges
+//
+//##
+
+$badge-color:                 #fff !default;
+//** Linked badge text color on hover
+$badge-link-hover-color:      #fff !default;
+$badge-bg:                    $gray-light !default;
+
+//** Badge text color in active nav link
+$badge-active-color:          $link-color !default;
+//** Badge background color in active nav link
+$badge-active-bg:             #fff !default;
+
+$badge-font-weight:           bold !default;
+$badge-line-height:           1 !default;
+$badge-border-radius:         10px !default;
+
+
+//== Breadcrumbs
+//
+//##
+
+$breadcrumb-padding-vertical:   8px !default;
+$breadcrumb-padding-horizontal: 15px !default;
+//** Breadcrumb background color
+$breadcrumb-bg:                 #f5f5f5 !default;
+//** Breadcrumb text color
+$breadcrumb-color:              #ccc !default;
+//** Text color of current page in the breadcrumb
+$breadcrumb-active-color:       $gray-light !default;
+//** Textual separator for between breadcrumb elements
+$breadcrumb-separator:          "/" !default;
+
+
+//== Carousel
+//
+//##
+
+$carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6) !default;
+
+$carousel-control-color:                      #fff !default;
+$carousel-control-width:                      15% !default;
+$carousel-control-opacity:                    .5 !default;
+$carousel-control-font-size:                  20px !default;
+
+$carousel-indicator-active-bg:                #fff !default;
+$carousel-indicator-border-color:             #fff !default;
+
+$carousel-caption-color:                      #fff !default;
+
+
+//== Close
+//
+//##
+
+$close-font-weight:           bold !default;
+$close-color:                 #000 !default;
+$close-text-shadow:           0 1px 0 #fff !default;
+
+
+//== Code
+//
+//##
+
+$code-color:                  #c7254e !default;
+$code-bg:                     #f9f2f4 !default;
+
+$kbd-color:                   #fff !default;
+$kbd-bg:                      #333 !default;
+
+$pre-bg:                      #f5f5f5 !default;
+$pre-color:                   $gray-dark !default;
+$pre-border-color:            #ccc !default;
+$pre-scrollable-max-height:   340px !default;
+
+
+//== Type
+//
+//##
+
+//** Horizontal offset for forms and lists.
+$component-offset-horizontal: 180px !default;
+//** Text muted color
+$text-muted:                  $gray-light !default;
+//** Abbreviations and acronyms border color
+$abbr-border-color:           $gray-light !default;
+//** Headings small color
+$headings-small-color:        $gray-light !default;
+//** Blockquote small color
+$blockquote-small-color:      $gray-light !default;
+//** Blockquote font size
+$blockquote-font-size:        ($font-size-base * 1.25) !default;
+//** Blockquote border color
+$blockquote-border-color:     $gray-lighter !default;
+//** Page header border color
+$page-header-border-color:    $gray-lighter !default;
+//** Width of horizontal description list titles
+$dl-horizontal-offset:        $component-offset-horizontal !default;
+//** Point at which .dl-horizontal becomes horizontal
+$dl-horizontal-breakpoint:    $grid-float-breakpoint !default;
+//** Horizontal line color.
+$hr-border:                   $gray-lighter !default;
+
+
+// Bootstrap Material Design variables start with mdb-
+$mdb-brand-inverse: $indigo !default;
+
+
+/* ANIMATION */
+$mdb-animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$mdb-animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
+$mdb-animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
+$mdb-animation-curve-default: $mdb-animation-curve-fast-out-slow-in !default;
+
+
+//---
+// FIXME: Similar but not quite the same as Bootstrap variables
+// FIXME: these need to either a) be converted to $mdb- or b) converted to bs variables
+$contrast-factor: 40% !default;
+//---
+
+
+
+
+// --------------------
+// inputs
+$mdb-input-placeholder-color: #AAAAAA !default;
+$mdb-input-underline-color: #D2D2D2 !default;
+$mdb-label-static-size-ratio: 75 / 100 !default;
+$mdb-help-block-size-ratio: 75 / 100 !default;
+
+$mdb-input-font-size-base: 14px !default;
+$mdb-input-font-size-large: ceil(($font-size-base * 1.25)) !default; // ~20px
+$mdb-input-font-size-small: ceil(($font-size-base * 0.75)) !default; // ~12px
+
+// FIXME: with #733 customization of bootstrap, consider how these could be based on the original bs customized variables
+//** Unit-less `line-height` for use in components like buttons.
+
+$mdb-input-line-height-base:        $line-height-base; //1.428571429 !default; // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+$mdb-input-line-height-computed:    floor(($mdb-input-font-size-base * $mdb-input-line-height-base)) !default; // ~20px
+$mdb-input-line-height-large:         1.3333333 !default; // extra decimals for Win 8.1 Chrome
+$mdb-input-line-height-small:         1.5 !default;
+
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+$mdb-input-padding-base-vertical:     8px - 1px !default; // was 6.
+$mdb-input-padding-base-horizontal:   0 !default; // was 12.
+$mdb-label-as-placeholder-shim-base:  0 !default; // manual adjustment of label top when positioned as placeholder
+$mdb-label-top-margin-base:           16px !default;
+
+$mdb-input-padding-large-vertical:    10px - 1px !default; // 10
+$mdb-input-padding-large-horizontal:  0 !default;  // 16
+$mdb-label-as-placeholder-shim-large: -4px !default; // manual adjustment of label top when positioned as placeholder
+$mdb-label-top-margin-large:          16px !default;
+
+$mdb-input-padding-small-vertical:    4px - 1px !default; // 5
+$mdb-input-padding-small-horizontal:  0 !default; // 10
+$mdb-label-as-placeholder-shim-small: 8px !default; // manual adjustment of label top when positioned as placeholder
+$mdb-label-top-margin-small:          12px !default;
+
+$mdb-input-padding-xs-vertical:       2px !default; // 1
+$mdb-input-padding-xs-horizontal:     0 !default; // 5
+
+$mdb-input-border-radius-base:        0 !default;
+$mdb-input-border-radius-large:       0 !default;
+$mdb-input-border-radius-small:       0 !default;
+
+
+//** Default `.form-control` height
+$mdb-input-height-base:              ($mdb-input-line-height-computed + ($mdb-input-padding-base-vertical * 2) + 2) !default;
+//** Large `.form-control` height
+$mdb-input-height-large:             (ceil($mdb-input-font-size-large * $mdb-input-line-height-large) + ($mdb-input-padding-large-vertical * 2) + 2) !default;
+//** Small `.form-control` height
+$mdb-input-height-small:             (floor($mdb-input-font-size-small * $mdb-input-line-height-small) + ($mdb-input-padding-small-vertical * 2) + 2) !default;
+
+
+
+
+// Card
+$mdb-card-body-text: $mdb-text-color-primary !default;
+$mdb-card-body-background: #fff !default;
+$mdb-card-image-headline: #fff !default;
+
+$text-disabled: #a8a8a8 !default;
+$background-disabled: #eaeaea !default;
+
+// Checkboxes
+$mdb-checkbox-size: 20px !default;
+$mdb-checkbox-animation-ripple: 500ms !default;
+$mdb-checkbox-animation-check: 0.3s !default;
+$mdb-checkbox-checked-color: $brand-primary !default;
+
+$mdb-checkbox-label-color: $mdb-label-color !default;
+$mdb-checkbox-border-color: $mdb-label-color-toggle-focus !default;
+
+// Popovers and Popups
+$mdb-popover-background: rgba(101, 101, 101, 0.9) !default;
+$mdb-popover-color: #ececec !default;
+
+// Dropdown Menu
+$mdb-dropdown-font-size: 13px !default;
+
+// Toggle
+$mdb-toggle-label-color: $mdb-label-color !default;
+
+// Radio:
+$mdb-radio-label-color: $mdb-label-color !default;
+$mdb-radio-color-off: $mdb-label-color-toggle-focus !default;
+$mdb-radio-color-on: $brand-primary !default;
+
+// Buttons:
+$mdb-btn-font-size-base: 12px !default;
+$mdb-btn-font-size-lg: 14px !default;
+$mdb-btn-font-size-sm: 11px !default;
+$mdb-btn-font-size-xs: 10px !default;
+
+
+$mdb-btn-background-color: $body-bg; //transparent !default;
+$mdb-btn-background-color-text: $mdb-text-color-primary !default;
+
+
+$mdl-btn-border-radus: 2px !default;
+//$mdb-btn-primary-color: unquote("rgba(#{$rgb-grey-500}, 0.20)") !default;
+
+$mdb-btn-fab-size: 56px !default;
+$mdb-btn-fab-size-mini: 40px !default;
+$mdb-btn-fab-font-size: 24px !default;
+
+$mdb-btn-icon-size: 32px !default;
+$mdb-btn-icon-size-mini: 17px !default;
+
+/* SHADOWS */
+$mdb-shadow-key-umbra-opacity: 0.2 !default;
+$mdb-shadow-key-penumbra-opacity: 0.14 !default;
+$mdb-shadow-ambient-shadow-opacity: 0.12 !default;
+
+
+$fancy-shadow: 0 13px 39px -10px rgba(0, 0, 0, 0.65), 0 1px 25px 0px rgba(0, 0, 0, 0.15);
+
+
+$general-transition-time:  300ms !default;
+
+$slow-transition-time:           370ms !default;
+$fast-transition-time:           150ms !default;
+
+$transition-linear:                                   linear !default;
+$transition-bezier:         cubic-bezier(0.34, 1.61, 0.7, 1) !default;
+$transition-ease:           ease 0s;
+
+//variables for social
+$social-facebook: 			#3b5998;
+$social-twitter: 			#55acee;
+$social-pinterest: 			#cc2127;
+$social-google: 			#dd4b39;
+$social-linkedin: 			#0976b4;
+$social-dribbble: 			#ea4c89;
+$social-github: 			#333333;
+$social-youtube: 			#e52d27;
+$social-instagram: 		    #125688;
+$social-reddit: 			#ff4500;
+$social-tumblr: 			#35465c;
+$social-behance: 			#1769ff;
+
+$transparent-bg:             transparent !default;
+
+$background-light-grey:     #E8E7E3 !default;
+$background-lighter-grey:   #F0EFEB !default;
+$font-background-light-grey: #9C9B99 !default;
+$font-hover-background-light-grey: #5E5E5C !default;
+
+
+// variables from lbd
+
+$transition-ease-in:              ease-in !default;
+$transition-ease-out:             ease-out !default;
+$ultra-fast-transition-time:      60ms  !default;
+$navbar-padding-a:               10px 15px;
+$padding-zero:                   0px !default;
+$sidebar-width:               calc(100% - 260px) !default;
+$topbar-back:          topbar-back !default;
+$bottombar-back:       bottombar-back !default;
+$topbar-x:             topbar-x !default;
+$bottombar-x:          bottombar-x !default;
+$margin-bottom:                0 0 10px 0 !default;
+$margin-base-vertical:         15px !default;
+
+// Variables for datetimepicker //
+$padding-default-vertical:     10px !default;
+$medium-pale-bg:             #F1EAE0 !default;
+$pale-bg:                    #F9F7F3 !default;
diff --git a/medical_prescription/static/dashboard_patient/sass/md/mixins/_chartist.scss b/medical_prescription/static/dashboard_patient/sass/md/mixins/_chartist.scss
new file mode 100644
index 00000000..df8f8b09
--- /dev/null
+++ b/medical_prescription/static/dashboard_patient/sass/md/mixins/_chartist.scss
@@ -0,0 +1,89 @@
+// Scales for responsive SVG containers
+$ct-scales: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default;
+$ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default;
+
+// Class names to be used when generating CSS
+$ct-class-chart: ct-chart !default;
+$ct-class-chart-line: ct-chart-line !default;
+$ct-class-chart-bar: ct-chart-bar !default;
+$ct-class-horizontal-bars: ct-horizontal-bars !default;
+$ct-class-chart-pie: ct-chart-pie !default;
+$ct-class-chart-donut: ct-chart-donut !default;
+$ct-class-label: ct-label !default;
+$ct-class-series: ct-series !default;
+$ct-class-line: ct-line !default;
+$ct-class-point: ct-point !default;
+$ct-class-area: ct-area !default;
+$ct-class-bar: ct-bar !default;
+$ct-class-slice-pie: ct-slice-pie !default;
+$ct-class-slice-donut: ct-slice-donut !default;
+$ct-class-grid: ct-grid !default;
+$ct-class-vertical: ct-vertical !default;
+$ct-class-horizontal: ct-horizontal !default;
+$ct-class-start: ct-start !default;
+$ct-class-end: ct-end !default;
+
+// Container ratio
+$ct-container-ratio: (1/1.618) !default;
+
+// Text styles for labels
+$ct-text-color: rgba(0, 0, 0, 0.4) !default;
+$ct-text-size: 1.3rem !default;
+$ct-text-align: flex-start !default;
+$ct-text-justify: flex-start !default;
+$ct-text-line-height: 1;
+
+.ct-big-chart-white{
+    $ct-grid-color: rgba(250, 250, 250, 0.7) !default;
+}
+// Grid styles
+$ct-grid-color: rgba(0, 0, 0, 0.2) !default;
+$ct-grid-dasharray: 2px !default;
+$ct-grid-width: 1px !default;
+
+// Line chart properties
+$ct-line-width: 3px !default;
+$ct-line-dasharray: false !default;
+$ct-point-size: 8px !default;
+// Line chart point, can be either round or square
+$ct-point-shape: round !default;
+// Area fill transparency between 0 and 1
+$ct-area-opacity: 0.8 !default;
+
+// Bar chart bar width
+$ct-bar-width: 10px !default;
+
+// Donut width (If donut width is to big it can cause issues where the shape gets distorted)
+$ct-donut-width: 60px !default;
+
+// If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you
+// should set this property to false
+$ct-include-classes: true !default;
+
+// If this is set to true the CSS will contain colored series. You can extend or change the color with the
+// properties below
+$ct-include-colored-series: $ct-include-classes !default;
+
+// If set to true this will include all responsive container variations using the scales defined at the top of the script
+$ct-include-alternative-responsive-containers: $ct-include-classes !default;
+
+// Series names and colors. This can be extended or customized as desired. Just add more series and colors.
+$ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default;
+$ct-series-colors: (
+
+  $brand-info,
+  $brand-danger,
+  $brand-warning,
+  $brand-primary,
+  $brand-success,
+  $font-background-light-grey,
+  $gray-color,
+  $social-google,
+  $social-tumblr,
+  $social-youtube,
+  $social-twitter,
+  $social-pinterest,
+  $social-behance,
+  #6188e2,
+  #a748ca
+) !default;
diff --git a/medical_prescription/static/dashboard_patient/sass/md/mixins/_transparency.scss b/medical_prescription/static/dashboard_patient/sass/md/mixins/_transparency.scss
new file mode 100644
index 00000000..da32b745
--- /dev/null
+++ b/medical_prescription/static/dashboard_patient/sass/md/mixins/_transparency.scss
@@ -0,0 +1,20 @@
+// Opacity
+
+@mixin opacity($opacity) {
+  opacity: $opacity;
+  // IE8 filter
+  $opacity-ie: ($opacity * 100);
+  filter: #{alpha(opacity=$opacity-ie)};
+}
+
+@mixin black-filter($opacity){
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    background-color: rgba(17,17,17,$opacity);
+    display: block;
+    content: "";
+    z-index: 1; 
+}
\ No newline at end of file
diff --git a/medical_prescription/static/dashboard_patient/sass/md/mixins/_vendor-prefixes.scss b/medical_prescription/static/dashboard_patient/sass/md/mixins/_vendor-prefixes.scss
new file mode 100644
index 00000000..78805ef2
--- /dev/null
+++ b/medical_prescription/static/dashboard_patient/sass/md/mixins/_vendor-prefixes.scss
@@ -0,0 +1,185 @@
+// User select
+// For selecting text on the page
+
+@mixin user-select($select) {
+  -webkit-user-select: $select;
+     -moz-user-select: $select;
+      -ms-user-select: $select; // IE10+
+          user-select: $select;
+}
+
+@mixin box-shadow($shadow...) {
+  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
+          box-shadow: $shadow;
+}
+
+// Box sizing
+@mixin box-sizing($boxmodel) {
+  -webkit-box-sizing: $boxmodel;
+     -moz-box-sizing: $boxmodel;
+          box-sizing: $boxmodel;
+}
+
+
+@mixin transition($time, $type){
+    -webkit-transition: all $time $type;
+    -moz-transition: all $time $type;
+    -o-transition: all $time $type;
+    -ms-transition: all $time $type;
+    transition: all $time $type;
+}
+
+@mixin transform-scale($value){
+     -webkit-transform: scale($value);
+        -moz-transform: scale($value);
+        -o-transform: scale($value);
+        -ms-transform: scale($value);
+        transform: scale($value);
+}
+
+@mixin transform-translate-x($value){
+     -webkit-transform:  translate3d($value, 0, 0);
+        -moz-transform: translate3d($value, 0, 0);
+        -o-transform: translate3d($value, 0, 0);
+        -ms-transform: translate3d($value, 0, 0);
+        transform: translate3d($value, 0, 0);
+}
+
+@mixin transform-origin($coordinates){
+      -webkit-transform-origin: $coordinates;
+        -moz-transform-origin: $coordinates;
+        -o-transform-origin: $coordinates;
+        -ms-transform-origin: $coordinates;
+        transform-origin: $coordinates;
+}
+
+@mixin set-background-color-button ($color){
+    .nav{
+        li.active a{
+            background-color: $color;
+            @include shadow-big-color($color);
+        }
+    }
+}
+
+@mixin radial-gradient($extern-color, $center-color){
+    background: $extern-color;
+    background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */
+    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$center-color), color-stop(100%,$extern-color)); /* Chrome,Safari4+ */
+    background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Opera 12+ */
+    background: -ms-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* IE10+ */
+    background: radial-gradient(ellipse at center, $center-color 0%,$extern-color 100%); /* W3C */
+    background-size: 550% 450%;
+}
+
+@mixin vertical-align {
+  position: relative;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+@mixin rotate-180(){
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+
+@mixin bar-animation($type){
+     -webkit-animation: $type 500ms linear 0s;
+     -moz-animation: $type 500ms linear 0s;
+     animation: $type 500ms 0s;
+     -webkit-animation-fill-mode: forwards;
+     -moz-animation-fill-mode: forwards;
+     animation-fill-mode: forwards;
+}
+
+@mixin topbar-x-rotation(){
+    @keyframes topbar-x {
+      0% {top: 0px; transform: rotate(0deg); }
+      45% {top: 6px; transform: rotate(145deg); }
+      75% {transform: rotate(130deg); }
+      100% {transform: rotate(135deg); }
+    }
+    @-webkit-keyframes topbar-x {
+      0% {top: 0px; -webkit-transform: rotate(0deg); }
+      45% {top: 6px; -webkit-transform: rotate(145deg); }
+      75% {-webkit-transform: rotate(130deg); }
+      100% { -webkit-transform: rotate(135deg); }
+    }
+    @-moz-keyframes topbar-x {
+      0% {top: 0px; -moz-transform: rotate(0deg); }
+      45% {top: 6px; -moz-transform: rotate(145deg); }
+      75% {-moz-transform: rotate(130deg); }
+      100% { -moz-transform: rotate(135deg); }
+    }
+}
+
+@mixin topbar-back-rotation(){
+    @keyframes topbar-back {
+      0% { top: 6px; transform: rotate(135deg); }
+      45% { transform: rotate(-10deg); }
+      75% { transform: rotate(5deg); }
+      100% { top: 0px; transform: rotate(0); }
+    }
+
+    @-webkit-keyframes topbar-back {
+      0% { top: 6px; -webkit-transform: rotate(135deg); }
+      45% { -webkit-transform: rotate(-10deg); }
+      75% { -webkit-transform: rotate(5deg); }
+      100% { top: 0px; -webkit-transform: rotate(0); }
+    }
+
+    @-moz-keyframes topbar-back {
+      0% { top: 6px; -moz-transform: rotate(135deg); }
+      45% { -moz-transform: rotate(-10deg); }
+      75% { -moz-transform: rotate(5deg); }
+      100% { top: 0px; -moz-transform: rotate(0); }
+    }
+}
+
+@mixin bottombar-x-rotation(){
+    @keyframes bottombar-x {
+      0% {bottom: 0px; transform: rotate(0deg);}
+      45% {bottom: 6px; transform: rotate(-145deg);}
+      75% {transform: rotate(-130deg);}
+      100% {transform: rotate(-135deg);}
+    }
+    @-webkit-keyframes bottombar-x {
+      0% {bottom: 0px; -webkit-transform: rotate(0deg);}
+      45% {bottom: 6px; -webkit-transform: rotate(-145deg);}
+      75% {-webkit-transform: rotate(-130deg);}
+      100% {-webkit-transform: rotate(-135deg);}
+    }
+    @-moz-keyframes bottombar-x {
+      0% {bottom: 0px; -moz-transform: rotate(0deg);}
+      45% {bottom: 6px; -moz-transform: rotate(-145deg);}
+      75% {-moz-transform: rotate(-130deg);}
+      100% {-moz-transform: rotate(-135deg);}
+    }
+}
+
+@mixin bottombar-back-rotation{
+    @keyframes bottombar-back {
+      0% { bottom: 6px;transform: rotate(-135deg);}
+      45% { transform: rotate(10deg);}
+      75% { transform: rotate(-5deg);}
+      100% { bottom: 0px;transform: rotate(0);}
+    }
+    @-webkit-keyframes bottombar-back {
+      0% {bottom: 6px;-webkit-transform: rotate(-135deg);}
+      45% {-webkit-transform: rotate(10deg);}
+      75% {-webkit-transform: rotate(-5deg);}
+      100% {bottom: 0px;-webkit-transform: rotate(0);}
+    }
+    @-moz-keyframes bottombar-back {
+      0% {bottom: 6px;-moz-transform: rotate(-135deg);}
+      45% {-moz-transform: rotate(10deg);}
+      75% {-moz-transform: rotate(-5deg);}
+      100% {bottom: 0px;-moz-transform: rotate(0);}
+    }
+
+}
diff --git a/medical_prescription/static/dashboard_patient/sass/md/mixins/plugins/_animate.scss b/medical_prescription/static/dashboard_patient/sass/md/mixins/plugins/_animate.scss
new file mode 100644
index 00000000..387d1521
--- /dev/null
+++ b/medical_prescription/static/dashboard_patient/sass/md/mixins/plugins/_animate.scss
@@ -0,0 +1,227 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// This file was modified by Creative Tim to keep only the animation that we need for Bootstrap Notify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@charset "UTF-8";
+
+/*!
+Animate.css - http://daneden.me/animate
+Licensed under the MIT license - http://opensource.org/licenses/MIT
+
+Copyright (c) 2015 Daniel Eden
+*/
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.animated.infinite {
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.animated.hinge {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+
+.animated.bounceIn,
+.animated.bounceOut {
+  -webkit-animation-duration: .75s;
+  animation-duration: .75s;
+}
+
+.animated.flipOutX,
+.animated.flipOutY {
+  -webkit-animation-duration: .75s;
+  animation-duration: .75s;
+}
+
+@-webkit-keyframes shake {
+  from, to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%, 30%, 50%, 70%, 90% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  20%, 40%, 60%, 80% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+}
+
+@keyframes shake {
+  from, to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%, 30%, 50%, 70%, 90% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  20%, 40%, 60%, 80% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+}
+
+.shake {
+  -webkit-animation-name: shake;
+  animation-name: shake;
+}
+
+
+
+@-webkit-keyframes fadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInDown {
+  -webkit-animation-name: fadeInDown;
+  animation-name: fadeInDown;
+}
+
+
+@-webkit-keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.fadeOut {
+  -webkit-animation-name: fadeOut;
+  animation-name: fadeOut;
+}
+
+@-webkit-keyframes fadeOutDown {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@keyframes fadeOutDown {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+.fadeOutDown {
+  -webkit-animation-name: fadeOutDown;
+  animation-name: fadeOutDown;
+}
+
+@-webkit-keyframes fadeOutUp {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes fadeOutUp {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+.fadeOutUp {
+  -webkit-animation-name: fadeOutUp;
+  animation-name: fadeOutUp;
+}
diff --git a/medical_prescription/static/dashboard_patient/sass/md/mixins/plugins/_perfect-scrollbar.scss b/medical_prescription/static/dashboard_patient/sass/md/mixins/plugins/_perfect-scrollbar.scss
new file mode 100644
index 00000000..dbae0946
--- /dev/null
+++ b/medical_prescription/static/dashboard_patient/sass/md/mixins/plugins/_perfect-scrollbar.scss
@@ -0,0 +1,113 @@
+/* perfect-scrollbar v0.6.13 */
+.ps-container {
+  -ms-touch-action: auto;
+  touch-action: auto;
+  overflow: hidden !important;
+  -ms-overflow-style: none; }
+  @supports (-ms-overflow-style: none) {
+    .ps-container {
+      overflow: auto !important; } }
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    .ps-container {
+      overflow: auto !important; } }
+  .ps-container.ps-active-x > .ps-scrollbar-x-rail,
+  .ps-container.ps-active-y > .ps-scrollbar-y-rail {
+    display: block;
+    background-color: transparent; }
+  .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+      background-color: #999;
+      height: 11px; }
+  .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+      background-color: #999;
+      width: 11px; }
+  .ps-container > .ps-scrollbar-x-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    opacity: 0;
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+    bottom: 0px;
+    /* there must be 'bottom' for ps-scrollbar-x-rail */
+    height: 15px; }
+    .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+      position: absolute;
+      /* please don't change 'position' */
+      background-color: #aaa;
+      -webkit-border-radius: 6px;
+      -moz-border-radius: 6px;
+      border-radius: 6px;
+      -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+      -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+      -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+      bottom: 2px;
+      /* there must be 'bottom' for ps-scrollbar-x */
+      height: 6px; }
+    .ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
+      height: 11px; }
+  .ps-container > .ps-scrollbar-y-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    opacity: 0;
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+    right: 0;
+    /* there must be 'right' for ps-scrollbar-y-rail */
+    width: 15px; }
+    .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+      position: absolute;
+      /* please don't change 'position' */
+      background-color: #aaa;
+      -webkit-border-radius: 6px;
+      -moz-border-radius: 6px;
+      border-radius: 6px;
+      -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+      -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+      -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+      right: 2px;
+      /* there must be 'right' for ps-scrollbar-y */
+      width: 6px; }
+    .ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
+      width: 11px; }
+  .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+      background-color: #999;
+      height: 11px; }
+  .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+      background-color: #999;
+      width: 11px; }
+  .ps-container:hover > .ps-scrollbar-x-rail,
+  .ps-container:hover > .ps-scrollbar-y-rail {
+    opacity: 0.6; }
+  .ps-container:hover > .ps-scrollbar-x-rail:hover {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
+      background-color: #999; }
+  .ps-container:hover > .ps-scrollbar-y-rail:hover {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
+      background-color: #999; }
diff --git a/medical_prescription/static/dashboard_patient/sass/md/mixins/plugins/_plugin-nouislider.scss b/medical_prescription/static/dashboard_patient/sass/md/mixins/plugins/_plugin-nouislider.scss
new file mode 100644
index 00000000..49204fa4
--- /dev/null
+++ b/medical_prescription/static/dashboard_patient/sass/md/mixins/plugins/_plugin-nouislider.scss
@@ -0,0 +1,161 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+.noUi-target,
+.noUi-target * {
+    -webkit-touch-callout: none;
+    -ms-touch-action: none;
+    user-select: none;
+    box-sizing: border-box;
+}
+.noUi-base {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+.noUi-origin {
+    position: absolute;
+    right: 0;
+    top: 0;
+    left: 0;
+    bottom: 0;
+}
+.noUi-handle {
+    position: relative;
+    z-index: 1;
+    box-sizing: border-box;
+}
+.noUi-stacking .noUi-handle {
+    z-index: 10;
+}
+//.noUi-stacking + .noUi-origin {
+//    *z-index: -1;
+//} WARNING: Property with star prefix found. Checks for the star property hack (targets IE6/7) (star-property-hack) Browsers: All
+.noUi-state-tap .noUi-origin {
+    transition: left 0.3s, top 0.3s;
+}
+.noUi-state-drag * {
+    cursor: inherit !important;
+}
+.noUi-horizontal {
+    height: 10px;
+}
+.noUi-handle {
+    box-sizing: border-box;
+    width: 14px;
+    height: 14px;
+    left: -10px;
+    top: -6px;
+    cursor: pointer;
+    border-radius: 100%;
+    transition: all 0.2s ease-out;
+    border: 1px solid;
+    background: $white-color;
+
+    @include shadow-2dp();
+}
+.noUi-vertical .noUi-handle {
+    margin-left: 5px;
+    cursor: ns-resize;
+}
+.noUi-horizontal.noUi-extended {
+    padding: 0 15px;
+}
+.noUi-horizontal.noUi-extended .noUi-origin  {
+    right: -15px;
+}
+.noUi-background {
+    height: 2px;
+    margin: 20px 0;
+}
+.noUi-origin {
+    margin: 0;
+    border-radius: 0;
+    height: 2px;
+    background: #c8c8c8;
+    &[style^="left: 0"] .noUi-handle {
+        background-color: #fff;
+        border: 2px solid #c8c8c8;
+        &.noUi-active {
+            border-width: 1px;
+        }
+    }
+}
+.noUi-target {
+    border-radius: $border-radius-base;
+}
+.noUi-horizontal {
+    height: 2px;
+    margin: 15px 0;
+}
+.noUi-vertical {
+    height: 100%;
+    width: 2px;
+    margin: 0 15px;
+    display: inline-block;
+}
+.noUi-handle.noUi-active {
+    transform: scale3d(2, 2, 1);
+}
+[disabled].noUi-slider{
+    opacity: 0.5;
+}
+[disabled] .noUi-handle {
+    cursor: not-allowed;
+}
+
+.slider {
+    background: #c8c8c8;
+}
+
+.slider {
+
+    &.noUi-connect{
+        background-color: $brand-primary;
+    }
+
+    .noUi-handle{
+        border-color: $brand-primary;
+    }
+
+    &.slider-info{
+        & .noUi-connect,
+        &.noUi-connect{
+            background-color: $brand-info;
+        }
+
+        .noUi-handle{
+            border-color: $brand-info;
+        }
+    }
+    &.slider-success{
+        & .noUi-connect,
+        &.noUi-connect{
+            background-color: $brand-success;
+        }
+
+        .noUi-handle{
+            border-color: $brand-success;
+        }
+    }
+    &.slider-warning{
+        & .noUi-connect,
+        &.noUi-connect{
+            background-color: $brand-warning;
+        }
+
+        .noUi-handle{
+            border-color: $brand-warning;
+        }
+    }
+    &.slider-danger{
+        & .noUi-connect,
+        &.noUi-connect{
+            background-color: $brand-danger;
+        }
+
+        .noUi-handle{
+            border-color: $brand-danger;
+        }
+    }
+
+}
diff --git a/medical_prescription/templates/dashboard/head.html b/medical_prescription/templates/dashboard/head.html
index a961581a..576787e2 100644
--- a/medical_prescription/templates/dashboard/head.html
+++ b/medical_prescription/templates/dashboard/head.html
@@ -33,4 +33,4 @@
 
 
 
-
\ No newline at end of file
+
diff --git a/medical_prescription/templates/dashboardPatient/head.html b/medical_prescription/templates/dashboardPatient/head.html
new file mode 100644
index 00000000..70924d8a
--- /dev/null
+++ b/medical_prescription/templates/dashboardPatient/head.html
@@ -0,0 +1,17 @@
+{% load static %} {% csrf_token %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/medical_prescription/templates/dashboardPatient/nav_bar.html b/medical_prescription/templates/dashboardPatient/nav_bar.html
new file mode 100644
index 00000000..5e62104b
--- /dev/null
+++ b/medical_prescription/templates/dashboardPatient/nav_bar.html
@@ -0,0 +1,36 @@
+{% load static %} {% load staticfiles %}
+
+
+
+
diff --git a/medical_prescription/templates/dashboardPatient/template.html b/medical_prescription/templates/dashboardPatient/template.html
index 0f3bf759..f694cfd0 100644
--- a/medical_prescription/templates/dashboardPatient/template.html
+++ b/medical_prescription/templates/dashboardPatient/template.html
@@ -1,12 +1,128 @@
 
-
 
-  
+
+
     {% load staticfiles %} {% csrf_token %} {% include "dashboardPatient/head.html" %}
-  
-  
-      
-      
+            
+            

+                
+            

+
+
+ +
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + - diff --git a/medical_prescription/user/views/loginview.py b/medical_prescription/user/views/loginview.py index ec46040d..1ffc4188 100644 --- a/medical_prescription/user/views/loginview.py +++ b/medical_prescription/user/views/loginview.py @@ -15,6 +15,7 @@ class LoginView(FormView): form_class = UserLoginForm template_name = '' dashboard_name = '' + # Render the login page. def get(self, request, *args, **kwargs): form = self.form_class(initial=self.initial) @@ -47,10 +48,10 @@ def post(self, request, *args, **kwargs): def set_template_name(self, request): if(request.path == '/user/login_healthprofessional/'): self.template_name = 'login_healthprofessional.html' - self.dashboard_name = '/dashboard/health_professional' + self.dashboard_name = '/dashboard_health_professional/health_professional' else: self.template_name = 'login_patient.html' - self.dashboard_name = '/dashboard/patient' + self.dashboard_name = '/dashboard_patient/patient' # Login valid user. def user_authentication(self, request, user): From 5cf533aaa0da86649e9305b1e903dc23786e7108 Mon Sep 17 00:00:00 2001 From: GuiMarques98 Date: Sat, 7 Oct 2017 16:35:29 -0300 Subject: [PATCH 5/6] #12 - Implementing dashboard patient. Signed-off-by: Guilherme Marques Signed-off-by: Felipe Borges --- .../templates/dashboardPatient/nav_bar.html | 77 +++++++------ .../templates/dashboardPatient/side_bar.html | 31 ++++++ .../templates/dashboardPatient/template.html | 101 +++--------------- 3 files changed, 89 insertions(+), 120 deletions(-) create mode 100644 medical_prescription/templates/dashboardPatient/side_bar.html diff --git a/medical_prescription/templates/dashboardPatient/nav_bar.html b/medical_prescription/templates/dashboardPatient/nav_bar.html index 5e62104b..7e5f53e5 100644 --- a/medical_prescription/templates/dashboardPatient/nav_bar.html +++ b/medical_prescription/templates/dashboardPatient/nav_bar.html @@ -1,36 +1,49 @@ {% load static %} {% load staticfiles %} - -
diff --git a/medical_prescription/templates/dashboardPatient/template.html b/medical_prescription/templates/dashboardPatient/template.html index f694cfd0..fb6a840e 100644 --- a/medical_prescription/templates/dashboardPatient/template.html +++ b/medical_prescription/templates/dashboardPatient/template.html @@ -12,110 +12,35 @@ Tip 2: you can also add an image using data-image tag --> - -
- -
-
+ {% include "dashboardPatient/side_bar.html" %} +
- + {% include "dashboardPatient/nav_bar.html" %}
+ {% block content %} {% endblock %}
- - - + + + - + - + - + - + - + - + - - + + + + - + - + - + - - - + - - - + +