Skip to content

Commit

Permalink
Merge pull request #120 from iits-consulting/admin-dashboard-dark-mode
Browse files Browse the repository at this point in the history 
iits-admin-dashboard: improvements
  • Loading branch information
@krankkkk
krankkkk authored Jul 22, 2024
2 parents 05e267d + 4c9f7f4 commit 2cc03fd
Show file tree
Hide file tree
Showing 5 changed files with 221 additions and 36 deletions.
4 changes: 2 additions & 2 deletions charts/iits-admin-dashboard/Chart.yaml
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
apiVersion: v2
name: iits-admin-dashboard
version: 1.7.0
version: 1.7.1
appVersion: 2.1.0
description: |
This chart deploys a super simple webserver that provides a simple website containing links to a set
Expand All @@ -13,7 +13,7 @@ description: |
iits-admin-dashboard:
namespace: admin
repoURL: "https://charts.iits.tech"
targetRevision: "1.7.0"
targetRevision: "1.7.1"
parameters:
ingress.host: "REPLACE_ME"
```
33 changes: 32 additions & 1 deletion charts/iits-admin-dashboard/files/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,15 @@
<link rel="icon" href="favicon_192.png" sizes="192x192">
</head>

<body>
<body onload="init()">
<script type="text/javascript" src="index.js"></script>
<div class="container">
<header>
<img class="logo" src="{{ .Values.defaultDashboard.logoSrc }}" alt="{{ .Values.defaultDashboard.logoAlt }}"/>
</header>

<h1>{{ .Values.defaultDashboard.title }}</h1>

<div class="tiles">
{{- range .Values.defaultDashboard.tiles }}
{{- if ne .enabled "false" }}
Expand All @@ -24,6 +27,34 @@ <h1>{{ .Values.defaultDashboard.title }}</h1>
{{- end }}
{{- end }}
</div>

<div>
<div class="theme-toggle-wrapper">
<label class="switch">
<input class="switch__input" type="checkbox" role="switch">
<svg class="switch__icon switch__icon--light" viewBox="0 0 12 12" width="12px" height="12px" aria-hidden="true">
<g fill="none" stroke="#fff" stroke-width="1" stroke-linecap="round">
<circle cx="6" cy="6" r="2"/>
<g stroke-dasharray="1.5 1.5">
<polyline points="6 10,6 11.5" transform="rotate(0,6,6)"/>
<polyline points="6 10,6 11.5" transform="rotate(45,6,6)"/>
<polyline points="6 10,6 11.5" transform="rotate(90,6,6)"/>
<polyline points="6 10,6 11.5" transform="rotate(135,6,6)"/>
<polyline points="6 10,6 11.5" transform="rotate(180,6,6)"/>
<polyline points="6 10,6 11.5" transform="rotate(225,6,6)"/>
<polyline points="6 10,6 11.5" transform="rotate(270,6,6)"/>
<polyline points="6 10,6 11.5" transform="rotate(315,6,6)"/>
</g>
</g>
</svg>
<svg class="switch__icon switch__icon--dark" viewBox="0 0 12 12" width="12px" height="12px" aria-hidden="true">
<g fill="none" stroke="#fff" stroke-width="1" stroke-linejoin="round" transform="rotate(-45,6,6)">
<path d="m9,10c-2.209,0-4-1.791-4-4s1.791-4,4-4c.304,0,.598.041.883.105-.995-.992-2.367-1.605-3.883-1.605C2.962.5.5,2.962.5,6s2.462,5.5,5.5,5.5c1.516,0,2.888-.613,3.883-1.605-.285.064-.578.105-.883.105Z"/>
</g>
</svg>
</label>
</div>
</div>
</div>
</body>
</html>
48 changes: 48 additions & 0 deletions charts/iits-admin-dashboard/files/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
const Themes = Object.freeze({
light: "light",
dark: "dark"
});
const data_key = 'iits-theme';

//determines if the user has a set theme
function detectColorScheme() {
let theme = Themes.light; //default to light

//local storage is used to override OS theme settings
if (localStorage.getItem(data_key)) {
if (localStorage.getItem(data_key) === Themes.dark) {
theme = Themes.dark;
}
} else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
//OS theme setting detected as dark
theme = Themes.dark;
}

localStorage.setItem(data_key, theme);
document.documentElement.setAttribute("data-theme", theme);
return theme
}

//function that changes the theme, and sets a localStorage variable to track the theme between page loads
function switchTheme(e) {
let toggleSwitch = document.querySelector('input');
let newTheme = e.target.checked ? Themes.dark : Themes.light;
localStorage.setItem(data_key, newTheme);
document.documentElement.setAttribute('data-theme', newTheme);
toggleSwitch.checked = e.target.checked;
}

const initialTheme = detectColorScheme();

function init() {
//identify the toggle switch HTML element
const toggleSwitch = document.querySelector('input');

//listener for changing themes
toggleSwitch.addEventListener('change', switchTheme, false);

//pre-check the dark-theme checkbox if dark-theme is set
if (initialTheme === Themes.dark) {
toggleSwitch.checked = true;
}
}
164 changes: 132 additions & 32 deletions charts/iits-admin-dashboard/files/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,40 +4,141 @@
--spread: -0.9000000000000004px;
--horiz: 0.6994313653112738px;
--vert: 0.5663883519448538px;
--font-color: black;
--bg-color: #F1F1F1FF;
--tile-bg-color: #EAEAEAFF;
--hover-color: white;
--text-color: black;
--border: 2px solid lightgray;
--trans-dur: 0.3s;
--trans-timing: cubic-bezier(0.76, 0.05, 0.24, 0.95);
--trans-timing-in: cubic-bezier(0.76, 0.05, 0.86, 0.06);
--trans-timing-out: cubic-bezier(0.05, 0.76, 0.06, 0.86);
}

[data-theme="dark"] {
--font-color: #c1bfbd;
--bg-color: #121720;
--tile-bg-color: #b9bcc5;
--hover-color: #dcdde2;
--text-color: whitesmoke;
--border: 2px solid #636363;
}

input {
font: 1em/1.5 sans-serif;
}

.theme-toggle-wrapper {
display: flex;
transition: background-color var(--trans-dur) color var(--trans-dur);
}

.switch {
margin: auto;
position: relative;
}

.switch__icon, .switch__input {
display: block;
}

@media (prefers-color-scheme: dark) {
body {
background-color: #121720;
color: whitesmoke;
}
.switch__icon {
position: absolute;
top: 0.5em;
right: 0.375em;
width: 0.75em;
height: 0.75em;
transition: opacity calc(var(--trans-dur) / 2),
transform calc(var(--trans-dur) / 2);
}

.tile {
border: 2px solid #636363;
background-color: #b9bcc5;
.switch__icon polyline {
transition: stroke-dashoffset calc(var(--trans-dur) / 2);
}

.switch__icon--light,
.switch__icon--light polyline {
transition-delay: calc(var(--trans-dur) / 2);
transition-timing-function: var(--trans-timing-out);
}

&:hover {
background-color: #dcdde2
}
}
.switch__icon--dark {
opacity: 0;
transform: translateX(-0.75em) rotate(30deg) scale(0.75);
transition-timing-function: var(--trans-timing-in);
}

@media (prefers-color-scheme: light) {
body {
background-color: #F1F1F1FF;
color: black;
}
.switch__input {
background-color: #787878;
border-radius: 0.75em;
outline: transparent;
position: relative;
width: 3em;
height: 1.5em;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
}

.tile {
border: 2px solid lightgray;
background-color: #EAEAEAFF;
.switch__input:focus-visible {
}

&:hover {
background-color: white;
}
.switch__input:before,
.switch__input:after {
content: "";
display: block;
position: absolute;
}

}
.switch__input:before {
border-radius: inherit;
transition: background-color var(--trans-dur) var(--trans-timing);
}

.switch__input:after {
background-color: white;
border-radius: 50%;
top: 0.125em;
left: 0.125em;
width: 1.25em;
height: 1.25em;
transition: background-color var(--trans-dur) var(--trans-timing),
transform var(--trans-dur) var(--trans-timing);
z-index: 1;
}

.switch__input:checked:after {
transform: translateX(1.5em);
}

.switch__input:checked ~ .switch__icon--light,
.switch__input:checked ~ .switch__icon--light polyline {
transition-delay: 0s;
transition-timing-function: var(--trans-timing-in);
}

.switch__input:checked ~ .switch__icon--light {
opacity: 0;
transform: translateX(-0.75em) rotate(-30deg) scale(0.75);
}

.switch__input:checked ~ .switch__icon--light polyline {
stroke-dashoffset: 1.5;
}

.switch__input:checked ~ .switch__icon--dark {
opacity: 1;
transform: translateX(-1.5em);
transition-delay: calc(var(--trans-dur) / 2);
transition-timing-function: var(--trans-timing-out);
}

.switch__sr {
overflow: hidden;
position: absolute;
width: 1px;
height: 1px;
}

.cs-shadow {
Expand All @@ -51,12 +152,13 @@
}

body {
height: 100vh;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
color: var(--text-color);
background-color: var(--bg-color);
}

.container {
Expand All @@ -65,11 +167,6 @@ body {
max-width: 704px;
}

h1 {
font-size: 2rem;
margin-bottom: 2rem;
}

.logo {
display: block;
width: 150px;
Expand All @@ -82,6 +179,7 @@ h1 {
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
margin-bottom: 1rem;
}

.tile {
Expand All @@ -98,7 +196,8 @@ h1 {
background-repeat: no-repeat;
background-position: center;
opacity: 0.8;

border: var(--border);
background-color: var(--tile-bg-color);
}

.tile img {
Expand All @@ -109,4 +208,5 @@ h1 {
.tile:hover {
opacity: 1;
transform: scale(1.05);
background-color: var(--hover-color);
}
8 changes: 7 additions & 1 deletion charts/iits-admin-dashboard/templates/deployment.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,14 @@ spec:
{{- include "iits-admin-dashboard.selectorLabels" $ | nindent 6 }}
template:
metadata:
{{- with .podAnnotations }}
annotations:
{{- range $path, $_ := $.Files.Glob "files/*" }}
checksum/{{ base $path }}: {{ $.Files.Get $path | sha256sum }}
{{- end }}
{{- range $path, $_ := $.Files.Glob "images/*" }}
checksum/{{ base $path }}: {{ $.Files.Get $path | sha256sum }}
{{- end }}
{{- with .podAnnotations }}
{{- toYaml . | nindent 8 }}
{{- end }}
labels:
Expand Down

0 comments on commit 2cc03fd

Please sign in to comment.