Chapter 14
This commit is contained in:
75
templates/question/homepage.html.twig
Normal file
75
templates/question/homepage.html.twig
Normal file
@ -0,0 +1,75 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block body %}
|
||||
<div class="jumbotron-img jumbotron jumbotron-fluid">
|
||||
<div class="container">
|
||||
<h1 class="display-4">Your Questions Answered</h1>
|
||||
<p class="lead">And even answers for those questions you didn't think to ask!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<button class="btn btn-question">Ask a Question</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div style="box-shadow: 2px 3px 9px 4px rgba(0,0,0,0.04);">
|
||||
<div class="q-container p-4">
|
||||
<div class="row">
|
||||
<div class="col-2 text-center">
|
||||
<img src="{{ asset('images/tisha.png') }}" width="100" height="100">
|
||||
<div class="d-block mt-3 vote-arrows">
|
||||
<a class="vote-up" href="#"><i class="far fa-arrow-alt-circle-up"></i></a>
|
||||
<a class="vote-down" href="#"><i class="far fa-arrow-alt-circle-down"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a class="q-title" href="{{ path('app_question_show', { slug: 'reversing-a-spell' }) }}"><h2>Reversing a Spell</h2></a>
|
||||
<div class="q-display p-3">
|
||||
<i class="fa fa-quote-left mr-3"></i>
|
||||
<p class="d-inline">I've been turned into a cat, any thoughts on how to turn back? While I'm adorable, I don't really care for cat food.</p>
|
||||
<p class="pt-4"><strong>--Tisha</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="answer-link" href="{{ path('app_question_show', { slug: 'reversing-a-spell' }) }}" style="color: #fff;">
|
||||
<p class="q-display-response text-center p-3">
|
||||
<i class="fa fa-magic magic-wand"></i> 6 answers
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-3">
|
||||
<div class="q-container p-4">
|
||||
<div class="row">
|
||||
<div class="col-2 text-center">
|
||||
<img src="{{ asset('images/magic-photo.png') }}" width="100" height="100">
|
||||
<div class="d-block mt-3 vote-arrows">
|
||||
<a class="vote-up" href="#"><i class="far fa-arrow-alt-circle-up"></i></a>
|
||||
<a class="vote-down" href="#"><i class="far fa-arrow-alt-circle-down"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a class="q-title" href="{{ path('app_question_show', { slug: 'pausing-a-spell' }) }}"><h2>Pausing a Spell</h2></a>
|
||||
<div class="q-display p-3">
|
||||
<i class="fa fa-quote-left mr-3"></i>
|
||||
<p class="d-inline">I mastered the floating card, but now how do I get it back to the ground?</p>
|
||||
<p class="pt-4"><strong>--Jerry</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="answer-link" href="{{ path('app_question_show', { slug: 'pausing-a-spell' }) }}" style="color: #fff;">
|
||||
<p class="q-display-response text-center p-3">
|
||||
<i class="fa fa-magic magic-wand"></i> 15 answers
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@ -1,16 +1,63 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Question: {{ question }}{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<h1>{{ question }}</h1>
|
||||
<div>
|
||||
Eventually, we'll print the full question here!
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="my-4">Question</h2>
|
||||
<div style="box-shadow: 2px 3px 9px 4px rgba(0,0,0,0.04);">
|
||||
<div class="q-container-show p-4">
|
||||
<div class="row">
|
||||
<div class="col-2 text-center">
|
||||
<img src="{{ asset('images/tisha.png') }}" alt="Mallory Avatar" width="100" height="100">
|
||||
</div>
|
||||
<div class="col">
|
||||
<h1 class="q-title-show">{{ question }}</h1>
|
||||
<div class="q-display p-3">
|
||||
<i class="fa fa-quote-left mr-3"></i>
|
||||
<p class="d-inline">I've been turned into a cat, any thoughts on how to turn back? While I'm adorable, I don't really care for cat food.</p>
|
||||
<p class="pt-4"><strong>--Tisha</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Answers</h2>
|
||||
<ul>
|
||||
{% for answer in answers %}
|
||||
<li>{{ answer }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endblock %}
|
||||
<div class="d-flex justify-content-between my-4">
|
||||
<h2 class="">Answers <span style="font-size:1.2rem;">({{ answers|length }})</span></h2>
|
||||
<button class="btn btn-sm btn-secondary">Submit an Answer</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<ul class="list-unstyled">
|
||||
{% for answer in answers %}
|
||||
<li class="mb-4">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="mr-2 pt-2">
|
||||
<img src="{{ asset('images/tisha.png') }}" alt="Mallory Avatar" width="50" height="50">
|
||||
</div>
|
||||
<div class="mr-3 pt-2">
|
||||
{{ answer }}
|
||||
<p>-- Mallory</p>
|
||||
</div>
|
||||
<div class="vote-arrows flex-fill pt-2 js-vote-arrows" style="min-width: 90px;">
|
||||
<a class="vote-up" href="#" data-direction="up"><i class="far fa-arrow-alt-circle-up"></i></a>
|
||||
<a class="vote-down" href="#" data-direction="down"><i class="far fa-arrow-alt-circle-down"></i></a>
|
||||
<span>+ <span class="js-vote-total">6</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
{{ parent() }}
|
||||
<script src="{{ asset('js/question_show.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user