Added basic Bootstrap elements to templates

6 years ago · e8a94fb7c2
11 changed files with 127 additions and 140 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,13 +1,15 @@
-*.pyc
-*.log
-db.sqlite3
-*.bak
 .idea/
 .vscode/*
 */migrations/*
+media/history/*
+
+*.pyc
+*.log
+*.bak
+*.txt
+*.map

 api-keys.sh
+db.sqlite3
 Pipfile
-*.txt
 scrap.py
-media/history/*
--- a/graphs/templates/graphs/logged_in.html
+++ b/graphs/templates/graphs/logged_in.html
@ -8,16 +8,38 @@
    <link rel="stylesheet" href="{% sass_src 'scss/custom.scss' %}">
 </head>
 <body>
+  <div class="container-fluid">
+    <div class="row ml-1">
      <h1>{{ user_id }}'s Graphs</h1>
-	<a class="btn btn-primary" href="{% url "graphs:display_audio_features" user_secret %}"
+    </div>
+    <div class="row">
+      <div class="btn-toolbar ml-3">
+        <div class="btn-group mr-2">
+          <a class="btn btn-primary"
+             href="{% url "graphs:display_audio_features" user_secret %}"
             role="button">Audio Features</a>
-    <a class="btn btn-primary" href="{% url "graphs:display_genre_graph" user_secret %}"
+        </div>
+        <div class="btn-group mr-2">
+          <a class="btn btn-primary" 
+          href="{% url "graphs:display_genre_graph" user_secret %}"
          role="button">Genres</a>
-    <a class="btn btn-primary" href="{% url "graphs:display_artist_graph" user_secret %}" role="button">
+        </div>
+        <div class="btn-group mr-2">
+          <a class="btn btn-primary" 
+             href="{% url "graphs:display_artist_graph" user_secret %}"
+             role="button">
            Artists
          </a>
-    <a class="btn btn-primary" href="{% url "graphs:display_history_table" %}" role="button">
+        </div>
+        <div class="btn-group mr-2">
+          <a class="btn btn-primary" 
+             href="{% url "graphs:display_history_table" %}" 
+             role="button">
            History
          </a>
+        </div>
+      </div>
+    </div>
+  </div>
 </body>
 </html>
--- a/graphs/templates/graphs/user_history.html
+++ b/graphs/templates/graphs/user_history.html
@ -9,9 +9,29 @@
 	<link rel="stylesheet" href="{% sass_src 'scss/custom.scss' %}">
 </head>
 <body>
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col text-left">
        <h1>{{ user_id }}'s Listening History</h1>
-	<p> Found {{ total_history }} songs. </p>
-	<a class="btn btn-primary " href="{% export_url 'csv' %}" role="button">Export</a>
+      </div>
+    </div>
+    <div class="row mb-2 mt-1">
+      <div class="col text-left">
+        <div class="d-inline mr-3">
+          Found {{ total_history }} songs.
+        </div> 
+        <div class="d-inline float-right">
+          <a class="btn btn-primary" href="{% export_url 'csv' %}"
+            role="button">Export</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col">
        {% render_table user_history_table %}
+      </div>
+    </div>
+  </div>
 </body>
 </html>
--- a/login/templates/login/index.html
+++ b/login/templates/login/index.html
@ -17,11 +17,21 @@
  </head>

  <body>
-    <div class="container">
-      <div id="login">
+    <div class="container-fluid">
      <h1>spotify-lib-vis</h1>
-        <a href="{% url 'login:spotify_login' %}" class="btn btn-primary" role="button">Login</a>
-		<a href="{% url 'login:admin_graphs' %}" class="btn btn-primary">Admin Graphs</a>
+      <div class="row">
+        <div class="btn-toolbar ml-3">
+          <div class="btn-group mr-2">
+            <a href="{% url 'login:spotify_login' %}" class="btn btn-primary" role="button">
+              Login
+            </a>
+          </div>
+          <div class="btn-group mr-2">
+            <a href="{% url 'login:admin_graphs' %}" class="btn btn-primary">
+              Admin Graphs
+            </a>
+          </div>
+        </div>
      </div>
    </div>
  </body>
--- a/login/templates/login/scan.html
+++ b/login/templates/login/scan.html
@ -1,5 +1,6 @@
 {% load static %}
 {% load sass_tags %}
+{% load crispy_forms_tags %}
 <!DOCTYPE html>
 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
@ -17,17 +18,31 @@
      <!--[if lt IE 7]>
          <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
      <![endif]-->
+      <div class="container-fluid">
+        <div class="row">
          <h1>Logged in as {{ user_id }}</h1>
+        </div>
+        <div class="row">
+          <div class="col-sm-4 p-2 d-inline">
            <a href="{% url "api:scan_library" user_secret %}" class="btn btn-primary">
              Scan Library
            </a>
            <a href="{% url "api:scan_history" user_secret %}" class="btn btn-primary">
              Scan History
            </a>
-		<form action="{% url 'login:upload_history' %}" method="post" enctype="multipart/form-data">
+
+            <form action="{% url 'login:upload_history' %}" method="post"
+              enctype="multipart/form-data" class="form-inline">
              {% csrf_token %}
-			{{ form.as_p }}
-			<input class="btn btn-primary" type="submit" value="Import History">
+              {{ form | crispy }}
+              <div class="float-right">
+                <input class="btn btn-primary" type="submit" value="Import
+                History">
+              </div>
            </form>
+          </div>
+        </div>
+        <div class="col-sm-8"></div>
+      </div>
    </body>
 </html>
--- a/requirements.txt
+++ b/requirements.txt
@ -3,6 +3,7 @@ certifi==2018.4.16
 chardet==3.0.4
 Django==2.0.5
 django-compressor==2.2
+django-crispy-forms==1.7.2
 django-filter==2.0
 djangorestframework==3.8.2
 django-sass-processor==0.7.2
--- a/spotifyvis/settings.py
+++ b/spotifyvis/settings.py
@ -43,8 +43,11 @@ INSTALLED_APPS = [
    'django_tables2',
    'django_filters',
    'sass_processor',
+    'crispy_forms',
 ]

+CRISPY_TEMPLATE_PACK = 'bootstrap4'
+
 MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
--- a/spotifyvis/static/scss/custom.css
+++ b/spotifyvis/static/scss/custom.css
@ -6323,6 +6323,9 @@ a.text-dark:hover, a.text-dark:focus {
  .bg-dark.navbar-dark .navbar-nav .active > .nav-link {
    color: #2A9FD6 !important; }

+/* .btn-primary {
+	font-family: $font-family-sans-serif;
+} */
 .blockquote-footer {
  color: #999; }

--- a/spotifyvis/static/scss/custom.css.map
+++ b/spotifyvis/static/scss/custom.css.map
--- a/static/scss/darkly/_bootswatch.scss
+++ b/static/scss/darkly/_bootswatch.scss
@ -27,6 +27,9 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Lato:400,700,400italic"
 }

 // Buttons =====================================================================
+/* .btn-primary {
+	font-family: $font-family-sans-serif;
+} */

 // Typography ==================================================================

--- a/static/scss/darkly/_variables-custom.scss
+++ b/static/scss/darkly/_variables-custom.scss