Improved UI of Info page + added 'Features' file

Features

@@ -0,0 +1,20 @@
+**********************************************
+
+In this document, one can write any feature idea he might have. ANY idea might grow to become a good idea so pleae
+write whatever you would like to see in this software in this document following this example.
+
+<NAME/NICKNAME> : <MAIL(optional)>
+    Feature idea # -- <DESCRIPTION>
+    Feature idea # -- <DESCRIPTION>
+    Feature idea # -- <DESCRIPTION>
+
+**********************************************
+
+Kylart :
+    1 -- Anime lists ?
+    2 -- Info about seasons (from MAL)
+        --> Scrap info from https://myanimelist.net/anime/season/<YEAR>/<SEASON>
+    3 -- Info about each episode of an anime
+    4 -- Find a fansub for OVA and Films (KissAnime ?)
+    5 -- Parsing names on Nyaa instead of taking only HorribleSubs's episodes.
+    6 -- === 1 ? Make editable anime list (plan to, watched,...) in local

app/InformationPage/informations.js

@@ -176,7 +176,7 @@ function makeResearch(name) {
     mal.fromName(name).then(anime => {
         let t0 = performance.now()
         animeData.title = anime.title
-        animeData.japaneseTitle = anime.japaneseTitle
+        animeData.japaneseTitle = anime.alternativeTitles.japanese[0].slice(10)
         animeData.image = anime.image
         animeData.synopsis = anime.synopsis
         animeData.episodes = anime.episodes

app/style.css

@@ -170,6 +170,8 @@ body
 #info-title
 {
     text-align: center;
+    padding-left: 10%;
+    padding-right: 10%;
 }
 
 #info-title h5
@@ -204,8 +206,25 @@ body
 {
     box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
     background-color: rgba(255, 255, 255, 0.95);
-    padding-left: 5%;
-    padding-right: 5%;
+    padding-left: 2%;
+    padding-right: 2%;
+}
+
+.infos-bottom-left h6
+{
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.airing
+{
+    text-align: right;
+}
+
+.infos-japTitle
+{
+    text-align: right;
+    font-family: "YuMincho +36p Kana", sans-serif;
 }
 
 .infos-bottom-middle
@@ -242,6 +261,12 @@ body
     margin: 0 10% 0 20%;
 }
 
+.infos-bottom-right-inside
+{
+    margin-top: 50%;
+    margin-bottom: 50%;
+}
+
 .characters
 {
     box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);

index.html

@@ -100,8 +100,11 @@
                 </div>
               </div>
               <div class="infos-bottom-left mdl-cell mdl-cell--3-col mdl-cell--4-col-phone">
-                <h6 class="infos-japTitle">Japanese title: {{ infos.japTitle }}</h6>
+                <h6>Japanese title: </h6>
+                <h6 class="infos-japTitle">{{ infos.japTitle }}</h6>
                 <h6>{{ infos.episodes }} episodes</h6>
+                <h6>{{ infos.status }}</h6>
+                <p class="airing">{{ infos.aired }}</p>
               </div>
               <div class="infos-bottom-middle mdl-cell mdl-cell--7-col mdl-cell--6-col-phone">
                 <div class="studios">
@@ -120,9 +123,11 @@
                 </div>
               </div>
               <div class="infos-bottom-right mdl-cell mdl-cell--2-col mdl-cell--2-col-phone">
+                <div class="infos-bottom-right-inside">
                     <h6>Score:</h6>
                     <h4>{{ infos.stats.score.value }}</h4>
-                <h6>{{ infos.stats.ranking }}</h6>
+                    <h5>{{ infos.stats.ranking }}</h5>
+                </div>
               </div>
               <div class="characters mdl-cell mdl-cell--12-col mdl-cell--12-col-phone">
                 <h5>Characters</h5>

renderer.js

@@ -140,7 +140,7 @@ function makeResearchOnMal (name) {
 
     mal.fromName(name).then(anime => {
         info.infos.title = anime.title
-        info.infos.japTitle = anime.japaneseTitle
+        info.infos.japTitle = anime.alternativeTitles.japanese[0].slice(10)
         info.infos.image = anime.image
         info.infos.synopsis = anime.synopsis
         info.infos.episodes = anime.episodes
@@ -150,6 +150,8 @@ function makeResearchOnMal (name) {
         info.infos.type = anime.type.split(' ').slice(0, 3).join(' ')
         info.infos.characters = anime.characters
         info.infos.staff = anime.staff
+        info.infos.aired = anime.aired
+        info.infos.status = anime.status
 
         releases.show = false
         loader.show = false