Home Explore Help
Sign In
TC
/
arozos
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Optimized css on Manga cafe (still shitty)

TC pushbot 5 4 years ago
parent
96c275de28
commit
2150cf939d
3 changed files with 25 additions and 6 deletions
Split View Show Diff Stats
  1. 1 1
      AGI Documentation.md
  2. 13 0
      web/Manga Cafe/backend/listTitles.js
  3. 11 5
      web/Manga Cafe/index.html

+ 1 - 1
AGI Documentation.md
View File 

@@ -458,7 +458,7 @@ requirelib("imagelib");
 
 
 #### ImageLib functions
 
 ```
 
-imagelib.getImageDimension("user:/Desktop/test.jpg"); 									//return {width, height}
 
+imagelib.getImageDimension("user:/Desktop/test.jpg"); 									//return [width, height]
 
 imagelib.resizeImage("user:/Desktop/input.png", "user:/Desktop/output.png", 500, 300); 	//Resize input.png to 500 x 300 pixal and write to output.png
 
 imagelib.loadThumbString("user:/Desktop/test.jpg"); //Load the given file's thumbnail as base64 string, return false if failed
 
 imagelib.cropImage("user:/Desktop/test.jpg", "user:/Desktop/out.jpg",100,100,200,200));

+ 13 - 0
web/Manga Cafe/backend/listTitles.js
View File 

@@ -7,6 +7,9 @@
 
 //Require filelib
 
 requirelib("filelib");
 
 
+//Require imagelib
 
+requirelib("imagelib");
 
+
 
 //Make Manga folder if not exists
 
 if (!filelib.fileExists("user:/Photo/Manga")){
 
     filelib.mkdir("user:/Photo/Manga")
 
@@ -44,7 +47,17 @@ for (var i =0; i < rootList.length; i++){
 
                     //Get the first image from the first chapter
 
                     var firstChapterFolder = foldersInTitle[0];
 
                     var firstChapterImagaes = filelib.aglob(firstChapterFolder + "/*.jpg");
 
+                    
+                    //Get the first image that is not horizontal
 
                     titleImagePath = firstChapterImagaes[0];
 
+                    var index = 0;
 
+                    var size = imagelib.getImageDimension(titleImagePath);
 
+                    while(size[0] > size[1] && index < firstChapterImagaes.length - 1){
 
+                        //Not this one. Next image
 
+                        index++;
 
+                        titleImagePath = firstChapterImagaes[index]; 
+                        size = imagelib.getImageDimension(titleImagePath);
 
+                    }
 
                 }
 
 
                 //Get the starting chapter

+ 11 - 5
web/Manga Cafe/index.html
View File 

@@ -9,16 +9,21 @@
 
         <script src="../script/jquery.min.js"></script>
 
         <script src="../script/ao_module.js"></script>
 
         <script src="../script/semantic/semantic.min.js"></script>
 
+        <link rel="shortcut icon" type="image/png" href="img/small_icon.png"/>
 
         <link rel="manifest" crossorigin="use-credentials" href="manifest.json">
 
         <title>Manga Cafe</title>
 
         <style>
 
             body{
 
-                background-color:white;
 
+                background-color:#f0f0f0;
 
             }
 
 
             .manga{
 
                 margin-left: 8px !important;
 
             }
 
+
 
+            .mangaTitle{
 
+                width: 100%;
 
+            }
 
         </style>
 
     </head>
 
     <body>
 
@@ -60,15 +65,16 @@
 
                     var defaultWidth = "200px";
 
                     var defaultImageHeight = "300px";
 
                     if (isMobile){
 
-                        defaultWidth = "150px"
 
+                        defaultWidth = "150px";
 
+                        defaultImageHeight = "230px";
 
                     }
 
                     $("#mangalist").append(`<div class="ui card manga" style="width: ${defaultWidth}; display: inline-block;">
 
-                        <div class="content">
 
+                        <div class="content" style="border-bottom: 1px solid #bfbfbf;">
 
                             <div class="right floated meta">Ch#: ${manga[1]}</div>
 
                             ${title}
 
                         </div>
 
-                        <a class="image" href="viewComic.html#${manga[3]}" style="text-align:center; height: 300px">
 
-                            <img class="ui fluid image" style="position: absolute; top: 0; bottom: 0; margin: auto;" src="${preview}">
 
+                        <a class="image" href="viewComic.html#${manga[3]}" style="text-align:center;">
 
+                            <img class="mangaTitle" src="${preview}" style="height: ${defaultImageHeight};"/>
 
                         </a> 
                     </div>`);
 
                 });