Skip to content

Redesign layout of ArkhamDB #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
logan-r wants to merge 17 commits into
base: arkham
Choose a base branch
from
Open

Redesign layout of ArkhamDB #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
1e8351a
Link to style sheet override
logan-r Nov 12, 2016
ebb3da3
Add new stylings
logan-r Nov 12, 2016
0c013f8
Fix bug with decklist social icon colors in stylesheet
logan-r Nov 13, 2016
cb1f4a4
Restructure review page
logan-r Nov 13, 2016
4a2f15f
Fix padding and margin issues on card search page
logan-r Nov 13, 2016
016a4c1
Remove box-shadow from index page
logan-r Nov 13, 2016
acf53a1
Stylize decklists on index page
logan-r Nov 13, 2016
cd4a8d4
Change footer colors and border
logan-r Nov 13, 2016
2ae40b9
Move duplicate decklist warning message into .main
logan-r Nov 13, 2016
962f5d8
Move published date down into .main in decklist view
logan-r Nov 13, 2016
986e893
Fix position of version dropdown in decklist view
logan-r Nov 13, 2016
272308b
Remove TODO list
logan-r Nov 13, 2016
737c7f2
Chance color scheme for .btn-success
logan-r Nov 13, 2016
e5cfedd
Fix button text color bug
logan-r Nov 13, 2016
d2ea0b5
Fix discrepancy to re-enable merging
logan-r Nov 14, 2016
0c94b94
Resolve merge error
logan-r Nov 14, 2016
ea7d2ea
Merge branch 'Kamalisk-arkham' into arkham
logan-r Nov 14, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 15 additions & 8 deletions src/AppBundle/Resources/views/Decklist/decklist.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,17 +38,10 @@
</h1>
</div>
<div class="col-xs-12">
<div class="social">
<div class="social decklist-social-icons">
<div class="pull-right">
<span class="hidden-xs">published: </span>
<time datetime="{{ decklist.dateCreation|date('c') }}">{{ decklist.dateCreation|date('M d, Y') }}</time>
{{ macros.decklist_social_icons(decklist) }}
</div>
{% if duplicate %}
<small>Duplicate of <a href="{{ path('decklist_detail', { 'decklist_id': duplicate.id, 'decklist_name': duplicate.nameCanonical|e('url') }) }}">
{{ duplicate.name }} {{ duplicate.version }}
</a></small>
{% endif %}
</div>
</div>
</div>
Expand All @@ -69,9 +62,23 @@
<div class="col-md-12">
<div class="pull-right btn-group" role="group">{% include 'AppBundle:Decklist:toolbar.html.twig' %}</div>
</div>
{% if duplicate %}
<div class="col-md-12" style="padding-top: 10px;">
<small>
Duplicate of
<a href="{{ path('decklist_detail', { 'decklist_id': duplicate.id, 'decklist_name': duplicate.nameCanonical|e('url') }) }}">
{{ duplicate.name }} {{ duplicate.version }}
</a>
</small>
</div>
{% endif %}
<div class="col-md-12">
{% include 'AppBundle:Decklist:author-and-description.html.twig' %}
</div>
<div class="col-md-12" style="padding-top: 10px; padding-bottom: 20px; color: #777;">
<span class="hidden-xs">published: </span>
<time datetime="{{ decklist.dateCreation|date('c') }}">{{ decklist.dateCreation|date('M d, Y') }}</time>
</div>
<div class="col-md-12">
{% include 'AppBundle:Decklist:comments.html.twig' %}
</div>
Expand Down
58 changes: 30 additions & 28 deletions src/AppBundle/Resources/views/Default/index.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,42 +3,44 @@

{% block body %}

<div class="main container">
<div class="main container" style="box-shadow: none;">
<h1 class="site-title hidden-xs">ArkhamDB</h1>
<div class="site-slogan">Deckbuilder and Card Database for the Arkham Horror LCG</div>
</div> <!-- .container -->

