remove bootstrap
This commit is contained in:
Muhammad Labeeb
Régis Behmo
parent
f37ebc1cdc
commit
93c6c92d61
3
tutordash/server/static/img/X.svg
Normal file
3
tutordash/server/static/img/X.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.2806 14.2198C15.3502 14.2895 15.4055 14.3722 15.4432 14.4632C15.4809 14.5543 15.5003 14.6519 15.5003 14.7504C15.5003 14.849 15.4809 14.9465 15.4432 15.0376C15.4055 15.1286 15.3502 15.2114 15.2806 15.281C15.2109 15.3507 15.1281 15.406 15.0371 15.4437C14.9461 15.4814 14.8485 15.5008 14.7499 15.5008C14.6514 15.5008 14.5538 15.4814 14.4628 15.4437C14.3717 15.406 14.289 15.3507 14.2193 15.281L7.99993 9.06073L1.78055 15.281C1.63982 15.4218 1.44895 15.5008 1.24993 15.5008C1.05091 15.5008 0.860034 15.4218 0.719304 15.281C0.578573 15.1403 0.499512 14.9494 0.499512 14.7504C0.499512 14.5514 0.578573 14.3605 0.719304 14.2198L6.93962 8.00042L0.719304 1.78104C0.578573 1.64031 0.499512 1.44944 0.499512 1.25042C0.499512 1.05139 0.578573 0.860523 0.719304 0.719792C0.860034 0.579062 1.05091 0.5 1.24993 0.5C1.44895 0.5 1.63982 0.579062 1.78055 0.719792L7.99993 6.9401L14.2193 0.719792C14.36 0.579062 14.5509 0.5 14.7499 0.5C14.949 0.5 15.1398 0.579062 15.2806 0.719792C15.4213 0.860523 15.5003 1.05139 15.5003 1.25042C15.5003 1.44944 15.4213 1.64031 15.2806 1.78104L9.06024 8.00042L15.2806 14.2198Z" fill="#717680"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -1,13 +1,29 @@
|
||||
document.getElementById("search-input").addEventListener("input", function() {
|
||||
let filter = this.value.toLowerCase();
|
||||
let plugins = document.querySelectorAll(".installed-plugin");
|
||||
document.getElementById("search-input").addEventListener("input", function () {
|
||||
let filter = this.value.toLowerCase();
|
||||
let plugins = document.querySelectorAll(".installed-plugin");
|
||||
|
||||
plugins.forEach(plugin => {
|
||||
let name = plugin.querySelector(".name a").textContent.toLowerCase();
|
||||
if (name.includes(filter)) {
|
||||
plugin.style.display = "";
|
||||
} else {
|
||||
plugin.style.display = "none";
|
||||
}
|
||||
});
|
||||
});
|
||||
plugins.forEach((plugin) => {
|
||||
let name = plugin.querySelector(".name a").textContent.toLowerCase();
|
||||
if (name.includes(filter)) {
|
||||
plugin.style.display = "";
|
||||
} else {
|
||||
plugin.style.display = "none";
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
let open = document.querySelectorAll(".open_modal_button");
|
||||
const modal_container = document.getElementById("modal_container");
|
||||
let close = document.querySelectorAll(".close-modal-button");
|
||||
|
||||
open.forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
modal_container.classList.add("show");
|
||||
});
|
||||
});
|
||||
|
||||
close.forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
modal_container.classList.remove("show");
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
$edly-logo-red: #DC1F26;
|
||||
$edly-logo-red: #dc1f26;
|
||||
$dark-gray: #4a4a4a;
|
||||
$gray: #535862;
|
||||
$light-gray: #888;
|
||||
$black: #181D27;
|
||||
$black: #181d27;
|
||||
$white: #e6f3ff;
|
||||
$blue: #1570EF;
|
||||
$light-blue: #2E90FA;
|
||||
$blue: #1570ef;
|
||||
$light-blue: #2e90fa;
|
||||
$font-family_1: Arial;
|
||||
|
||||
* {
|
||||
@ -80,16 +80,18 @@ body {
|
||||
span {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
.sidebar-tab-logo-selected {
|
||||
filter: invert(39%) sepia(98%) saturate(3884%) hue-rotate(205deg) brightness(95%) contrast(96%);
|
||||
}
|
||||
.sidebar-tab-logo-selected {
|
||||
filter: invert(39%) sepia(98%) saturate(3884%)
|
||||
hue-rotate(205deg) brightness(95%)
|
||||
contrast(96%);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-tab-selected {
|
||||
color: $blue;
|
||||
background-color: $white;
|
||||
border-radius: inherit;
|
||||
}
|
||||
.sidebar-tab-selected {
|
||||
color: $blue;
|
||||
background-color: $white;
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -99,26 +101,31 @@ body {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.page-title {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.page-description {
|
||||
font-size: 16px;
|
||||
color: $gray;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 2em;
|
||||
.info-container {
|
||||
.header-bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
div {
|
||||
align-items: center;
|
||||
height: 4.5em;
|
||||
.info-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
.page-title {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.page-description {
|
||||
font-size: 16px;
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
|
||||
.launch-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -126,6 +133,11 @@ body {
|
||||
width: 9em;
|
||||
height: 2.5em;
|
||||
background-color: $light-blue;
|
||||
border: none;
|
||||
border-radius: 0.5em;
|
||||
color: $white;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -135,18 +147,19 @@ body {
|
||||
align-items: center;
|
||||
margin-top: 3em;
|
||||
|
||||
.search-input {
|
||||
height: 3em;
|
||||
width: 20em;
|
||||
border-radius: 10px;
|
||||
padding-left: 2.5em;
|
||||
border: 1px solid #c4c4c4;
|
||||
}
|
||||
.search-input {
|
||||
font-size: 1em;
|
||||
height: 3em;
|
||||
width: 20em;
|
||||
border-radius: 10px;
|
||||
padding-left: 2.5em;
|
||||
border: 1px solid #c4c4c4;
|
||||
}
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
left: 2em;
|
||||
}
|
||||
img {
|
||||
position: relative;
|
||||
left: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
@ -194,9 +207,64 @@ body {
|
||||
.details {
|
||||
width: 30em;
|
||||
}
|
||||
.form-check-input {
|
||||
width: 3.5em;
|
||||
height: 2em;
|
||||
.form-switch {
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
}
|
||||
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
&:checked + .slider {
|
||||
background-color: #2196f3;
|
||||
}
|
||||
|
||||
&:focus + .slider {
|
||||
box-shadow: 0 0 1px #2196f3;
|
||||
}
|
||||
|
||||
&:checked + .slider:before {
|
||||
-webkit-transform: translateX(26px);
|
||||
-ms-transform: translateX(26px);
|
||||
transform: translateX(26px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -204,23 +272,92 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
/* Center modal container */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
opacity: 0; /* to be hidden by default */
|
||||
pointer-events: none; /* so we can click the modal trigger */
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh; /* =100% of viewport height */
|
||||
width: 100vw; /* = 100% of viewport width */
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
.modal {
|
||||
.modal-dialog {
|
||||
max-width: 34em;
|
||||
&.show {
|
||||
pointer-events: auto; /* set back the default value */
|
||||
opacity: 1;
|
||||
}
|
||||
.modal-title {
|
||||
color: $black;
|
||||
}
|
||||
.modal-description {
|
||||
color: $gray;
|
||||
}
|
||||
.modal-footer {
|
||||
button {
|
||||
&:last-child {
|
||||
width: 11em;
|
||||
height: 2.5em;
|
||||
|
||||
.modal-content {
|
||||
background-color: #fff;
|
||||
border-radius: 2em;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
padding: 30px 50px;
|
||||
width: 37.5em;
|
||||
height: 18em;
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
|
||||
h3 {
|
||||
color: $black;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 1em;
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border-radius: 0.5em;
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
.close-modal-button {
|
||||
background: none;
|
||||
border: 1px solid #888;
|
||||
color: $black;
|
||||
padding: 0.5em 1em;
|
||||
margin-right: 1em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.run_modal_button {
|
||||
background: none;
|
||||
border: none;
|
||||
background-color: $light-blue;
|
||||
color: $white;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
{% extends "index.html" %}
|
||||
|
||||
{% block workspace_header %}
|
||||
<div class="info-container">
|
||||
<div>
|
||||
<div class="header-bar">
|
||||
<div class="info-container">
|
||||
<div class="page-title">{% block page_title %}{% endblock %}</div>
|
||||
<div class="page-description">{% block page_description %}{% endblock %}</div>
|
||||
</div>
|
||||
@ -11,7 +11,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-container">
|
||||
<img src="{{ url_for('static', filename='/img/search.svg') }}"></img>
|
||||
<img src="{{ url_for('static', filename='/img/search.svg') }}"/>
|
||||
<input id="search-input" type="text" class="form-control search-input" placeholder="Search...">
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
@ -13,8 +13,6 @@
|
||||
<!-- CSS -->
|
||||
<!-- <link rel="stylesheet" href="css/normalize.css"> -->
|
||||
<!-- <link rel="stylesheet" href="css/styles.css"> -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||
<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> -->
|
||||
<link href="{{ url_for('static', filename='/css/dash.css') }}" rel="stylesheet">
|
||||
<!-- TODO self-host -->
|
||||
<script src="https://unpkg.com/htmx.org@2.0.3/dist/htmx.min.js"></script>
|
||||
@ -65,25 +63,33 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-container" id="modal_container">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
{% block model_icon %}{% endblock %}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
<button type="button" class="close-modal-button">
|
||||
<img src="{{ url_for('static', filename='/img/X.svg') }}" alt="">
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h5 class="modal-title" id="exampleModalLabel">{% block modal_title%}{% endblock %}</h5>
|
||||
<p class="modal-description">{% block modal_description %}{% endblock %}</p>
|
||||
<h3>{% block modal_title%}{% endblock %}</h3>
|
||||
<p>{% block modal_description %}{% endblock %}</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{% block modal_footer %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
|
||||
</div>
|
||||
|
||||
<script src="{{ url_for('static', filename='/js/dash.js') }}"></script>
|
||||
|
||||
{% if sidebar_active_tab %}
|
||||
<script>
|
||||
document.getElementById('{{ sidebar_active_tab }}').classList.toggle('sidebar-tab-selected');
|
||||
document.getElementById('{{ sidebar_active_tab }}-logo').classList.toggle('sidebar-tab-logo-selected');
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
|
||||
|
||||
@ -1,26 +1,38 @@
|
||||
{% extends "workspace_header_general.html" %}
|
||||
{% extends "base_header.html" %}
|
||||
|
||||
{% block page_title %}My Plugins{% endblock %}
|
||||
{% block page_description %}View all your installed plugins in one place.{% endblock %}
|
||||
{% block page_button %}
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal">Local Launch</button>
|
||||
{% block page_title %}
|
||||
My Plugins
|
||||
{% endblock %}
|
||||
|
||||
{% block page_description %}
|
||||
View all your installed plugins in one place.
|
||||
{% endblock %}
|
||||
|
||||
{% block page_button %}
|
||||
<button class="modal-button open_modal_button" type="button">Local Launch</button>
|
||||
{% endblock %}
|
||||
|
||||
{% block model_icon %}
|
||||
<img src="{{ url_for('static', filename='/img/Featured icon.svg') }}" alt="">
|
||||
{% endblock %}
|
||||
|
||||
{% block modal_title %}
|
||||
Run local launch for all plugins?
|
||||
{% endblock %}
|
||||
|
||||
{% block modal_description %}
|
||||
Running local launch will allow all changes to plugins to take effect. This could take a few minutes to complete.
|
||||
{% endblock %}
|
||||
|
||||
{% block modal_footer %}
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Not Now</button>
|
||||
<button type="button" class="modal-button close-modal-button">Not Now</button>
|
||||
<form method="POST" action="{{ url_for('cli_local_launch')}}">
|
||||
<button type="submit" class="btn btn-primary">Run Local Launch</button>
|
||||
<button class="modal-button run_modal_button" type="submit">Run Local Launch</button>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
{% set sidebar_active_tab = "my-plugins" %}
|
||||
|
||||
{% block workspace_content %}
|
||||
<div class="installed-plugins-list">
|
||||
{% for plugin in plugins %}
|
||||
@ -30,19 +42,16 @@ Running local launch will allow all changes to plugins to take effect. This coul
|
||||
<div class="author">{{ plugin.author }}</div>
|
||||
<div class="description">{{ plugin.description|safe }}</div>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<form method="POST" action="{{ url_for('plugin_toggle', name=plugin.name) }}">
|
||||
<input type="checkbox" name="checked" class="form-check-input" role="switch" onchange="this.form.submit()" {% if plugin.is_enabled %} id="flexSwitchCheckDefault" checked {% else %} id="flexSwitchCheckChecked" {% endif %} />
|
||||
</form>
|
||||
|
||||
<div class="form-switch">
|
||||
<label class="switch">
|
||||
<form method="POST" action="{{ url_for('plugin_toggle', name=plugin.name) }}">
|
||||
<input type="checkbox" name="checked" onchange="this.form.submit()" {% if plugin.is_enabled %} checked {% endif %} />
|
||||
<span class="slider round"></span>
|
||||
</form>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
document.getElementById('my-plugins').classList.toggle('sidebar-tab-selected');
|
||||
document.getElementById('my-plugins-logo').classList.toggle('sidebar-tab-logo-selected');
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
{% extends "index.html" %}
|
||||
|
||||
{% block workspace_header %}{{ plugin_name }}{% endblock %}
|
||||
{% block workspace_header %}
|
||||
{{ plugin_name }}
|
||||
{% endblock %}
|
||||
|
||||
{% set sidebar_active_tab = "my-plugins" %}
|
||||
|
||||
{% block workspace_content %}
|
||||
Enabled: <form method="POST" action="{{ url_for('plugin_toggle', name=plugin_name) }}">
|
||||
|
||||
@ -1,7 +1,14 @@
|
||||
{% extends "workspace_header_general.html" %}
|
||||
{% extends "base_header.html" %}
|
||||
|
||||
{% block page_title %}Plugin Marketplace{% endblock %}
|
||||
{% block page_description %}View and install available plugins.{% endblock %}
|
||||
{% block page_title %}
|
||||
Plugin Marketplace
|
||||
{% endblock %}
|
||||
|
||||
{% block page_description %}
|
||||
View and install available plugins.
|
||||
{% endblock %}
|
||||
|
||||
{% set sidebar_active_tab = "plugin-marketplace" %}
|
||||
|
||||
{% block workspace_content %}
|
||||
<form action="{{ url_for('plugins_update') }}" method="POST">
|
||||
@ -24,10 +31,3 @@
|
||||
</ul>
|
||||
{% endfor %}
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
document.getElementById('plugin-marketplace').classList.toggle('sidebar-tab-selected');
|
||||
document.getElementById('plugin-marketplace-logo').classList.toggle('sidebar-tab-logo-selected');
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user
