From a30923ceaed31a3bfa1fdad5420964e63edc6273 Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Wed, 31 Mar 2021 17:40:57 +0200
Subject: [PATCH] FEATURE: improved the fullscreen and close buttons to be in
 the aside element

---
 front/dist/index.tmpl.html                    |  8 +--
 .../dist/resources/logos/fullscreen-exit.svg  |  3 +
 front/dist/resources/logos/fullscreen.svg     |  3 +
 front/dist/resources/style/cowebsite.scss     | 66 ++++---------------
 4 files changed, 24 insertions(+), 56 deletions(-)
 create mode 100644 front/dist/resources/logos/fullscreen-exit.svg
 create mode 100644 front/dist/resources/logos/fullscreen.svg

diff --git a/front/dist/index.tmpl.html b/front/dist/index.tmpl.html
index 88efa80d..062622b8 100644
--- a/front/dist/index.tmpl.html
+++ b/front/dist/index.tmpl.html
@@ -73,11 +73,11 @@
                 </aside>
                 <main id="cowebsite-main">
                 </main>
-                <button class="top-right-btn" id="cowebsite-fullscreen">
-                    <img id="cowebsite-fullscreen-open" src="resources/logos/monitor.svg"/>
-                    <img id="cowebsite-fullscreen-close" style="display: none;" src="resources/logos/monitor-close.svg"/>
+                <button class="top-right-btn" id="cowebsite-fullscreen" alt="fullscreen mode">
+                    <img id="cowebsite-fullscreen-open" src="resources/logos/fullscreen.svg"/>
+                    <img id="cowebsite-fullscreen-close" style="display: none;" src="resources/logos/fullscreen-exit.svg"/>
                 </button>
-                <button class="top-right-btn" id="cowebsite-close">
+                <button class="top-right-btn" id="cowebsite-close" alt="close the iframe">
                     <img src="resources/logos/close.svg"/>
                 </button>
             </div>
diff --git a/front/dist/resources/logos/fullscreen-exit.svg b/front/dist/resources/logos/fullscreen-exit.svg
new file mode 100644
index 00000000..1d15cd8b
--- /dev/null
+++ b/front/dist/resources/logos/fullscreen-exit.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg id="i-fullscreen-exit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"  fill="none" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+    <path d="M4 12 L12 12 12 4 M20 4 L20 12 28 12 M4 20 L12 20 12 28 M28 20 L20 20 20 28" />
+</svg>
\ No newline at end of file
diff --git a/front/dist/resources/logos/fullscreen.svg b/front/dist/resources/logos/fullscreen.svg
new file mode 100644
index 00000000..2c518466
--- /dev/null
+++ b/front/dist/resources/logos/fullscreen.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg id="i-fullscreen" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+    <path d="M4 12 L4 4 12 4 M20 4 L28 4 28 12 M4 20 L4 28 12 28 M28 20 L28 28 20 28" />
+</svg>
\ No newline at end of file
diff --git a/front/dist/resources/style/cowebsite.scss b/front/dist/resources/style/cowebsite.scss
index ba8fdb84..33a6b6bf 100644
--- a/front/dist/resources/style/cowebsite.scss
+++ b/front/dist/resources/style/cowebsite.scss
@@ -35,9 +35,8 @@
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 
     img {
-      height: 20px;
-      background-color: rgba(0,0.0,0,0.3);
-      padding: 5px;
+      height: 25px;
+      padding: 4px;
       border-radius: 3px;
     }
 
@@ -78,31 +77,13 @@
     }
 
     .top-right-btn{
-      top: 10px;
-      right: -100px;
-      animation: right .2s ease;
-
-      img {
-        right: 15px;
+      left: -6px;
+      &#cowebsite-close {
+        top: 0px;
+      }
+      &#cowebsite-fullscreen {
+        top: 25px;
       }
-    }
-
-    #cowebsite-close {
-      right: -140px;
-    }
-    #cowebsite-fullscreen {
-      right: -100px;
-    }
-
-  }
-
-  #cowebsite:hover {
-    #cowebsite-close{
-      right: 10px;
-    }
-
-    #cowebsite-fullscreen{
-      right: 45px;
     }
   }
 }
@@ -139,32 +120,13 @@
       }
     }
 
-    .top-right-btn{
-      top: 10px;
-      right: -100px;
-      animation: right .2s ease;
-
-      img {
-        right: 15px;
+    .top-right-btn {
+      &#cowebsite-close {
+        right: 0px;
+      }
+      &#cowebsite-fullscreen {
+        right: 25px;
       }
     }
-
-    #cowebsite-close {
-      right: -140px;
-    }
-    #cowebsite-fullscreen {
-      right: -100px;
-    }
-
   }
-
-  #cowebsite:hover {
-    #cowebsite-close{
-      right: 10px;
-    }
-
-    #cowebsite-fullscreen{
-      right: 45px;
-    }
-  }  
 }
\ No newline at end of file