recreate page

src/page.py

@@ -62,6 +62,13 @@ class Page():
             if (self._gen_exif()):
                 return None
         return self._exif
+    
+    def render_exif(self):
+        if not self.get_exif():
+            return None
+        
+        with open(self._exif.get_absolute_path()) as f:
+            return f.read()
 
     def get_raw(self):
         return self._raw

src/picture.py

@@ -17,7 +17,7 @@ class Picture():
     def __init__(self, picture_path: Path, page = None, raw: Path|None = None, albums_name: list[str] = None, is_repertoried: bool = True):
         self._large: Path = picture_path
         self._small: Path = Path(picture_path.get_absolute_path()[:-4] + "_small.jpg")
-        self._export_file: Path = Path(picture_path.get_absolute_path() + ".out.pp3")
+        self._profile_file: Path = Path(picture_path.get_absolute_path() + ".out.pp3")
         self._raw: Path|None = raw
         self._page: Page = page
         self._albums_name: list[str] = albums_name or []
@@ -39,8 +39,8 @@ class Picture():
     def get_large(self):
         return self._large
     
-    def get_export_file(self):
-        return self._export_file
+    def get_profile_file(self):
+        return self._profile_file
 
     def gen_small(self):
         im = Image.open(self._large.get_absolute_path()).convert("RGB")

src/templates/page.css

@@ -10,61 +10,74 @@
 }
 
 body {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    width: 50%;
     background-color: var(--bg1);
-    margin: auto;
-    margin-top: 10px;
-    margin-bottom: 50px;
-    color: lightgray;
-}
-
-body * {
-    width: 100%;
-}
-
-.picture-container {
-    margin-top: 10px;
-}
-
-.picture-container-element {
-    margin-top: 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 15% 15%;
+    margin-top: 5%;
+    height: auto;
 }
 
 .readme {
-    border: 1px solid;
     background-color: var(--bg2);
 }
 
-.readme-content {
-    margin: 30px;
-}
-
-.export,
-.next {
-    margin-top: 0px;
-    display: block;
-    text-align: right;
-}
-
-.download {
-    margin-top: 10px;
+.picture-container {
     background-color: var(--bg2);
-    text-align: center;
-    padding-bottom: 30px;
+    padding: 10px;
 }
 
-.navigation,
-.meta-picture {
+.picture-container-item {
+    padding: 5px;
+    background-color: var(--content1);
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+.meta-picture, .navigation {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    width: 100%;
+}
+
+.profile {
+    text-align: right;
 }
 
 a {
     color: white;
     text-decoration: none;
     font-size: 1.5rem;
+  }
+
+@media screen and (max-width:767px) {
+    body {
+        margin: 0% 0%;
+    }
+}
+
+.exif, .readme {
+    width: 100%;
+    display: block;
+}
+
+.download {
+    width: 100%;
+    background-color: var(--bg2);
+    text-align: center;
+}
+
+.exif summary {
+    text-align: center;
+}
+
+.exif details {
+    display: flex;
+    justify-content: center;
+    background-color: var(--bg2);
 }

src/templates/page.jinja

@@ -16,33 +16,45 @@
     </div>
     {% if page._readme.exist() %}
     <div class="readme">
-        <div class="readme-content">
-            {{page.render_readme()}}
-        </div>
+        <details>
+            <summary>
+                README
+            </summary>
+            <div class="readme-content">
+                {{page.render_readme()}}
+            </div>
+        </details>
     </div>
     {% endif %}
-    {% for picture in page._pictures %}
     <div class="picture-container">
-        <div class="picture-container-element">
-            <img src='{{ picture.get_small().get_url() }}'>
+        {% for picture in page._pictures %}
+        <div class="picture-container-item">
+            <a href="{{ picture.get_small().get_url() }}">
+                <img src='{{ picture.get_small().get_url() }}'>
+            </a>
             <div class="meta-picture">
                 <a href="{{ picture.get_large().get_url() }}">Large</a>
-                {% if picture._export_file.exist() %}
-                <a class="export" href="{{ picture.get_export_file().get_url() }}">export file</a>
+                {% if picture._profile_file.exist() %}
+                <a class="profile" href="{{ picture.get_profile_file().get_url() }}">Raw therapee profile</a>
                 {% endif %}
             </div>
         </div>
+        {% endfor %}
     </div>
-    {% endfor %}
-    {% if page.get_raw().exist() or page.get_exif() %}
+    {% if page.get_raw().exist() %}
     <div class="download">
         <h1>Download</h1>
-        {% if page.get_raw().exist() %}
         <a href="{{ page.get_raw() }}">RAW</a>
-        {% endif %}
-        {% if page.get_exif() %}
-        <a href="{{ page.get_exif().get_url() }}">Exif</a>
-        {% endif %}
+    </div>
+    {% endif %}
+    {% if page.get_exif() %}
+    <div class="exif">
+        <details>
+            <summary>Exif</summary>
+            <pre>
+                {{ page.render_exif() }}
+            </pre>
+        </details>
     </div>
     {% endif %}
 </body>