From 5e987ee19bf66a0a743f624baf6c77f60fd6fb85 Mon Sep 17 00:00:00 2001
From: elmeraa <eazadpour@usgs.gov>
Date: Fri, 17 May 2024 20:56:41 -0700
Subject: [PATCH] center checkmarks and make text larger
---
src/components/Beeswarm.vue | 117 +++++++++++++++++++++---------------
1 file changed, 69 insertions(+), 48 deletions(-)
diff --git a/src/components/Beeswarm.vue b/src/components/Beeswarm.vue
index ad90f60..6355b34 100644
--- a/src/components/Beeswarm.vue
+++ b/src/components/Beeswarm.vue
@@ -1,5 +1,5 @@
<template>
- <section id="beeswarm">
+<section id="beeswarm">
<div
id="title"
class="text-container title-text"
@@ -392,10 +392,34 @@
<style scoped lang="scss">
$switchWidth: 12rem;
-
#toggle-container {
display: flex;
+ justify-content: center;
+ align-items: center;
width: 100%;
+ margin: 20px 0; /* Add some margin to give space around the toggle container */
+}
+
+#checkbox1-container,
+#checkbox2-container,
+#checkbox3-container {
+ display: flex;
+ align-items: center;
+ margin: 0 10px; /* Add some space between the checkboxes */
+}
+
+#checkbox1-container label,
+#checkbox2-container label,
+#checkbox3-container label {
+ margin-left: 5px; /* Add space between the checkbox and the label */
+ font-size: 2rem; /* Increase label font size if needed */
+}
+
+#checkbox1,
+#checkbox2,
+#checkbox3 {
+ transform: scale(1.5); /* Adjust the scale to make checkboxes bigger */
+ margin-right: 10px; /* Add some space between checkbox and label */
}
.graph-buttons-switch {
@@ -409,18 +433,19 @@ $switchWidth: 12rem;
-webkit-box-shadow: inset 0 0.1rem 0.3rem rgba(0, 0, 0, 0.1), 0 0.1remx rgba(255, 255, 255, 0.1);
box-shadow: inset 0 0.1rem 0.3rem rgba(0, 0, 0, 0.1), 0 0.1rem rgba(255, 255, 255, 0.1);
- -webkit-touch-callout: none; /* iOS Safari */
- -webkit-user-select: none; /* Safari */
- -khtml-user-select: none; /* Konqueror HTML */
- -moz-user-select: none; /* Firefox */
- -ms-user-select: none; /* Internet Explorer/Edge */
- user-select: none; /* Non-prefixed version, currently
- supported by Chrome and Opera */
+ -webkit-touch-callout: none; /* iOS Safari */
+ -webkit-user-select: none; /* Safari */
+ -khtml-user-select: none; /* Konqueror HTML */
+ -moz-user-select: none; /* Firefox */
+ -ms-user-select: none; /* Internet Explorer/Edge */
+ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
+
@media screen and (max-width: 600px) {
- height: 2.6rem;
+ height: 2.6rem;
}
- }
- .graph-buttons-switch-label {
+}
+
+.graph-buttons-switch-label {
position: relative;
z-index: 2;
float: left;
@@ -428,30 +453,40 @@ $switchWidth: 12rem;
line-height: 2.4rem;
text-align: center;
cursor: pointer;
+
@media screen and (max-width: 600px) {
- line-height: 2.2rem;
- width: $switchWidth * 1.02;
+ line-height: 2.2rem;
+ width: $switchWidth * 1.02;
}
- }
- .graph-buttons-switch-label-off {
+}
+
+.graph-buttons-switch-label-off {
padding-left: 0.2rem;
padding-right: 0.2rem;
- }
- .graph-buttons-switch-label-on {
+}
+
+.graph-buttons-switch-label-on {
padding-left: 0.2rem;
padding-right: 0.2rem;
- }
- .graph-buttons-switch-input {display: none;}
- .graph-buttons-switch-input:checked + .graph-buttons-switch-label {
+}
+
+.graph-buttons-switch-input {
+ display: none;
+}
+
+.graph-buttons-switch-input:checked + .graph-buttons-switch-label {
font-weight: bold;
-webkit-transition: 0.3s ease-out;
-moz-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
transition: 0.3s ease-out;
- }
- .graph-buttons-switch-input:checked + .graph-buttons-switch-label-on ~ .graph-buttons-switch-selection {left: $switchWidth;}
+}
+
+.graph-buttons-switch-input:checked + .graph-buttons-switch-label-on ~ .graph-buttons-switch-selection {
+ left: $switchWidth;
+}
- .graph-buttons-switch-selection {
+.graph-buttons-switch-selection {
display: block;
position: absolute;
z-index: 1;
@@ -459,19 +494,19 @@ $switchWidth: 12rem;
left: 0.2rem;
width: $switchWidth;
height: 2.4rem;
- background: rgba(255, 255, 255,1);
+ background: rgba(255, 255, 255, 1);
border-radius: 0.2rem;
- -webkit-box-shadow: inset 0 0.1rem rgba(255, 255, 255,0.6), 0 0 0.2rem rgba(0, 0, 0, 0.3);
- box-shadow: inset 0 0.1rem rgba(255, 255, 255,0.6), 0 0 0.2rem rgba(0, 0, 0, 0.3);
- -webkit-transition: left 0.3s ease-out,background 0.3s;
- -moz-transition: left 0.3s ease-out,background 0.3s;
- -o-transition: left 0.3s ease-out,background 0.3s;
- transition: left 0.3s ease-out,background 0.3s ;
- /* transition: background 0.3s ; */
+ -webkit-box-shadow: inset 0 0.1rem rgba(255, 255, 255, 0.6), 0 0 0.2rem rgba(0, 0, 0, 0.3);
+ box-shadow: inset 0 0.1rem rgba(255, 255, 255, 0.6), 0 0 0.2rem rgba(0, 0, 0, 0.3);
+ -webkit-transition: left 0.3s ease-out, background 0.3s;
+ -moz-transition: left 0.3s ease-out, background 0.3s;
+ -o-transition: left 0.3s ease-out, background 0.3s;
+ transition: left 0.3s ease-out, background 0.3s;
+
@media screen and (max-width: 600px) {
- height: 2.2rem;
+ height: 2.2rem;
}
- }
+}
#beeswarm-chart-container {
text-align: center;
@@ -495,16 +530,6 @@ $switchWidth: 12rem;
user-select: none;
}
-// #button-container {
-// display: flex;
-// justify-content: center;
-// margin-top: 20px;
-// }
-
-// #button-container button {
-// margin: 0 10px;
-// }
-
.tooltip {
font-size: 16px;
background-color: white;
@@ -513,14 +538,10 @@ $switchWidth: 12rem;
border-radius: 5px;
padding: 5px;
position: absolute;
- // pointer-events: none;
}
-// TO DO: not working
text.xLabel {
font-weight: 600;
}
-
</style>
-
\ No newline at end of file
--
GitLab