App view layout (#194)

brain-score · Nov 7, 2023 · 91234b9 · 91234b9
1 parent 9aeada2
commit 91234b9
Show file tree

Hide file tree

Showing 32 changed files with 814 additions and 239 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,11 @@
+.sass-cache/
+__pycache__
+brain_score.web.egg-info/
+build/
+db.sqlite3
+dist/
+django.log
+node_modules/
+static/admin/
+static/CACHE/
+venv
diff --git a/README.md b/README.md
@@ -1,11 +1,46 @@
 [![Build Status](https://travis-ci.com/brain-score/brain-score.web.svg?branch=master)](https://travis-ci.com/brain-score/brain-score.web)
 
 ## Setup
-Install dependencies: `pip install .`
+
+Ensure you are using `python@3.8`
+
+Create and activate a virtual environment
+
+```
+python3 -m venv <env_name>
+source <env_name>/bin/activate
+```
+
+Install dependencies:
+
+```
+python3 -m pip install --upgrade pip
+pip3 install -r requirements.txt
+```
 
 Install node dependencies: `npm install --no-optional`
 
-Run server: `python manage.py runserver &`
+Run server in dev: `DEBUG=True python manage.py runserver &`
+
+
+### Setup Errors - troubleshooting
+
+Error installing sass with pip:
+
+```
+ERROR: Failed building wheel for sass
+```
+
+Install `cython` and try again
+
+```
+pip3 install cython
+pip3 install -r requirements.txt
+```
+
+Error installing `psycopg2` Error: pg_config executable not found. - Install postgresql `brew install postgresql`
+
+Error running the server  - `/bin/sh: command not found: sass` - `npm install -g sass`
 
 
 ## Update data

diff --git a/benchmarks/templates/benchmarks/base.html b/benchmarks/templates/benchmarks/base.html
@@ -93,49 +93,13 @@
 
     <title>{{title}}</title>
 </head>
-<body class="page-main">
-
-{% block navbar %}
-<nav class="navbar is-fixed-top is-transparent" role="navigation" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-<div class="container">
-    <div class="navbar-brand">
-        <a href="{{url}}" class="navbar-item">
-            <img src="{{logo_url}}" />
-        </a>
-
-        <a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
-            <span aria-hidden="true"></span>
-            <span aria-hidden="true"></span>
-            <span aria-hidden="true"></span>
-        </a>
-    </div>
-    <div id="navMenu" class="navbar-menu">
-        <div class="navbar-end">
-            <a class="navbar-item" href="http://{{ request.get_host }}/{{ domain }}/#leaderboard">Leaderboard</a>
-            <a class="navbar-item" href="http://{{ request.get_host }}/{{ domain }}/#about">About</a>
-            <a class="navbar-item" href="http://{{ request.get_host }}/{{ domain }}/#compare">Compare</a>
-            <a class="navbar-item" href="http://{{ request.get_host }}/{{ domain }}/#participate">Participate</a>
-        </div>
-    </div>
-</div>
-</nav>
-{% endblock %}
-
-
-<main class="content">
-{% block content %}{% endblock %}
-</main>
-
-{% block footer %}
-<footer>
-    <br />
-    <div class="content has-text-centered">
-        <p><a href="https://github.com/brain-score">Brain-Score team</a></p>
-    </div>
-</footer>
-{% endblock %}
 
+<body>
+    <main>
+        {% block main %}{% endblock %}
+    </main>
 </body>
+
 </html>
 
 {% endwith %}

diff --git a/benchmarks/templates/benchmarks/central_profile.html b/benchmarks/templates/benchmarks/central_profile.html
@@ -1,6 +1,6 @@
 {% extends 'benchmarks/base.html' %}
 {% load static %}
-{% block content %}
+{% block main %}
 
     {% if user %}
         <section id="profile" class="container center">
@@ -45,4 +45,4 @@ <h1>{{ user.email }}</h1>
 
     {% else %}
     {% endif %}
-{% endblock %}
+{% endblock %}
diff --git a/benchmarks/templates/benchmarks/competition.html b/benchmarks/templates/benchmarks/competition.html
@@ -2,7 +2,7 @@
 {% load static %}
 
 {# site navigation #}
-{% block navbar %}
+{% block main %}
     <nav class="navbar is-fixed-top is-transparent" role="navigation"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
         <div class="container">
@@ -31,9 +31,6 @@
             </div>
         </div>
     </nav>
-{% endblock %}
-
-{% block content %}
     <section class="hero competition-hero">
         <div class="hero-body container">
             <p class="title">

diff --git a/benchmarks/templates/benchmarks/components/app-view.html b/benchmarks/templates/benchmarks/components/app-view.html
@@ -0,0 +1,26 @@
+{% extends "benchmarks/base.html" %}
+
+{% block main %}
+<div class="left-sidebar">
+  {% include "benchmarks/components/left-sidebar.html" %}
+</div>
+
+<div class="content-container">
+    <div class="banner box gradient">
+        {% block banner %}
+        <h1>Welcome to Brain-Score!</h1>
+        <p>Navigate our dashboard to view key submission data.</p>
+        {% endblock %}
+    </div>
+
+    <div class="columns is-2 is-variable">
+        <div class="column">
+            {% block content %}{% endblock %}
+        </div>
+
+        <div class="info-section column is-3">
+            {% block info_section %}{% endblock %}
+        </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/benchmarks/templates/benchmarks/components/left-sidebar.html b/benchmarks/templates/benchmarks/components/left-sidebar.html
@@ -0,0 +1,4 @@
+<a class="selected" href="#">Leaderboard</a>
+<a href="#">Compare</a>
+<a href="#">Tutorials</a>
+<a href="#">Profile</a>
diff --git a/benchmarks/templates/benchmarks/index.html b/benchmarks/templates/benchmarks/index.html
@@ -1,6 +1,6 @@
 {% extends "benchmarks/base.html" %}
 
-{% block content %}
+{% block main %}
 
     <section id="leaderboard" class="container tablecenter is-centered">
         {% include "benchmarks/table.html" %}

diff --git a/benchmarks/templates/benchmarks/invalid_zip.html b/benchmarks/templates/benchmarks/invalid_zip.html
@@ -1,6 +1,6 @@
 {% extends 'benchmarks/base.html' %}
 
-{% block content %}
+{% block main %}
     <section id="success" class="container center">
 
         <article class="message">

diff --git a/benchmarks/templates/benchmarks/landing_page.html b/benchmarks/templates/benchmarks/landing_page.html
@@ -3,8 +3,7 @@
 {% load compress %}
 
 
-
-{% block navbar %}
+{% block main %}
 <nav class="navbar updated is-fixed-top is-transparent">
     <div class= "container my_container nav-container">
         <div class="navbar-brand">
@@ -32,9 +31,7 @@
         </div>
     </div>
 </nav>
-{% endblock %}
 
-{% block content %}
 <div class=" container my_container landing">
     <div class="columns">
         <div class="left_side column is-half has-text-centered-mobile">
@@ -128,8 +125,6 @@ <h3 class=benefits_heading>Ready to Submit?</h3>
             </div>
         </div>
     </div>
-{% endblock %}
-{% block footer %}
     <div class="container my_container main_footer">
         <div class="columns has-text-centered-mobile">
             <div class="column has-text-centered ">
@@ -155,6 +150,5 @@ <h3 class=benefits_heading>Ready to Submit?</h3>
             </div>
         </div>
     </div>
-{% endblock %}
 </div>
-
+{% endblock %}
diff --git a/benchmarks/templates/benchmarks/leaderboard/info-section.html b/benchmarks/templates/benchmarks/leaderboard/info-section.html
@@ -0,0 +1,15 @@
+<div class="box">
+  <h3 class="title">How to Interpret</h3>
+  <div class="content">
+    Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
+  </div>
+</div>
+
+<div class="box">
+  <div class="title">Ready to Submit</div>
+  <div class="content">
+    Below you will find links on how to prepare a model for submission and receive a Brain-Score! You will also find the same for submitting a benchmark with detailed tutorials available for both  modelers and experimentalists.
+  </div>
+  <button class="button button-primary">Tutorials</button>
+  <button class="button button-ghost">Submit</button>
+</div>
diff --git a/benchmarks/templates/benchmarks/leaderboard/leaderboard.html b/benchmarks/templates/benchmarks/leaderboard/leaderboard.html
@@ -0,0 +1,40 @@
+{% extends "benchmarks/components/app-view.html" %}
+
+{% block content %}
+<div class="columns is-2 is-variable">
+  <div class="column is-4">
+    <div class="box">
+      <div class="gradient">
+        <p>Total Benchmarks</p>
+      </div>
+      <div>
+        32
+      </div>
+    </div>
+    <div class="box">
+      <div class="gradient">
+        <p>Total Models</p>
+      </div>
+      <div>
+        126
+      </div>
+    </div>
+  </div>
+
+  <div class="column">
+    <div class="box" style="height: 100%;">
+      Graph
+    </div>
+  </div>
+</div>
+
+<div>
+  <div class="box">
+    Leaderboard
+  </div>
+</div>
+{% endblock %}
+
+{% block info_section %}
+  {% include "benchmarks/leaderboard/info-section.html" %}
+{% endblock %}