v0.5.18 - Darkmode

This commit is contained in:
frederikpyt 2020-08-10 15:19:53 +02:00
parent 72824d87f2
commit 3d0afb2d6a
4 changed files with 7073 additions and 3 deletions

6996
skolehjem/public/css/webappdark.css vendored Normal file

File diff suppressed because it is too large Load Diff

View File

@ -1,5 +1,9 @@
html, body { html, body {
background-color: rgba(0,0,0, 0.6); background-color: rgb(102, 102, 102);
}
main {
background-color: rgb(102, 102, 102);
} }
* { * {

View File

@ -17,7 +17,7 @@
<img class="w-50" id="sdeLogo" src="{{URL::asset('/images/logos/Logo-normal.svg')}}" onclick="location.href = '{{ route("root.index") }}';" alt="Syddansk Erhvervsskole"> <img class="w-50" id="sdeLogo" src="{{URL::asset('/images/logos/Logo-normal.svg')}}" onclick="location.href = '{{ route("root.index") }}';" alt="Syddansk Erhvervsskole">
@endif @endif
<button class="ml-auto" id="toggle"> <button class="ml-auto" id="toggle">
<i id="icon" class="fas fa-bars"></i> <i id="icon" class="fas fa-bars" style="color: black;"></i>
</button> </button>
</header> </header>
<div class="d-none bg-sde-blue col" id="menu"> <div class="d-none bg-sde-blue col" id="menu">
@ -69,5 +69,40 @@
<script src="{{ mix("/js/app.js") }}"></script> <script src="{{ mix("/js/app.js") }}"></script>
@yield("scripts") @yield("scripts")
@if(request()->cookie("mode") == "dark")
<script type="text/javascript">
function toggleMenu(menu) {
let menuElement = document.getElementById(menu);
let logoElement = document.getElementById("sdeLogo");
let htmlElement = document.getElementsByTagName('html')[0];
let mainElement = document.getElementsByTagName('main')[0];
let iconElement = document.getElementById("icon");
let headerElement = document.getElementById("header");
if(menuElement.classList.contains("hide")) {
menuElement.classList.remove("hide");
mainElement.classList.remove("d-none");
htmlElement.style.backgroundColor = '';
logoElement.src = '/images/logos/Logo-hvid.svg';
iconElement.classList.remove("fa-times");
iconElement.classList.add("fa-bars");
headerElement.style.backgroundColor = '';
} else {
menuElement.classList.add("hide");
mainElement.classList.add("d-none");
htmlElement.style.backgroundColor = 'rgb(0, 120, 138)';
logoElement.src = '/images/logos/Logo-hvid.svg';
iconElement.classList.remove("fa-bars");
iconElement.classList.add("fa-times");
headerElement.style.backgroundColor = 'rgb(0, 120, 138)';
}
}
if(document.getElementById("toggle"))
document.getElementById("toggle").onclick = function () {
toggleMenu('menu');
};
</script>
@endif
</body> </body>
</html> </html>

View File

@ -17,7 +17,7 @@
<img class="w-50" id="sdeLogo" src="{{URL::asset('/images/logos/Logo-normal.svg')}}" onclick="location.href = '{{ route("root.index") }}';" alt="Syddansk Erhvervsskole"> <img class="w-50" id="sdeLogo" src="{{URL::asset('/images/logos/Logo-normal.svg')}}" onclick="location.href = '{{ route("root.index") }}';" alt="Syddansk Erhvervsskole">
@endif @endif
<button class="ml-auto" id="toggle"> <button class="ml-auto" id="toggle">
<i id="icon" class="fas fa-bars"></i> <i id="icon" class="fas fa-bars" style="color: black;"></i>
</button> </button>
</header> </header>
<div class="d-none bg-sde-blue col" id="menu"> <div class="d-none bg-sde-blue col" id="menu">
@ -114,5 +114,40 @@
</main> </main>
<script src="{{ mix("/js/app.js") }}"></script> <script src="{{ mix("/js/app.js") }}"></script>
@yield("scripts") @yield("scripts")
@if(request()->cookie("mode") == "dark")
<script type="text/javascript">
function toggleMenu(menu) {
let menuElement = document.getElementById(menu);
let logoElement = document.getElementById("sdeLogo");
let htmlElement = document.getElementsByTagName('html')[0];
let mainElement = document.getElementsByTagName('main')[0];
let iconElement = document.getElementById("icon");
let headerElement = document.getElementById("header");
if(menuElement.classList.contains("hide")) {
menuElement.classList.remove("hide");
mainElement.classList.remove("d-none");
htmlElement.style.backgroundColor = '';
logoElement.src = '/images/logos/Logo-hvid.svg';
iconElement.classList.remove("fa-times");
iconElement.classList.add("fa-bars");
headerElement.style.backgroundColor = '';
} else {
menuElement.classList.add("hide");
mainElement.classList.add("d-none");
htmlElement.style.backgroundColor = 'rgb(0, 120, 138)';
logoElement.src = '/images/logos/Logo-hvid.svg';
iconElement.classList.remove("fa-bars");
iconElement.classList.add("fa-times");
headerElement.style.backgroundColor = 'rgb(0, 120, 138)';
}
}
if(document.getElementById("toggle"))
document.getElementById("toggle").onclick = function () {
toggleMenu('menu');
};
</script>
@endif
</body> </body>
</html> </html>