From 5a512e2a3b59bf17bca8dd7440830df786096682 Mon Sep 17 00:00:00 2001 From: Dylan Hillerbrand Date: Thu, 28 Sep 2023 16:10:52 -0400 Subject: [PATCH 01/46] Implement proxy and production deployment settings Add working nginx container --- .env.sample | 4 ++++ docker-compose.yml | 15 +++++++++++++-- nginx/Dockerfile | 3 +++ nginx/nginx.conf | 16 ++++++++++++++++ nginx/vim.conf.template | 25 +++++++++++++++++++++++++ web-app/Dockerfile | 2 +- web-app/django-startup.sh | 7 ++++++- web-app/django/VIM/settings.py | 13 +++++++++++-- web-app/requirements.txt | 1 + 9 files changed, 80 insertions(+), 6 deletions(-) create mode 100644 nginx/Dockerfile create mode 100644 nginx/nginx.conf create mode 100644 nginx/vim.conf.template diff --git a/.env.sample b/.env.sample index fbfaa47..032b8fa 100644 --- a/.env.sample +++ b/.env.sample @@ -1,3 +1,7 @@ +VERSION=0.1.0 + +DEVELOPMENT=false +HOST_NAME=vim.linkedmusic.ca ## DATABASE ## POSTGRES_DB=virtual_instrument_museum diff --git a/docker-compose.yml b/docker-compose.yml index fb7cacb..a26514a 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -12,8 +12,8 @@ services: - POSTGRES_DB=${POSTGRES_DB} - POSTGRES_USER=${POSTGRES_USER} - POSTGRES_PASSWORD=${POSTGRES_PASSWORD} - ports: - - "8000:8000" + - DEVELOPMENT=${DEVELOPMENT} + - HOST_NAME=${HOST_NAME} command: /virtual-instrument-museum/django-startup.sh postgres: @@ -33,5 +33,16 @@ services: start_period: 30s restart: unless-stopped + nginx: + build: ./nginx + container_name: vim-nginx + restart: unless-stopped + environment: + - HOST_NAME=${HOST_NAME} + ports: + - "8000:80" + depends_on: + - app + networks: vim-net: \ No newline at end of file diff --git a/nginx/Dockerfile b/nginx/Dockerfile new file mode 100644 index 0000000..fab7a1c --- /dev/null +++ b/nginx/Dockerfile @@ -0,0 +1,3 @@ +FROM nginx:1.25.2 +COPY ./nginx.conf /etc/nginx/nginx.conf +COPY ./vim.conf.template /etc/nginx/templates/vim.conf.template \ No newline at end of file diff --git a/nginx/nginx.conf b/nginx/nginx.conf new file mode 100644 index 0000000..427bad9 --- /dev/null +++ b/nginx/nginx.conf @@ -0,0 +1,16 @@ +worker_processes 1; + +user nginx nginx; +error_log /var/log/nginx/error.log warn; # piped to Docker log collector (see nginx Dockerfile) +pid /var/log/nginx/nginx.pid; + +events { + accept_mutex off; +} + +http { + include mime.types; # include bundled mime type mapping file + access_log /var/log/nginx/access.log combined; # piped to Docker log collector (see nginx Dockerfile) + + include /etc/nginx/conf.d/vim.conf; # include virtual host configurations +} \ No newline at end of file diff --git a/nginx/vim.conf.template b/nginx/vim.conf.template new file mode 100644 index 0000000..ace457e --- /dev/null +++ b/nginx/vim.conf.template @@ -0,0 +1,25 @@ + upstream vim-app { + # define the vim-app upstream server + server vim-app:8001 fail_timeout=0; + } + + server { + # if no host match, close connection + listen 80 default_server; + return 444; + } + + +server { + listen 80; + client_max_body_size 4G; + server_name ${HOST_NAME}; + + location / { + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # pass client address to upstream server + proxy_set_header X-Forwarded-Proto $scheme; # pass scheme to upstream server + proxy_set_header Host $http_host; # pass host to upstream server + + proxy_pass http://vim-app; # proxy request to vim-app upstream server + } +} \ No newline at end of file diff --git a/web-app/Dockerfile b/web-app/Dockerfile index d18ae6e..6cfcc28 100644 --- a/web-app/Dockerfile +++ b/web-app/Dockerfile @@ -5,4 +5,4 @@ RUN mkdir /virtual-instrument-museum COPY ./django-startup.sh /virtual-instrument-museum/django-startup.sh RUN chmod u+x /virtual-instrument-museum/django-startup.sh WORKDIR /virtual-instrument-museum/vim-app -EXPOSE 8000 \ No newline at end of file +EXPOSE 8001 \ No newline at end of file diff --git a/web-app/django-startup.sh b/web-app/django-startup.sh index 731b7e9..ad330f7 100644 --- a/web-app/django-startup.sh +++ b/web-app/django-startup.sh @@ -1,3 +1,8 @@ #!/bin/bash -python manage.py runserver 0:8000 \ No newline at end of file +if [[ $DEVELOPMENT = "true" ]] +then + python manage.py runserver 0:8001 +else + gunicorn -w 2 -b 0:8001 VIM.wsgi +fi \ No newline at end of file diff --git a/web-app/django/VIM/settings.py b/web-app/django/VIM/settings.py index 6991da1..54300f7 100644 --- a/web-app/django/VIM/settings.py +++ b/web-app/django/VIM/settings.py @@ -19,10 +19,13 @@ # SECURITY WARNING: keep the secret key used in production secret! SECRET_KEY = "django-insecure-0imv3dwuz0%pg13g72upze7k#ap^^8=ra=uj#i@ejpxqf@gk@0" +IS_DEVELOPMENT = os.environ.get("DEVELOPMENT", False) +IS_PRODUCTION = not IS_DEVELOPMENT + # SECURITY WARNING: don't run with debug turned on in production! -DEBUG = True +DEBUG = IS_DEVELOPMENT -ALLOWED_HOSTS = [] +ALLOWED_HOSTS = [os.environ.get("HOST_NAME")] # Application definition @@ -119,3 +122,9 @@ # https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField" + +# DEPLOYMENT SETTINGS + +CSRF_COOKIE_SECURE = IS_PRODUCTION +CSRF_TRUSTED_ORIGINS = [os.environ.get("HOST_NAME")] +SESSION_COOKIE_SECURE = IS_PRODUCTION diff --git a/web-app/requirements.txt b/web-app/requirements.txt index 2bd7165..f2cab33 100644 --- a/web-app/requirements.txt +++ b/web-app/requirements.txt @@ -1,3 +1,4 @@ Django==4.2.5 psycopg==3.1.10 requests==2.31.0 +gunicorn==21.2.0 \ No newline at end of file From f85398b634d472ed067d59b3537133e5fb52b3a8 Mon Sep 17 00:00:00 2001 From: Dylan Hillerbrand Date: Fri, 29 Sep 2023 15:07:40 -0400 Subject: [PATCH 02/46] Add instructions for remote deployment --- README.md | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index de2545e..de7a64f 100644 --- a/README.md +++ b/README.md @@ -8,11 +8,11 @@ ping instrument names and facilitating cross-referencing of instruments across d ## Installation for Local Development -NOTE: VIM is not yet ready for deployment to a remote server. Use these steps for local testing and development only. +NOTE: These instructions are for local development only. Refer to the "Installation for Deployment" section for installation on a remote server. VIM requires Docker Engine with Compose V2. VIM's Docker Compose configuration is written according to the Compose Specification. -After cloning this repository, set up a local `.env` file. Copy or rename the `.env.sample` file to `.env` and update it to include uncommented environment variables for database credentials `POSTGRES_USER` and `POSTGRES_PASSWORD`. +After cloning this repository, set up a local `.env` file. Copy or rename the `.env.sample` file to `.env` and update it to include uncommented environment variables for database credentials `POSTGRES_USER` and `POSTGRES_PASSWORD`. Verify the values of the `DEVELOPMENT` and `HOST_NAME` variables. For local development ONLY, these should be set to "true" and "localhost" respectively. ```console > docker compose build @@ -21,6 +21,21 @@ After cloning this repository, set up a local `.env` file. Copy or rename the `. The django development server should now be available at `localhost:8000`. +## Installation for Deployment + +VIM requires Docker Engine with Compose V2. Ensure that the remote server has these installed. + +SSH into the server. After cloning the repository, set up a local `.env` file. Copy or rename the `.env.sample` file to `.env` and update it to include uncommented environment variables for database credentials `POSTGRES_USER` and `POSTGRES_PASSWORD`. Ensure that `POSTGRES_PASSWORD` is secure. + +Ensure that the `DEVELOPMENT` variable is set to "false", and that `HOST_NAME` is set to the host name where the VIM instance will be served (for example, "vim.linkedmusic.ca" or "vim.staging.linkedmusic.ca"). + +Then, run + +```bash +> docker compose build +> docker compose up -d +``` + ## Managing Database Migrations Django automates changes to the database schema with migrations. From dfa49375f3c39b651b7fa2237615cd32bcbb68ef Mon Sep 17 00:00:00 2001 From: Dylan Hillerbrand Date: Wed, 27 Sep 2023 20:02:23 -0400 Subject: [PATCH 03/46] Add basic instrument gallery view --- .../instruments/templates/instrument_list.html | 18 ++++++++++++++++++ .../apps/instruments/views/instrument_list.py | 8 ++++++++ web-app/django/VIM/urls.py | 2 ++ 3 files changed, 28 insertions(+) create mode 100644 web-app/django/VIM/apps/instruments/templates/instrument_list.html create mode 100644 web-app/django/VIM/apps/instruments/views/instrument_list.py diff --git a/web-app/django/VIM/apps/instruments/templates/instrument_list.html b/web-app/django/VIM/apps/instruments/templates/instrument_list.html new file mode 100644 index 0000000..5251fae --- /dev/null +++ b/web-app/django/VIM/apps/instruments/templates/instrument_list.html @@ -0,0 +1,18 @@ + + + + + +