<div class="main container">
<div class="main container" style="box-shadow: none;">
<div class="row">
{% for data in decklists_by_faction %}
<div class="col-md-6" style="margin-bottom:30px">
<div class="bg-faction bg-{{ data.faction.code }}" style="padding:10px 10px 5px 10px">
<div class="media">
<div class="media-left" style="font-size:30px">
<span class="icon icon-{{ data.faction.code }}"></span>
</div>
<div class="media-body">
<h4 class="media-heading" style="white-space:nowrap"><a href="{{ path('decklist_detail',{decklist_id:data.decklist.id,decklist_name:data.decklist.nameCanonical}) }}">{{ data.decklist.name }}</a></h4>
<div class="small">by <span class="username">{{ macros.username_colorless(data.decklist.user) }}</span> &middot; <time datetime="{{ data.decklist.dateCreation|date('c') }}">{{ data.decklist.dateCreation|date('M d, Y') }}</time></div>
</div>
<div class="col-md-6" style="margin-bottom:30px">
<div class="decklist-panel {{ data.faction.code }}">
<div class="bg-faction bg-{{ data.faction.code }}" style="padding:10px 10px 5px 10px">
<div class="media">
<div class="media-left" style="font-size:30px">
<span class="icon icon-{{ data.faction.code }}"></span>
</div>
<div class="media-body">
<h4 class="media-heading" style="white-space:nowrap"><a href="{{ path('decklist_detail',{decklist_id:data.decklist.id,decklist_name:data.decklist.nameCanonical}) }}">{{ data.decklist.name }}</a></h4>
<div class="small">by <span class="username">{{ macros.username_colorless(data.decklist.user) }}</span> &middot; <time datetime="{{ data.decklist.dateCreation|date('c') }}">{{ data.decklist.dateCreation|date('M d, Y') }}</time></div>
</div>
</div>
</div>
<div style="background-color: white; padding: 10px 20px 20px 20px">
<div class="small pull-right">
{{ macros.decklist_social_icons(data.decklist ) }}
</div>
<div class="pull-left" style="margin-right : 10px;">
<div class="card-thumbnail-static card-thumbnail-2x card-thumbnail-investigator" style="background-image:url(/bundles/cards/{{data.decklist.getCharacter().getCode()}}.png)"></div>
</div>
<div class="padding-left : 10px;">
{% set character = data.decklist.getCharacter() %}
<h3><a class="card card-tip fg-{{ character.getFaction().getCode() }}" data-code="{{ character.getCode() }}" data-toggle="modal" data-target="#cardModal" data-remote="false" href="">{{data.decklist.getCharacter().getName()}}</a></h3>
<p>{{ data.count_by_type|raw }}</p>
<!-- <div class="text-center small"><a href="{{ path('decklists_list',{type:'find',faction:data.faction.code}) }}">More in this faction</a></div>-->
</div>
<div style="clear:both"></div>
</div>
</div>
</div>
<div style="background-color: white; padding: 10px 20px 20px 20px">
<div class="small pull-right">
{{ macros.decklist_social_icons(data.decklist ) }}
</div>
<div class="pull-left" style="margin-right : 10px;">
<div class="card-thumbnail-static card-thumbnail-2x card-thumbnail-investigator" style="background-image:url(/bundles/cards/{{data.decklist.getCharacter().getCode()}}.png)"></div>
</div>
<div class="padding-left : 10px;">
{% set character = data.decklist.getCharacter() %}
<h3><a class="card card-tip fg-{{ character.getFaction().getCode() }}" data-code="{{ character.getCode() }}" data-toggle="modal" data-target="#cardModal" data-remote="false" href="">{{data.decklist.getCharacter().getName()}}</a></h3>
<p>{{ data.count_by_type|raw }}</p>
<!-- <div class="text-center small"><a href="{{ path('decklists_list',{type:'find',faction:data.faction.code}) }}">More in this faction</a></div>-->
</div>
<div style="clear:both"></div>
</div>
</div>
{% endfor %}
</div>
</div>
Expand Down
78 changes: 42 additions & 36 deletions src/AppBundle/Resources/views/Reviews/reviews.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,44 +35,50 @@

