62 application/app/views/characters.html
View file
@@ -0,0 +1,62 @@
<h1>Marvel Characters - </h1>
<h2>click a character or click through with prev / next</h2>

<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2">
<h3>Total Characters: {{ characterCount }} </h3>
</div>
<div class="pure-u-1 pure-u-sm-1-2">
<h3>Viewing Characters: {{ path }} - {{ nextSet }}</h3>
</div>
</div>

<div class="pure-g">
<div ng-repeat="character in characterList" class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xl-1-5">

<div class="container" style="padding: 10%;">
<a ng-href="#/character/{{character.id}}" class="click-container">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background:#10293F;">
<!-- front content -->
<img ng-src="{{character.thumbnail.path}}/portrait_uncanny.{{character.thumbnail.extension}}">

<div class="character--headline">
<h2>{{ character.name }}</h2>
</div>
</div>

<div class="back" style="background:#10293F;">
<div class="character--facts">
<h2>{{ character.name }}</h2>
<p>
{{ character.description }}
</p>
</div>
<div class="character--watermark">
<img ng-src="{{character.thumbnail.path}}/portrait_uncanny.{{character.thumbnail.extension}}">
</div>
<div class="character--footer">
<span class="character--footer">Last Modified: {{ character.modified }}</span>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>

<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2">
<h3>Total Characters: {{ characterCount }} </h3>
</div>
<div class="pure-u-1 pure-u-sm-1-2">
<h3>Viewing Characters: {{ path }} - {{ nextSet }}</h3>
</div>
</div>

<div class="character-pager">
<a href="#/characters/{{prevSet}}" ng-if="prevSet >= 0">prev</a>
<a href="#/characters/{{nextSet}}">next</a>
</div>
55 application/app/views/main.html
View file
@@ -1,41 +1,16 @@
<h1>Marvel Characters - </h1>
<h2>click a character or click through with prev / next</h2>

<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2">
<h3>Total Characters: {{ characterCount }} </h3>
<div class="main-page">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<a href="#/characters" class="characters">
<h1>Enter Marvel Characters Realm</h1>
<div class="characters-mural"></div>
</a>
</div>
<div class="pure-u-1 pure-u-md-1-2">
<a href="#/comics" class="characters">
<h1>Enter Marvel Comic Books Realm</h1>
<div class="comics-mural"></div>
</a>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2">
<h3>Viewing Characters: {{ path }} - {{ nextSet }}</h3>
</div>
</div>

<div class="pure-g">
<div ng-repeat="character in characterList" class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3 pure-u-xl-1-4">
<a ng-href="#/character/{{character.id}}" class="click-container">
<div class="container borders corners white-bg">
<h2>{{ character.name }}</h2>
<p>
{{ character.description }}
</p>
<img ng-src="{{character.thumbnail.path}}/landscape_incredible.{{character.thumbnail.extension}}">
<h3>Last Modified: {{ character.modified }}</h3>
</div>
</a>
</div>
</div>

<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2">
<h3>Total Characters: {{ characterCount }} </h3>
</div>
<div class="pure-u-1 pure-u-sm-1-2">
<h3>Viewing Characters: {{ path }} - {{ nextSet }}</h3>
</div>
</div>

<div class="character-pager">
<a href="#{{prevSet}}" ng-if="prevSet >= 0">prev</a>
<a href="#{{nextSet}}">next</a>
</div>

</div>