forked from crunk/distribusi-verse
added academic info filter menu, tag list per distribusi
This commit is contained in:
parent
163a457dac
commit
532c9c15fd
@ -26,9 +26,19 @@ class UploadForm(FlaskForm):
|
||||
"Name of your website:",
|
||||
validators=[validators.InputRequired(), Length(2, 100), distribusiname],
|
||||
)
|
||||
academicyear = StringField(
|
||||
academicyear = SelectField(
|
||||
"Academic year:",
|
||||
validators=[validators.InputRequired(), Length(9, 10)],
|
||||
validate_choice=True,
|
||||
coerce=str,
|
||||
choices=[
|
||||
(u'2021-2022', u'2021-2022'),
|
||||
(u'2022-2023', u'2022-2023'),
|
||||
(u'2023-2024', u'2023-2024'),
|
||||
(u'2024-2025', u'2024-2025'),
|
||||
(u'2020-2021', u'past: 2020-2021'),
|
||||
],
|
||||
option_widget=None,
|
||||
validators=[DataRequired()]
|
||||
)
|
||||
term = SelectField(
|
||||
"Term:",
|
||||
|
||||
@ -65,14 +65,35 @@ def session_handler():
|
||||
@APP.route("/")
|
||||
def index():
|
||||
ResetUserState()
|
||||
uploadform = UploadForm()
|
||||
distribusis = Distribusis.query.filter(
|
||||
Distribusis.distribusiname.isnot(None)
|
||||
).all()
|
||||
distribusies = {}
|
||||
for distribusi in distribusis:
|
||||
user = User.query.filter_by(id=distribusi.userid).first()
|
||||
distribusies[distribusi.distribusiname] = user.email
|
||||
return render_template("index.html", distribusies=distribusies)
|
||||
#distribusies[distribusi.distribusiname] = user.email
|
||||
distribusies[user.email] = distribusi
|
||||
singledistribusi = {
|
||||
"name": distribusi.distribusiname,
|
||||
"term": distribusi.term,
|
||||
"course": distribusi.course,
|
||||
"year": distribusi.year,
|
||||
"tags": distribusi.tags.split(','),
|
||||
}
|
||||
distribusies[user.email] = singledistribusi
|
||||
years = uploadform.academicyear.choices
|
||||
terms = uploadform.term.choices
|
||||
courses = uploadform.course.choices
|
||||
print(type(courses[0]))
|
||||
template = render_template(
|
||||
"index.html",
|
||||
distribusies=distribusies,
|
||||
years=years,
|
||||
terms=terms,
|
||||
courses=courses,
|
||||
)
|
||||
return template
|
||||
|
||||
|
||||
@APP.route("/distribusi", methods=["GET", "POST"])
|
||||
|
||||
69
verse/static/css/dropdown.css
Normal file
69
verse/static/css/dropdown.css
Normal file
@ -0,0 +1,69 @@
|
||||
/* Dropdown Button */
|
||||
/* for sorting on Academicyear, Term, Course
|
||||
*/
|
||||
button {
|
||||
background-color: #E0B0FF;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
}
|
||||
.filter {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.activebtn {
|
||||
background-color: #62b264;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Dropdown Content (Hidden by Default) */
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #E0B0FF;
|
||||
min-width: 120px;
|
||||
border: 2px solid;
|
||||
z-index: 1;
|
||||
border-style: outset;
|
||||
}
|
||||
|
||||
/* Links inside the dropdown */
|
||||
.dropdown-content button {
|
||||
color: black;
|
||||
padding: 6px;
|
||||
border: none;
|
||||
min-width: inherit;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
.dropbtn {
|
||||
margin-top: 1em;
|
||||
}
|
||||
/* Change color of dropdown links on hover */
|
||||
.dropdown-content button:hover {background-color: #62b264;}
|
||||
|
||||
|
||||
/* Show the dropdown menu on hover */
|
||||
.dropdown:hover .dropdown-content {display: block;}
|
||||
|
||||
/* Change the background color of the dropdown button when the dropdown content is shown */
|
||||
.dropdown:hover .dropbtn {background-color: #62b264;}
|
||||
|
||||
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
|
||||
.dropdown-content button {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
.container > button {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
.dropdown > button {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
body
|
||||
{
|
||||
font-family: monospace;
|
||||
background-color: #383C4A;
|
||||
background-color: #272a33;
|
||||
color:#E0B0FF;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
@ -10,7 +10,7 @@ div#login{
|
||||
width: 30%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-color:#383C4A;
|
||||
background-color:#272a33;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -53,6 +53,10 @@ div#upload form {
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
#distribusiverse {
|
||||
margin-bottom: 11em;
|
||||
}
|
||||
|
||||
div#buttons{
|
||||
position: fixed;
|
||||
top: 0.5em;
|
||||
@ -164,6 +168,34 @@ div.maincontent{
|
||||
padding: 0.5em;
|
||||
border-style: outset;
|
||||
}
|
||||
|
||||
.tags{
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
text-align: center;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 120px;
|
||||
background-color: black;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 1px;
|
||||
padding: 5px 0;
|
||||
|
||||
/* Position the tooltip */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
}
|
||||
/*
|
||||
Project colors so far.
|
||||
light
|
||||
|
||||
@ -1,74 +0,0 @@
|
||||
::selection{
|
||||
color: #fff;
|
||||
background: #5372F0;
|
||||
}
|
||||
.wrapper{
|
||||
width: 496px;
|
||||
background: #fff;
|
||||
padding: 18px 25px 20px;
|
||||
box-shadow: 0 0 30px rgba(0,0,0,0.06);
|
||||
}
|
||||
.wrapper :where(.title, li, li i, .details){
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.title img{
|
||||
max-width: 21px;
|
||||
}
|
||||
.title h2{
|
||||
font-size: 21px;
|
||||
font-weight: 600;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.wrapper .content{
|
||||
margin: 10px 0;
|
||||
}
|
||||
.tags p{
|
||||
font-size: 15px;
|
||||
}
|
||||
.tags ul{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 7px;
|
||||
margin: 12px 0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #a6a6a6;
|
||||
}
|
||||
.tags ul li{
|
||||
color: #333;
|
||||
margin: 4px 3px;
|
||||
list-style: none;
|
||||
background: #F2F2F2;
|
||||
padding: 5px 8px 5px 10px;
|
||||
border: 1px solid #e3e1e1;
|
||||
}
|
||||
.tags ul li i{
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
color: #808080;
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
background: #dfdfdf;
|
||||
justify-content: center;
|
||||
}
|
||||
.tags ul input{
|
||||
flex: 1;
|
||||
padding: 5px;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 16px;
|
||||
}
|
||||
.wrapper .details{
|
||||
justify-content: space-between;
|
||||
}
|
||||
.details button{
|
||||
border: none;
|
||||
background: #E0B0FF;
|
||||
text-decoration: none;
|
||||
margin: 1px;
|
||||
}
|
||||
.details button:hover{
|
||||
background: #2c52ed;
|
||||
}
|
||||
54
verse/static/js/dropdown.js
Normal file
54
verse/static/js/dropdown.js
Normal file
@ -0,0 +1,54 @@
|
||||
filterSelection("all", "None");
|
||||
function filterSelection(c, id) {
|
||||
resetDropDownButtons();
|
||||
var i;
|
||||
var button = document.getElementById(id);
|
||||
if(button){
|
||||
button.innerText = c;
|
||||
addClass(button, "activebtn");
|
||||
}
|
||||
var alldistribusis = document.getElementsByClassName("filter");
|
||||
if (c == "all") {
|
||||
for (i = 0; i < alldistribusis.length; i++) {
|
||||
addClass(alldistribusis[i], "show");
|
||||
}
|
||||
}
|
||||
else {
|
||||
for (i = 0; i < alldistribusis.length; i++) {
|
||||
removeClass(alldistribusis[i], "show");
|
||||
if (alldistribusis[i].className.indexOf(c) > -1) {
|
||||
addClass(alldistribusis[i], "show");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function resetDropDownButtons(){
|
||||
document.getElementById("Academicyear").innerText = "Academic year";
|
||||
document.getElementById("Term").innerText = "Term";
|
||||
document.getElementById("Course").innerText = "Course";
|
||||
allactivebuttons = document.getElementsByClassName("activebtn");
|
||||
for(var i = 0;allactivebuttons.length; i++) {
|
||||
removeClass(allactivebuttons[i], "activebtn");
|
||||
}
|
||||
}
|
||||
function addClass(element, name) {
|
||||
var i, arr1, arr2;
|
||||
arr1 = element.className.split(" ");
|
||||
arr2 = name.split(" ");
|
||||
for (i = 0; i < arr2.length; i++) {
|
||||
if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
|
||||
}
|
||||
}
|
||||
|
||||
function removeClass(element, name) {
|
||||
var i, arr1, arr2;
|
||||
arr1 = element.className.split(" ");
|
||||
arr2 = name.split(" ");
|
||||
for (i = 0; i < arr2.length; i++) {
|
||||
while (arr1.indexOf(arr2[i]) > -1) {
|
||||
arr1.splice(arr1.indexOf(arr2[i]), 1);
|
||||
}
|
||||
}
|
||||
element.className = arr1.join(" ");
|
||||
}
|
||||
@ -6,7 +6,7 @@
|
||||
<title>Autonomous Practices X Distribusi-Verse</title>
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css')}}">
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/selector.css')}}">
|
||||
<!-- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/tags.css')}}"> -->
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/tags.css')}}">
|
||||
<link rel="shortcut icon" href="{{ url_for('static', filename='icons/favicon.ico') }}">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='icons/apple-touch-icon.png')}}">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='icons/favicon-32x32.png')}}">
|
||||
|
||||
@ -12,10 +12,12 @@
|
||||
</fieldset>
|
||||
<fieldset class="required">
|
||||
{{ uploadform.academicyear.label }}
|
||||
<div class="selector-style">
|
||||
{{ uploadform.academicyear }}
|
||||
{% for message in uploadform.academicyear.errors %}
|
||||
<div class="error">{{ message }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="required">
|
||||
{{ uploadform.term.label }}
|
||||
@ -35,7 +37,7 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="required tags">
|
||||
<fieldset class="required">
|
||||
{{ uploadform.tags.label }}
|
||||
{{ uploadform.tags }}
|
||||
{% for message in uploadform.tags.errors %}
|
||||
|
||||
27
verse/templates/filtermenu.html
Normal file
27
verse/templates/filtermenu.html
Normal file
@ -0,0 +1,27 @@
|
||||
{% block menu %}
|
||||
<button onclick="filterSelection('all')" id="removefilter">Remove filter</button>
|
||||
<div class="dropdown">
|
||||
<button id="Academicyear" class="dropbtn">Academic year</button>
|
||||
<div class="dropdown-content">
|
||||
{% for year in years %}
|
||||
<button type="button" name="button" onclick="filterSelection('{{ year[1] }}', 'Academicyear')" >{{ year[1] }}</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button id="Term" class="dropbtn">Term</button>
|
||||
<div class="dropdown-content">
|
||||
{% for term in terms %}
|
||||
<button type="button" name="button" onclick="filterSelection('{{ term[1] }}', 'Term')" >{{ term[1] }}</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button id="Course" class="dropbtn">Course</button>
|
||||
<div class="dropdown-content">
|
||||
{% for course in courses %}
|
||||
<button type="button" name="button" onclick="filterSelection('{{ course[1] }}', 'Course')" >{{ course[1] }}</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock menu %}
|
||||
@ -42,10 +42,18 @@
|
||||
<!-- a div with all the distribusis listed in the distribusiverse -->
|
||||
<div id="distribusiverse" class="maincontent">
|
||||
<h2>List of distribusis</h2>
|
||||
{% include 'filtermenu.html' %}
|
||||
<ul>
|
||||
{% for distribusi in distribusies %}
|
||||
<li>{{distribusies[distribusi]}}: <a href="stash/{{distribusi}}/index.html">{{distribusi}}</a></li>
|
||||
{% for id, distribusi in distribusies.items() %}
|
||||
<li class='distribusi filter {{ distribusi["term"] }} {{ distribusi["year"] }} {{ distribusi["course"] }}'>
|
||||
{{id}}: <a href='stash/{{distribusi["name"]}}/index.html'>{{distribusi["name"]}}</a>
|
||||
{% for tag in distribusi["tags"] %}
|
||||
<span class="tags">{{tag}}</span>
|
||||
{% endfor%}
|
||||
</li>
|
||||
{% endfor%}
|
||||
</ul>
|
||||
</div>
|
||||
<script src="{{ url_for('static', filename='js/dropdown.js')}}"></script>
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/dropdown.css')}}">
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user