v0.6.0 - Darkmode

2020-08-11 09:13:48 +02:00
parent d071e583f5
commit 64c260a63f
12 changed files with 116 additions and 37 deletions
@@ -36,10 +36,10 @@
        <h1 class="text-center sde-blue mb-0">{{ __('msg.aktiviteter') }}</h1>
        @if(!$events->isEmpty())
            @foreach($events as $event)
-                <form method="get" action="{{ route("userevents.create") }}">
+                <form method="get" action="{{ route("userevents.create") }}" id="form{{$event->id}}">
                    <div class="card">
                        <div class="header">
-                            <h3>{{ $event->name}}</h3>
+                            <h3>{{ $event->name }}</h3>
                            <p class="text-center mt-0">Af: {{ $event->accountable }}</p>
                            <p class="text-center mt-0">{{ \Illuminate\Support\Facades\Date::createFromTimeStamp(strtotime($event->date))->format('d/m/Y \k\l\. H:i') }}</p>
                        </div>
@@ -48,8 +48,10 @@
                            <input type="hidden" name="event_id" value="{{ $event->id }}">
                            {!! session()->get('error#' . $event->id) !!}
                            {!! session()->get('signup#' . $event->id) !!}
-                            <button type="submit" class="btn text-center btn-sde-blue" id="tilmeld">{{__('msg.tilmeld')}}</button>
-                            <a style="width: 33%; margin: 0; padding: 0; text-align: center; font-weight: 700;" class="sde-blue" href="{{route("events.show", ["event" => $event->id ])}}">Læs mere</a>
+                            <div class="row">
+                                <a style="width: 50%; margin: 0; padding: 0; text-align: start; font-weight: 700;" class="sde-blue" href="javascript:;" onclick="document.getElementById('form{{$event->id}}').submit();" >Tilmeld</a>
+                                <a style="width: 50%; margin: 0; padding: 0; text-align: end; font-weight: 700;" class="sde-blue" href="{{route("events.show", ["event" => $event->id ])}}">Læs mere</a>
+                            </div>
                        </div>
                    </div>
                </form>
@@ -32,8 +32,8 @@
            padding-right: 8px;
        }
    </style>
-    <main>
-        <h1 class="text-center sde-blue mt-0">{{__('msg.vejledning')}}</h1>
+    <main style="min-height: calc(100% - 61.34px);">
+        <h1 class="text-center sde-blue mt-0" style="margin-bottom: auto;">{{__('msg.vejledning')}}</h1>
        @if(!$guides->isEmpty())
            @foreach($guides as $guide)
                <div class="card">
@@ -49,6 +49,6 @@
        @else
            <p style="margin: 0 18px;">{{__('msg.dereringenvejledninger')}}.</p>
        @endif
-        <button onclick="window.history.back()" class="btn btn-sde-blue text-white mb-1 mt-1" >{{__('msg.tilbage')}}</button>
+        <button onclick="window.history.back()" style="margin-top: auto;" class="btn btn-sde-blue text-white mb-1 mt-1" >{{__('msg.tilbage')}}</button>
    </main>
@endsection
@@ -75,6 +75,7 @@
            let menuElement = document.getElementById(menu);
            let logoElement = document.getElementById("sdeLogo");
            let htmlElement = document.getElementsByTagName('html')[0];
+            let bodyElement = document.getElementsByTagName('body')[0];
            let mainElement = document.getElementsByTagName('main')[0];
            let iconElement = document.getElementById("icon");
            let headerElement = document.getElementById("header");
@@ -83,6 +84,7 @@
                menuElement.classList.remove("hide");
                mainElement.classList.remove("d-none");
                htmlElement.style.backgroundColor = '';
+                bodyElement.style.backgroundColor = '#666666';
                logoElement.src = '/images/logos/Logo-hvid.svg';
                iconElement.classList.remove("fa-times");
                iconElement.classList.add("fa-bars");
@@ -91,6 +93,7 @@
                menuElement.classList.add("hide");
                mainElement.classList.add("d-none");
                htmlElement.style.backgroundColor = 'rgb(0, 120, 138)';
+                bodyElement.style.backgroundColor = 'rgb(0, 120, 138)';
                logoElement.src = '/images/logos/Logo-hvid.svg';
                iconElement.classList.remove("fa-bars");
                iconElement.classList.add("fa-times");
