diff options
author | CruiseDevice | 2019-06-07 16:55:08 +0530 |
---|---|---|
committer | CruiseDevice | 2019-06-07 16:55:08 +0530 |
commit | 22b7131f930bcb43f0f0fec238260c63ff3fd39a (patch) | |
tree | b4c752f2ac682b0c86a1b600747fb2a7f87e4028 /yaksh/templates | |
parent | ec55273fcc0c374dbaf213910f760660fb1419a6 (diff) | |
download | online_test-22b7131f930bcb43f0f0fec238260c63ff3fd39a.tar.gz online_test-22b7131f930bcb43f0f0fec238260c63ff3fd39a.tar.bz2 online_test-22b7131f930bcb43f0f0fec238260c63ff3fd39a.zip |
Improve UI in offline Yaksh
Diffstat (limited to 'yaksh/templates')
-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 |
3 files changed, 200 insertions, 108 deletions
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> |