[UPDT] PROJECT: Added styles for v2 and formated the page
This commit is contained in:
Horilla
@@ -1,73 +1,95 @@
|
||||
{% extends "index.html" %}
|
||||
{% load i18n %}{% load static %}
|
||||
|
||||
{% load i18n static %}
|
||||
|
||||
{% block content %}
|
||||
<style>
|
||||
.expired--dot{
|
||||
background-color:gray;
|
||||
}
|
||||
.cancelled--dot{
|
||||
background-color:red;
|
||||
}
|
||||
.on-hold--dot{
|
||||
background-color:orange;
|
||||
}
|
||||
.completed--dot{
|
||||
background-color:yellowgreen;
|
||||
}
|
||||
.in-progress--dot{
|
||||
background-color: rgb(103, 171, 238);
|
||||
}
|
||||
.new--dot{
|
||||
background-color: cyan;
|
||||
}
|
||||
.status-completed{
|
||||
border-left: 3.4px solid yellowgreen !important;
|
||||
border-radius: 4px 0 0 4px;
|
||||
.expired--dot{
|
||||
background-color:gray;
|
||||
}
|
||||
.cancelled--dot{
|
||||
background-color:red;
|
||||
}
|
||||
.on-hold--dot{
|
||||
background-color:orange;
|
||||
}
|
||||
.completed--dot{
|
||||
background-color:yellowgreen;
|
||||
}
|
||||
.in-progress--dot{
|
||||
background-color: rgb(103, 171, 238);
|
||||
}
|
||||
.new--dot{
|
||||
background-color: cyan;
|
||||
}
|
||||
.status-completed{
|
||||
border-left: 3.4px solid yellowgreen !important;
|
||||
border-radius: 4px 0 0 4px;
|
||||
|
||||
}
|
||||
.status-cancelled {
|
||||
}
|
||||
.status-cancelled {
|
||||
|
||||
border-left: 3.4px solid red !important;
|
||||
border-radius: 4px 0 0 4px;
|
||||
border-left: 3.4px solid red !important;
|
||||
border-radius: 4px 0 0 4px;
|
||||
|
||||
}
|
||||
.status-expired {
|
||||
}
|
||||
.status-expired {
|
||||
|
||||
border-left: 3.4px solid gray !important;
|
||||
border-radius: 4px 0 0 4px;
|
||||
border-left: 3.4px solid gray !important;
|
||||
border-radius: 4px 0 0 4px;
|
||||
|
||||
}
|
||||
.status-on_hold {
|
||||
}
|
||||
.status-on_hold {
|
||||
|
||||
border-left: 3.4px solid orange !important;
|
||||
border-radius: 4px 0 0 4px;
|
||||
border-left: 3.4px solid orange !important;
|
||||
border-radius: 4px 0 0 4px;
|
||||
|
||||
}
|
||||
.status-in_progress {
|
||||
}
|
||||
.status-in_progress {
|
||||
|
||||
border-left: 3.4px solid rgb(103, 171, 238); !important;
|
||||
border-radius: 4px 0 0 4px;
|
||||
border-left: 3.4px solid rgb(103, 171, 238); !important;
|
||||
border-radius: 4px 0 0 4px;
|
||||
|
||||
}
|
||||
.status-new {
|
||||
}
|
||||
.status-new {
|
||||
|
||||
border-left: 3.4px solid cyan !important;
|
||||
border-radius: 4px 0 0 4px;
|
||||
border-left: 3.4px solid cyan !important;
|
||||
border-radius: 4px 0 0 4px;
|
||||
|
||||
}
|
||||
}
|
||||
.oh-badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
.oh-badge--small {
|
||||
margin-top: 0px !important;
|
||||
min-width: 20px !important;
|
||||
min-height: 20px !important;
|
||||
display: flex !important;
|
||||
font-size: 0.7rem !important;
|
||||
align-items: center !important;
|
||||
width: fit-content;
|
||||
justify-content: center !important;
|
||||
padding: 0.1rem 0.5rem;
|
||||
height: fit-content;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.oh-badge--round {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.oh-badge--secondary {
|
||||
background-color: hsl(8, 77%, 56%);
|
||||
color: hsl(0, 0%, 100%);
|
||||
}
|
||||
</style>
|
||||
<meta name="csrf-token" content="{{ csrf_token }}">
|
||||
|
||||
|
||||
|
||||
<div hx-get="{% url 'project-nav-view' %}?{{request.GET.urlencode}}" hx-trigger="load">
|
||||
</div>
|
||||
|
||||
|
||||
{% include "generic/components.html" %}
|
||||
|
||||
<div
|
||||
hx-get="{% url 'project-nav-view' %}?{{request.GET.urlencode}}"
|
||||
hx-trigger="load"
|
||||
></div>
|
||||
|
||||
<div
|
||||
class="oh-checkpoint-badge mb-2"
|
||||
@@ -75,75 +97,90 @@
|
||||
data-ids="[]"
|
||||
data-clicked=""
|
||||
style="display: none"
|
||||
></div>
|
||||
></div>
|
||||
|
||||
|
||||
<div
|
||||
class="oh-wrapper"
|
||||
id="listContainer">
|
||||
<div class="animated-background">
|
||||
</div>
|
||||
<div class="oh-wrapper" id="listContainer">
|
||||
<div class="animated-background"></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="oh-modal"
|
||||
id="projectImport"
|
||||
role="dialog"
|
||||
aria-labelledby="projectImport"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="oh-modal__dialog">
|
||||
<div class="oh-modal__dialog-header">
|
||||
<h2 class="oh-modal__dialog-title" id="projectImportLavel">
|
||||
{% trans "Import Project" %}
|
||||
</h2>
|
||||
<button class="oh-modal__close" aria-label="Close">
|
||||
<ion-icon name="close-outline"></ion-icon>
|
||||
</button>
|
||||
<div class="oh-modal__dialog-body p-0 pt-2" id="projectImportModalBody">
|
||||
<form
|
||||
class="oh-modal"
|
||||
id="projectImport"
|
||||
role="dialog"
|
||||
aria-labelledby="projectImport"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="oh-modal__dialog">
|
||||
<div class="oh-modal__dialog-header">
|
||||
<h2 class="oh-modal__dialog-title" id="projectImportLavel">
|
||||
{% trans "Import Project" %}
|
||||
</h2>
|
||||
<button class="oh-modal__close" aria-label="Close">
|
||||
<ion-icon name="close-outline"></ion-icon>
|
||||
</button>
|
||||
<div
|
||||
class="oh-modal__dialog-body p-0 pt-2"
|
||||
id="projectImportModalBody"
|
||||
>
|
||||
<form id="projectImportForm" enctype="multipart/form-data">
|
||||
<div id="loading" style="display: none">
|
||||
<div id="progress">
|
||||
<div
|
||||
class="progress-bar"
|
||||
role="progressbar"
|
||||
style="width: 0%"
|
||||
aria-valuenow="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
<p id="progress-text">{% trans "Uploading..." %}</p>
|
||||
</div>
|
||||
|
||||
id="projectImportForm"
|
||||
enctype="multipart/form-data"
|
||||
>
|
||||
<div id="loading" style="display: none;">
|
||||
<div id="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<p id="progress-text">{% trans "Uploading..." %}</p>
|
||||
<div id="error-container" style="color: red"></div>
|
||||
|
||||
<div class="modal-body">
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="oh-dropdown__import-form">
|
||||
<label
|
||||
class="oh-dropdown__import-label"
|
||||
for="uploadFile"
|
||||
>
|
||||
<ion-icon
|
||||
name="cloud-upload"
|
||||
class="oh-dropdown__import-form-icon md hydrated"
|
||||
role="img"
|
||||
aria-label="cloud upload"
|
||||
></ion-icon>
|
||||
<span class="oh-dropdown__import-form-title"
|
||||
>{% trans "Upload a File" %}</span
|
||||
>
|
||||
<span class="oh-dropdown__import-form-text"
|
||||
>{% trans "Drag and drop files here" %}</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
name="file"
|
||||
id="projectImportFile"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer d-flex flex-row-reverse">
|
||||
<input
|
||||
type="submit"
|
||||
class="oh-btn oh-btn--secondary"
|
||||
value="{% trans 'Upload' %}"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="error-container" style='color:red;'></div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="oh-dropdown__import-form">
|
||||
<label class="oh-dropdown__import-label" for="uploadFile">
|
||||
<ion-icon name="cloud-upload" class="oh-dropdown__import-form-icon md hydrated" role="img" aria-label="cloud upload"></ion-icon>
|
||||
<span class="oh-dropdown__import-form-title">{% trans "Upload a File" %}</span>
|
||||
<span class="oh-dropdown__import-form-text">{% trans "Drag and drop files here" %}</span>
|
||||
</label>
|
||||
<input type="file" name="file" id="projectImportFile" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer d-flex flex-row-reverse">
|
||||
<input
|
||||
type="submit"
|
||||
class="oh-btn oh-btn--secondary"
|
||||
value='{% trans "Upload" %}'
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="{% static 'cbv/deleteFunc.js' %}"></script>
|
||||
<script src="{% static '/project/import.js' %}"></script>
|
||||
<script src="{% static '/project/project_action.js' %}"></script>
|
||||
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user