Коммит 62b98e68 создал по автору Кабанин Денис Андреевич's avatar Кабанин Денис Андреевич
Просмотр файлов

Переделал форму подачи заявки

владелец 01e70bce
Скрыть пробелы
Построчно Рядом
portal/static/css/projects/fl.css
Просмотр файла @ 62b98e68
.main {
width: 100%;
}
.form-create {
margin: 0 auto;
margin-top: 4%;
width: 80%;
max-width: 1000px;
}
.formPZ{
/*временные размеры*/
width: 1000px;/*в адаптив*/
min-height: 700px;/*в адаптив*/
/* margin-top: 10%; */
margin: auto;
background: linear-gradient(297.37deg, #17428F 6.45%, #4679D3 91.88%);
border-radius: 14px;/*в адаптив*/
font-family: 'Roboto';/*шрифты*/
position: relative;
padding: 20px 30px;
width: 100%;/*в адаптив*/
background: #fff;
border-radius: 30px;
font-style: normal;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
}
display: grid;
grid-template-rows: repeat(5%,30);
grid-template-areas:
"h h h h h"
"n n n n n"
"d d d d d"
"d d d d d"
"d d d d d"
"d d d d d"
"t t z s s"
"f f f f f"
"b b b b b"
"b b b b b";
.h1 {
color: #000000;
text-align: center;
font-size: 45px;
font-weight: 400;
margin: 0;
}
.wf {
padding: 10px;
border-radius: 5px;
background: #FFFFFF;
min-height: 50%;
width: 100%;
border: rgb(0,0,0,0);
border: 1px solid #00000030;
font-size: 16px;
line-height: 20px;
}
div.desc div {
min-height: 80%;
.ta {
resize: none;
min-height: 100px;
max-height: 300px;
height: auto;
font-size: inherit;
font-family: inherit;
}
.form{
margin:3%;
margin-top: 2%;
margin-bottom: 1%;
.form:not(:last-child){
margin-bottom: 30px;
}
.selects {
display: flex;
justify-content: space-between;
align-items: stretch;
}
.h3 {
color: #fff;
margin: 0;
margin-bottom: 3px;
font-weight: 300;
font-size: 16px;
color: #00000095;
font-style: normal;
font-weight: 200;
margin-bottom: 1%;
margin-left: 0px;
}
.nng {
/* background: #FFFFFF; */
/* border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 5px;*/
grid-area: n;
.teachers {
position: relative;
margin-bottom: 5px;
}
.desc {
/* background: #FFFFFF; */
/* border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 5px;*/
.teacher, .new-teacher {
display: none;
}
grid-area: d;
.teacher-open {
display: block;
}
.tea {
margin-right: 0%;
margin-left: 7.5%;
/* background: #FFFFFF; */
/* border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 5px;*/
grid-area: t;
width: 40%;
}
div.tea h3 {
margin-left: 0;
}
.subj {
margin-right: 7.5%;
margin-left: 0%;
/* background: #FFFFFF; */
/* border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 5px;*/
grid-area: s;
width: 40%;
}
.files {
/* background: #FFFFFF; */
/* border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 5px;*/
.file-input {
height: 0;
position: absolute;
opacity: 0;
z-index: -10;
}
grid-area: f;
.file-label {
display: inline-block;
cursor: pointer;
color: #5A88FF;
}
.zero {/*обычный костыль ввиде пустого класса*/
background: rgba(0,0,0,0);
grid-area: z;
.file-list {
display: flex;
flex-wrap: wrap;
}
.but{
cursor: pointer;
color: #ffffff;
font-size: larger;
background: #000000;
.file-item {
margin-top: 10px;
position: relative;
padding: 10px;
border: 1px solid #00000030;
border-radius: 5px;
border: 0px;
font-size: 16px;
font-weight: 400;
}
width: 30%;
height: 60%;
margin: 3% auto;
.file-item:not(:last-child) {
margin-right: 10px;
}
grid-area: b;
.file-item-div {
position: absolute;
top: -7.5px;
right: -7.5px;
width: 15px;
height: 15px;
background-size: auto;
background: url('../../img/global/del.svg') no-repeat center center;
cursor: pointer;
}
.h1 {
.but{
padding: 13px;
margin: 0 auto;
width: 33%;
border: none;
outline: none;
border-radius: 5px;
font-size: 16px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
cursor: pointer;
color: #fff;
text-align: center;
font-size: 45px;
margin-bottom: -6%;
grid-area: h;
background: #000;
transition: 0.1s background linear;
}
.but:active {
background: #232323;
}
\ Нет новой строки в конце файла
portal/static/css/projects/index.css
Просмотр файла @ 62b98e68
.new-project-link {
margin: 10px 0;
padding: 30px;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
......
portal/static/css/theme_list/theme_list.css
Просмотр файла @ 62b98e68
......@@ -506,7 +506,7 @@
width: 15px;
height: 15px;
background-size: auto;
background: url('../../img/theme_list/del.svg') no-repeat center center;
background: url('../../img/global/del.svg') no-repeat center center;
cursor: pointer;
}
......
portal/static/js/projects/create_page.js 0 → 100644
Просмотр файла @ 62b98e68
$(function () {
$('.select2').select2()
});
let files = [];
$('#file-input').on('change', function() {
let arr = document.getElementById("file-input").files;
let len = arr.length;
files.push(...arr);
while (len > 0) {
len--;
let text = arr[len].name;
let li = document.createElement('li');
let ul = $('.file-list');
let div = document.createElement('div');
li.innerHTML = text;
li.className = 'file-item';
div.className = 'file-item-div';
ul.prepend(li);
li.append(div);
$('.file-item-div').off();
file_remove();
}
count_files_edit();
});
function count_files_edit() {
const dataTransfer = new DataTransfer();
for (let i = 0; i < files.length; i++) {dataTransfer.items.add(files[i])}
document.getElementById("file-input").files = dataTransfer.files;
}
function file_remove() {
$('.file-item-div').on('click', function () {
let li = this.parentNode;
let name = li.innerText;
li.remove();
for (let i = 0; i < files.length; i++) {
if(files[i].name == name) {
files.splice(i, 1);
count_files_edit();
break;
}
}
});
}
function checkbox() {
let is_true = document.getElementById('teacher-checkbox').checked;
if(is_true) {
$('.teacher').removeClass('teacher-open');
$('.new-teacher').addClass('teacher-open');
} else {
$('.new-teacher').removeClass('teacher-open');
$('.teacher').addClass('teacher-open');
}
}
\ Нет новой строки в конце файла
portal/templates/projects/create.html
Просмотр файла @ 62b98e68
......@@ -11,100 +11,92 @@
<form class="form-create" action="{% url 'postcreate' %}" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div class="formPZ">
<h1 class="h1">Подача заявки</h1>
<div class="form nng">
<h3 class="h3 nng">Название</h3>
<h1 class="form h1">Подача заявки</h1>
<div class="form">
<h3 class="h3">Название</h3>
<input name="name" class="wf" />
</div>
<div class="form desc">
<h3 class="h3 desc">Описание</h3>
<div class="form">
<h3 class="h3">Описание</h3>
<textarea name="description" class="wf ta"></textarea>
</div>
<div class="form tea">
<h3 class="h3 tea">Учитель</h3>
<select name="teacher" id="selTea" class="wf sel select2" required>
{% for teacher in teachers %}
<option value="{{ teacher.id }}" class="opG opt">{{ teacher.fullName }}</option>
{% endfor %}
</select>
</div>
<div class="form subj">
<h3 class="h3 subj">Предмет</h3>
<select name="subject" id="selSubj" class="wf sel" required>
<optgroup label="Математические">
<option class="opG opt">Математика</option>
<option class="opG opt">Алгебра</option>
<option class="opG opt">Геометрия</option>
<option class="opG opt">Теория вероятностей и статистика</option>
<option class="opG opt">Информатика</option>
</optgroup>
<optgroup label="Естественно-научные">
<option class="opG opt">География</option>
<option class="opG opt">Биология
<option class="opG opt">Физика</option>
<option class="opG opt">Химия</option>
<option class="opG opt">Основы безопасности жизнедеятельности</option>
<option class="opG opt">Естествознание</option>
<option class="opG opt">Экология</option>
<option class="opG opt">Астрономия</option>
</optgroup>
<optgroup label="Общественно-научные">
<option class="opG opt">История</option>
<option class="opG opt">Обществознание</option>
<option class="opG opt">Экономика</option>
<option class="opG opt">Право</option>
<option class="opG opt">Разговоры о важном</option>
<option class="opG opt">Краеведение</option>
<option class="opG opt">Основы религиозных культур и светской этики</option>
</optgroup>
<optgroup label="Гуманитарные">
<option class="opG opt">Родная литература</option>
<option class="opG opt">Русский язык</option>
<option class="opG opt">Литература</option>
<option class="opG opt">Иностранный язык(Английский)</option>
<option class="opG opt">Иностранный язык(Французский)</option>
<option class="opG opt">Иностранный язык(Немецкий)</option>
</optgroup>
<optgroup label="Трудовое обучение">
<option class="opG opt">Труд</option>
<option class="opG opt">Технология</option>
<option class="opG opt">Черчение</option>
<option class="opG opt">Индивидуальный проект</option>
</optgroup>
<option class="opG opt">Физическая культура</option>
<option class="opG opt">Музыка</option>
<option class="opG opt">Изобразительное искусство</option>
<option class="opG opt">Другая научная область/предмет</option>
<!-- <option value="1" class="opG opt"></option>
<option value="2" class="opG opt"></option>
<option value="3" class="opG opt"></option>
<option value="4" class="opG opt"></option>
<option value="5" class="opG opt"></option>
<option value="6" class="opG opt"></option>
<option value="7" class="opG opt"></option> -->
</select>
<div class="form selects">
<div class="tea">
<h3 class="h3 tea">Учитель</h3>
<div class="teachers">
<div class="teacher teacher-open">
<select name="teacher" id="selTea" class="wf select2" required>
{% for teacher in teachers %}
<option value="{{ teacher.id }}" class="opG opt">{{ teacher.fullName }}</option>
{% endfor %}
</select>
</div>
<input type="text" class="new-teacher wf" placeholder="ФИО учителя">
</div>
<div class="checkbox">
<input type="checkbox" name="teacher-checkbox" id="teacher-checkbox" onclick="checkbox()">
<label for="teacher-checkbox" class="checkbox-label">Учитель не из лицея</label>
</div>
</div>
<div class="subj">
<h3 class="h3 subj">Предмет</h3>
<select name="subject" id="selSubj" class="wf" required>
<optgroup label="Математические">
<option class="opG opt">Математика</option>
<option class="opG opt">Алгебра</option>
<option class="opG opt">Геометрия</option>
<option class="opG opt">Теория вероятностей и статистика</option>
<option class="opG opt">Информатика</option>
</optgroup>
<optgroup label="Естественно-научные">
<option class="opG opt">География</option>
<option class="opG opt">Биология</option>
<option class="opG opt">Физика</option>
<option class="opG opt">Химия</option>
<option class="opG opt">Основы безопасности жизнедеятельности</option>
<option class="opG opt">Естествознание</option>
<option class="opG opt">Экология</option>
<option class="opG opt">Астрономия</option>
</optgroup>
<optgroup label="Общественно-научные">
<option class="opG opt">История</option>
<option class="opG opt">Обществознание</option>
<option class="opG opt">Экономика</option>
<option class="opG opt">Право</option>
<option class="opG opt">Разговоры о важном</option>
<option class="opG opt">Краеведение</option>
<option class="opG opt">Основы религиозных культур и светской этики</option>
</optgroup>
<optgroup label="Гуманитарные">
<option class="opG opt">Родная литература</option>
<option class="opG opt">Русский язык</option>
<option class="opG opt">Литература</option>
<option class="opG opt">Иностранный язык(Английский)</option>
<option class="opG opt">Иностранный язык(Французский)</option>
<option class="opG opt">Иностранный язык(Немецкий)</option>
</optgroup>
<optgroup label="Трудовое обучение">
<option class="opG opt">Труд</option>
<option class="opG opt">Технология</option>
<option class="opG opt">Черчение</option>
<option class="opG opt">Индивидуальный проект</option>
</optgroup>
<option class="opG opt">Физическая культура</option>
<option class="opG opt">Музыка</option>
<option class="opG opt">Изобразительное искусство</option>
<option class="opG opt">Другая научная область/предмет</option>
</select>
</div>
</div>
<div class="form files">
<h3 class="h3 files">Приложите файлы</h3>
<!-- {{file_form.as_div}}-->
<input name="files" type="file" multiple="multiple" class="wf" />
<input name="files" type="file" multiple="multiple" class="file-input" id="file-input" />
<label for="file-input" class="file-label">Добавить файлы</label>
<ul class="file-list"></ul>
</div>
<!-- <div class="zero"></div> -->
<button class="form but" type="submit">Подать заявку</button>
<button class="but" type="submit">Подать заявку</button>
</div>
</form>
<script>
$(document).ready(function () {
$('.js-chosen').chosen({
width: '100%',
no_results_text: 'Совпадений не найдено',
placeholder_text_single: 'Выберите учителя'
});
});
$(function () {
$('.select2').select2()
});
</script>
<script src="{% static 'js/projects/create_page.js' %}"></script>
{% endblock content %}
\ Нет новой строки в конце файла
Поддерживает Markdown
0% или .
You are about to add 0 people to the discussion. Proceed with caution.
Сначала завершите редактирование этого сообщения!
Пожалуйста, зарегистрируйтесь или чтобы прокомментировать