mirror of
https://codeberg.org/JasterV/rick-and-morty-wiki.git
synced 2026-04-26 18:10:09 +00:00
yay
This commit is contained in:
JasterV
parent
569f447c6e
commit
c3028aa3cc
3 changed files with 84 additions and 36 deletions
|
|
@ -28,9 +28,9 @@
|
|||
</ul>
|
||||
<button id="load-more" class="rick-btn">Load More</button>
|
||||
</aside>
|
||||
<main>
|
||||
<section role="main">
|
||||
|
||||
</main>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -20,25 +20,25 @@ $(function () {
|
|||
|
||||
$(".episodes").on("click", "li", function (e) {
|
||||
var id = $(e.target).attr("data-episode");
|
||||
var mainId = $('main').attr("id");
|
||||
var mainId = $('[role="main"]').attr("id");
|
||||
if ("episode-" + id != mainId)
|
||||
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");
|
||||
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");
|
||||
show(id, "episode")
|
||||
});
|
||||
|
||||
$('main').on("click", ".morty-btn", function (e) {
|
||||
var characterId = $(e.target).closest('main').attr("id").split("-")[1];
|
||||
$('[role="main"]').on("click", ".morty-btn", function (e) {
|
||||
var characterId = $(e.target).closest('[role="main"]').attr("id").split("-")[1];
|
||||
var character = controller.characters[characterId];
|
||||
if(character.origin.name == "unknown") return;
|
||||
if (character.origin.name == "unknown") return;
|
||||
show(characterId, "location")
|
||||
});
|
||||
|
||||
|
|
@ -72,8 +72,8 @@ function populateData(urls, type) {
|
|||
/* SHOW TYPE FUNCTIONS */
|
||||
|
||||
function show(id, type) {
|
||||
$('main').empty();
|
||||
$('main').attr("id", type + "-" + id);
|
||||
$('[role="main"]').empty();
|
||||
$('[role="main"]').attr("id", type + "-" + id);
|
||||
if (type == "episode")
|
||||
showEpisode(id);
|
||||
else if (type == "character")
|
||||
|
|
@ -84,27 +84,27 @@ function show(id, type) {
|
|||
|
||||
function showEpisode(id) {
|
||||
var episode = controller.episodes[id];
|
||||
$('main').append(createTemplate(episode, "episode"));
|
||||
$('[role="main"]').append(createTemplate(episode, "episode"));
|
||||
populateData(episode.characters, "characters");
|
||||
}
|
||||
|
||||
function showCharacter(id) {
|
||||
var character = controller.characters[id];
|
||||
$('main').append(createTemplate(character, "character"));
|
||||
$('[role="main"]').append(createTemplate(character, "character"));
|
||||
populateData(character.episode, "episodes");
|
||||
}
|
||||
|
||||
function showLocation(characterId) {
|
||||
var character = controller.characters[characterId];
|
||||
var originId = getIdFromURL(character.origin.url);
|
||||
var originId = getIdFromURL(character.origin.url);
|
||||
if (originId in controller.locations) {
|
||||
var origin = controller.locations[originId];
|
||||
$('main').append(createTemplate(origin, "location"));
|
||||
$('[role="main"]').append(createTemplate(origin, "location"));
|
||||
populateData(origin.residents, "characters")
|
||||
} else {
|
||||
getData(character.origin.url).then(function (location) {
|
||||
controller.locations[location.id] = location;
|
||||
$('main').append(createTemplate(location, "location"));
|
||||
$('[role="main"]').append(createTemplate(location, "location"));
|
||||
populateData(location.residents, "characters")
|
||||
});
|
||||
}
|
||||
|
|
@ -129,16 +129,13 @@ function createLocationTemplate(location) {
|
|||
}
|
||||
|
||||
function createCharacterTemplate(character) {
|
||||
return $(`<div class="character-header">
|
||||
<img src="${character.image}"/>
|
||||
<div class="character-info">
|
||||
<h1>${character.name}</h1>
|
||||
<p>${character.species} <strong>|</strong> ${character.status} <strong>|</strong> ${character.gender} <strong>|</strong> ${character.origin.name}</p>
|
||||
<button class="morty-btn">Location</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards-list"></div>
|
||||
`);
|
||||
return $("<div class=\"character-header\"><img src=\"" + character.image +
|
||||
"\"/><div class=\"character-info\"><h1>" + character.name +
|
||||
"</h1><p>" + character.species +
|
||||
" <strong>|</strong> " + character.status +
|
||||
"<strong>|</strong> " + character.gender +
|
||||
" <strong>|</strong> " + character.origin.name +
|
||||
"</p><button class=\"morty-btn\">Location</button></div> </div><div class=\"cards-list\"></div>");
|
||||
}
|
||||
|
||||
function createEpisodeTemplate(episode) {
|
||||
|
|
@ -165,10 +162,9 @@ function createCharacterCard(character) {
|
|||
}
|
||||
|
||||
function createEpisodeCard(episode) {
|
||||
return $(`<div class="episode-card" data-episode="${episode.id}">
|
||||
<h2><strong>${episode.name}</strong></h2>
|
||||
<p>${episode.episode}</p>
|
||||
</div>`);
|
||||
return $("<div class=\"episode-card\" data-episode=\"" + episode.id +
|
||||
"\"><h2><strong>" + episode.name +
|
||||
"</strong></h2><p>" + episode.episode + "</p></div>");
|
||||
}
|
||||
|
||||
/* AJAX FUNCTIONS */
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ body {
|
|||
-ms-grid-rows: 15vh 85vh;
|
||||
grid-template-rows: 15vh 85vh;
|
||||
grid-template-areas: "header header"
|
||||
"sidebar main";
|
||||
"sidebar main";
|
||||
background-image: url("../../assets/img/wp1822796-rick-and-morty-wallpapers.jpg");
|
||||
background-size: cover;
|
||||
font-family: 'Grandstander', cursive;
|
||||
|
|
@ -45,15 +45,21 @@ header {
|
|||
-ms-grid-column: 1;
|
||||
-ms-grid-column-span: 2;
|
||||
grid-area: header;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* MAIN CONTAINER STYLE */
|
||||
|
||||
main {
|
||||
[role="main"] {
|
||||
-ms-grid-row: 2;
|
||||
-ms-grid-column: 2;
|
||||
grid-area: main;
|
||||
|
|
@ -62,12 +68,17 @@ main {
|
|||
margin: 1rem 3rem 3rem 0rem;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
main h1 {
|
||||
[role="main"] h1 {
|
||||
color: var(--rick-blue);
|
||||
margin: 1.5rem;
|
||||
word-break: break-all;
|
||||
|
|
@ -86,8 +97,13 @@ strong {
|
|||
}
|
||||
|
||||
.cards-list {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1rem;
|
||||
overflow: visible;
|
||||
|
|
@ -95,6 +111,8 @@ strong {
|
|||
|
||||
.cards-list>*:hover {
|
||||
cursor: pointer;
|
||||
-webkit-transform: scale(1.05);
|
||||
-ms-transform: scale(1.05);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
|
|
@ -115,7 +133,11 @@ strong {
|
|||
}
|
||||
|
||||
.character-header {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: start;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
|
@ -145,8 +167,14 @@ strong {
|
|||
|
||||
.episode-card {
|
||||
width: 300px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
padding: 1rem;
|
||||
margin: .7rem;
|
||||
|
|
@ -181,8 +209,15 @@ aside {
|
|||
grid-area: sidebar;
|
||||
text-align: center;
|
||||
padding: 1rem .5rem 0rem;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 3rem;
|
||||
opacity: 1;
|
||||
|
|
@ -192,6 +227,8 @@ aside {
|
|||
display: none;
|
||||
position: absolute;
|
||||
top: 15vh;
|
||||
-webkit-transform: translate(-50%, 50%);
|
||||
-ms-transform: translate(-50%, 50%);
|
||||
transform: translate(-50%, 50%);
|
||||
right: 1rem;
|
||||
font-size: 2.5rem;
|
||||
|
|
@ -223,6 +260,8 @@ aside h1 {
|
|||
|
||||
.episodes li:hover {
|
||||
cursor: pointer;
|
||||
-webkit-transform: scale(1.1);
|
||||
-ms-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
|
|
@ -243,6 +282,8 @@ aside h1 {
|
|||
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
-webkit-transform: scale(1.1);
|
||||
-ms-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
|
|
@ -273,7 +314,8 @@ button:hover {
|
|||
h1 {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
main {
|
||||
|
||||
[role="main"] {
|
||||
margin: 1rem 1.5rem 3rem 0rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -281,6 +323,8 @@ button:hover {
|
|||
@media(min-width: 900px) {
|
||||
aside {
|
||||
opacity: 1 !important;
|
||||
display: -webkit-box !important;
|
||||
display: -ms-flexbox !important;
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -296,10 +340,10 @@ button:hover {
|
|||
-ms-grid-columns: 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "header"
|
||||
"main";
|
||||
"main";
|
||||
}
|
||||
|
||||
main {
|
||||
[role="main"] {
|
||||
-ms-grid-row: 2;
|
||||
-ms-grid-column: 1;
|
||||
margin: 0rem 1rem 1rem;
|
||||
|
|
@ -317,6 +361,7 @@ button:hover {
|
|||
height: 80vh;
|
||||
background: url(../../assets/img/wp1822796-rick-and-morty-wallpapers.jpg) no-repeat;
|
||||
background-position: bottom;
|
||||
-webkit-box-shadow: 5px 5px 5px #44465D;
|
||||
box-shadow: 5px 5px 5px #44465D;
|
||||
border-radius: 0 0px 15px 0;
|
||||
opacity: 0;
|
||||
|
|
@ -346,8 +391,15 @@ button:hover {
|
|||
}
|
||||
|
||||
.character-header {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
|
@ -360,7 +412,7 @@ button:hover {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.character-info > * {
|
||||
.character-info>* {
|
||||
margin: 0 !important;
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue