Browse Source

added academic info filter menu, tag list per distribusi

current_wdka_release
crunk 3 years ago
parent
commit
532c9c15fd
  1. 14
      verse/forms/uploadform.py
  2. 25
      verse/start.py
  3. 69
      verse/static/css/dropdown.css
  4. 36
      verse/static/css/style.css
  5. 74
      verse/static/css/tags.css
  6. 54
      verse/static/js/dropdown.js
  7. 2
      verse/templates/base.html
  8. 4
      verse/templates/distribusiworkflow/upload.html
  9. 27
      verse/templates/filtermenu.html
  10. 12
      verse/templates/index.html

14
verse/forms/uploadform.py

@ -26,9 +26,19 @@ class UploadForm(FlaskForm):
"Name of your website:", "Name of your website:",
validators=[validators.InputRequired(), Length(2, 100), distribusiname], validators=[validators.InputRequired(), Length(2, 100), distribusiname],
) )
academicyear = StringField( academicyear = SelectField(
"Academic year:", "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 = SelectField(
"Term:", "Term:",

25
verse/start.py

@ -65,14 +65,35 @@ def session_handler():
@APP.route("/") @APP.route("/")
def index(): def index():
ResetUserState() ResetUserState()
uploadform = UploadForm()
distribusis = Distribusis.query.filter( distribusis = Distribusis.query.filter(
Distribusis.distribusiname.isnot(None) Distribusis.distribusiname.isnot(None)
).all() ).all()
distribusies = {} distribusies = {}
for distribusi in distribusis: for distribusi in distribusis:
user = User.query.filter_by(id=distribusi.userid).first() user = User.query.filter_by(id=distribusi.userid).first()
distribusies[distribusi.distribusiname] = user.email #distribusies[distribusi.distribusiname] = user.email
return render_template("index.html", distribusies=distribusies) 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"]) @APP.route("/distribusi", methods=["GET", "POST"])

69
verse/static/css/dropdown.css

@ -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;
}
}

36
verse/static/css/style.css

@ -1,7 +1,7 @@
body body
{ {
font-family: monospace; font-family: monospace;
background-color: #383C4A; background-color: #272a33;
color:#E0B0FF; color:#E0B0FF;
word-wrap: break-word; word-wrap: break-word;
} }
@ -10,7 +10,7 @@ div#login{
width: 30%; width: 30%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background-color:#383C4A; background-color:#272a33;
text-decoration: none; text-decoration: none;
} }
@ -53,6 +53,10 @@ div#upload form {
margin:0 auto; margin:0 auto;
} }
#distribusiverse {
margin-bottom: 11em;
}
div#buttons{ div#buttons{
position: fixed; position: fixed;
top: 0.5em; top: 0.5em;
@ -164,6 +168,34 @@ div.maincontent{
padding: 0.5em; padding: 0.5em;
border-style: outset; 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. Project colors so far.
light light

74
verse/static/css/tags.css

@ -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

@ -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(" ");
}

2
verse/templates/base.html

@ -6,7 +6,7 @@
<title>Autonomous Practices X Distribusi-Verse</title> <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/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/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="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="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')}}"> <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='icons/favicon-32x32.png')}}">

4
verse/templates/distribusiworkflow/upload.html

@ -12,10 +12,12 @@
</fieldset> </fieldset>
<fieldset class="required"> <fieldset class="required">
{{ uploadform.academicyear.label }} {{ uploadform.academicyear.label }}
<div class="selector-style">
{{ uploadform.academicyear }} {{ uploadform.academicyear }}
{% for message in uploadform.academicyear.errors %} {% for message in uploadform.academicyear.errors %}
<div class="error">{{ message }}</div> <div class="error">{{ message }}</div>
{% endfor %} {% endfor %}
</div>
</fieldset> </fieldset>
<fieldset class="required"> <fieldset class="required">
{{ uploadform.term.label }} {{ uploadform.term.label }}
@ -35,7 +37,7 @@
{% endfor %} {% endfor %}
</div> </div>
</fieldset> </fieldset>
<fieldset class="required tags"> <fieldset class="required">
{{ uploadform.tags.label }} {{ uploadform.tags.label }}
{{ uploadform.tags }} {{ uploadform.tags }}
{% for message in uploadform.tags.errors %} {% for message in uploadform.tags.errors %}

27
verse/templates/filtermenu.html

@ -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 %}

12
verse/templates/index.html

@ -42,10 +42,18 @@
<!-- a div with all the distribusis listed in the distribusiverse --> <!-- a div with all the distribusis listed in the distribusiverse -->
<div id="distribusiverse" class="maincontent"> <div id="distribusiverse" class="maincontent">
<h2>List of distribusis</h2> <h2>List of distribusis</h2>
{% include 'filtermenu.html' %}
<ul> <ul>
{% for distribusi in distribusies %} {% for id, distribusi in distribusies.items() %}
<li>{{distribusies[distribusi]}}: <a href="stash/{{distribusi}}/index.html">{{distribusi}}</a></li> <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%} {% endfor%}
</ul> </ul>
</div> </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 %} {% endblock %}

Loading…
Cancel
Save