<div class="reviews row">
<div class="col-lg-8 col-lg-push-2">
{% if reviews|length > 0 %}{% for i in 0..reviews|length-1 %}{% set review = reviews[i] %}{% set card = review.card %}
<div class="row" style="margin-bottom:1em;padding-bottom:1em;border-bottom:1px solid #ddd"><div class="col-lg-12">
<div class="review-header">
<h4><a href="{{ path('cards_zoom',{card_code:review.card.code}) }}#review-{{ review.id }}" data-code="{{ review.card.code }}" class="card-tip card card-name">{{ review.card.name }}</a></h4>
</div>
<article class="review" data-id="{{ review.id }}" id="review-{{ review.id }}">
<div class="review-like">
<a id="review-social-icon-like" href="#" class="social-icon-like" data-toggle="tooltip" data-placement="bottom" title="Like that review">
<span class="fa fa-heart"></span> <span class="num">{{ review.nbVotes }}</span>
</a>
</div>
<div class="review-content">
<div class="review-text2">
<img src="/web/bundles/cards/{{ review.card.code }}.jpg" alt="{{ review.card.name }}" class="pull-right" style="width:120px;margin:0 0 10px 10px" onerror="this.onerror=null;this.src='/web/bundles/cards/{{ review.card.code }}.png';">
{{ review.textHtml|raw }}
</div>
<div class="review-date">
<time datetime="{{ review.dateCreation|date('c') }}" title="{{ review.dateCreation|date('F jS, Y') }}">{{ review.dateCreation|date('n/j/y') }}</time>
</div>
<div class="review-author">
<span class="username">{{ macros.username(review.user) }}</span>
{% if reviews|length > 0 %}{% for i in 0..reviews|length-1 %}{% set review = reviews[i] %}{% set card = review.card %}
<div class="row">
<div class="col-lg-12 review-card">
<div class="review-header">
<h4>
<a href="{{ path('cards_zoom',{card_code:review.card.code}) }}#review-{{ review.id }}" data-code="{{ review.card.code }}" class="card-tip card card-name">
{{ review.card.name }}
</a>
</h4>
<div class="review-date">
<time datetime="{{ review.dateCreation|date('c') }}" title="{{ review.dateCreation|date('F jS, Y') }}">{{ review.dateCreation|date('n/j/y') }}</time>
</div>
<div class="review-author">
<span class="username">{{ macros.username(review.user) }}</span>
</div>
</div>
<article class="review" data-id="{{ review.id }}" id="review-{{ review.id }}">
<div class="review-content">
<div class="review-text2">
<img src="/web/bundles/cards/{{ review.card.code }}.jpg" alt="{{ review.card.name }}" class="pull-right review-img" style="width:120px;margin:0 0 10px 10px" onerror="this.onerror=null;this.src='/web/bundles/cards/{{ review.card.code }}.png';">
{{ review.textHtml|raw }}
</div>
{% for comment in review.comments %}
<div class="review-comment text-muted small">{{ comment.text|raw }}
&mdash;
<span class="username">{{ macros.username(comment.user) }}</span>
<time datetime="{{ comment.dateCreation|date('c') }}" title="{{ comment.dateCreation|date('F jS, Y') }}">{{ comment.dateCreation|date('n/j/y') }}</time>
</div>
{% endfor %}
<form action="{{ path('card_reviewcomment_post') }}" method="POST" class="form-comment">
<input type="hidden" name="comment_review_id" value="{{ review.id }}">
<button class="btn btn-link btn-write-comment">Add a comment</button>
</form>
<div class="review-like">
<a id="review-social-icon-like" href="#" class="social-icon-like" data-toggle="tooltip" data-placement="bottom" title="Like that review">
<span class="fa fa-heart"></span> <span class="num">{{ review.nbVotes }}</span>
</a>
</div>
</div>
</article>
</div>
{% for comment in review.comments %}
<div class="review-comment text-muted small">{{ comment.text|raw }}
&mdash;
<span class="username">{{ macros.username(comment.user) }}</span>
<time datetime="{{ comment.dateCreation|date('c') }}" title="{{ comment.dateCreation|date('F jS, Y') }}">{{ comment.dateCreation|date('n/j/y') }}</time>
</div>
{% endfor %}
<form action="{{ path('card_reviewcomment_post') }}" method="POST" class="form-comment">
<input type="hidden" name="comment_review_id" value="{{ review.id }}">
<button class="btn btn-link btn-write-comment">Add a comment</button>
</form>
</div>
</article>
</div></div>
{% endfor %}{% endif %}
</div>
{% endfor %}{% endif %}
</div>
</div>


Expand Down
42 changes: 21 additions & 21 deletions src/AppBundle/Resources/views/Search/searchform.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<div class="row">

<div class="col-md-4">
<h2>Browse by set</h2>
<h2 style="margin-top: 0;">Browse by set</h2>
{{ allsets | raw }}
</div>

