feat: update layout and texts
* change layout and text * change layout and text * docs: fix make runserver command * change logo
This commit is contained in:
Muhammad Labeeb
GitHub
parent
b4fdc7f842
commit
150400383f
2
Makefile
2
Makefile
@ -4,7 +4,7 @@ SRC_DIRS = ./tutordeck
|
||||
BLACK_OPTS = --exclude templates ${SRC_DIRS}
|
||||
|
||||
runserver: ## Run a development server
|
||||
tutor deck run --dev
|
||||
tutor deck runserver --dev
|
||||
|
||||
scss: ## Compile SCSS files to CSS
|
||||
sass ${SASS_OPTS} tutordeck/server/static/scss/:tutordeck/server/static/css/
|
||||
|
||||
5
tutordeck/server/static/img/Mobile Logo.svg
Normal file
5
tutordeck/server/static/img/Mobile Logo.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg width="352" height="179" viewBox="0 0 352 179" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 98.5714V85.5572L93.165 5.58496L111.545 26.7853L35.7026 92.0638L111.545 157.343L93.165 178.543L0 98.5714Z" fill="#DD1F25"/>
|
||||
<path d="M240.132 157.341L315.971 92.0618L240.132 26.7833L258.72 5.58301L351.464 85.5552V98.5694L258.934 178.541L240.132 157.341Z" fill="#DD1F25"/>
|
||||
<path d="M218.306 72.8988H186.896V130.328C186.896 135.113 188.1 138.619 190.509 140.823C192.917 143.027 196.445 144.265 201.071 144.559C205.698 144.832 211.447 144.79 218.306 144.412V176.716C193.656 179.486 176.291 177.177 166.193 169.81C156.094 162.443 151.046 149.282 151.046 130.328V72.8988H126.856V38.6638H151.046V10.7681L186.896 0.000488281V38.6638H218.306V72.8988Z" fill="#DD1F25"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 779 B |
16
tutordeck/server/static/img/tutor deck logo.svg
Normal file
16
tutordeck/server/static/img/tutor deck logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 87 KiB |
@ -73,13 +73,13 @@ const TOAST_CONFIGS = {
|
||||
"$ tutor plugins enable": {
|
||||
title: "Your plugin was successfully enabled",
|
||||
description:
|
||||
"Running launch platform will allow all changes to plugins to take effect. This could take a few minutes to complete.",
|
||||
"To apply the changes, run Launch Platform. This will update your platform and may take a few minutes to complete.",
|
||||
showFooter: true,
|
||||
},
|
||||
"$ tutor plugins upgrade": {
|
||||
title: "Your plugin was successfully updated",
|
||||
description:
|
||||
"Running launch platform will allow all changes to plugins to take effect. This could take a few minutes to complete.",
|
||||
"To apply the changes, run Launch Platform. This will update your platform and may take a few minutes to complete.",
|
||||
showFooter: true,
|
||||
},
|
||||
"$ tutor plugins install": {
|
||||
@ -90,7 +90,7 @@ const TOAST_CONFIGS = {
|
||||
"$ tutor config save": {
|
||||
title: "You have successfully modified parameters",
|
||||
description:
|
||||
"Running launch platform will allow all changes to plugins to take effect. This could take a few minutes to complete.",
|
||||
"To apply the changes, run Launch Platform. This will update your platform and may take a few minutes to complete.",
|
||||
showFooter: true,
|
||||
},
|
||||
"$ tutor local launch": {
|
||||
|
||||
@ -110,44 +110,56 @@ body {
|
||||
}
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: 20% 80%;
|
||||
grid-template-columns: 17% 83%;
|
||||
height: 100%;
|
||||
|
||||
@media (max-width: 1270px) {
|
||||
grid-template-columns: 20% 80%;
|
||||
}
|
||||
@media (max-width: 1150px) {
|
||||
grid-template-columns: 22% 78%;
|
||||
}
|
||||
@media (max-width: 1050px) {
|
||||
grid-template-columns: 25% 75%;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
grid-template-columns: 10% 90%;
|
||||
}
|
||||
|
||||
nav {
|
||||
border-right: 1px solid $gray-2;
|
||||
border-right: 1px solid $gray-1;
|
||||
box-shadow: 2px 0px $gray-1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
header {
|
||||
flex: 0 0 5.5em;
|
||||
border-bottom: 1px solid $gray-2;
|
||||
border-bottom: 1px solid $gray-1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@media (max-width: 900px) {
|
||||
padding-left: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-left: 1.25em;
|
||||
width: 2em;
|
||||
height: auto;
|
||||
@media (max-width: 900px) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
color: $red;
|
||||
margin-left: 0.5em;
|
||||
|
||||
#web-logo {
|
||||
width: 13em;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
@media (max-width: 900px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#mobile-logo {
|
||||
display: none;
|
||||
width: 3em;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
@media (max-width: 900px) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
menu {
|
||||
padding-inline-start: 0.75em;
|
||||
@ -155,6 +167,18 @@ main {
|
||||
@media (max-width: 900px) {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
#local-launch {
|
||||
margin: 0;
|
||||
}
|
||||
p {
|
||||
font-size: 0.85em;
|
||||
color: $gray-4;
|
||||
padding: 0 3.7em;
|
||||
margin: 0;
|
||||
@media (max-width: 900px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
a {
|
||||
@include a-tag();
|
||||
display: flex;
|
||||
@ -174,11 +198,12 @@ main {
|
||||
width: 1.25em;
|
||||
}
|
||||
.sidebar-tab-logo-selected {
|
||||
filter: invert(39%) sepia(98%) saturate(3884%)
|
||||
hue-rotate(205deg) brightness(95%) contrast(96%);
|
||||
filter: invert(39%) sepia(98%) saturate(3884%) hue-rotate(205deg)
|
||||
brightness(95%) contrast(96%);
|
||||
}
|
||||
h4 {
|
||||
margin-left: 1em;
|
||||
// font-size: 1.15em;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
display: none;
|
||||
@ -188,16 +213,22 @@ main {
|
||||
.sidebar-tab-selected {
|
||||
color: $blue;
|
||||
}
|
||||
&:last-child {
|
||||
margin-block-start: 0;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid $gray-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 2em;
|
||||
margin: 1em 2em;
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.header-address {
|
||||
margin-top: 1em;
|
||||
font-size: 15px;
|
||||
span {
|
||||
a {
|
||||
@ -211,7 +242,8 @@ main {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 4em;
|
||||
height: 5.5em;
|
||||
margin-bottom: 2em;
|
||||
|
||||
@media (max-width: 740px) {
|
||||
// height: 11em;
|
||||
@ -242,7 +274,6 @@ main {
|
||||
.page-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.25em;
|
||||
@media (max-width: 740px) {
|
||||
width: 100%;
|
||||
justify-content: end;
|
||||
@ -258,31 +289,51 @@ main {
|
||||
}
|
||||
#plugin-full-description {
|
||||
border-top: 1px solid $gray-1;
|
||||
margin-top: 1em;
|
||||
padding: 1em 0em;
|
||||
}
|
||||
.search {
|
||||
.search-and-button {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.25em;
|
||||
margin-bottom: 2em;
|
||||
.search {
|
||||
display: flex;
|
||||
position: relative;
|
||||
left: -1.5em;
|
||||
|
||||
.search-input {
|
||||
font-size: 1em;
|
||||
height: 3em;
|
||||
width: 16em;
|
||||
border-radius: 10px;
|
||||
padding-left: 2.5em;
|
||||
border: 1px solid $gray-2;
|
||||
.search-input {
|
||||
font-size: 1em;
|
||||
height: 3em;
|
||||
width: 16em;
|
||||
border-radius: 10px;
|
||||
padding-left: 2.5em;
|
||||
border: 1px solid $gray-2;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
width: 75%;
|
||||
@media (max-width: 600px) {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 1.5em;
|
||||
position: relative;
|
||||
left: 2.25em;
|
||||
}
|
||||
}
|
||||
.page-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@media (max-width: 740px) {
|
||||
width: 100%;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
left: 2em;
|
||||
button {
|
||||
@include command();
|
||||
}
|
||||
.cancel-process-button {
|
||||
@include cancel-command();
|
||||
}
|
||||
}
|
||||
}
|
||||
#warning-main {
|
||||
@ -432,9 +483,8 @@ main {
|
||||
border: none;
|
||||
img {
|
||||
width: 2em;
|
||||
filter: invert(32%) sepia(70%)
|
||||
saturate(4565%) hue-rotate(143deg)
|
||||
brightness(99%) contrast(102%);
|
||||
filter: invert(32%) sepia(70%) saturate(4565%)
|
||||
hue-rotate(143deg) brightness(99%) contrast(102%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -643,10 +693,11 @@ main {
|
||||
word-wrap: break-word;
|
||||
overflow-y: auto;
|
||||
height: 40em;
|
||||
margin-top: 2em;
|
||||
}
|
||||
}
|
||||
.command-input {
|
||||
margin-top: 3em;
|
||||
margin-top: 1em;
|
||||
form {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -674,7 +725,7 @@ main {
|
||||
width: fit-content;
|
||||
min-width: 20em;
|
||||
position: absolute;
|
||||
top: 190px;
|
||||
top: 218px;
|
||||
z-index: 10;
|
||||
background-color: white;
|
||||
overflow-y: auto;
|
||||
@ -908,6 +959,7 @@ main {
|
||||
}
|
||||
.toast-footer {
|
||||
@include modal-and-toast-footer();
|
||||
margin-top: 1em;
|
||||
}
|
||||
.close {
|
||||
position: absolute;
|
||||
|
||||
@ -7,21 +7,26 @@
|
||||
<div class="page-description">{% block page_description %}{% endblock %}</div>
|
||||
</div>
|
||||
<div class="page-button">
|
||||
{% block page_button %}{% endblock %}
|
||||
{% block page_button_top %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
{% block searchbar %}
|
||||
<div class="search">
|
||||
<img src="{{ url_for('static', filename='/img/search.svg') }}"/>
|
||||
<input
|
||||
id="search-input"
|
||||
type="text"
|
||||
class="form-control search-input"
|
||||
name="search"
|
||||
placeholder="Search..."
|
||||
hx-get="{{ search_endpoint }}"
|
||||
hx-trigger="input changed delay:300ms, search"
|
||||
hx-target="#plugins-list">
|
||||
<div class="search-and-button">
|
||||
<div class="search">
|
||||
<img src="{{ url_for('static', filename='/img/search.svg') }}"/>
|
||||
<input
|
||||
id="search-input"
|
||||
type="text"
|
||||
class="form-control search-input"
|
||||
name="search"
|
||||
placeholder="Search..."
|
||||
hx-get="{{ search_endpoint }}"
|
||||
hx-trigger="input changed delay:300ms, search"
|
||||
hx-target="#plugins-list">
|
||||
</div>
|
||||
<div class="page-button">
|
||||
{% block page_button %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block warning %}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{% extends "_base_header.html" %}
|
||||
|
||||
{% block page_title %}
|
||||
Advanced Mode
|
||||
Developer Mode
|
||||
{% endblock %}
|
||||
|
||||
{% block page_description %}
|
||||
|
||||
@ -22,8 +22,8 @@
|
||||
<main>
|
||||
<nav>
|
||||
<header>
|
||||
<img src="{{ url_for('static', filename='/img/Edly Red Icon.svg') }}"/>
|
||||
<h2>Tutor</h2>
|
||||
<img id="web-logo" src="{{ url_for('static', filename='/img/tutor deck logo.svg') }}"/>
|
||||
<img id="mobile-logo" src="{{ url_for('static', filename='/img/Mobile Logo.svg') }}"/>
|
||||
</header>
|
||||
<menu>
|
||||
<a href="{{ url_for('plugin_store') }}" id="plugin-marketplace">
|
||||
@ -32,17 +32,20 @@
|
||||
</a>
|
||||
<a href="{{ url_for('plugin_installed') }}" id="my-plugins">
|
||||
<img id="my-plugins-logo" src="{{ url_for('static', filename='/img/stack.svg') }}"/>
|
||||
<h4>My Plugins</h4>
|
||||
</a>
|
||||
<a href="{{ url_for('local_launch_view') }}" id="local-launch">
|
||||
<img id="local-launch-logo" src="{{ url_for('static', filename='/img/local-launch.svg') }}"/>
|
||||
<h4>Launch Platform</h4>
|
||||
<h4>Installed Plugins</h4>
|
||||
</a>
|
||||
<a href="{{ url_for('advanced') }}" id="advanced">
|
||||
<img id="advanced-logo" src="{{ url_for('static', filename='/img/advanced-mode.svg') }}"/>
|
||||
<h4>Advanced Mode</h4>
|
||||
<h4>Developer Mode</h4>
|
||||
</a>
|
||||
</menu>
|
||||
<menu>
|
||||
<a href="{{ url_for('local_launch_view') }}" id="local-launch">
|
||||
<img id="local-launch-logo" src="{{ url_for('static', filename='/img/local-launch.svg') }}"/>
|
||||
<h4>Apply changes</h4>
|
||||
</a>
|
||||
<p>Run launch platform to save all changes.</p>
|
||||
</menu>
|
||||
</nav>
|
||||
|
||||
<section>
|
||||
@ -64,8 +67,8 @@
|
||||
<img src="{{ url_for('static', filename='/img/Featured icon.svg') }}" alt="">
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h3>Run launch platform for all plugins?</h3>
|
||||
<p>Running launch platform will allow all changes to plugins to take effect. This could take a few minutes to complete.</p>
|
||||
<h3>Apply Changes to Your Platform?</h3>
|
||||
<p>This will run Launch Platform to apply all recent plugin changes. The process may take a few minutes to complete.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class=" close-modal-button">Not Now</button>
|
||||
@ -93,7 +96,7 @@
|
||||
<div class="toast-footer" id="toast-footer">
|
||||
<button type="button" class=" close-toast-button">Not Now</button>
|
||||
<form method="POST" action="{{ url_for('cli_local_launch')}}">
|
||||
<button class=" run_modal_button" type="submit">Run Launch Platform</button>
|
||||
<button class=" run_modal_button" type="submit">Apply Changes</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
{% extends "_base_header.html" %}
|
||||
|
||||
{% block page_title %}
|
||||
Execute Launch Platform
|
||||
Apply changes
|
||||
{% endblock %}
|
||||
|
||||
{% block page_description %}
|
||||
Running launch platform will allow all changes to plugins to take effect. This could take a few minutes to complete.
|
||||
{% endblock %}
|
||||
|
||||
{% block page_button %}
|
||||
{% block page_button_top %}
|
||||
<button id="cancel-local-launch-button" hx-post="{{ url_for('cli_stop')}}" hx-trigger="click" hx-swap="none" class=" cancel-process-button" type="submit">Cancel</button>
|
||||
<button id="local-launch-button" class=" open-modal-button" type="button">Launch Platform</button>
|
||||
{% endblock %}
|
||||
|
||||
@ -21,6 +21,10 @@
|
||||
</div>
|
||||
|
||||
{% if is_enabled and not show_logs %}
|
||||
<div>
|
||||
<h2>Plugin Settings</h2>
|
||||
<p>You can adjust the plugin's behavior by changing these settings. Changes will only go live after you apply them.</p>
|
||||
</div>
|
||||
<div class="parameter-info">
|
||||
<h2>Plugin Parameters</h2>
|
||||
<p>This plugin has default parameters. If you make any changes, save them and run launch platform to make the changes effective.</p>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{% extends "_base_header.html" %}
|
||||
|
||||
{% block page_title %}
|
||||
My Plugins
|
||||
Installed Plugins
|
||||
{% endblock %}
|
||||
|
||||
{% block page_description %}
|
||||
|
||||
@ -5,7 +5,7 @@ Plugin Marketplace
|
||||
{% endblock %}
|
||||
|
||||
{% block page_description %}
|
||||
View and install available plugins.
|
||||
Explore, search, and install plugins to extend your Open edX platform.
|
||||
{% endblock %}
|
||||
|
||||
{% block page_button %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user