@@ -120,6 +120,7 @@
            let menuElement = document.getElementById(menu);
            let logoElement = document.getElementById("sdeLogo");
            let htmlElement = document.getElementsByTagName('html')[0];
+            let bodyElement = document.getElementsByTagName('body')[0];
            let mainElement = document.getElementsByTagName('main')[0];
            let iconElement = document.getElementById("icon");
            let headerElement = document.getElementById("header");
@@ -128,6 +129,7 @@
                menuElement.classList.remove("hide");
                mainElement.classList.remove("d-none");
                htmlElement.style.backgroundColor = '';
+                bodyElement.style.backgroundColor = '#666666';
                logoElement.src = '/images/logos/Logo-hvid.svg';
                iconElement.classList.remove("fa-times");
                iconElement.classList.add("fa-bars");
@@ -136,6 +138,7 @@
                menuElement.classList.add("hide");
                mainElement.classList.add("d-none");
                htmlElement.style.backgroundColor = 'rgb(0, 120, 138)';
+                bodyElement.style.backgroundColor = 'rgb(0, 120, 138)';
                logoElement.src = '/images/logos/Logo-hvid.svg';
                iconElement.classList.remove("fa-bars");
                iconElement.classList.add("fa-times");
@@ -31,17 +31,17 @@
        </select>


-        <label for="dark">Sprog / Languages:</label>
+        <label for="dark">Tema / Theme:</label>
        <select name="light" id="darkmode">
            @if(request()->cookie('mode') == "light")
-                <option selected name="ligthmode" value="Light">Light</option>
+                <option selected name="ligthmode" style="color: black;" value="Light">{{ __("msg.lys") }}</option>
            @else
-                <option name="light" value="light">Light</option>
+                <option name="light" style="color: black;" value="light">{{ __("msg.lys") }}</option>
            @endif
            @if(request()->cookie('mode') == "dark")
-                <option selected name="darkmode" value="dark">Dark</option>
+                <option selected name="darkmode" style="color: black;" value="dark">{{ __("msg.mørk") }}</option>
            @else
-                <option name="dark" value="dark">Dark</option>
+                <option name="dark" style="color: black;" value="dark">{{ __("msg.mørk") }}</option>
            @endif

        </select>
@@ -17,7 +17,7 @@
            <span>{{__('msg.telefon')}} Nr.:</span>
            <input type="text" name="phone" id="phone" value="{{ Auth::user()->phone }}" required>
            <button type="submit" class="btn text-center btn-sde-blue mt-1">{{__('msg.rediger')}}</button>
-            <button onclick="window.location.href = '{{ route('users.account') }}';" class="btn text-center btn-sde-blue mt-1">{{__('msg.tilbage')}}</button>
+            <a href="{{ route('users.account') }}" class="btn text-center btn-sde-blue mt-1">{{__('msg.tilbage')}}</a>
        </form>
    </main>
@endsection
@@ -40,18 +40,37 @@
@endsection

@section("scripts")
-    <script>
-        function show($passID, $faID) {
-            var inputPass = document.getElementById($passID);
-            var faEye = document.getElementById($faID);
+    @if(request()->cookie("mode") == "dark")
+        <script>
+            function show($passID, $faID) {
+                var inputPass = document.getElementById($passID);
+                var faEye = document.getElementById($faID);

-            if (inputPass.type === "password") {
-                inputPass.type = "text";
-                faEye.style.color = "#000";
-            } else {
-                inputPass.type = "password";
-                faEye.style.color = "#808080";
+
+                if (inputPass.type === "password") {
+                    inputPass.type = "text";
+                    faEye.style.color = "#333333";
+                } else {
+                    inputPass.type = "password";
+                    faEye.style.color = "#ffffff";
+                }
            }
-        }
-    </script>
+        </script>
+    @else
+        <script>
+            function show($passID, $faID) {
+                var inputPass = document.getElementById($passID);
+                var faEye = document.getElementById($faID);
+
+
+                if (inputPass.type === "password") {
+                    inputPass.type = "text";
+                    faEye.style.color = "#333333";
+                } else {
+                    inputPass.type = "password";
+                    faEye.style.color = "#808080";
+                }
+            }
+        </script>
+    @endif
@endsection