noby
/
workadventure
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

FEATURE: improved the fullscreen and close buttons to be in the aside element

This commit is contained in:
kharhamel 2021-03-31 17:40:57 +02:00
parent c2398efdc4
commit a30923ceae
4 changed files with 24 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
front/dist/index.tmpl.html vendored
View File

@ -73,11 +73,11 @@
</aside> </aside>
<main id="cowebsite-main"> <main id="cowebsite-main">
</main> </main>
<button class="top-right-btn" id="cowebsite-fullscreen"> <button class="top-right-btn" id="cowebsite-fullscreen" alt="fullscreen mode">
<img id="cowebsite-fullscreen-open" src="resources/logos/monitor.svg"/> <img id="cowebsite-fullscreen-open" src="resources/logos/fullscreen.svg"/>
<img id="cowebsite-fullscreen-close" style="display: none;" src="resources/logos/monitor-close.svg"/> <img id="cowebsite-fullscreen-close" style="display: none;" src="resources/logos/fullscreen-exit.svg"/>
</button> </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"/> <img src="resources/logos/close.svg"/>
</button> </button>
</div> </div>

3
front/dist/resources/logos/fullscreen-exit.svg vendored Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 329 B

3
front/dist/resources/logos/fullscreen.svg vendored Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 322 B

66
front/dist/resources/style/cowebsite.scss vendored
View File

@ -35,9 +35,8 @@
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('/resources/logos/cursor_pointer.png'), pointer;
img { img {
height: 20px; height: 25px;
background-color: rgba(0,0.0,0,0.3); padding: 4px;
padding: 5px;
border-radius: 3px; border-radius: 3px;
} }
@ -78,31 +77,13 @@
} }
.top-right-btn{ .top-right-btn{
top: 10px; left: -6px;
right: -100px; &#cowebsite-close {
animation: right .2s ease; top: 0px;
}
img { &#cowebsite-fullscreen {
right: 15px; 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-right-btn {
top: 10px; &#cowebsite-close {
right: -100px; right: 0px;
animation: right .2s ease; }
&#cowebsite-fullscreen {
img { right: 25px;
right: 15px;
} }
} }
#cowebsite-close {
right: -140px;
}
#cowebsite-fullscreen {
right: -100px;
}
} }
#cowebsite:hover {
#cowebsite-close{
right: 10px;
}
#cowebsite-fullscreen{
right: 45px;
}
}
} }