From 20bab88d04ce9ad3f8ad528c2e1eb2599b58e3f4 Mon Sep 17 00:00:00 2001 From: iou1name Date: Mon, 13 Aug 2018 13:17:51 -0400 Subject: [PATCH] basic support for the quest page --- jinja2/base.html | 1 - quest/jinja2/quest/quest.html | 156 +++++++++++++++++++++++++ quest/static/quest.css | 209 +++++++++++++++++++++++++++++++++ quest/views.py | 7 +- static/base.css | 210 ---------------------------------- 5 files changed, 371 insertions(+), 212 deletions(-) create mode 100644 quest/jinja2/quest/quest.html create mode 100644 quest/static/quest.css diff --git a/jinja2/base.html b/jinja2/base.html index 9d3cc15..38f2c57 100644 --- a/jinja2/base.html +++ b/jinja2/base.html @@ -1,7 +1,6 @@ - {% block title %}{% endblock %} - Titivillus #} + + {##} + {% if request.user == quest.owner %} + {##} + {% endif %} + {##} +{% endblock %} +{% block header %} +{% if request.user == quest.owner %} +
  • Edit Quest
    • +{% endif %} +
  • + +
    • +{% endblock %} +{% block content %} +
    +
    +

    {{ quest.title }}

    +
    + {% for post in posts %} + {% if post.post_type == "text" %} +
    + {% elif post.post_type == "dice" %} +
    + {% elif post.post_type == "poll" %} +
    + {% endif %} +
    + {{ post.timestamp.strftime('%Y-%m-%d %H:%M') }} + {% if request.user == quest.owner %} + {% if post.post_type == "text" %} +
    Edit + + {% elif (post.post_type == "dice" or post.post_type == "poll") and post == posts|last %} +
    + + {% endif %} + {% endif %} +
    +
    + {% if post.post_type == "text" %} + {% autoescape false %} + {{ post.post_text }} + {% endautoescape %} + {% elif post.post_type == "dice" %} +

    {{ post.post_text }} - {% if post.id == quest.open_post_id %}Open{% else %}Closed{% endif %}

    + {# for dice_roll in dice_rolls.get(post.id, []) %} +
    + Rolled {{ dice_roll[4] }} = {{ dice_roll[5] }} ({{ dice_roll[3] }}){% if post.id|dice_chal != 0 %} - {% if dice_roll[5] >= post.id|dice_chal %}Pass{% else %}Fail{% endif %}{% endif %} +
    + {% endfor #} +

    {{ post.post_test }} - {% if post.id == quest.open_post_id %}Open{% else %}Closed{% endif %}

    + + {# for option in options.get(post.id, []) %} + + + + + + {% endfor #} +
    + + + {{ option[2] }}{{ poll_votes.get(option[0], [])|length }}
    + {# if post.id == quest.open_post_id and post.id|is_write_in %} +
    + Write-in:
    + +
    + {% endif #} + {% endif %} +
    +

    + {% endfor %} +
    + {% if request.user == quest.owner %} +
    +
    + +
    +
    +
    + +
    + + +
    + {% endif %} +
    +
    +
    +
    +

    Chat

    +
    + {% autoescape false %} + {# for message in messages %} +
    +
    + Anonymous + {{ message[3] | strftime }} + No.{{ message[0] }} +
    +
    {{ message[4] }}
    +
    +
    + {% endfor #} + {% endautoescape %} +
    +
    +
    +
    + +{% endblock %} diff --git a/quest/static/quest.css b/quest/static/quest.css new file mode 100644 index 0000000..14c79d1 --- /dev/null +++ b/quest/static/quest.css @@ -0,0 +1,209 @@ +img { + max-width:100%; + max-height:100%; +} + +h3 { + margin-top: 0px; + margin-bottom: 0.5em; +} + +#questContainer { + display: flex; + overflow: auto; +} + +#questPane { + padding-left: 5%; + padding-right: 35%; + min-width: 0; +} + +.questPost { + display: flex; +} + +.questPostMeta { + white-space: nowrap; + padding-right: 15px; +} + +.questPostData { + word-wrap: break-word; + min-width: 0; + width: 100%; +} + +#QMPostPane { + display: flex; +} + +#QMPostTabs { + display: inline-block; + list-style-type: none; + padding: 0; + margin: 0; + background-color: #f1f1f1; + height: 100%; +} + +.QMPostTab { + display: block; + padding: 8px 16px; + text-decoration: none; +} + +.QMPostTab:hover { + background-color: #555; + color: white; +} + +.QMPostTab.active { + background-color: #555; + color: white; +} + +.QMPostTabContent { + flex: auto; + padding: 0px 12px; + border: 1px solid #ccc; + border-left: none; + width: 100px; +} + +#postTextArea { + max-width: 100%; +} + +.tooltip { + border-bottom: 1px dotted black; +} + +#QMPollPostForm a { + text-decoration: none; +} + +.pollOption { + width: 100%; + margin: 0.1em; +} + +.pollPost { + width: 100%; +} + +.poll { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + border: 1px solid #ddd; +} + +.optionVotes { + width: 4em; + text-align: center; +} + +.poll td { + padding: 0.5em; + word-wrap: break-word; + border-bottom: 1px solid #ddd; +} + +.pollCheckBox input { + display: none; +} + +.pollCheckBox { + width: 1.5em; +} + +.pollCheckBox label { + cursor: pointer; + background: #eee; + border: 1px solid #ddd; + padding: 0.2em; +} + +.pollCheckBox label::after { + content: "\2713"; + color: #bfbfbf; + opacity: 0.3; +} + +.pollCheckBox label:hover::after { + opacity: 0.5; +} + +.pollCheckBox input:checked + label::after { + opacity: 1; + color: black; +} + +.pollCheckBox input:disabled + label { + opacity: 0.3; +} + +#writeinInput { + width: 100%; +} + +#chatPane { + height: 100%; + width: 30%; + right: 0; + position: fixed; + display: flex; + flex-direction: column; +} + +#chatWindow { + border: 1px solid #ccc; + padding: 0.25em; + overflow: auto; + flex: 1; +} + +.messageContent { + width: 100%; + word-wrap: break-word; +} + +.msgSrvHr { + width: 95%; + margin-top: 0.2em; + margin-bottom: 0.2em; + margin-left: auto; + margin-right: auto; + border: 0; + border-bottom: 1px solid #ccc; +} + +#messageTextDiv { + padding-bottom: 10px; + width: 100%; + display: flex; + flex-direction: column; +} + +#messageTextArea { + resize: none; + box-sizing: border-box; +} + +#preview { + display: block; + position: fixed; + background: white; + word-wrap: break-word; + border: 1px solid #ccc; + padding: 0.25em; +} + +.greenText { + color: green; +} + +.quotelink { + color: red; +} diff --git a/quest/views.py b/quest/views.py index b83f1a2..7a12b80 100644 --- a/quest/views.py +++ b/quest/views.py @@ -5,6 +5,8 @@ Quest and quest accessory views. from django.shortcuts import render from django.http import HttpResponse +from .models import Quest + def index(request): """ /quest page index. Possibly not needed. @@ -17,4 +19,7 @@ def quest(request, quest_id, page_num=1): """ Arbituary quest page view. """ - return HttpResponse(f"Quest_ID: {quest_id} Page_Num: {page_num}") + quest = Quest.objects.get(id=quest_id) + posts = quest.post_set.all() + context = {'quest': quest, 'posts': posts, 'page_num': page_num} + return render(request, 'quest/quest.html', context) diff --git a/static/base.css b/static/base.css index c60062b..f2acb0b 100644 --- a/static/base.css +++ b/static/base.css @@ -1,13 +1,3 @@ -img { - max-width:100%; - max-height:100%; -} - -h3 { - margin-top: 0px; - margin-bottom: 0.5em; -} - .header { position: fixed; top: 0; @@ -30,203 +20,3 @@ h3 { #headerHidden { width: auto; } - -#questContainer { - display: flex; - overflow: auto; -} - -#questPane { - padding-left: 5%; - padding-right: 35%; - min-width: 0; -} - -.questPost { - display: flex; -} - -.questPostMeta { - white-space: nowrap; - padding-right: 15px; -} - -.questPostData { - word-wrap: break-word; - min-width: 0; - width: 100%; -} - -#QMPostPane { - display: flex; -} - -#QMPostTabs { - display: inline-block; - list-style-type: none; - padding: 0; - margin: 0; - background-color: #f1f1f1; - height: 100%; -} - -.QMPostTab { - display: block; - padding: 8px 16px; - text-decoration: none; -} - -.QMPostTab:hover { - background-color: #555; - color: white; -} - -.QMPostTab.active { - background-color: #555; - color: white; -} - -.QMPostTabContent { - flex: auto; - padding: 0px 12px; - border: 1px solid #ccc; - border-left: none; - width: 100px; -} - -#postTextArea { - max-width: 100%; -} - -.tooltip { - border-bottom: 1px dotted black; -} - -#QMPollPostForm a { - text-decoration: none; -} - -.pollOption { - width: 100%; - margin: 0.1em; -} - -.pollPost { - width: 100%; -} - -.poll { - border-collapse: collapse; - width: 100%; - table-layout: fixed; - border: 1px solid #ddd; -} - -.optionVotes { - width: 4em; - text-align: center; -} - -.poll td { - padding: 0.5em; - word-wrap: break-word; - border-bottom: 1px solid #ddd; -} - -.pollCheckBox input { - display: none; -} - -.pollCheckBox { - width: 1.5em; -} - -.pollCheckBox label { - cursor: pointer; - background: #eee; - border: 1px solid #ddd; - padding: 0.2em; -} - -.pollCheckBox label::after { - content: "\2713"; - color: #bfbfbf; - opacity: 0.3; -} - -.pollCheckBox label:hover::after { - opacity: 0.5; -} - -.pollCheckBox input:checked + label::after { - opacity: 1; - color: black; -} - -.pollCheckBox input:disabled + label { - opacity: 0.3; -} - -#writeinInput { - width: 100%; -} - -#chatPane { - height: 100%; - width: 30%; - right: 0; - position: fixed; - display: flex; - flex-direction: column; -} - -#chatWindow { - border: 1px solid #ccc; - padding: 0.25em; - overflow: auto; - flex: 1; -} - -.messageContent { - width: 100%; - word-wrap: break-word; -} - -.msgSrvHr { - width: 95%; - margin-top: 0.2em; - margin-bottom: 0.2em; - margin-left: auto; - margin-right: auto; - border: 0; - border-bottom: 1px solid #ccc; -} - -#messageTextDiv { - padding-bottom: 10px; - width: 100%; - display: flex; - flex-direction: column; -} - -#messageTextArea { - resize: none; - box-sizing: border-box; -} - -#preview { - display: block; - position: fixed; - background: white; - word-wrap: break-word; - border: 1px solid #ccc; - padding: 0.25em; -} - -.greenText { - color: green; -} - -.quotelink { - color: red; -}