From 1dc101c0c1de2f842fe5268a5b3dc3709219334f Mon Sep 17 00:00:00 2001
From: loicbersier <loic.bersier1@gmail.com>
Date: Thu, 23 Jan 2020 04:26:17 +0100
Subject: [PATCH] Some design change

---
 resources/views/index.edge | 46 +++++++++++++++++++++++++++-----------
 1 file changed, 33 insertions(+), 13 deletions(-)

diff --git a/resources/views/index.edge b/resources/views/index.edge
index 2d6eb59..4a9696c 100644
--- a/resources/views/index.edge
+++ b/resources/views/index.edge
@@ -133,25 +133,45 @@
     </section>
 
     @if(file != "")
+    <p class="title has-text-light has-text-centered">Recently downloaded videos</p> 
     <section class="section">
-        <p class="title has-text-light has-text-centered">Recently downloaded videos</p> 
-        <div class="tile fadein">
+        <div class="columns is-vcentered is-multiline fadein">
             @each(file in file)
-            <div class="tile is-parent hvr-grow">
-                <article class="tile is-child box notification is-info">
+            <div class="column hvr-grow">
+                <div class="column box notification is-dark">
                     <p class="subtitle">{{ file.name }}</p>
-                    <p>{{ file.size }} MB</p>
+                    <div>
+                        <video muted loop onmouseover="this.play()" onmouseout="this.pause();" oncanplay="this.muted=true" poster="{{ file.img }}" preload="metadata">
+                            <source src="{{ file.location }}#t=0.5" >
+                            <img src="{{ file.img }}" title="Your browser does not support the <video> tag">
+                        </video>
+                    </div>
                     <br>
                     <div class="content">
-                        <p><a class="button is-link is-rounded" href="{{ file.location }}" download>Download<i class="fas fa-fw fa-file-download" aria-hidden="true"></i></a></p>
-                        <p><button class="button is-link is-rounded" onclick="toClipboard('https:\/\/namejeff.xyz\/{{ file.location }}')">Add to clipboard<i class="fas fa-fw fa-clipboard" aria-hidden="true"></i></button></p>
+                        <div class="field has-addons is-centered">
+                            <p class="control">
+                                <a class="button is-link is-rounded" href="{{ file.location }}" download>Download<i class="fas fa-fw fa-file-download" aria-hidden="true"></i></a>
+                            </p>
+                            <p class="control"> 
+                                <button class="button is-link is-rounded" onclick="toClipboard('https:\/\/namejeff.xyz\/{{ file.location }}')">Add to clipboard<i class="fas fa-fw fa-clipboard" aria-hidden="true"></i></button>
+                            </p>
+                        </div>
+                    </div>
+                    <div class="field is-grouped">
+                        <div class="control">
+                            <div class="tags has-addons">
+                                <span class="tag">File format</span>
+                                <span class="tag is-primary">{{ file.ext }}</span>
+                            </div>
+                        </div>
+                        <div class="control">
+                            <div class="tags has-addons">
+                                <span class="tag">File size</span>
+                                <span class="tag is-primary">{{ file.size }} MB</span>
+                            </div>
+                        </div>
                     </div>
-                    <video muted width="720" height="480" loop onmouseover="this.play()" onmouseout="this.pause();" oncanplay="this.muted=true" poster="{{ file.img }}" preload="metadata">
-                        <source src="{{ file.location }}#t=0.5" >
-                        <img src="{{ file.img }}" title="Your browser does not support the <video> tag">
-                    </video>
-                        <!-- <img src="data:image/png;base64, {{ file.img }}"> -->
-                </article>
+                </div>
             </div>
             @endeach
         </div>