jasterv/rick-and-morty-wiki
1
0
Fork 0
mirror of https://codeberg.org/JasterV/rick-and-morty-wiki.git synced 2026-04-27 02:15:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

yay

Browse source
This commit is contained in:
JasterV 2020-09-22 20:04:57 +02:00
commit c3028aa3cc
3 changed files with 84 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -28,9 +28,9 @@
</ul> </ul>
<button id="load-more" class="rick-btn">Load More</button> <button id="load-more" class="rick-btn">Load More</button>
</aside> </aside>
<main> <section role="main">
</main> </section>
</body> </body>
</html> </html>

48
src/script.js
View file

@ -20,25 +20,25 @@ $(function () {
$(".episodes").on("click", "li", function (e) { $(".episodes").on("click", "li", function (e) {
var id = $(e.target).attr("data-episode"); var id = $(e.target).attr("data-episode");
var mainId = $('main').attr("id"); var mainId = $('[role="main"]').attr("id");
if ("episode-" + id != mainId) if ("episode-" + id != mainId)
show(id, "episode") show(id, "episode")
}); });
$('main').on("click", ".character-card", function (e) { $('[role="main"]').on("click", ".character-card", function (e) {
var id = $(e.currentTarget).attr("data-character"); var id = $(e.currentTarget).attr("data-character");
show(id, "character") show(id, "character")
}); });
$('main').on("click", ".episode-card", function (e) { $('[role="main"]').on("click", ".episode-card", function (e) {
var id = $(e.currentTarget).attr("data-episode"); var id = $(e.currentTarget).attr("data-episode");
show(id, "episode") show(id, "episode")
}); });
$('main').on("click", ".morty-btn", function (e) { $('[role="main"]').on("click", ".morty-btn", function (e) {
var characterId = $(e.target).closest('main').attr("id").split("-")[1]; var characterId = $(e.target).closest('[role="main"]').attr("id").split("-")[1];
var character = controller.characters[characterId]; var character = controller.characters[characterId];
if(character.origin.name == "unknown") return; if (character.origin.name == "unknown") return;
show(characterId, "location") show(characterId, "location")
}); });
@ -72,8 +72,8 @@ function populateData(urls, type) {
/* SHOW TYPE FUNCTIONS */ /* SHOW TYPE FUNCTIONS */
function show(id, type) { function show(id, type) {
$('main').empty(); $('[role="main"]').empty();
$('main').attr("id", type + "-" + id); $('[role="main"]').attr("id", type + "-" + id);
if (type == "episode") if (type == "episode")
showEpisode(id); showEpisode(id);
else if (type == "character") else if (type == "character")
@ -84,13 +84,13 @@ function show(id, type) {
function showEpisode(id) { function showEpisode(id) {
var episode = controller.episodes[id]; var episode = controller.episodes[id];
$('main').append(createTemplate(episode, "episode")); $('[role="main"]').append(createTemplate(episode, "episode"));
populateData(episode.characters, "characters"); populateData(episode.characters, "characters");
} }
function showCharacter(id) { function showCharacter(id) {
var character = controller.characters[id]; var character = controller.characters[id];
$('main').append(createTemplate(character, "character")); $('[role="main"]').append(createTemplate(character, "character"));
populateData(character.episode, "episodes"); populateData(character.episode, "episodes");
} }
@ -99,12 +99,12 @@ function showLocation(characterId) {
var originId = getIdFromURL(character.origin.url); var originId = getIdFromURL(character.origin.url);
if (originId in controller.locations) { if (originId in controller.locations) {
var origin = controller.locations[originId]; var origin = controller.locations[originId];
$('main').append(createTemplate(origin, "location")); $('[role="main"]').append(createTemplate(origin, "location"));
populateData(origin.residents, "characters") populateData(origin.residents, "characters")
} else { } else {
getData(character.origin.url).then(function (location) { getData(character.origin.url).then(function (location) {
controller.locations[location.id] = location; controller.locations[location.id] = location;
$('main').append(createTemplate(location, "location")); $('[role="main"]').append(createTemplate(location, "location"));
populateData(location.residents, "characters") populateData(location.residents, "characters")
}); });
} }
@ -129,16 +129,13 @@ function createLocationTemplate(location) {
} }
function createCharacterTemplate(character) { function createCharacterTemplate(character) {
return $(`<div class="character-header"> return $("<div class=\"character-header\"><img src=\"" + character.image +
<img src="${character.image}"/> "\"/><div class=\"character-info\"><h1>" + character.name +
<div class="character-info"> "</h1><p>" + character.species +
<h1>${character.name}</h1> " <strong>|</strong> " + character.status +
<p>${character.species} <strong>|</strong> ${character.status} <strong>|</strong> ${character.gender} <strong>|</strong> ${character.origin.name}</p> "<strong>|</strong> " + character.gender +
<button class="morty-btn">Location</button> " <strong>|</strong> " + character.origin.name +
</div> "</p><button class=\"morty-btn\">Location</button></div> </div><div class=\"cards-list\"></div>");
</div>
<div class="cards-list"></div>
`);
} }
function createEpisodeTemplate(episode) { function createEpisodeTemplate(episode) {
@ -165,10 +162,9 @@ function createCharacterCard(character) {
} }
function createEpisodeCard(episode) { function createEpisodeCard(episode) {
return $(`<div class="episode-card" data-episode="${episode.id}"> return $("<div class=\"episode-card\" data-episode=\"" + episode.id +
<h2><strong>${episode.name}</strong></h2> "\"><h2><strong>" + episode.name +
<p>${episode.episode}</p> "</strong></h2><p>" + episode.episode + "</p></div>");
</div>`);
} }
/* AJAX FUNCTIONS */ /* AJAX FUNCTIONS */

66
src/styles/style.css
View file

@ -34,7 +34,7 @@ body {
-ms-grid-rows: 15vh 85vh; -ms-grid-rows: 15vh 85vh;
grid-template-rows: 15vh 85vh; grid-template-rows: 15vh 85vh;
grid-template-areas: "header header" grid-template-areas: "header header"
"sidebar main"; "sidebar main";
background-image: url("../../assets/img/wp1822796-rick-and-morty-wallpapers.jpg"); background-image: url("../../assets/img/wp1822796-rick-and-morty-wallpapers.jpg");
background-size: cover; background-size: cover;
font-family: 'Grandstander', cursive; font-family: 'Grandstander', cursive;
@ -45,15 +45,21 @@ header {
-ms-grid-column: 1; -ms-grid-column: 1;
-ms-grid-column-span: 2; -ms-grid-column-span: 2;
grid-area: header; grid-area: header;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
} }
/* MAIN CONTAINER STYLE */ /* MAIN CONTAINER STYLE */
main { [role="main"] {
-ms-grid-row: 2; -ms-grid-row: 2;
-ms-grid-column: 2; -ms-grid-column: 2;
grid-area: main; grid-area: main;
@ -62,12 +68,17 @@ main {
margin: 1rem 3rem 3rem 0rem; margin: 1rem 3rem 3rem 0rem;
text-align: center; text-align: center;
padding: 1rem; padding: 1rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; flex-direction: column;
overflow-y: auto; overflow-y: auto;
} }
main h1 { [role="main"] h1 {
color: var(--rick-blue); color: var(--rick-blue);
margin: 1.5rem; margin: 1.5rem;
word-break: break-all; word-break: break-all;
@ -86,8 +97,13 @@ strong {
} }
.cards-list { .cards-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 1rem; margin-top: 1rem;
overflow: visible; overflow: visible;
@ -95,6 +111,8 @@ strong {
.cards-list>*:hover { .cards-list>*:hover {
cursor: pointer; cursor: pointer;
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05); transform: scale(1.05);
} }
@ -115,7 +133,11 @@ strong {
} }
.character-header { .character-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start; justify-content: start;
padding: 1rem 2rem; padding: 1rem 2rem;
} }
@ -145,8 +167,14 @@ strong {
.episode-card { .episode-card {
width: 300px; width: 300px;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; flex-direction: column;
-ms-flex-pack: distribute;
justify-content: space-around; justify-content: space-around;
padding: 1rem; padding: 1rem;
margin: .7rem; margin: .7rem;
@ -181,8 +209,15 @@ aside {
grid-area: sidebar; grid-area: sidebar;
text-align: center; text-align: center;
padding: 1rem .5rem 0rem; padding: 1rem .5rem 0rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; justify-content: space-between;
margin-bottom: 3rem; margin-bottom: 3rem;
opacity: 1; opacity: 1;
@ -192,6 +227,8 @@ aside {
display: none; display: none;
position: absolute; position: absolute;
top: 15vh; top: 15vh;
-webkit-transform: translate(-50%, 50%);
-ms-transform: translate(-50%, 50%);
transform: translate(-50%, 50%); transform: translate(-50%, 50%);
right: 1rem; right: 1rem;
font-size: 2.5rem; font-size: 2.5rem;
@ -223,6 +260,8 @@ aside h1 {
.episodes li:hover { .episodes li:hover {
cursor: pointer; cursor: pointer;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1); transform: scale(1.1);
} }
@ -243,6 +282,8 @@ aside h1 {
button:hover { button:hover {
cursor: pointer; cursor: pointer;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1); transform: scale(1.1);
} }
@ -273,7 +314,8 @@ button:hover {
h1 { h1 {
font-size: 3.5rem; font-size: 3.5rem;
} }
main {
[role="main"] {
margin: 1rem 1.5rem 3rem 0rem; margin: 1rem 1.5rem 3rem 0rem;
} }
} }
@ -281,6 +323,8 @@ button:hover {
@media(min-width: 900px) { @media(min-width: 900px) {
aside { aside {
opacity: 1 !important; opacity: 1 !important;
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important; display: flex !important;
} }
} }
@ -296,10 +340,10 @@ button:hover {
-ms-grid-columns: 1fr; -ms-grid-columns: 1fr;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-areas: "header" grid-template-areas: "header"
"main"; "main";
} }
main { [role="main"] {
-ms-grid-row: 2; -ms-grid-row: 2;
-ms-grid-column: 1; -ms-grid-column: 1;
margin: 0rem 1rem 1rem; margin: 0rem 1rem 1rem;
@ -317,6 +361,7 @@ button:hover {
height: 80vh; height: 80vh;
background: url(../../assets/img/wp1822796-rick-and-morty-wallpapers.jpg) no-repeat; background: url(../../assets/img/wp1822796-rick-and-morty-wallpapers.jpg) no-repeat;
background-position: bottom; background-position: bottom;
-webkit-box-shadow: 5px 5px 5px #44465D;
box-shadow: 5px 5px 5px #44465D; box-shadow: 5px 5px 5px #44465D;
border-radius: 0 0px 15px 0; border-radius: 0 0px 15px 0;
opacity: 0; opacity: 0;
@ -346,8 +391,15 @@ button:hover {
} }
.character-header { .character-header {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; align-items: center;
} }
@ -360,7 +412,7 @@ button:hover {
text-align: center; text-align: center;
} }
.character-info > * { .character-info>* {
margin: 0 !important; margin: 0 !important;
margin-bottom: 1rem !important; margin-bottom: 1rem !important;
} }