Chapter 14
This commit is contained in:
@ -3,17 +3,31 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{% block title %}Welcome!{% endblock %}</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
|
||||
{# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
|
||||
{% block stylesheets %}
|
||||
{{ encore_entry_link_tags('app') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
{{ encore_entry_script_tags('app') }}
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Spartan&display=swap">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
|
||||
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-light bg-light" style="height: 100px;">
|
||||
<a class="navbar-brand" href="{{ path('app_homepage') }}">
|
||||
<i style="color: #444; font-size: 2rem;" class="pb-1 fad fa-cauldron"></i>
|
||||
<p class="pl-2 d-inline font-weight-bold" style="color: #444;">Cauldron Overflow</p>
|
||||
</a>
|
||||
<button class="btn btn-dark">Sign up</button>
|
||||
</nav>
|
||||
|
||||
{% block body %}{% endblock %}
|
||||
<footer class="mt-5 p-3 text-center">
|
||||
Made with <i style="color: red;" class="fa fa-heart"></i> by the guys and gals at <a style="color: #444; text-decoration: underline;" href="https://symfonycasts.com">SymfonyCasts</a>
|
||||
</footer>
|
||||
{% block javascripts %}
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.4.1.min.js"
|
||||
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
|
||||
crossorigin="anonymous"></script>
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
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