@zzish/math-rich-input 0.1.5 → 0.1.7

package/dist/math-rich-input.css

@@ -131,6 +131,8 @@
 }
 
 .EquationEditorModal .title {
+  display: flex;
+  justify-content: space-between;
   font-size: 14px;
   color: #404040;
   text-align: left;
@@ -142,6 +144,8 @@
 }
 
 .EquationEditorModal-mobile .title {
+  display: flex;
+  justify-content: space-between;
   font-size: 14px;
   color: #404040;
   text-align: left;
@@ -153,20 +157,12 @@
   margin: 0px;
 }
 
-.EquationEditorModal .expertModeSwitch {
-  /* background: url(images/settings-icon.png) no-repeat; */
-  float: right;
-  /* width:36px;
-  height:36px; */
-}
-
 .EquationEditorModal .expertModeSwitch .switch {
-  margin-right: 10px;
   margin-left: 10px;
 }
 
 /* The switch - the box around the slider */
-.switch {
+.EquationEditorModal .switch {
   position: relative;
   display: inline-block;
   width: 35px;
@@ -174,14 +170,14 @@
 }
 
 /* Hide default HTML checkbox */
-.switch input {
+.EquationEditorModal .switch input {
   opacity: 0;
   width: 0;
   height: 0;
 }
 
 /* The slider */
-.slider {
+.EquationEditorModal .slider {
   position: absolute;
   cursor: pointer;
   top: 0;
@@ -193,7 +189,7 @@
   transition: 0.4s;
 }
 
-.slider:before {
+.EquationEditorModal .slider:before {
   position: absolute;
   content: "";
   height: 14px;
@@ -205,178 +201,35 @@
   transition: 0.4s;
 }
 
-input:checked + .slider {
+.EquationEditorModal input:checked + .slider {
   background-color: #663676;
-  /* background-color: #2196F3; */
 }
 
-input:focus + .slider {
+.EquationEditorModal input:focus + .slider {
   box-shadow: 0 0 1px #2196f3;
 }
 
-input:checked + .slider:before {
+.EquationEditorModal input:checked + .slider:before {
   -webkit-transform: translateX(13px);
   -ms-transform: translateX(13px);
   transform: translateX(13px);
 }
 
 /* Rounded sliders */
-.slider.round {
+.EquationEditorModal .slider.round {
   border-radius: 18px;
 }
 
-.slider.round:before {
+.EquationEditorModal .slider.round:before {
   border-radius: 50%;
 }
-/* Note that the top left position of the toolbar is set programatically in componentDidMount */
-
-.Toolbar {
-  position: fixed;
-  z-index: 1;
-  /* width:270px; */
-  height:42px;
-  background-color: white;
-  border: 1px solid #d0d0d0;
-  border-radius: 5px;
-  box-shadow: 1px 1px 5px #a0a0a0;
-	animation: 0.5s fadeIn1;
-  animation-fill-mode: forwards;
-  top: 0px;
-  left: 0px;  /* important to set this so that toolbar initially renders full width */
-}
-
-@keyframes fadeIn1 {
-  0% {
-    opacity: 0;
-  } 
-  100% {
-    opacity: 1.0;
-  }
-}
-
-.Toolbar-button {
-  font-family:sans-serif;
-  font-size: 16px;
-  width:40px;
-  height: 36px;
-  background-color: white;
-  border-radius: 5px;
-  border: 0px;
-  padding: 1px;
-  margin: 2px;
-}
-
-
-.Toolbar-button:hover {
-  color: white;
-  background: #663676;
-  cursor: pointer;
-}
-
-.Toolbar-button:active {
-  background: #808080;
-  color: white;
-  cursor: pointer;
-}
-
-.TB-narrow {
-  width:30px;
-}
-
-.TB-wide {
-  width:46px;
-}
-
-.TB-up4 {
-  position: relative;
-  top:-4px;
-}
-
-.TB-selected {
-  background: #D0D0D0;
-  color: black;
-  cursor: pointer;
-	animation: 0.2s TB-fadeIn;
-  animation-fill-mode: forwards;
-}
-
-.TB-selected:hover {
-  color: white;
-  background: #663676;
-  cursor: pointer;
-}
-
-@keyframes TB-fadeIn {
-  00% {
-    background: white;
-  } 
-  100% {
-    background: #D0D0D0;
-  }
-}
-
-
-/* Tooltip text */
-.Toolbar-button .tooltiptext {
-  font-weight: normal;
-  visibility: hidden;
-  width: 100px;
-  background-color: #222;
-  color: #fff;
-  /*font-weight: bold;*/
-  font-size: 12px;
-  text-align: center;
-  padding: 4px 10px;
-  border-radius: 6px;
- 
-  /* Position the tooltip text - see examples below! */
-  position: absolute;
-  z-index: 2;
-  top: -90%;  /* Must leave a small gap between tooltip and button */
-  left: 50px;
-
-  /* transform: translate (50%,0%); */
-}
-
-/* Show the tooltip text when you mouse over the tooltip container */
-.Toolbar-button:hover .tooltiptext {
-	animation: 0.8s fadeIn2;
-  animation-fill-mode: forwards;
-  visibility: visible;
-  /* width: 100px; */
-  /* top: -90%; */  /* Must leave a small gap between tooltip and button */
-  /* left: 20%; */
-  /* margin-left: -50px; */
-}
-
-@keyframes fadeIn2 {
-  00% {
-    opacity: 0;
-  } 
-  70% {
-    opacity: 0;
-  } 
-  100% {
-    visibility: visible;
-    opacity: 0.9;
-  }
-}
-
-/* .tooltip {
-  position: relative;
-  display: inline-block;
-  border-bottom: 1px dotted black; /* If you want dots under the hoverable text 
-} */
-
- 
-
 /* Note that the top left position of the accent bar is set programatically in componentDidMount */
 
 .AccentBar {
   position: fixed;
   z-index: 1;
-  width: 348px; /* max of 346px to ensure fits on Moto G4 mobile device screens */
-  background-color: red;
+  width: 360px;
+  background-color: #fff;
   border: 1px solid #d0d0d0;
   border-radius: 5px;
   box-shadow: 1px 1px 5px #a0a0a0;
@@ -402,11 +255,10 @@ input:checked + .slider:before {
 .AccentBar-outerContainer {
   overflow-y: scroll;
   border-radius: 5px;
-  overflow: overlay;
 }
 
 .AccentBar-innerContainer {
-  height: 350px; /* Height of overall box */
+  height: 350px;
 }
 
 @keyframes fadeIn1 {
@@ -418,7 +270,19 @@ input:checked + .slider:before {
   }
 }
 
+.AccentBar .symbols-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
+  grid-auto-rows: minmax(min-content, max-content);
+  grid-gap: 3px;
+}
+
+.AccentBar .insert-grid {
+  padding: 5px;
+}
+
 .AccentBar .type-a-letter {
+  grid-column: 1/-1;
   color: #a0a0a0;
   font-family: sans-serif;
   font-size: 14px;
@@ -437,7 +301,6 @@ input:checked + .slider:before {
   border-radius: 5px;
   border: 0px;
   padding: 1px;
-  margin: 6px;
 }
 
 .AB-compact {
@@ -446,11 +309,10 @@ input:checked + .slider:before {
 }
 
 .AB-narrow {
-  width: 30px;
+  width: 36px;
 }
 
 .AccentBar-button:hover {
-  /* filter: saturate(2.0); */
   color: white;
   background: #663676;
   cursor: pointer;
@@ -488,8 +350,7 @@ input:checked + .slider:before {
   background: white;
   text-align: left;
   border: 0px;
-  padding: 0px 0px 10px 0px;
-  margin: 5px;
+  padding: 10px 0;
 }
 
 .AccentBar .tab {
@@ -521,9 +382,9 @@ input:checked + .slider:before {
 }
 
 .AccentBar .section-label {
+  grid-column: 1/-1;
   font-size: 13px;
   font-weight: bold;
-  /* color: #A0A0A0; */
   color: #663676;
   margin-top: 8px;
   margin-left: 8px;
@@ -538,8 +399,139 @@ input:checked + .slider:before {
   animation: 0.4s fadeIn1;
   animation-fill-mode: forwards;
 }
+/* Note that the top left position of the toolbar is set programatically in componentDidMount */
+
+.Toolbar {
+  position: fixed;
+  z-index: 1;
+  display: flex;
+  height: 42px;
+  background-color: white;
+  border: 1px solid #d0d0d0;
+  border-radius: 5px;
+  box-shadow: 1px 1px 5px #a0a0a0;
+  animation: 0.5s fadeIn1;
+  animation-fill-mode: forwards;
+  top: 0px;
+  left: 0px; /* important to set this so that toolbar initially renders full width */
+}
+
+@keyframes fadeIn1 {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.Toolbar-button {
+  font-family: sans-serif;
+  font-size: 16px;
+  width: 40px;
+  height: 36px;
+  background-color: white;
+  border-radius: 5px;
+  border: 0px;
+  padding: 1px;
+  margin: 2px;
+}
+
+.Toolbar-button:hover {
+  color: white;
+  background: #663676;
+  cursor: pointer;
+}
+
+.Toolbar-button:active {
+  background: #808080;
+  color: white;
+  cursor: pointer;
+}
+
+.TB-narrow {
+  width: 30px;
+}
+
+.TB-wide {
+  width: 46px;
+}
+
+.TB-selected {
+  background: #d0d0d0;
+  color: black;
+  cursor: pointer;
+  animation: 0.2s TB-fadeIn;
+  animation-fill-mode: forwards;
+}
+
+.TB-selected:hover {
+  color: white;
+  background: #663676;
+  cursor: pointer;
+}
+
+@keyframes TB-fadeIn {
+  00% {
+    background: white;
+  }
+  100% {
+    background: #d0d0d0;
+  }
+}
+
+/* Tooltip text */
+.Toolbar-button .tooltiptext {
+  font-weight: normal;
+  visibility: hidden;
+  width: 100px;
+  background-color: #222;
+  color: #fff;
+  /*font-weight: bold;*/
+  font-size: 12px;
+  text-align: center;
+  padding: 4px 10px;
+  border-radius: 6px;
+
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 2;
+  top: -90%; /* Must leave a small gap between tooltip and button */
+  left: 50px;
+
+  /* transform: translate (50%,0%); */
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.Toolbar-button:hover .tooltiptext {
+  animation: 0.8s fadeIn2;
+  animation-fill-mode: forwards;
+  visibility: visible;
+  /* width: 100px; */
+  /* top: -90%; */ /* Must leave a small gap between tooltip and button */
+  /* left: 20%; */
+  /* margin-left: -50px; */
+}
+
+@keyframes fadeIn2 {
+  00% {
+    opacity: 0;
+  }
+  70% {
+    opacity: 0;
+  }
+  100% {
+    visibility: visible;
+    opacity: 0.9;
+  }
+}
+
+/* .tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black; /* If you want dots under the hoverable text 
+} */
 .EquationEditor {
-  /* max-width:500px; */
   height: auto;
   text-align: center;
 }
@@ -625,7 +617,7 @@ input:checked + .slider:before {
   border-radius: 5px;
   /* height:36px; */
   padding: 7px 10px 4px 10px;
-  margin: 5px 15px 5px 15px;
+  margin: 5px 15px;
 }
 
 .EquationEditor .latexInput {
@@ -710,6 +702,12 @@ input:checked + .slider:before {
   margin: 5px;
 }
 
+@media (max-width: 500px) {
+  .EquationEditor .tabBar {
+    padding: 5px 0;
+  }
+}
+
 .EquationEditor .tab {
   font-size: 14px;
   font-weight: bold;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zzish/math-rich-input",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "React component for user to enter rich text with embedded math equations.",
   "repository": {
     "type": "git",

package/src/AccentBar.css

@@ -3,8 +3,8 @@
 .AccentBar {
   position: fixed;
   z-index: 1;
-  width: 348px; /* max of 346px to ensure fits on Moto G4 mobile device screens */
-  background-color: red;
+  width: 360px;
+  background-color: #fff;
   border: 1px solid #d0d0d0;
   border-radius: 5px;
   box-shadow: 1px 1px 5px #a0a0a0;
@@ -30,11 +30,10 @@
 .AccentBar-outerContainer {
   overflow-y: scroll;
   border-radius: 5px;
-  overflow: overlay;
 }
 
 .AccentBar-innerContainer {
-  height: 350px; /* Height of overall box */
+  height: 350px;
 }
 
 @keyframes fadeIn1 {
@@ -46,7 +45,19 @@
   }
 }
 
+.AccentBar .symbols-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
+  grid-auto-rows: minmax(min-content, max-content);
+  grid-gap: 3px;
+}
+
+.AccentBar .insert-grid {
+  padding: 5px;
+}
+
 .AccentBar .type-a-letter {
+  grid-column: 1/-1;
   color: #a0a0a0;
   font-family: sans-serif;
   font-size: 14px;
@@ -65,7 +76,6 @@
   border-radius: 5px;
   border: 0px;
   padding: 1px;
-  margin: 6px;
 }
 
 .AB-compact {
@@ -74,11 +84,10 @@
 }
 
 .AB-narrow {
-  width: 30px;
+  width: 36px;
 }
 
 .AccentBar-button:hover {
-  /* filter: saturate(2.0); */
   color: white;
   background: #663676;
   cursor: pointer;
@@ -116,8 +125,7 @@
   background: white;
   text-align: left;
   border: 0px;
-  padding: 0px 0px 10px 0px;
-  margin: 5px;
+  padding: 10px 0;
 }
 
 .AccentBar .tab {
@@ -149,9 +157,9 @@
 }
 
 .AccentBar .section-label {
+  grid-column: 1/-1;
   font-size: 13px;
   font-weight: bold;
-  /* color: #A0A0A0; */
   color: #663676;
   margin-top: 8px;
   margin-left: 8px;