chore(nimbus): replace tailwind with bootstrap (#10653)
Because * We investigated using tailwind for the new nimbus ui * It turns out tailwinds utility class pattern is more verbose than expected * We'll just continue to use bootstrap since it's worked well for previous uis in experimenter This commit * Removes tailwind * Adds bootstrap5 * Reimplements the new history page in bootstrap5 fixes #10543  
This commit is contained in:
Jared Lockhart
GitHub
Родитель
018116ed9b
Коммит
e483f54bba
|
|
@ -18,22 +18,12 @@ services:
|
|||
- media_volume:/experimenter/experimenter/media
|
||||
- /experimenter/experimenter/legacy/legacy-ui/core/.cache/
|
||||
- /experimenter/experimenter/legacy/legacy-ui/core/node_modules/
|
||||
- /experimenter/experimenter/nimbus_ui_new/theme/static_src/node_modules/
|
||||
- /experimenter/experimenter/nimbus-ui/node_modules/
|
||||
- /experimenter/experimenter/served/
|
||||
- /experimenter/node_modules/
|
||||
- ${GOOGLE_ADC_FILE}:${GOOGLE_APPLICATION_CREDENTIALS}:ro
|
||||
command: bash -c "python bin/setup_kinto.py;/experimenter/bin/wait-for-it.sh db:5432 -- python /experimenter/manage.py runserver 0:7001"
|
||||
|
||||
tailwind:
|
||||
image: experimenter:dev
|
||||
env_file: .env
|
||||
tty: true
|
||||
volumes:
|
||||
- ./experimenter:/experimenter
|
||||
- /experimenter/experimenter/nimbus_ui_new/theme/static_src/node_modules/
|
||||
command: "yarn --cwd /experimenter/experimenter/nimbus_ui_new/theme/static_src run dev"
|
||||
|
||||
yarn-nimbus-ui:
|
||||
image: experimenter:dev
|
||||
env_file: .env
|
||||
|
|
|
|||
|
|
@ -67,11 +67,6 @@ COPY --from=file-loader /experimenter/experimenter/legacy/legacy-ui/core/package
|
|||
COPY --from=file-loader /experimenter/experimenter/nimbus-ui/package.json /experimenter/experimenter/nimbus-ui/package.json
|
||||
RUN yarn install --frozen-lockfile
|
||||
|
||||
# Node packages for htmx ui
|
||||
COPY --from=file-loader /experimenter/experimenter/nimbus_ui_new/theme/static_src/package.json /experimenter/experimenter/nimbus_ui_new/theme/static_src/package.json
|
||||
COPY --from=file-loader /experimenter/experimenter/nimbus_ui_new/theme/static_src/yarn.lock /experimenter/experimenter/nimbus_ui_new/theme/static_src/yarn.lock
|
||||
RUN yarn install --frozen-lockfile --cwd /experimenter/experimenter/nimbus_ui_new/theme/static_src
|
||||
|
||||
|
||||
# Dev image
|
||||
#-------------------------
|
||||
|
|
@ -88,7 +83,6 @@ COPY --from=python-builder /usr/local/lib/python3.11/site-packages/ /usr/local/l
|
|||
|
||||
# Node packages
|
||||
COPY --from=node-builder /experimenter/experimenter/legacy/legacy-ui/core/node_modules/ /experimenter/experimenter/legacy/legacy-ui/core/node_modules/
|
||||
COPY --from=node-builder /experimenter/experimenter/nimbus_ui_new/theme/static_src/node_modules/ /experimenter/experimenter/nimbus_ui_new/theme/static_src/node_modules/
|
||||
COPY --from=node-builder /experimenter/experimenter/nimbus-ui/node_modules/ /experimenter/experimenter/nimbus-ui/node_modules/
|
||||
COPY --from=node-builder /experimenter/node_modules/ /experimenter/node_modules/
|
||||
|
||||
|
|
@ -121,11 +115,6 @@ RUN yarn workspace @experimenter/core build
|
|||
COPY --from=file-loader /experimenter/experimenter/nimbus-ui/ /experimenter/experimenter/nimbus-ui/
|
||||
RUN yarn workspace @experimenter/nimbus-ui build
|
||||
|
||||
# Build static assets
|
||||
COPY --from=file-loader /experimenter/experimenter/nimbus_ui_new/theme/ /experimenter/experimenter/nimbus_ui_new/theme/
|
||||
COPY --from=file-loader /experimenter/experimenter/nimbus_ui_new/templates/ /experimenter/experimenter/nimbus_ui_new/templates/
|
||||
RUN yarn --cwd /experimenter/experimenter/nimbus_ui_new/theme/static_src build
|
||||
|
||||
|
||||
# Deploy image
|
||||
#-------------------------
|
||||
|
|
@ -154,6 +143,4 @@ COPY --from=file-loader /experimenter/experimenter/ /experimenter/experimenter/
|
|||
COPY --from=file-loader /experimenter/manifesttool/ /experimenter/manifesttool/
|
||||
COPY --from=ui /experimenter/experimenter/legacy/legacy-ui/assets/ /experimenter/experimenter/legacy/legacy-ui/assets/
|
||||
COPY --from=ui /experimenter/experimenter/nimbus-ui/build/ /experimenter/experimenter/nimbus-ui/build/
|
||||
COPY --from=ui /experimenter/experimenter/nimbus_ui_new/theme/static/ /experimenter/experimenter/nimbus_ui_new/theme/static/
|
||||
COPY --from=ui /experimenter/experimenter/nimbus_ui_new/static/scripts/ /experimenter/experimenter/nimbus_ui_new/static/scripts/
|
||||
ENV PYTHONPATH=$PYTHONPATH:/application-services/
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import json
|
||||
import uuid
|
||||
|
||||
from django.contrib.postgres.fields import ArrayField
|
||||
from django.db import models
|
||||
|
|
@ -167,6 +168,7 @@ def get_formatted_change_object(field_name, field_diff, changelog, timestamp):
|
|||
)
|
||||
|
||||
return {
|
||||
"id": str(uuid.uuid4()),
|
||||
"event": event_name,
|
||||
"event_message": change_message,
|
||||
"changed_by": changelog.changed_by,
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ class TestChangeFormattingMethod(TestCase):
|
|||
)
|
||||
|
||||
expected_change = {
|
||||
"id": change["id"],
|
||||
"event": ChangeEventType.STATE.name,
|
||||
"event_message": (
|
||||
f"{self.user} changed value of {field_display_name} from "
|
||||
|
|
@ -140,6 +141,7 @@ class TestChangeFormattingMethod(TestCase):
|
|||
)
|
||||
|
||||
expected_change = {
|
||||
"id": change["id"],
|
||||
"event": ChangeEventType.DETAILED.name,
|
||||
"event_message": f"{self.user} changed value of {field_display_name}",
|
||||
"changed_by": self.user,
|
||||
|
|
@ -191,6 +193,7 @@ class TestChangeFormattingMethod(TestCase):
|
|||
)
|
||||
|
||||
expected_change = {
|
||||
"id": change["id"],
|
||||
"event": ChangeEventType.DETAILED.name,
|
||||
"event_message": f"{self.user} changed value of {field_display_name}",
|
||||
"changed_by": self.user,
|
||||
|
|
@ -251,6 +254,7 @@ class TestChangeFormattingMethod(TestCase):
|
|||
)
|
||||
|
||||
expected_change = {
|
||||
"id": change["id"],
|
||||
"event": ChangeEventType.DETAILED.name,
|
||||
"event_message": f"{self.user} changed value of {field_display_name}",
|
||||
"changed_by": self.user,
|
||||
|
|
@ -300,6 +304,7 @@ class TestChangeFormattingMethod(TestCase):
|
|||
)
|
||||
|
||||
expected_change = {
|
||||
"id": change["id"],
|
||||
"event": ChangeEventType.DETAILED.name,
|
||||
"event_message": f"{self.user} changed value of {field_display_name}",
|
||||
"changed_by": self.user,
|
||||
|
|
@ -349,6 +354,7 @@ class TestChangeFormattingMethod(TestCase):
|
|||
)
|
||||
|
||||
expected_change = {
|
||||
"id": change["id"],
|
||||
"event": ChangeEventType.DETAILED.name,
|
||||
"event_message": f"{self.user} changed value of {field_display_name}",
|
||||
"changed_by": self.user,
|
||||
|
|
@ -398,6 +404,7 @@ class TestChangeFormattingMethod(TestCase):
|
|||
)
|
||||
|
||||
expected_change = {
|
||||
"id": change["id"],
|
||||
"event": ChangeEventType.BOOLEAN.name,
|
||||
"event_message": f"{self.user} set the {field_display_name} as {new_value}",
|
||||
"changed_by": self.user,
|
||||
|
|
|
|||
|
|
@ -2527,6 +2527,7 @@ class TestNimbusExperiment(TestCase):
|
|||
"date": current_date,
|
||||
"changes": [
|
||||
{
|
||||
"id": experiment_changelogs[0]["changes"][0]["id"],
|
||||
"event": ChangeEventType.STATE.name,
|
||||
"event_message": (
|
||||
f"{user} changed value of Status from "
|
||||
|
|
@ -2538,6 +2539,7 @@ class TestNimbusExperiment(TestCase):
|
|||
"new_value": "Preview",
|
||||
},
|
||||
{
|
||||
"id": experiment_changelogs[0]["changes"][1]["id"],
|
||||
"event": ChangeEventType.STATE.name,
|
||||
"event_message": (
|
||||
f"{user} changed value of Publish Status from "
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,42 +1,90 @@
|
|||
{% extends "layout/with_sidebar.html" %}
|
||||
{% extends "common/with_sidebar.html" %}
|
||||
|
||||
{% block title %}
|
||||
History
|
||||
History
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block sidebar %}
|
||||
{% include "common/experiment_details_sidebar.html" with experiment=experiment %}
|
||||
{% include "common/experiment_details_sidebar.html" with experiment=experiment %}
|
||||
{% endblock %}
|
||||
|
||||
{% block main_content %}
|
||||
<div class="p-5 sm:p-8 space-y-4">
|
||||
<div class="mb-6 space-y-1">
|
||||
<h1 class="text-2xl sm:text-3xl text-gray-800 font-medium">Changes Overview</h1>
|
||||
<p class="text-sm sm:text-base text-gray-500">{{ experiment.slug }}</p>
|
||||
<div class="container-fluid">
|
||||
{% for changelog in experiment.get_changelogs_by_date %}
|
||||
<div class="row">
|
||||
<div class="col-1 text-center py-1" style="z-index: 1;">
|
||||
<span class="badge rounded-pill text-bg-light text-primary shadow">
|
||||
<i class="fa-regular fa-calendar fs-5"></i>
|
||||
</span>
|
||||
<div class="d-flex justify-content-center" style="height: 100%;">
|
||||
<div class="vr" style="width:3px;background-color: #ccc;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center max-w-screen-2xl w-full h-full flex-col items-center px-2 sm:px-4">
|
||||
<ol class="border-l-2 border-gray-800 w-full">
|
||||
{% for changelog in experiment.get_changelogs_by_date %}
|
||||
<li class="mb-8">
|
||||
<div class="flex-start flex items-center">
|
||||
<div class="-ml-[16px] -mt-2 mr-3 flex items-center justify-center rounded-full p-2 floating bg-white">
|
||||
<i class="fa-regular fa-calendar text-azure"></i>
|
||||
</div>
|
||||
<h4 class="-mt-2 text-lg sm:text-xl font-semibold text-gray-600">{{ changelog.date }}</h4>
|
||||
<div class="col-11">
|
||||
<span class="fs-5 fw-semibold">
|
||||
{{ changelog.date }}</span>
|
||||
<div class="mb-4 card border-0 col-11">
|
||||
<div class="card-body bg-body-tertiary">
|
||||
{% for change in changelog.changes %}
|
||||
<div class="row mb-2">
|
||||
|
||||
<div class="col-8">
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
{{ change.event_message }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-2 space-y-3 p-2 ml-6 bg-slate-50 rounded-md">
|
||||
{% for change in changelog.changes %}
|
||||
{% if change.event == "DETAILED" %}
|
||||
{% include "components/change_card.html" with change=change isDetailed=True %}
|
||||
{% else %}
|
||||
{% include "components/change_card.html" with change=change isDetailed=False %}
|
||||
|
||||
<div class="col-4">
|
||||
<ul class="nav nav-pills justify-content-end">
|
||||
{% if change.event == 'DETAILED' %}
|
||||
<li class="nav-item">
|
||||
<small>
|
||||
<a class="nav-link py-0" data-bs-toggle="collapse" href="#collapseExample-{{change.id}}"
|
||||
role="button" aria-expanded="false" aria-controls="collapseExample">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
Show more
|
||||
</a>
|
||||
</small>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<li class="nav-item">
|
||||
<small class="text-secondary">
|
||||
{{change.timestamp}}
|
||||
</small>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="collapse" id="collapseExample-{{change.id}}">
|
||||
<div class="card my-3">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col border-end">
|
||||
<h6>Old Value</h6>
|
||||
<pre style="white-space: pre-wrap;">
|
||||
{{ change.old_value|safe }}
|
||||
</pre>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h6>New Value</h6>
|
||||
<pre style="white-space: pre-wrap;">
|
||||
{{ change.new_value|safe }}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,78 +1,20 @@
|
|||
<div x-data="redirect" class="flex flex-col w-full h-full">
|
||||
<div class="overflow-y-auto overflow-x-hidden flex-grow">
|
||||
<div class="px-5">
|
||||
<a class="flex justify-start space-x-2 items-center text-gray-500" href="{% url 'nimbus-detail' experiment.slug %}">
|
||||
<i class="fa-solid fa-chevron-left h-3"></i>
|
||||
<p class="text-md">Back to Summary</p>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="flex flex-col py-4 space-y-1">
|
||||
<li class="px-5">
|
||||
<div class="flex flex-row items-center h-8">
|
||||
<div class="text-sm w-full flex flex-row items-center justify-between font-light tracking-wide text-gray-500">
|
||||
Edit
|
||||
<hr class="border-t ml-2 w-full border-gray-200"/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
{% include "components/sidebar_navigation_button.html" with experiment=experiment pageSlug="overview" pageName="Overview" iconClass="fa-solid fa-gear" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include "components/sidebar_navigation_button.html" with experiment=experiment pageSlug="branches" pageName="Branches" iconClass="fa-solid fa-layer-group" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include "components/sidebar_navigation_button.html" with experiment=experiment pageSlug="metrics" pageName="Metrics" iconClass="fa-solid fa-arrow-trend-up" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include "components/sidebar_navigation_button.html" with experiment=experiment pageSlug="audience" pageName="Audience" iconClass="fa-solid fa-user-group" %}
|
||||
</li>
|
||||
<li class="px-5">
|
||||
<div class="flex flex-row items-center h-8">
|
||||
<div class="text-sm w-full flex flex-row items-center justify-between font-light tracking-wide text-gray-500">
|
||||
Actions
|
||||
<hr class="border-t ml-2 w-full border-gray-200"/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<button disabled
|
||||
class="w-full flex flex-row items-center h-11 text-gray-400 grayscale cursor-not-allowed pr-6">
|
||||
<span class="inline-flex justify-center items-center ml-4">
|
||||
<i class="fa-solid fa-box-archive"></i>
|
||||
</span>
|
||||
<span class="ml-2 text-sm tracking-wide truncate">Archive</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button disabled
|
||||
class="w-full flex flex-row items-center h-11 text-gray-400 grayscale cursor-not-allowed pr-6">
|
||||
<span class="inline-flex justify-center items-center ml-4">
|
||||
<i class="fa-solid fa-clone"></i>
|
||||
</span>
|
||||
<span class="ml-2 text-sm tracking-wide truncate">Clone</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="px-5">
|
||||
<div class="flex flex-row items-center h-8">
|
||||
<div class="text-sm w-full flex flex-row items-center justify-between font-light tracking-wide text-gray-500">
|
||||
Help
|
||||
<hr class="border-t ml-2 w-full border-gray-200"/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
{% include "components/sidebar_redirect_button.html" with label="Experimenter Documentation" redirectLink="https://experimenter.info/" iconClass="fa-solid fa-book" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include "components/sidebar_redirect_button.html" with label="#ask-experimenter" redirectLink="https://mozilla.slack.com/?redir=%2Farchives%2FCF94YGE03" iconClass="fa-brands fa-slack" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include "components/sidebar_redirect_button.html" with label="Feedback" redirectLink="https://mozilla-hub.atlassian.net/secure/CreateIssueDetails!init.jspa?pid=10203&issuetype=10097" iconClass="fa-solid fa-message" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include "components/sidebar_redirect_button.html" with label="File targeting criteria request" redirectLink="https://github.com/mozilla/experimenter/issues/new" iconClass="fa-brands fa-github" %}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="nav nav-pills flex-column ps-4">
|
||||
{% include "common/sidebar_link.html" with title="Summary" link=experiment.get_absolute_url icon="fa-regular fa-paper-plane" %}
|
||||
{% include "common/sidebar_link.html" with title="History" link="" icon="fa-solid fa-network-wired" active=True %}
|
||||
|
||||
<li class="border-bottom my-2 ms-3">
|
||||
<span class="small text-muted">Edit</span>
|
||||
</li>
|
||||
|
||||
{% include "common/sidebar_link.html" with title="Overview" link="" icon="fa-regular fa-solid fa-gear" disabled=True %}
|
||||
{% include "common/sidebar_link.html" with title="Branches" link="" icon="fa-solid fa-layer-group" disabled=True %}
|
||||
{% include "common/sidebar_link.html" with title="Metrics" link="" icon="fa-solid fa-arrow-trend-up" disabled=True %}
|
||||
{% include "common/sidebar_link.html" with title="Audience" link="" icon="fa-solid fa-user-group" disabled=True %}
|
||||
|
||||
<li class="border-bottom my-2 ms-3">
|
||||
<span class="small text-muted">Actions</span>
|
||||
</li>
|
||||
|
||||
{% include "common/sidebar_link.html" with title="Clone" link="" icon="fa-regular fa-copy" disabled=True %}
|
||||
{% include "common/sidebar_link.html" with title="Archive" link="" icon="fa-regular fa-trash-can" disabled=True %}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<footer class="w-full mt-2 flex justify-center items-center">
|
||||
<div class="flex flex-col justify-center text-spaceCadet items-center w-5/6 p-4 border-t border-azure">
|
||||
© Mozilla Corporation 2023
|
||||
</div>
|
||||
<footer class="text-center my-4">
|
||||
<hr>
|
||||
<div>
|
||||
© Mozilla Corporation 2024
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,41 @@
|
|||
{% load static %}
|
||||
|
||||
<header class="w-full z-20 bg-white sticky top-0 left-0 px-8 py-2 flex justify-center items-center shadow-md shadow-blue-300">
|
||||
<div class="max-w-screen-2xl w-full flex justify-between items-center space-x-4">
|
||||
<div class=" flex justify-start items-center space-x-4">
|
||||
<img class="w-12" src="{% static 'assets/logo.svg' %}" />
|
||||
<h1 class="text-2xl hidden sm:block text-spaceCadet">Nimbus Experiments</h1>
|
||||
</div>
|
||||
<div class="md:flex text-spaceCadet justify-start space-x-6 items-center hidden">
|
||||
<a href="https://experimenter.info/" target="_blank" rel="noreferrer">Docs</a>
|
||||
<a href="https://mozilla-hub.atlassian.net/secure/CreateIssueDetails!init.jspa?pid=10203&issuetype=10097" target="_blank" rel="noreferrer">Feedback</a>
|
||||
<a href="https://mozilla.slack.com/?redir=%2Farchives%2FCF94YGE03" target="_blank" rel="noreferrer">Help</a>
|
||||
</div>
|
||||
<div x-on:click="toggle()" class="rounded-md md:hidden p-2 border-gray-200" >
|
||||
<i x-show="!open" class="fa-solid fa-bars text-spaceCadet"></i>
|
||||
</div>
|
||||
<nav class="navbar mb-2">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="/">
|
||||
<img src="{% static 'assets/logo.svg' %}" alt="Logo" width="30" height="24"
|
||||
class="d-inline-block align-text-top">
|
||||
Nimbus Experiments
|
||||
</a>
|
||||
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a href="https://experimenter.info/" class="nav-link" target="_blank" rel="noreferrer">
|
||||
<i class="fa-solid fa-book"></i>
|
||||
Docs
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://mozilla-hub.atlassian.net/secure/CreateIssueDetails!init.jspa?pid=10203&issuetype=10097"
|
||||
class="nav-link" target="_blank" rel="noreferrer">
|
||||
<i class="fa-solid fa-comment-dots"></i>
|
||||
Feedback
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://mozilla.slack.com/?redir=%2Farchives%2FCF94YGE03" class="nav-link" target="_blank"
|
||||
rel="noreferrer">
|
||||
<i class="fa-solid fa-circle-question"></i>
|
||||
Help
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<select id="theme-selector" class="form-select"
|
||||
onchange="document.documentElement.setAttribute('data-bs-theme', document.getElementById('theme-selector').value)">
|
||||
<option value="light" selected>Light</option>
|
||||
<option value="dark">Dark</option>
|
||||
</select>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
<li class="nav-item fw-semibold">
|
||||
<a href="{{ link }}" class="nav-link {% if disabled %}disabled{% endif %}">
|
||||
<i class="{{ icon }}"></i>
|
||||
<span>{{ title }}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
{% extends "experimenter_base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row">
|
||||
<div class="col-2">
|
||||
{% block sidebar %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
<div class="col-10">
|
||||
{% block main_content %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
<!-- Styling of some of the components here updates based on the 'expand' alpine state
|
||||
which is responsible to show detailed changes -->
|
||||
<div x-data="{expand:false}" :class="{'bg-white border border-gray-100 shadow-md rounded-md': expand }" class="p-2">
|
||||
<div :class="{'mb-2': expand }" class="grid grid-cols-12 gap-2 px-3">
|
||||
<div class="col-span-12 lg:col-span-8 xl:col-span-9 flex space-y-1 md:space-y-0 items-center space-x-2">
|
||||
<span class="flex items-center py-0.5">
|
||||
<i class="fa-solid fa-circle-dot text-blue-400 fa-xs"></i>
|
||||
</span>
|
||||
<p class="text-neutral-600">
|
||||
{{ change.event_message }}
|
||||
</p>
|
||||
</div>
|
||||
<div class=" col-span-6 lg:col-span-2 xl:col-span-2 flex justify-start lg:justify-end items-center">
|
||||
{% if isDetailed %}
|
||||
<button type="button" class="px-2 py-1 flex items-center justify-center space-x-1 border border-blue-400 rounded-md" @click="expand = !expand">
|
||||
<i x-show="!expand" class="text-blue-400 fa-solid fa-circle-plus"></i>
|
||||
<i x-show="expand" class="text-blue-400 fa-solid fa-circle-minus"></i>
|
||||
<span x-text="expand ? 'hide details': 'show details'" class="text-xs text-blue-400">
|
||||
</span>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class=" col-span-6 lg:col-span-2 xl:col-span-1 flex justify-end items-center">
|
||||
<span class="text-xs text-rythm flex-nowrap">{{change.timestamp}}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% if isDetailed %}
|
||||
<grid :class="{ 'hidden max-h-0': !expand, 'lg:grid max-h-[500px] hidden': expand }"
|
||||
class=" grid-cols-12 gap-4 w-full overflow-hidden transition-all bg-white h-full duration-700" x-ref="container1">
|
||||
<div class="col-span-6">
|
||||
<p class="text-center text-gray-500 bg-blue-50 rounded-md mb-1">Old Value</p>
|
||||
<div class="h-full sunken p-2 rounded-md max-h-[468px] overflow-scroll">
|
||||
<pre>
|
||||
<code class="json">{{ change.old_value}}</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<p class="text-center text-gray-500 bg-blue-50 rounded-md mb-1">New Value</p>
|
||||
<div class="h-full sunken p-2 rounded-md max-h-[468px] overflow-scroll">
|
||||
<pre>
|
||||
<code class="json">{{ change.new_value}}</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</grid>
|
||||
<div
|
||||
x-cloak
|
||||
x-show="expand"
|
||||
x-transition:enter="transition ease-out duration-150"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
x-data="slider()" class="mt-2 mb-6 lg:hidden overflow-y-auto max-w-xl max-h-96">
|
||||
<article class="relative w-full h-full" x-ref="slider" data-interval="6000">
|
||||
<nav class="sticky top-0 bg-white z-10 w-full" role="tablist">
|
||||
<div class="flex items-center justify-around w-full">
|
||||
<li class="w-full flex justify-center items-center" :class="{ 'border-b-4 border-blue-300': tab == 0 }"><a href="#" role="tab">Old Value</a></li>
|
||||
<li class="w-full flex justify-center items-center" :class="{ 'border-b-4 border-blue-300': tab == 1 }"><a href="#" role="tab">New Value</a></li>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="p-4 w-full h-full grid sunken overflow-x-auto overflow-y-hidden">
|
||||
<div class="data-tab" x-show="tab == 0" x-cloak>
|
||||
<pre class="whitespace-pre-line">
|
||||
<code class="json">{{ change.old_value}}</code>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="data-tab" x-show="tab == 1" x-cloak>
|
||||
<pre class="whitespace-pre-line">
|
||||
<code class="json">{{ change.new_value}}</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<button x-on:click="redirectToReactRoute('{{ experiment.slug }}', '{{ pageSlug}}')"
|
||||
{% if experiment.can_edit %}
|
||||
class="w-full flex flex-row items-center h-11 focus:outline-none hover:bg-gray-50 text-gray-600 hover:text-gray-800 border-l-4 border-transparent hover:border-azure pr-6"
|
||||
{% else %}
|
||||
disabled
|
||||
class="w-full flex flex-row items-center h-11 text-gray-400 grayscale cursor-not-allowed pr-6"
|
||||
{% endif %}
|
||||
>
|
||||
<span class="inline-flex justify-center items-center ml-4">
|
||||
<i class="{{ iconClass }}"></i>
|
||||
</span>
|
||||
<span class="ml-2 text-sm tracking-wide truncate">{{ pageName }}</span>
|
||||
</button>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<a href="{{ redirectLink }}" target="_blank" rel="noreferrer" class="flex flex-row items-center h-11 focus:outline-none hover:bg-gray-50 text-gray-600 hover:text-gray-800 border-l-4 border-transparent hover:border-azure pr-6">
|
||||
<span class="inline-flex justify-center items-center ml-4">
|
||||
<i class="{{ iconClass }}"></i>
|
||||
</span>
|
||||
<span class="ml-2 text-sm tracking-wide truncate">{{ label }}</span>
|
||||
</a>
|
||||
|
|
@ -1,25 +1,29 @@
|
|||
{% load static %}
|
||||
{% load static tailwind_tags %}
|
||||
{% load django_bootstrap5 %}
|
||||
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" data-bs-theme="light">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}{% endblock %}</title>
|
||||
{% tailwind_css %}
|
||||
<script src="{% static 'fontawesomefree/js/all.min.js' %}"></script>
|
||||
<script defer src="{% static 'scripts/bundle.js' %}"></script>
|
||||
<link rel="icon" href="/static/imgs/favicon.ico">
|
||||
{% bootstrap_css %}
|
||||
{% bootstrap_javascript %}
|
||||
</head>
|
||||
<body x-data="sidebar" :class="{ 'overflow-hidden md:overflow-auto': open, }">
|
||||
{% include "common/header.html"%}
|
||||
<div class="h-full min-h-screen w-full flex flex-col justify-start items-center">
|
||||
<!-- This is a overlay that renders when the sidebar is open -->
|
||||
<div :class="{ 'hidden': !open, 'block': open }" class="fixed md:hidden inset-0 bg-black bg-opacity-50 z-20 transition-opacity"></div>
|
||||
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
{% include "common/header.html"%}
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
{% include "common/footer.html"%}
|
||||
</div>
|
||||
{% include "common/footer.html"%}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
{% extends "experimenter_base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Styling of some of the components here updates based on the 'open' alpine state
|
||||
which is responsible for the visibility of the sidebar -->
|
||||
<div class="w-full max-w-screen-2xl h-full md:grid md:grid-cols-12 flex flex-col justify-start items-center">
|
||||
<div :class="{ 'hidden md:block': !open, 'fixed md:static': open }" class="md:w-full w-11/12 sm:w-9/12 bg-white h-full md:col-span-4 lg:col-span-3 xl:col-span-2 border-r left-0 top-0 z-20 md:z-0">
|
||||
<div x-show="open" x-on:click="toggle()" class="flex justify-between items-center px-8 py-2 mb-2" >
|
||||
<img class="w-12" src="{% static 'assets/logo.svg' %}" />
|
||||
<i class="fa-solid fa-xmark fa-xl text-gray-800 hover:text-gray-500"></i>
|
||||
</div>
|
||||
<div class="p-2 md:px-2 md:pt-8">
|
||||
{% block sidebar %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-full md:col-span-8 lg:col-span-9 xl:col-span-10">
|
||||
{% block main_content %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -1 +0,0 @@
|
|||
default_app_config = "experimenter.nimbus_ui_new.theme.apps.ThemeConfig"
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
from django.apps import AppConfig
|
||||
|
||||
|
||||
class ThemeConfig(AppConfig):
|
||||
name = "experimenter.nimbus_ui_new.theme"
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
{
|
||||
"name": "experimenter-theme",
|
||||
"version": "3.6.0",
|
||||
"description": "",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "yarn run build:clean && yarn run build:tailwind && yarn run build:rollup",
|
||||
"build:clean": "rm -rf ../static/css/dist",
|
||||
"build:tailwind": "env NODE_ENV=production tailwindcss --postcss -i ./src/styles.css -o ../static/css/dist/styles.css --minify",
|
||||
"build:rollup": "rollup --config rollup.config.mjs",
|
||||
"dev": "npm-run-all --parallel --race dev:*",
|
||||
"dev:tailwind": "env NODE_ENV=development tailwindcss --postcss -i ./src/styles.css -o ../static/css/dist/styles.css -w",
|
||||
"dev:rollup": "rollup --watch --config rollup.config.mjs",
|
||||
"tailwindcss": "tailwindcss"
|
||||
},
|
||||
"author": "Mozilla",
|
||||
"license": "MPL-2.0",
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^25.0.3",
|
||||
"@rollup/plugin-node-resolve": "^15.1.0",
|
||||
"@rollup/plugin-terser": "^0.4.3",
|
||||
"@tailwindcss/aspect-ratio": "^0.4.2",
|
||||
"@tailwindcss/forms": "^0.5.3",
|
||||
"@tailwindcss/line-clamp": "^0.4.4",
|
||||
"@tailwindcss/typography": "^0.5.9",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.4.31",
|
||||
"postcss-import": "^15.1.0",
|
||||
"postcss-nested": "^6.0.1",
|
||||
"postcss-simple-vars": "^7.0.1",
|
||||
"rollup": "^3.26.3",
|
||||
"tailwindcss": "^3.3.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"alpinejs": "^3.12.3"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
"postcss-import": {},
|
||||
"postcss-simple-vars": {},
|
||||
"postcss-nested": {}
|
||||
},
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import { nodeResolve } from "@rollup/plugin-node-resolve";
|
||||
import commonjs from "@rollup/plugin-commonjs";
|
||||
import terser from "@rollup/plugin-terser";
|
||||
|
||||
export default {
|
||||
input: "./src/index.js",
|
||||
output: {
|
||||
file: "../../static/scripts/bundle.js",
|
||||
format: "iife",
|
||||
},
|
||||
plugins: [
|
||||
nodeResolve(),
|
||||
commonjs({
|
||||
include: "node_modules/**",
|
||||
}),
|
||||
terser(),
|
||||
],
|
||||
};
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
import Alpine from "alpinejs";
|
||||
|
||||
Alpine.data("sidebar", () => ({
|
||||
open: false,
|
||||
|
||||
toggle() {
|
||||
this.open = !this.open;
|
||||
},
|
||||
}));
|
||||
|
||||
Alpine.data("redirect", () => ({
|
||||
redirectToReactRoute(slug, pageSlug) {
|
||||
window.location.href = `/nimbus/${slug}/edit/${pageSlug}`;
|
||||
},
|
||||
}));
|
||||
|
||||
Alpine.data('slider', (id) => ({
|
||||
tab: 1,
|
||||
tabs: [],
|
||||
|
||||
init() {
|
||||
this.tabs = [...this.$el.querySelectorAll('nav[role=tablist] a[role=tab]')];
|
||||
this.changeSlide();
|
||||
},
|
||||
|
||||
changeSlide() {
|
||||
const activeTab = this.tabs[this.tab];
|
||||
activeTab.classList.add('active');
|
||||
|
||||
this.tabs.forEach((tab, index) => {
|
||||
tab.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
this.tab = index;
|
||||
|
||||
this.tabs.forEach((tab, tabIndex) => {
|
||||
if (tabIndex === index) {
|
||||
tab.classList.add('active');
|
||||
} else {
|
||||
tab.classList.remove('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}));
|
||||
|
||||
window.Alpine = Alpine;
|
||||
|
||||
Alpine.start();
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
a[role=tab] {
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: all var(--transition);
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
color: #938f8f;
|
||||
}
|
||||
a[role=tab].active {
|
||||
color: #3d3d3d ;
|
||||
border-radius: 0;
|
||||
}
|
||||
a[role=tab]:focus {
|
||||
background: transparent;
|
||||
}
|
||||
.data-tab {
|
||||
min-height: 200px;
|
||||
animation-duration: 0.45s;
|
||||
animation-fill-mode: both;
|
||||
animation-name: slideIn;
|
||||
}
|
||||
@keyframes slideIn {
|
||||
0% {
|
||||
transform: translateY(1rem);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0rem);
|
||||
opacity: 1;
|
||||
}
|
||||
0% {
|
||||
transform: translateY(1rem);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.sunken {
|
||||
box-shadow: rgb(173,216,230) 0px 0px 6px 1px inset;
|
||||
background-color: rgba(232, 244, 248, 0.25);
|
||||
}
|
||||
.floating {
|
||||
box-shadow:
|
||||
0px 3px 5px -1px rgba(0, 0, 0, 0.2),
|
||||
0px 6px 10px 0px rgba(0, 0, 0, 0.14),
|
||||
0px 1px 18px 0px rgba(0,0,0,.12);
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
module.exports = {
|
||||
content: ["../../templates/**/*.html"],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
spaceCadet: "#242D4Eff",
|
||||
lenurple: "#b590d4",
|
||||
darkSlateBlue: "#4C4893ff",
|
||||
rythm: "#7D68A7ff",
|
||||
azure: "#007bff"
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require("@tailwindcss/forms"),
|
||||
require("@tailwindcss/typography"),
|
||||
require("@tailwindcss/line-clamp"),
|
||||
require("@tailwindcss/aspect-ratio"),
|
||||
],
|
||||
};
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -79,15 +79,16 @@ INSTALLED_APPS = [
|
|||
"django.contrib.sessions",
|
||||
"django.contrib.staticfiles",
|
||||
"django.forms",
|
||||
"import_export",
|
||||
# Graphene
|
||||
"graphene_django",
|
||||
# Libraries
|
||||
"import_export",
|
||||
"graphene_django",
|
||||
"corsheaders",
|
||||
"django_markdown2",
|
||||
"rangefilter",
|
||||
"rest_framework",
|
||||
"widget_tweaks",
|
||||
"fontawesomefree",
|
||||
"django_bootstrap5",
|
||||
# Experimenter
|
||||
"experimenter.base",
|
||||
"experimenter.changelog",
|
||||
|
|
@ -102,13 +103,9 @@ INSTALLED_APPS = [
|
|||
"experimenter.outcomes",
|
||||
"experimenter.projects",
|
||||
"experimenter.reporting",
|
||||
"fontawesomefree",
|
||||
"tailwind",
|
||||
"experimenter.nimbus_ui_new",
|
||||
"experimenter.nimbus_ui_new.theme",
|
||||
]
|
||||
|
||||
TAILWIND_APP_NAME = "theme"
|
||||
|
||||
MIDDLEWARE = [
|
||||
"corsheaders.middleware.CorsMiddleware",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
# This file is automatically @generated by Poetry 1.8.2 and should not be changed by hand.
|
||||
# This file is automatically @generated by Poetry 1.6.0 and should not be changed by hand.
|
||||
|
||||
[[package]]
|
||||
name = "amqp"
|
||||
|
|
@ -505,6 +505,20 @@ files = [
|
|||
{file = "django_admin_rangefilter-0.12.0-py2.py3-none-any.whl", hash = "sha256:4fd7211271c70c51469fc39b182b70f1199ab9ce0b16264654a2eec96751d686"},
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "django-bootstrap5"
|
||||
version = "24.2"
|
||||
description = "Bootstrap 5 for Django"
|
||||
optional = false
|
||||
python-versions = ">=3.8"
|
||||
files = [
|
||||
{file = "django_bootstrap5-24.2-py3-none-any.whl", hash = "sha256:6a5d83e9ff1952f7c07c54cebcb76c85f09787b8b57eeb4ec07554cd583acc64"},
|
||||
{file = "django_bootstrap5-24.2.tar.gz", hash = "sha256:a3cee2b3d45745210c5b898af2917f310f44df746269fe09a93be28a0adc2a4b"},
|
||||
]
|
||||
|
||||
[package.dependencies]
|
||||
Django = ">=4.2"
|
||||
|
||||
[[package]]
|
||||
name = "django-cors-headers"
|
||||
version = "3.14.0"
|
||||
|
|
@ -639,23 +653,6 @@ libcloud = ["apache-libcloud"]
|
|||
s3 = ["boto3 (>=1.4.4)"]
|
||||
sftp = ["paramiko (>=1.15.0)"]
|
||||
|
||||
[[package]]
|
||||
name = "django-tailwind"
|
||||
version = "3.8.0"
|
||||
description = "Tailwind CSS Framework for Django projects"
|
||||
optional = false
|
||||
python-versions = ">=3.10.0,<4.0.0"
|
||||
files = [
|
||||
{file = "django_tailwind-3.8.0-py3-none-any.whl", hash = "sha256:fa969c5b95d314b173fe2b2ed2cb2c03f2e2c94fdc2c01ff73a993fa159085da"},
|
||||
{file = "django_tailwind-3.8.0.tar.gz", hash = "sha256:31c2f4a7879d685c2de0feaf0b63f246200b37337bea4d7dbafb59bc3f10c008"},
|
||||
]
|
||||
|
||||
[package.dependencies]
|
||||
django = ">=3.2.14"
|
||||
|
||||
[package.extras]
|
||||
reload = ["django-browser-reload (>=1.12.1,<2.0.0)"]
|
||||
|
||||
[[package]]
|
||||
name = "django-test-migrations"
|
||||
version = "1.3.0"
|
||||
|
|
@ -2884,4 +2881,4 @@ files = [
|
|||
[metadata]
|
||||
lock-version = "2.0"
|
||||
python-versions = "^3.11"
|
||||
content-hash = "8384d7dc83bae10939723800746077348b74b268c601d1ca92766636f0fb932a"
|
||||
content-hash = "7125407465fb436c323d0bb42b7035d9ecf07fabad1193c96edfbf8cdf768fc4"
|
||||
|
|
|
|||
|
|
@ -68,11 +68,11 @@ mozilla-nimbus-shared = "^2.5.2"
|
|||
mozilla-nimbus-schemas = "2024.3.1"
|
||||
django-redis = "^5.4.0"
|
||||
fontawesomefree = "6.4.0"
|
||||
django-tailwind = "^3.8.0"
|
||||
ruff = "^0.4.1"
|
||||
django = "^5.0.3"
|
||||
dockerflow = "^2024.4.1"
|
||||
django-filter = "^23.5"
|
||||
django-bootstrap5 = "^24.2"
|
||||
|
||||
[tool.poetry.dev-dependencies]
|
||||
rope = "^0.23.0"
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче