diff options
| -rw-r--r-- | yaksh/static/yaksh/css/offline.css | 101 | ||||
| -rw-r--r-- | yaksh/templates/yaksh/index.html | 54 | ||||
| -rw-r--r-- | yaksh/templates/yaksh/quiz.html | 103 | ||||
| -rw-r--r-- | yaksh/templates/yaksh/unit.html | 151 | ||||
| -rw-r--r-- | yaksh/views.py | 3 |
5 files changed, 285 insertions, 127 deletions
diff --git a/yaksh/static/yaksh/css/offline.css b/yaksh/static/yaksh/css/offline.css index 1ec40ab..66d805e 100644 --- a/yaksh/static/yaksh/css/offline.css +++ b/yaksh/static/yaksh/css/offline.css @@ -1,18 +1,83 @@ -.footer {
- position: fixed;
- left: 0;
- bottom: 0;
- width: 100%;
- background-color: #D3D3D3;
- color: black;
- text-align: center;
-}
-
-.module {
- border: none;
- border-spacing: 0;
- border-collapse: collapse;
-}
-.module tr td:nth-child(2) {
- border-left: 1px solid #D3D3D3;
-}
\ No newline at end of file +#footer { + position:fixed; + bottom:0; + width:100%; + height:60px; /* Height of the footer */ + background-color: #D3D3D3; + color: black; + text-align: center; +} + +.module { + border: none; + border-spacing: 0; + border-collapse: collapse; +} +.module tr td:nth-child(2) { + border-left: 1px solid #D3D3D3; +} + +/* + * Sidebar + */ + +.sidebar { + position: fixed; + top: 0; + bottom: 0; + left: 0; + z-index: 100; /* Behind the navbar */ + padding: 48px 0 0; /* Height of navbar */ + box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); +} + +.sidebar-sticky { + position: relative; + top: 0; + height: calc(100vh - 48px); + padding-top: .5rem; + overflow-x: hidden; + overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ +} + +@supports ((position: -webkit-sticky) or (position: sticky)) { + .sidebar-sticky { + position: -webkit-sticky; + position: sticky; + } +} + +.sidebar .nav-link { + font-weight: 500; + color: #333; +} + +.sidebar .nav-link .feather { + margin-right: 4px; + color: #999; +} + +.sidebar .nav-link.active { + color: #007bff; +} + +.sidebar .nav-link:hover .feather, +.sidebar .nav-link.active .feather { + color: inherit; +} + +.sidebar-heading { + font-size: .75rem; + text-transform: uppercase; +} + +/*.footer { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + background-color: #D3D3D3; + color: black; + text-align: center; +} +*/
\ No newline at end of file diff --git a/yaksh/templates/yaksh/index.html b/yaksh/templates/yaksh/index.html index 9bd28d5..05ade47 100644 --- a/yaksh/templates/yaksh/index.html +++ b/yaksh/templates/yaksh/index.html @@ -27,32 +27,36 @@ {% endblock %} </center> </h1> - {% block content %} - <table class="table"> - {% for module in modules %} - <tr> - <td> - {{module.name}} - <div id="{{module.id}}" class="collapse"> - <ul class="list"> - {% for lesson in module.get_lesson_units %} - <li>{{lesson.name}}</li> + <div class="row justify-content-md-center"> + <div class="col-md-10"> + {% block content %} + <table class="table"> + {% for module in modules %} + <tr> + <td> + {{module.name}} + <div id="{{module.id}}" class="collapse"> + <ul class="list"> + {% for lesson in module.get_lesson_units %} + <li>{{lesson.name}}</li> + {% endfor %} + </ul> + </div> + </td> + <td> + <button class="btn btn-info" data-toggle="collapse" data-target="#{{module.id}}"> + View Lessons + </button> + </td> + <td> + <a href="{{module.name|replace_spaces}}/{{module.name|replace_spaces}}.html" target="_blank" class="btn btn-primary">Go to Module</a> + </td> + </tr> {% endfor %} - </ul> - </div> - </td> - <td> - <button class="btn btn-info" data-toggle="collapse" data-target="#{{module.id}}"> - View Lessons - </button> - </td> - <td> - <a href="{{module.name|replace_spaces}}/{{module.name|replace_spaces}}.html" target="_blank" class="btn btn-primary">Go to Module</a> - </td> - </tr> - {% endfor %} - </table> - {% endblock %} + </table> + {% endblock %} + </div> + </div> </div> <footer class="footer" id="footer_div"> <div class="container"> diff --git a/yaksh/templates/yaksh/quiz.html b/yaksh/templates/yaksh/quiz.html index fd52e7d..256b282 100644 --- a/yaksh/templates/yaksh/quiz.html +++ b/yaksh/templates/yaksh/quiz.html @@ -4,12 +4,14 @@ <link rel="stylesheet" href="../../static/css/bootstrap.min.css"> <link rel="stylesheet" href="../../static/css/offline.css"> <link rel="stylesheet" href="../../static/css/video-js.css"> + <link rel="stylesheet" href="../../static/css/yakshcustom.css" type="text/css" /> + <title> {% block pagetitle %} {{course.name}} {% endblock %} </title> </head> <body> -<nav class="navbar bg-dark navbar-dark"> +<nav class="navbar bg-dark navbar-dark fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"> @@ -20,40 +22,75 @@ </div> </nav> <div class="container" style="margin-top:50px"> - <center> - <h1> - {% block subtitle %} - {{course.name}} - {% endblock %} - </h1> - <hr> - </center> - {% block content %} - <center><h2>{{module.name}}</h2></center> - <hr> - <div id="status"></div> - <hr> - <h3>{{unit.description}}</h3> - <a href="http://127.0.0.1:8000/exam/start/{{quiz.questionpaper_set.get.id}}/{{module.id}}/{{course.id}}" target="_blank">{{quiz.description}}</a> - <br> - - {% if unit.type == 'lesson' %} - <a href="{{unit.lesson.name|replace_spaces}}/{{unit.lesson.name|replace_spaces}}.html" target="_blank" class="list-group-item"> - {{unit.lesson.name}} - </a> - {% else %} - <a href="{{unit.quiz.description|replace_spaces}}/{{unit.quiz.description|replace_spaces}}.html" target="_blank" class="list-group-item"> - {{unit.quiz.description}} - </a> - {% endif %} + + <div class="row"> + <nav class="col-md-2 d-none d-md-block bg-light sidebar"> + <div class="sidebar-sticky"> + <ul class="nav flex-column"> + <li class="nav-item"> + <a class="nav-link active" href="#"> + {{ module.name }} + </a> + </li> + <!-- loop --> + {% for unit in module.get_learning_units %} + {% if unit.type == 'lesson' %} + <li class="nav-item"> + <a class="nav-link" href="../{{unit.lesson.name|replace_spaces}}/{{unit.lesson.name|replace_spaces}}.html"> + {{unit.lesson.name}} + </a> + </li> + {% else %} + <li class="nav-item"> + <a class="nav-link" href="../{{unit.quiz.description|replace_spaces}}/{{unit.quiz.description|replace_spaces}}.html"> + {{unit.quiz.description}} + </a> + </li> + {% endif %} + {% endfor %} + <!-- End of loop --> + </ul> + </div> + </nav> + <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4"> + <div class="col-md-10"> + <center> + <h1> + {% block subtitle %} + {{course.name}} + {% endblock %} + </h1> + <hr> + </center> + {% block content %} + <center><h2>{{module.name}}</h2></center> + <hr> + <div id="status"></div> + <hr> + <br> + <div class="text-center"> + <!-- Change Yaksh TODO --> + <a class="btn btn-success" href="http://127.0.0.1:8000/exam/start/{{quiz.questionpaper_set.get.id}}/{{module.id}}/{{course.id}}" target="_blank">{{quiz.description}}</a> + {% if next_unit.type == 'lesson' %} + <a class="btn btn-info" href="../{{next_unit.lesson.name|replace_spaces}}/{{next_unit.lesson.name|replace_spaces}}.html"> + Next + </a> + {% else %} + <a class="btn btn-info" href="../{{next_unit.quiz.description|replace_spaces}}/{{next_unit.quiz.description|replace_spaces}}.html" target="_blank"> + Next + </a> + {% endif %} + </div> - {% endblock %} -</div> -<footer class="footer" id="footer_div"> - <div class="container"> - <p align="center">Developed by FOSSEE group, IIT Bombay</p> + {% endblock %} + </div> + </main> </div> -</footer> + <footer class="footer" id="footer_div"> + <p align="center">Developed by FOSSEE group, IIT Bombay</p> + </footer> +</div> + </body> <script src="../../static/js/jquery-3.3.1.min.js"></script> <script src="../../static/js/bootstrap.min.js"></script> diff --git a/yaksh/templates/yaksh/unit.html b/yaksh/templates/yaksh/unit.html index c5bb1e5..1526454 100644 --- a/yaksh/templates/yaksh/unit.html +++ b/yaksh/templates/yaksh/unit.html @@ -4,12 +4,14 @@ <link rel="stylesheet" href="../../static/css/bootstrap.min.css"> <link rel="stylesheet" href="../../static/css/offline.css"> <link rel="stylesheet" href="../../static/css/video-js.css"> + <link rel="stylesheet" href="../../static/css/yakshcustom.css" type="text/css" /> + <title> {% block pagetitle %} {{module.name}} {% endblock %} </title> </head> <body> -<nav class="navbar bg-dark navbar-dark"> +<nav class="navbar bg-dark navbar-dark fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"> @@ -20,57 +22,106 @@ </div> </nav> <div class="container" style="margin-top:50px"> - <center> - <h1> - {% block subtitle %} - {{course.name}} - {% endblock %} - </h1> - <hr> - </center> - {% block content %} - <center><h2>{{module.name}}</h2></center> - <hr> - <h3>{{lesson.name}}</h3> - {% if lesson.video_file %} - <video id="lesson_video" height="500" class="video-js" controls preload="auto" data-setup='{"playbackRates": [0.5, 1, 1.5, 2]}'> - <source src="{{lesson.video_file.name|file_title}}"> - </video> - {% endif %} - <br> - <table class="table"> - <tr> - <td> - {{lesson.html_data|safe}} - </td> - <td> - {% if lesson_files %} - <h4><strong>Lesson Files (Click on lesson file to download) - </strong></h4> - <ul class="list-group"> - {% for file in lesson_files %} - <a href="{{file.file.name|file_title}}" class="list-group-item"> - {{file.file.name|file_title}} + + <div class="row"> + <nav class="col-md-2 d-none d-md-block bg-light sidebar"> + <div class="sidebar-sticky"> + <ul class="nav flex-column"> + <li class="nav-item"> + <a class="nav-link active" href="#"> + {{ module.name }} + </a> + </li> + <!-- loop --> + {% for unit in module.get_learning_units %} + {% if unit.type == 'lesson' %} + <li class="nav-item"> + <a class="nav-link" href="../{{unit.lesson.name|replace_spaces}}/{{unit.lesson.name|replace_spaces}}.html"> + {{unit.lesson.name}} + </a> + </li> + {% else %} + <li class="nav-item"> + <a class="nav-link" href="../{{unit.quiz.description|replace_spaces}}/{{unit.quiz.description|replace_spaces}}.html"> + {{unit.quiz.description}} + </a> + </li> + {% endif %} + {% endfor %} + <!-- End of loop --> + </ul> + </div> + </nav> + + <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4"> + <div class="col-md-10"> + <center> + <h1> + {% block subtitle %} + {{course.name}} + {% endblock %} + </h1> + <hr> + </center> + {% block content %} + <center><h2>{{module.name}}</h2></center> + <hr> + <h3>{{lesson.name}}</h3> + {% if lesson.video_file %} + <video id="lesson_video" height="500" class="video-js" controls preload="auto" data-setup='{"playbackRates": [0.5, 1, 1.5, 2]}'> + <source src="{{lesson.video_file.name|file_title}}"> + </video> + {% endif %} + <br> + <table class="table"> + <tr> + <td> + {{lesson.html_data|safe}} + </td> + </tr> + <tr> + <td> + {% if lesson_files %} + <h4><strong>Lesson Files (Click on lesson file to download) + </strong></h4> + <ul class="list-group"> + {% for file in lesson_files %} + <a href="{{file.file.name|file_title}}" class="list-group-item"> + {{file.file.name|file_title}} + </a> + {% endfor %} + </ul> + {% else %} + <ul class="list-group"> + <li class="list-group-item"> + <h4>No files for {{lesson.name}}</h4> + </li> + </ul> + {% endif %} + </td> + </tr> + </table> + <div class="text-center"> + <!-- Change Yaksh TODO --> + {% if next_unit.type == 'lesson' %} + <a class="btn btn-info" href="../{{next_unit.lesson.name|replace_spaces}}/{{next_unit.lesson.name|replace_spaces}}.html"> + Next </a> - {% endfor %} - </ul> - {% else %} - <ul class="list-group"> - <li class="list-group-item"> - <h4>No files for {{lesson.name}}</h4> - </li> - </ul> - {% endif %} - </td> - </tr> - </table> - {% endblock %} -</div> -<footer class="footer" id="footer_div"> - <div class="container"> - <p align="center">Developed by FOSSEE group, IIT Bombay</p> + {% else %} + <a class="btn btn-info" href="../{{next_unit.quiz.description|replace_spaces}}/{{next_unit.quiz.description|replace_spaces}}.html" target="_blank"> + Next + </a> + {% endif %} + </div> + {% endblock %} + </div> + </main> </div> -</footer> + <footer class="footer" id="footer_div"> + <p align="center">Developed by FOSSEE group, IIT Bombay</p> + </footer> +</div> + </body> <script src="../../static/js/jquery-3.3.1.min.js"></script> <script src="../../static/js/bootstrap.min.js"></script> diff --git a/yaksh/views.py b/yaksh/views.py index 0b70361..319acde 100644 --- a/yaksh/views.py +++ b/yaksh/views.py @@ -2943,7 +2943,8 @@ def download_course(request, course_id): static_files = {"js": ["bootstrap.min.js", "jquery-3.3.1.min.js", "video.js"], "css": ["bootstrap.min.css", - "video-js.css", "offline.css"], + "video-js.css", "offline.css", + "yakshcustom.css"], "images": ["yaksh_banner.png"]} zip_file = course.create_zip(current_dir, static_files) zip_file.seek(0) |