Instrument List

+
    + {% for instrument in instruments %} +
  • {{ instrument.id }}, + {% for instrumentname in instrument.instrumentname_set.all %} + {{ instrumentname.language.en_label }}:{{ instrumentname.name }} + {% endfor %} + +
    • + {% endfor %} +
+ + \ No newline at end of file diff --git a/web-app/django/VIM/apps/instruments/views/instrument_list.py b/web-app/django/VIM/apps/instruments/views/instrument_list.py new file mode 100644 index 0000000..41fd1aa --- /dev/null +++ b/web-app/django/VIM/apps/instruments/views/instrument_list.py @@ -0,0 +1,8 @@ +from django.views.generic import ListView +from VIM.apps.instruments.models import Instrument + + +class InstrumentList(ListView): + template_name = "instrument_list.html" + context_object_name = "instruments" + model = Instrument diff --git a/web-app/django/VIM/urls.py b/web-app/django/VIM/urls.py index 1f41702..7fd745b 100644 --- a/web-app/django/VIM/urls.py +++ b/web-app/django/VIM/urls.py @@ -16,7 +16,9 @@ """ from django.contrib import admin from django.urls import path +from VIM.apps.instruments.views.instrument_list import InstrumentList urlpatterns = [ path("admin/", admin.site.urls), + path("instruments/", InstrumentList.as_view(), name="instrument-list"), ] From bae2dd123ea50adda23973dbe85327d74ab83775 Mon Sep 17 00:00:00 2001 From: Dylan Hillerbrand Date: Thu, 28 Sep 2023 09:24:37 -0400 Subject: [PATCH 04/46] Add pagination to instrument list view --- .../VIM/apps/instruments/views/instrument_list.py | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/web-app/django/VIM/apps/instruments/views/instrument_list.py b/web-app/django/VIM/apps/instruments/views/instrument_list.py index 41fd1aa..3e6870b 100644 --- a/web-app/django/VIM/apps/instruments/views/instrument_list.py +++ b/web-app/django/VIM/apps/instruments/views/instrument_list.py @@ -1,8 +1,21 @@ from django.views.generic import ListView from VIM.apps.instruments.models import Instrument - class InstrumentList(ListView): + """ + Provides a paginated list of all instruments in the database. + + Pass `page` and `paginate_by` as query parameters to control pagination. + Defaults to 20 instruments per page. + """ template_name = "instrument_list.html" context_object_name = "instruments" model = Instrument + + def get_paginate_by(self, queryset) -> int: + pag_by_param: str = self.request.GET.get("paginate_by", "20") + try: + paginate_by = int(pag_by_param) + except ValueError: + paginate_by = 20 + return paginate_by \ No newline at end of file From f19483fba7cbc84419a66051da073b0861502cbe Mon Sep 17 00:00:00 2001 From: Dylan Hillerbrand Date: Fri, 29 Sep 2023 15:59:58 -0400 Subject: [PATCH 05/46] Add python formatting action --- .github/workflows/python_format.yml | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 .github/workflows/python_format.yml diff --git a/.github/workflows/python_format.yml b/.github/workflows/python_format.yml new file mode 100644 index 0000000..2b0bd55 --- /dev/null +++ b/.github/workflows/python_format.yml @@ -0,0 +1,10 @@ +name: python-format +on: + pull_request: + types: [opened, synchronize] +jobs: + format-test: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: psf/black@stable \ No newline at end of file From fa8e253936d840d84b0167becbb5a0c946ff9f4a Mon Sep 17 00:00:00 2001 From: Yinan Zhou Date: Fri, 22 Sep 2023 15:12:07 -0400 Subject: [PATCH 06/46] =?UTF-8?q?=F0=9F=86=95=20Initialize=20templates?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../instruments/templates/instrument_list.html | 18 ------------------ .../templates/instruments/index.html | 17 +++++++++++++++++ .../apps/instruments/views/instrument_list.py | 6 ++++-- web-app/django/VIM/settings.py | 4 +++- web-app/django/templates/base.html | 13 +++++++++++++ 5 files changed, 37 insertions(+), 21 deletions(-) delete mode 100644 web-app/django/VIM/apps/instruments/templates/instrument_list.html create mode 100644 web-app/django/VIM/apps/instruments/templates/instruments/index.html create mode 100644 web-app/django/templates/base.html diff --git a/web-app/django/VIM/apps/instruments/templates/instrument_list.html b/web-app/django/VIM/apps/instruments/templates/instrument_list.html deleted file mode 100644 index 5251fae..0000000 --- a/web-app/django/VIM/apps/instruments/templates/instrument_list.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - -

Instrument List

-
    - {% for instrument in instruments %} -
  • {{ instrument.id }}, - {% for instrumentname in instrument.instrumentname_set.all %} - {{ instrumentname.language.en_label }}:{{ instrumentname.name }} - {% endfor %} - -
    • - {% endfor %} -
- - \ No newline at end of file diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/index.html b/web-app/django/VIM/apps/instruments/templates/instruments/index.html new file mode 100644 index 0000000..14ea16e --- /dev/null +++ b/web-app/django/VIM/apps/instruments/templates/instruments/index.html @@ -0,0 +1,17 @@ +{% extends "base.html" %} + +{% block title %} + Instrument List +{% endblock %} + +{% block content %} + {% for instrument in instruments %} +
  • {{ instrument.id }}, + {% for instrumentname in instrument.instrumentname_set.all %} + {{ instrumentname.language.en_label }}:{{ instrumentname.name }} + {% endfor %} + +
    • + {% endfor %} + +{% endblock %} \ No newline at end of file diff --git a/web-app/django/VIM/apps/instruments/views/instrument_list.py b/web-app/django/VIM/apps/instruments/views/instrument_list.py index 3e6870b..3ee9f03 100644 --- a/web-app/django/VIM/apps/instruments/views/instrument_list.py +++ b/web-app/django/VIM/apps/instruments/views/instrument_list.py @@ -1,6 +1,7 @@ from django.views.generic import ListView from VIM.apps.instruments.models import Instrument + class InstrumentList(ListView): """ Provides a paginated list of all instruments in the database. @@ -8,7 +9,8 @@ class InstrumentList(ListView): Pass `page` and `paginate_by` as query parameters to control pagination. Defaults to 20 instruments per page. """ - template_name = "instrument_list.html" + + template_name = "instruments/index.html" context_object_name = "instruments" model = Instrument @@ -18,4 +20,4 @@ def get_paginate_by(self, queryset) -> int: paginate_by = int(pag_by_param) except ValueError: paginate_by = 20 - return paginate_by \ No newline at end of file + return paginate_by diff --git a/web-app/django/VIM/settings.py b/web-app/django/VIM/settings.py index 54300f7..6723de9 100644 --- a/web-app/django/VIM/settings.py +++ b/web-app/django/VIM/settings.py @@ -55,7 +55,9 @@ TEMPLATES = [ { "BACKEND": "django.template.backends.django.DjangoTemplates", - "DIRS": [], + "DIRS": [ + BASE_DIR / "templates", + ], "APP_DIRS": True, "OPTIONS": { "context_processors": [ diff --git a/web-app/django/templates/base.html b/web-app/django/templates/base.html new file mode 100644 index 0000000..8d8f30b --- /dev/null +++ b/web-app/django/templates/base.html @@ -0,0 +1,13 @@ + + + + + + {% block title %}{% endblock %} + {% block css_files %}{% endblock %} + + + {% block content %} {% endblock %} + + + \ No newline at end of file From 09e1d18d5886f10693c6df9c6394419775dad0f5 Mon Sep 17 00:00:00 2001 From: Yinan Zhou Date: Fri, 22 Sep 2023 16:17:10 -0400 Subject: [PATCH 07/46] =?UTF-8?q?=F0=9F=86=95=20Initialize=20css=20files?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../django/VIM/apps/instruments/static/instruments/index.css | 0 .../VIM/apps/instruments/templates/instruments/index.html | 5 +++++ web-app/django/VIM/settings.py | 4 ++++ web-app/django/static/app.css | 5 +++++ web-app/django/templates/base.html | 3 +++ 5 files changed, 17 insertions(+) create mode 100644 web-app/django/VIM/apps/instruments/static/instruments/index.css create mode 100644 web-app/django/static/app.css diff --git a/web-app/django/VIM/apps/instruments/static/instruments/index.css b/web-app/django/VIM/apps/instruments/static/instruments/index.css new file mode 100644 index 0000000..e69de29 diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/index.html b/web-app/django/VIM/apps/instruments/templates/instruments/index.html index 14ea16e..a2a22d3 100644 --- a/web-app/django/VIM/apps/instruments/templates/instruments/index.html +++ b/web-app/django/VIM/apps/instruments/templates/instruments/index.html @@ -1,9 +1,14 @@ {% extends "base.html" %} +{% load static %} {% block title %} Instrument List {% endblock %} +{% block css_files %} + +{% endblock %} + {% block content %} {% for instrument in instruments %}
  • {{ instrument.id }}, diff --git a/web-app/django/VIM/settings.py b/web-app/django/VIM/settings.py index 6723de9..134272e 100644 --- a/web-app/django/VIM/settings.py +++ b/web-app/django/VIM/settings.py @@ -120,6 +120,10 @@ STATIC_URL = "static/" +STATICFILES_DIRS = [ + BASE_DIR / "static" +] + # Default primary key field type # https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field diff --git a/web-app/django/static/app.css b/web-app/django/static/app.css new file mode 100644 index 0000000..f0b3ebf --- /dev/null +++ b/web-app/django/static/app.css @@ -0,0 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;700&display=swap'); + +html { + font-family: 'Noto Sans', sans-serif; +} \ No newline at end of file diff --git a/web-app/django/templates/base.html b/web-app/django/templates/base.html index 8d8f30b..ca298d3 100644 --- a/web-app/django/templates/base.html +++ b/web-app/django/templates/base.html @@ -1,9 +1,12 @@ +{% load static %} + {% block title %}{% endblock %} + {% block css_files %}{% endblock %} From 1d6c490fae5fa1dd95ac82d2b4b20fa9eff2d16d Mon Sep 17 00:00:00 2001 From: Yinan Zhou Date: Fri, 22 Sep 2023 16:40:33 -0400 Subject: [PATCH 08/46] =?UTF-8?q?=F0=9F=86=95=20Create=20404=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web-app/django/templates/404.html | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 web-app/django/templates/404.html diff --git a/web-app/django/templates/404.html b/web-app/django/templates/404.html new file mode 100644 index 0000000..6069969 --- /dev/null +++ b/web-app/django/templates/404.html @@ -0,0 +1,10 @@ +{% extends "base.html" %} + +{% block title %} + Oops +{% endblock %} + +{% block content %} +

    Oops

    +

    We can't seem to find the page you are looking for.

    +{% endblock%} \ No newline at end of file From d3cf892dfb71271532df280dbf467ad6aa72195e Mon Sep 17 00:00:00 2001 From: Yinan Zhou Date: Sat, 23 Sep 2023 17:52:14 -0400 Subject: [PATCH 09/46] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Set=20up=20base?= =?UTF-8?q?=20navbar=20&=20footer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web-app/django/static/app.css | 5 --- web-app/django/static/css/app.css | 47 ++++++++++++++++++++ web-app/django/static/images/lab-logo.png | Bin 0 -> 5922 bytes web-app/django/static/images/logo.svg | 4 ++ web-app/django/templates/base.html | 50 +++++++++++++++++++++- 5 files changed, 99 insertions(+), 7 deletions(-) delete mode 100644 web-app/django/static/app.css create mode 100644 web-app/django/static/css/app.css create mode 100644 web-app/django/static/images/lab-logo.png create mode 100644 web-app/django/static/images/logo.svg diff --git a/web-app/django/static/app.css b/web-app/django/static/app.css deleted file mode 100644 index f0b3ebf..0000000 --- a/web-app/django/static/app.css +++ /dev/null @@ -1,5 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;700&display=swap'); - -html { - font-family: 'Noto Sans', sans-serif; -} \ No newline at end of file diff --git a/web-app/django/static/css/app.css b/web-app/django/static/css/app.css new file mode 100644 index 0000000..f0a5ff1 --- /dev/null +++ b/web-app/django/static/css/app.css @@ -0,0 +1,47 @@ +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;700&display=swap'); + +html { + font-family: 'Noto Sans', sans-serif; +} + +/* header */ +header { + background-color: #9EB384; +} + +.nav-home { + color:#435334; +} + +.nav-opt { + color: #FAF1E4; +} + +.nav-opt:hover, +.nav-opt:active { + color: #435334; +} + +.search-input { + background-color: #FAF1E4; +} + +.login-btn { + color: #FAF1E4; + border: 1px solid #FAF1E4; +} + +.login-btn:hover { + color: #435334; + border: 1px solid #FAF1E4; + background-color: #FAF1E4; +} + +.signup-btn { + color: #435334; +} + +/* main */ +main { + background-color: #FAF1E4; +} \ No newline at end of file diff --git a/web-app/django/static/images/lab-logo.png b/web-app/django/static/images/lab-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..ed6d9ee679a93ed92fedc254adba9702fd444bb2 GIT binary patch literal 5922 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 literal 0 HcmV?d00001 diff --git a/web-app/django/static/images/logo.svg b/web-app/django/static/images/logo.svg new file mode 100644 index 0000000..a7d8233 --- /dev/null +++ b/web-app/django/static/images/logo.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/web-app/django/templates/base.html b/web-app/django/templates/base.html index ca298d3..928c00d 100644 --- a/web-app/django/templates/base.html +++ b/web-app/django/templates/base.html @@ -6,11 +6,57 @@ {% block title %}{% endblock %} - + + + + + {% block css_files %}{% endblock %} + + +
    +
    +
    + + vim icon + VIM + + + + + + +
    + + +
    + {% comment %} TODO: add language button {% endcomment %} +
    +
    +
    + +
    {% block content %} {% endblock %} - +
    + + + + \ No newline at end of file From 6670e1495680670c1c69a66d0392b4aeeb0ff8e3 Mon Sep 17 00:00:00 2001 From: Yinan Zhou Date: Mon, 25 Sep 2023 14:41:48 -0400 Subject: [PATCH 10/46] Add language button --- web-app/django/static/css/app.css | 21 +++++++++++++++++++++ web-app/django/templates/base.html | 8 ++++++++ 2 files changed, 29 insertions(+) diff --git a/web-app/django/static/css/app.css b/web-app/django/static/css/app.css index f0a5ff1..055c335 100644 --- a/web-app/django/static/css/app.css +++ b/web-app/django/static/css/app.css @@ -26,6 +26,12 @@ header { background-color: #FAF1E4; } +.search-input:focus { + background-color: #FAF1E4; + outline: none; /* Remove the outline */ + border: 1px solid #FAF1E4; +} + .login-btn { color: #FAF1E4; border: 1px solid #FAF1E4; @@ -41,6 +47,21 @@ header { color: #435334; } +.language-btn { + color:#435334; +} + +.language-btn:focus { + border-color:#435334; +} + +.dropdown-menu { + background-color: #FAF1E4; +} + +.dropdown-item:hover { + background-color: #CEDEBD; +} /* main */ main { background-color: #FAF1E4; diff --git a/web-app/django/templates/base.html b/web-app/django/templates/base.html index 928c00d..cda1ec2 100644 --- a/web-app/django/templates/base.html +++ b/web-app/django/templates/base.html @@ -42,6 +42,14 @@ {% comment %} TODO: add language button {% endcomment %} +
    + + +
    From 16d0aa6108e3a7e2d27792a94b09d585a4747a45 Mon Sep 17 00:00:00 2001 From: Yinan Zhou Date: Mon, 25 Sep 2023 15:52:06 -0400 Subject: [PATCH 11/46] Minor style adjustment for base page --- web-app/django/static/css/app.css | 11 +++++++++++ web-app/django/templates/base.html | 13 ++++++------- 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/web-app/django/static/css/app.css b/web-app/django/static/css/app.css index 055c335..4557ab2 100644 --- a/web-app/django/static/css/app.css +++ b/web-app/django/static/css/app.css @@ -24,6 +24,11 @@ header { .search-input { background-color: #FAF1E4; + color: #435334; +} + +.search-input::placeholder{ + color: #435334; } .search-input:focus { @@ -62,7 +67,13 @@ header { .dropdown-item:hover { background-color: #CEDEBD; } + /* main */ main { background-color: #FAF1E4; +} + +/* footer */ +footer { + background-color: #FAF1E4; } \ No newline at end of file diff --git a/web-app/django/templates/base.html b/web-app/django/templates/base.html index cda1ec2..5008682 100644 --- a/web-app/django/templates/base.html +++ b/web-app/django/templates/base.html @@ -17,20 +17,19 @@ -
    +
    - + vim icon VIM
    • -
    + -
    From 224bea1ac1b926d6fc4116bbef24db740e9f6fd5 Mon Sep 17 00:00:00 2001 From: Yinan Zhou Date: Thu, 28 Sep 2023 16:56:16 -0400 Subject: [PATCH 26/46] Rename content-container to body-container --- .../VIM/apps/instruments/static/instruments/css/index.css | 4 ++-- .../VIM/apps/instruments/templates/instruments/index.html | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/web-app/django/VIM/apps/instruments/static/instruments/css/index.css b/web-app/django/VIM/apps/instruments/static/instruments/css/index.css index d84f22b..fdfb6f5 100644 --- a/web-app/django/VIM/apps/instruments/static/instruments/css/index.css +++ b/web-app/django/VIM/apps/instruments/static/instruments/css/index.css @@ -42,8 +42,8 @@ hr { color: #9EB384; } -/* content */ -.content-container { +/* body */ +.body-container { background-color: white; border: 3px solid #9EB384; border-radius: 30px; diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/index.html b/web-app/django/VIM/apps/instruments/templates/instruments/index.html index 3948cda..af1b95e 100644 --- a/web-app/django/VIM/apps/instruments/templates/instruments/index.html +++ b/web-app/django/VIM/apps/instruments/templates/instruments/index.html @@ -92,7 +92,7 @@

    #####

    -
    +

    INSTRUMENT LIST

    From 3b0cc572bd08a9ed3a3116c7f981f2cf298f483a Mon Sep 17 00:00:00 2001 From: Yinan Zhou Date: Thu, 28 Sep 2023 17:36:45 -0400 Subject: [PATCH 27/46] =?UTF-8?q?=E2=99=BB=EF=B8=8FUpdate=20ImagesLoaded?= =?UTF-8?q?=20&=20Masonry?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../static/instruments/js/masonry.js | 22 ++++++++++--------- .../templates/instruments/index.html | 2 +- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/web-app/django/VIM/apps/instruments/static/instruments/js/masonry.js b/web-app/django/VIM/apps/instruments/static/instruments/js/masonry.js index dfa7212..d1b70b5 100644 --- a/web-app/django/VIM/apps/instruments/static/instruments/js/masonry.js +++ b/web-app/django/VIM/apps/instruments/static/instruments/js/masonry.js @@ -1,14 +1,16 @@ -function initMasonry() { - var masonryGrid = document.getElementById('masonry-grid'); - +// Wait for the DOM to be fully loaded +document.addEventListener("DOMContentLoaded", function () { + // Initialize Masonry + var masonryGrid = document.getElementById("masonry-grid"); var masonry = new Masonry(masonryGrid, { - itemSelector: '.col', - columnWidth: '.col', - percentPosition: true, + percentPosition: true, }); -} -var masonryGrid = document.getElementById('masonry-grid'); -imagesLoaded(masonryGrid, initMasonry); + // Initialize ImagesLoaded + var imgLoad = imagesLoaded(masonryGrid); -window.addEventListener('resize', initMasonry); \ No newline at end of file + // When all images are loaded, relayout Masonry + imgLoad.on("always", function () { + masonry.layout(); + }); +}); diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/index.html b/web-app/django/VIM/apps/instruments/templates/instruments/index.html index af1b95e..a260ccf 100644 --- a/web-app/django/VIM/apps/instruments/templates/instruments/index.html +++ b/web-app/django/VIM/apps/instruments/templates/instruments/index.html @@ -164,6 +164,6 @@

    INSTRUMENT LIST

    {% block script %} - + {% endblock %} \ No newline at end of file From 6587d0d8f16e7d6f75e08a53d4b7cc681b32f265 Mon Sep 17 00:00:00 2001 From: Yinan Zhou Date: Thu, 28 Sep 2023 18:52:23 -0400 Subject: [PATCH 28/46] Add masonry display button --- .../apps/instruments/static/instruments/css/index.css | 10 ++++++++++ .../apps/instruments/templates/instruments/index.html | 9 +++++++-- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/web-app/django/VIM/apps/instruments/static/instruments/css/index.css b/web-app/django/VIM/apps/instruments/static/instruments/css/index.css index fdfb6f5..95ff951 100644 --- a/web-app/django/VIM/apps/instruments/static/instruments/css/index.css +++ b/web-app/django/VIM/apps/instruments/static/instruments/css/index.css @@ -49,6 +49,16 @@ hr { border-radius: 30px; } +.display-btn { + font-weight: bold; + color: #435334; + font-size: 20px; +} + +.display-btn:focus { + border-color:#435334; +} + .card { background-color: #FAF1E4; } diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/index.html b/web-app/django/VIM/apps/instruments/templates/instruments/index.html index a260ccf..6ec5fee 100644 --- a/web-app/django/VIM/apps/instruments/templates/instruments/index.html +++ b/web-app/django/VIM/apps/instruments/templates/instruments/index.html @@ -92,8 +92,13 @@

    #####

    -
    -

    INSTRUMENT LIST

    +
    +
    +

    INSTRUMENT LIST

    + +
    From 28e70d06c74384a329bf96bd0f00510595b21205 Mon Sep 17 00:00:00 2001 From: Yinan Zhou Date: Fri, 29 Sep 2023 10:42:23 -0400 Subject: [PATCH 29/46] Add display switch functionality --- .../static/instruments/js/display.js | 25 +++++++++++++++++++ .../templates/instruments/index.html | 7 ++++++ 2 files changed, 32 insertions(+) create mode 100644 web-app/django/VIM/apps/instruments/static/instruments/js/display.js diff --git a/web-app/django/VIM/apps/instruments/static/instruments/js/display.js b/web-app/django/VIM/apps/instruments/static/instruments/js/display.js new file mode 100644 index 0000000..367973c --- /dev/null +++ b/web-app/django/VIM/apps/instruments/static/instruments/js/display.js @@ -0,0 +1,25 @@ + +const masonryBtn = document.getElementById("masonry-btn"); +const listBtn = document.getElementById("list-btn"); +const stdBtn = document.getElementById("std-btn"); + + +masonryBtn.addEventListener("click", () => { + masonryBtn.style.display = "none"; + listBtn.style.display = ""; + stdBtn.style.display = "none"; +}); + + +listBtn.addEventListener("click", () => { + masonryBtn.style.display = "none"; + listBtn.style.display = "none"; + stdBtn.style.display = ""; +}); + + +stdBtn.addEventListener("click", () => { + masonryBtn.style.display = ""; + listBtn.style.display = "none"; + stdBtn.style.display = "none"; +}); diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/index.html b/web-app/django/VIM/apps/instruments/templates/instruments/index.html index 6ec5fee..37f910b 100644 --- a/web-app/django/VIM/apps/instruments/templates/instruments/index.html +++ b/web-app/django/VIM/apps/instruments/templates/instruments/index.html @@ -98,6 +98,12 @@

    INSTRUMENT LIST

    + +
    @@ -171,4 +177,5 @@

    INSTRUMENT LIST

    + {% endblock %} \ No newline at end of file From 3be81452f3d9300700dc3177fd467733a0fb6079 Mon Sep 17 00:00:00 2001 From: Yinan Zhou Date: Fri, 29 Sep 2023 10:58:36 -0400 Subject: [PATCH 30/46] Adjust layout style --- .../instruments/templates/instruments/index.html | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/index.html b/web-app/django/VIM/apps/instruments/templates/instruments/index.html index 37f910b..0b7af97 100644 --- a/web-app/django/VIM/apps/instruments/templates/instruments/index.html +++ b/web-app/django/VIM/apps/instruments/templates/instruments/index.html @@ -94,26 +94,26 @@

    #####

    -

    INSTRUMENT LIST

    - - -
    -
    +
    {% for instrument in instruments %} -
    +
    -
    +
    instrument image -
    +

    {% for instrumentname in instrument.instrumentname_set.all %} {% if instrumentname.language.en_label == "english" %} From 0fa5407edec7df4f68b717f68d9d89c9abfd95e1 Mon Sep 17 00:00:00 2001 From: Yinan Zhou Date: Fri, 29 Sep 2023 18:07:01 -0400 Subject: [PATCH 31/46] =?UTF-8?q?=F0=9F=AA=84=20Add=20list=20view?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../static/instruments/css/index.css | 30 ++++++++++++++++- .../static/instruments/js/display.js | 14 +++++--- .../static/instruments/js/masonry.js | 2 +- .../templates/instruments/index.html | 25 +++------------ .../templates/instruments/listView.html | 32 +++++++++++++++++++ .../templates/instruments/masonryView.html | 20 ++++++++++++ .../templates/instruments/stdView.html | 3 ++ 7 files changed, 99 insertions(+), 27 deletions(-) create mode 100644 web-app/django/VIM/apps/instruments/templates/instruments/listView.html create mode 100644 web-app/django/VIM/apps/instruments/templates/instruments/masonryView.html create mode 100644 web-app/django/VIM/apps/instruments/templates/instruments/stdView.html diff --git a/web-app/django/VIM/apps/instruments/static/instruments/css/index.css b/web-app/django/VIM/apps/instruments/static/instruments/css/index.css index 95ff951..384b221 100644 --- a/web-app/django/VIM/apps/instruments/static/instruments/css/index.css +++ b/web-app/django/VIM/apps/instruments/static/instruments/css/index.css @@ -7,6 +7,10 @@ h4 { font-weight: 700; } +h5 { + color: #435334; +} + hr { border: 1.5px solid #435334; margin-top: 0; @@ -63,7 +67,7 @@ hr { background-color: #FAF1E4; } -.card-text { +.card-title { color: #435334; } @@ -78,4 +82,28 @@ hr { .page-number, .page-link:hover { color: #9EB384; +} + +/* list view */ +.list-item-container { + min-height: 200px; + max-height: 300px; + overflow: hidden; +} + +.square-image-container img { + width: 100%; + height: auto; +} + +.card-title h5:hover { + color: #9EB384; +} + +.more-info { + color: #435334; +} + +.more-info:hover { + border: 1px solid #435334; } \ No newline at end of file diff --git a/web-app/django/VIM/apps/instruments/static/instruments/js/display.js b/web-app/django/VIM/apps/instruments/static/instruments/js/display.js index 367973c..efe887d 100644 --- a/web-app/django/VIM/apps/instruments/static/instruments/js/display.js +++ b/web-app/django/VIM/apps/instruments/static/instruments/js/display.js @@ -3,23 +3,29 @@ const masonryBtn = document.getElementById("masonry-btn"); const listBtn = document.getElementById("list-btn"); const stdBtn = document.getElementById("std-btn"); +const masonryView = document.getElementById('masonry-view'); +const listView = document.getElementById('list-view'); +const stdView = document.getElementById('std-view'); masonryBtn.addEventListener("click", () => { masonryBtn.style.display = "none"; listBtn.style.display = ""; - stdBtn.style.display = "none"; + masonryView.style.display = "none"; + listView.style.display = ""; }); listBtn.addEventListener("click", () => { - masonryBtn.style.display = "none"; listBtn.style.display = "none"; stdBtn.style.display = ""; + listView.style.display = "none"; + stdView.style.display = ""; }); stdBtn.addEventListener("click", () => { masonryBtn.style.display = ""; - listBtn.style.display = "none"; stdBtn.style.display = "none"; -}); + masonryView.style.display = ""; + stdView.style.display = "none"; +}); \ No newline at end of file diff --git a/web-app/django/VIM/apps/instruments/static/instruments/js/masonry.js b/web-app/django/VIM/apps/instruments/static/instruments/js/masonry.js index d1b70b5..3dcec22 100644 --- a/web-app/django/VIM/apps/instruments/static/instruments/js/masonry.js +++ b/web-app/django/VIM/apps/instruments/static/instruments/js/masonry.js @@ -1,7 +1,7 @@ // Wait for the DOM to be fully loaded document.addEventListener("DOMContentLoaded", function () { // Initialize Masonry - var masonryGrid = document.getElementById("masonry-grid"); + var masonryGrid = document.getElementById("masonry-view"); var masonry = new Masonry(masonryGrid, { percentPosition: true, }); diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/index.html b/web-app/django/VIM/apps/instruments/templates/instruments/index.html index 0b7af97..b30ca7c 100644 --- a/web-app/django/VIM/apps/instruments/templates/instruments/index.html +++ b/web-app/django/VIM/apps/instruments/templates/instruments/index.html @@ -106,27 +106,10 @@

    INSTRUMENT LIST

    -
    - +
    + {% include "instruments/masonryView.html" %} + {% include "instruments/listView.html" %} + {% include "instruments/stdView.html" %}
    diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/listView.html b/web-app/django/VIM/apps/instruments/templates/instruments/listView.html new file mode 100644 index 0000000..b503b99 --- /dev/null +++ b/web-app/django/VIM/apps/instruments/templates/instruments/listView.html @@ -0,0 +1,32 @@ + \ No newline at end of file diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/masonryView.html b/web-app/django/VIM/apps/instruments/templates/instruments/masonryView.html new file mode 100644 index 0000000..7c6b894 --- /dev/null +++ b/web-app/django/VIM/apps/instruments/templates/instruments/masonryView.html @@ -0,0 +1,20 @@ + \ No newline at end of file diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/stdView.html b/web-app/django/VIM/apps/instruments/templates/instruments/stdView.html new file mode 100644 index 0000000..6f7d013 --- /dev/null +++ b/web-app/django/VIM/apps/instruments/templates/instruments/stdView.html @@ -0,0 +1,3 @@ + \ No newline at end of file From b7abc5865e4037e77a75650240c831973090892e Mon Sep 17 00:00:00 2001 From: Yinan Zhou Date: Mon, 2 Oct 2023 11:29:24 -0400 Subject: [PATCH 32/46] Align image center --- .../VIM/apps/instruments/templates/instruments/listView.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/listView.html b/web-app/django/VIM/apps/instruments/templates/instruments/listView.html index b503b99..33beda5 100644 --- a/web-app/django/VIM/apps/instruments/templates/instruments/listView.html +++ b/web-app/django/VIM/apps/instruments/templates/instruments/listView.html @@ -1,7 +1,7 @@