git ssb - Ability to switch themes · VictorBjelkholm (lasoa)/metabutt@74e6a9ef

Commit 74e6a9efcd58175b0b939fbc958cf2f8a77597ba

Ability to switch themes

Sunny spain requires different themes for different times of the day

License: MIT
Signed-off-by: Victor Bjelkholm <git@victor.earth>

victorbjelkholm committed on 1/18/2020, 2:45:46 PM
Parent: 606f5064ca6cdb064af713ac7257b71ceb5d4f6d

Files changed

resources/public/css/style.css	changed
src/metabutt/core.cljs	changed

resources/public/css/style.cssView
		@@ -2,13 +2,21 @@
2	2 …
3	3 …	html, body {
4	4 …	padding: 0;
5	5 …	margin: 0;
	6 …	+ font-family: 'Space Mono', sans-serif;
	7 …	+}
	8 …	+
	9 …	+.theme-dark {
6	10 …	background-color: #0F192A;
7	11 …	color: white;
8		- font-family: 'Space Mono', sans-serif;
9	12 …	}
10	13 …
	14 …	+.theme-light {
	15 …	+ background-color: white;
	16 …	+ color: #0F192A;
	17 …	+}
	18 …	+
11	19 …	button, input {
12	20 …	font-family: 'Space Mono', sans-serif;
13	21 …	background-color: #0F192A;
14	22 …	border: 1px solid white;
		@@ -36,31 +44,50 @@
36	44 …	max-width: 100%;
37	45 …	}
38	46 …
39	47 …	.query-link {
40		- color: white;
41	48 …	display: block;
42	49 …	padding: 3px;
43	50 …	}
44	51 …
45		-.query-link.selected {
	52 …	+.theme-dark .query-link {
	53 …	+ color: white;
	54 …	+}
	55 …	+
	56 …	+.theme-light .query-link {
	57 …	+ color: #0F192A;
	58 …	+}
	59 …	+
	60 …	+.theme-dark .query-link.selected {
46	61 …	background-color: white;
47	62 …	color: black;
48	63 …	}
49	64 …
	65 …	+.theme-light .query-link.selected {
	66 …	+ background-color: black;
	67 …	+ color: white;
	68 …	+}
	69 …	+
50	70 …	label {
51	71 …	display: block;
52	72 …	border: 1px solid lightgrey;
53	73 …	margin: 10px;
54	74 …	padding: 5px;
55	75 …	}
56	76 …
57		-h3 {
	77 …	+h1, h3 {
58	78 …	margin: 0px;
59	79 …	padding: 0px;
60	80 …	}
61	81 …
62	82 …	pre {
63	83 …	font-family: 'Space Mono', sans-serif;
64		- background-color: #0F192A;
65	84 …	white-space: pre-line;
66	85 …	}
	86 …	+
	87 …	+.theme-dark pre {
	88 …	+ background-color: #0F192A;
	89 …	+}
	90 …	+
	91 …	+.theme-light pre {
	92 …	+ background-color: lightgrey;
	93 …	+}

src/metabutt/core.cljsView
		@@ -45,8 +45,9 @@
45	45 …
46	46 …
47	47 …	(defonce app-state (atom {:name "Demo Query"
48	48 …	:show-debug? false
	49 …	+ :theme "dark"
49	50 …	:ui demo-ui
50	51 …	:query demo-query
51	52 …	:loading? false
52	53 …	:result []
		@@ -295,14 +296,23 @@
295	296 …
296	297 …	(defn get-hash []
297	298 …	(clojure.string/join "" (rest js/window.location.hash)))
298	299 …
	300 …	+(defn $themes []
	301 …	+ [:select
	302 …	+ {:onChange #(swap! app-state assoc :theme (-> % .-target .-value))}
	303 …	+ [:option {:value "dark"} "Theme - Dark"]
	304 …	+ [:option {:value "light"} "Theme - Light"]])
	305 …	+
299	306 …	(defn $header []
300	307 …	[:div
301		- [:h1 "metabutt"]])
	308 …	+ [:h1 "metabutt"]
	309 …	+ [$themes]])
302	310 …
	311 …	+
303	312 …	(defn app []
304	313 …	[:div
	314 …	+ {:class (str "theme-" (:theme @app-state))}
305	315 …	[$header]
306	316 …	[:div
307	317 …	{:style {:width "50%"
308	318 …	:float "left"}}
		@@ -337,9 +347,10 @@
337	347 …	:float "right"}}
338	348 …	[:div "Results: " (count (:result @app-state))]
339	349 …	(when (:loading? @app-state)
340	350 …	[:div "Loading results..."])
341		- [error-catcher [:div [$ui]]]]])
	351 …	+ [error-catcher [:div [$ui]]]]
	352 …	+ [:div {:style {:clear "both"}}]])
342	353 …
343	354 …	(defn handle-hash-change []
344	355 …	(swap! app-state
345	356 …	assoc

Built with git-ssb-web

VictorBjelkholm (lasoa) / metabutt

Commit 74e6a9efcd58175b0b939fbc958cf2f8a77597ba

Ability to switch themes

Files changed