Expand Down Expand Up @@ -161,10 +161,10 @@
<div class="form-group">
<label for="o">Cost</label>
<div class="row">
<div class="col-xs-5">
<div class="col-xs-6">
<select name="oo" id="oo" class="form-control"><option value=":">=</option><option value="<">&lt;</option><option value=">">&gt;</option></select>
</div>
<div class="col-xs-7">
<div class="col-xs-6" style="padding-left: 0;">
<input id="o" name="o" value="" class="form-control">
</div>
</div>
Expand All @@ -175,10 +175,10 @@
<div class="form-group">
<label for="p">XP</label>
<div class="row">
<div class="col-xs-5">
<div class="col-xs-6">
<select name="po" id="po" class="form-control"><option value=":">=</option><option value="<">&lt;</option><option value=">">&gt;</option></select>
</div>
<div class="col-xs-7">
<div class="col-xs-6" style="padding-left: 0;">
<input id="p" name="p" value="" class="form-control">
</div>
</div>
Expand All @@ -189,10 +189,10 @@
<div class="form-group">
<label for="j">Victory</label>
<div class="row">
<div class="col-xs-5">
<div class="col-xs-6">
<select name="jo" id="jo" class="form-control"><option value=":">=</option><option value="<">&lt;</option><option value=">">&gt;</option></select>
</div>
<div class="col-xs-7">
<div class="col-xs-6" style="padding-left: 0;">
<input id="j" name="j" value="" class="form-control">
</div>
</div>
Expand All @@ -203,10 +203,10 @@
<div class="form-group">
<label for="y">Quantity</label>
<div class="row">
<div class="col-xs-5">
<div class="col-xs-6">
<select name="yo" id="yo" class="form-control"><option value=":">=</option><option value="<">&lt;</option><option value=">">&gt;</option></select>
</div>
<div class="col-xs-7">
<div class="col-xs-6" style="padding-left: 0;">
<input id="y" name="y" value="" class="form-control">
</div>
</div>
Expand All @@ -219,10 +219,10 @@
<div class="form-group">
<label for="w"><span class="icon-willpower"></span> Willpower</label>
<div class="row">
<div class="col-xs-5">
<div class="col-xs-6">
<select name="wo" id="wo" class="form-control"><option value=":">=</option><option value="<">&lt;</option><option value=">">&gt;</option></select>
</div>
<div class="col-xs-7">
<div class="col-xs-6" style="padding-left: 0;">
<input id="w" name="w" value="" class="form-control">
</div>
</div>
Expand All @@ -232,10 +232,10 @@
<div class="form-group">
<label for="s"><span class="icon-combat"></span> Combat</label>
<div class="row">
<div class="col-xs-5">
<div class="col-xs-6">
<select name="co" id="co" class="form-control"><option value=":">=</option><option value="<">&lt;</option><option value=">">&gt;</option></select>
</div>
<div class="col-xs-7">
<div class="col-xs-6" style="padding-left: 0;">
<input id="c" name="c" value="" class="form-control">
</div>
</div>
Expand All @@ -245,10 +245,10 @@
<div class="form-group">
<label for="l"><span class="icon-intellect"></span> Intellect</label>
<div class="row">
<div class="col-xs-5">
<div class="col-xs-6">
<select name="io" id="io" class="form-control"><option value=":">=</option><option value="<">&lt;</option><option value=">">&gt;</option></select>
</div>
<div class="col-xs-7">
<div class="col-xs-6" style="padding-left: 0;">
<input id="i" name="i" value="" class="form-control">
</div>
</div>
Expand All @@ -259,10 +259,10 @@
<div class="form-group">
<label for="a"><span class="icon-agility"></span> Agility</label>
<div class="row">
<div class="col-xs-5">
<div class="col-xs-6">
<select name="ao" id="ao" class="form-control"><option value=":">=</option><option value="<">&lt;</option><option value=">">&gt;</option></select>
</div>
<div class="col-xs-7">
<div class="col-xs-6" style="padding-left: 0;">
<input id="a" name="a" value="" class="form-control">
</div>
</div>
Expand All @@ -275,10 +275,10 @@
<div class="form-group">
<label for="w"><span class="icon-health"></span> Health</label>
<div class="row">
<div class="col-xs-5">
<div class="col-xs-6">
<select name="ho" id="ho" class="form-control"><option value=":">=</option><option value="<">&lt;</option><option value=">">&gt;</option></select>
</div>
<div class="col-xs-7">
<div class="col-xs-6" style="padding-left: 0;">
<input id="h" name="h" value="" class="form-control">
</div>
</div>
Expand All @@ -288,10 +288,10 @@
<div class="form-group">
<label for="s"><span class="icon-sanity"></span> Sanity</label>
<div class="row">
<div class="col-xs-5">
<div class="col-xs-6">
<select name="so" id="so" class="form-control"><option value=":">=</option><option value="<">&lt;</option><option value=">">&gt;</option></select>
</div>
<div class="col-xs-7">
<div class="col-xs-6" style="padding-left: 0;">
<input id="s" name="s" value="" class="form-control">
</div>
</div>
Expand Down
3 changes: 2 additions & 1 deletion src/AppBundle/Resources/views/layout.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
<![endif]-->
{% block stylesheets %}{% endblock %}
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div id="wrapper">
Expand Down Expand Up @@ -90,7 +91,7 @@
</ul>

<p>
Based on ThronesDB by Alsciende. Modified by Kam.
Based on ThronesDB by Alsciende. Modified by Kam with contributions from logan-r.
Contact:
<a href="https://reddit.com/user/kamalisk/" title="Reddit"><span class="fa fa-reddit"></span></a>
<a href="mailto:s.arkhamdb@kamalisk.com" title="E-mail"><span class="fa fa-envelope"></span></a>
Expand Down
Loading