|
|
@@ -20,20 +20,85 @@
|
|
|
>
|
|
|
<router-link title="News" to="/news">News</router-link>
|
|
|
</div>
|
|
|
+ <div id="footer-nightmode-toggle">
|
|
|
+ <p class="is-expanded checkbox-control">
|
|
|
+ <label class="switch">
|
|
|
+ <input
|
|
|
+ type="checkbox"
|
|
|
+ id="instant-nightmode"
|
|
|
+ v-model="localNightmode"
|
|
|
+ />
|
|
|
+ <span class="slider round"></span>
|
|
|
+ </label>
|
|
|
+
|
|
|
+ <label for="instant-nightmode">
|
|
|
+ <p>Nightmode</p>
|
|
|
+ </label>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import Toast from "toasters";
|
|
|
+import { mapState, mapGetters, mapActions } from "vuex";
|
|
|
+
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- github: "#"
|
|
|
+ github: "#",
|
|
|
+ localNightmode: null
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ ...mapState({
|
|
|
+ loggedIn: state => state.user.auth.loggedIn
|
|
|
+ }),
|
|
|
+ ...mapGetters({
|
|
|
+ socket: "websockets/getSocket"
|
|
|
+ })
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ localNightmode(newValue, oldValue) {
|
|
|
+ if (oldValue === null) return;
|
|
|
+
|
|
|
+ localStorage.setItem("nightmode", this.localNightmode);
|
|
|
+
|
|
|
+ if (this.loggedIn) {
|
|
|
+ this.socket.dispatch(
|
|
|
+ "users.updatePreferences",
|
|
|
+ { nightmode: this.localNightmode },
|
|
|
+ res => {
|
|
|
+ if (res.status !== "success") new Toast(res.message);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ this.changeNightmode(this.localNightmode);
|
|
|
+ }
|
|
|
+ },
|
|
|
async mounted() {
|
|
|
this.github = await lofig.get("siteSettings.github");
|
|
|
+
|
|
|
+ this.localNightmode = JSON.parse(localStorage.getItem("nightmode"));
|
|
|
+
|
|
|
+ this.socket.dispatch("users.getPreferences", res => {
|
|
|
+ if (res.status === "success")
|
|
|
+ this.localNightmode = res.data.preferences.nightmode;
|
|
|
+ });
|
|
|
+
|
|
|
+ this.socket.on("keep.event:user.preferences.updated", res => {
|
|
|
+ if (res.data.preferences.nightmode !== undefined)
|
|
|
+ this.localNightmode = res.data.preferences.nightmode;
|
|
|
+ });
|
|
|
+
|
|
|
+ this.frontendDomain = await lofig.get("frontendDomain");
|
|
|
+ this.siteSettings = await lofig.get("siteSettings");
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapActions("user/preferences", ["changeNightmode"])
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
@@ -51,14 +116,13 @@ export default {
|
|
|
position: relative;
|
|
|
bottom: 0;
|
|
|
flex-shrink: 0;
|
|
|
- height: auto;
|
|
|
padding: 20px;
|
|
|
border-radius: 33% 33% 0% 0% / 7% 7% 0% 0%;
|
|
|
box-shadow: 0 4px 8px 0 rgba(3, 169, 244, 0.4),
|
|
|
0 6px 20px 0 rgba(3, 169, 244, 0.2);
|
|
|
background-color: var(--white);
|
|
|
width: 100%;
|
|
|
- height: 160px;
|
|
|
+ height: 200px;
|
|
|
font-size: 16px;
|
|
|
|
|
|
.footer-content {
|
|
|
@@ -89,7 +153,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
#footer-links {
|
|
|
- order: 2;
|
|
|
+ order: 3;
|
|
|
|
|
|
:not(:last-child) {
|
|
|
border-right: solid 1px var(--primary-color);
|
|
|
@@ -115,15 +179,20 @@ export default {
|
|
|
}
|
|
|
|
|
|
#footer-copyright {
|
|
|
- order: 3;
|
|
|
+ order: 4;
|
|
|
+ }
|
|
|
+
|
|
|
+ #footer-nightmode-toggle {
|
|
|
+ order: 2;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media only screen and (min-width: 990px) {
|
|
|
.footer {
|
|
|
- height: 100px;
|
|
|
+ height: 140px;
|
|
|
|
|
|
#footer-copyright {
|
|
|
+ order: 3;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
position: absolute;
|
|
|
@@ -131,11 +200,16 @@ export default {
|
|
|
}
|
|
|
|
|
|
#footer-links {
|
|
|
+ order: 2;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
position: absolute;
|
|
|
line-height: 50px;
|
|
|
}
|
|
|
+
|
|
|
+ #footer-nightmode-toggle {
|
|
|
+ order: 4;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
