@zzish/math-rich-input 0.1.5 → 0.1.6

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,27 +201,26 @@
   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 */
@@ -233,31 +228,31 @@ input:checked + .slider:before {
 .Toolbar {
   position: fixed;
   z-index: 1;
-  /* width:270px; */
-  height:42px;
+  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: 0.5s fadeIn1;
   animation-fill-mode: forwards;
   top: 0px;
-  left: 0px;  /* important to set this so that toolbar initially renders full width */
+  left: 0px; /* important to set this so that toolbar initially renders full width */
 }
 
 @keyframes fadeIn1 {
   0% {
     opacity: 0;
-  } 
+  }
   100% {
-    opacity: 1.0;
+    opacity: 1;
   }
 }
 
 .Toolbar-button {
-  font-family:sans-serif;
+  font-family: sans-serif;
   font-size: 16px;
-  width:40px;
+  width: 40px;
   height: 36px;
   background-color: white;
   border-radius: 5px;
@@ -266,7 +261,6 @@ input:checked + .slider:before {
   margin: 2px;
 }
 
-
 .Toolbar-button:hover {
   color: white;
   background: #663676;
@@ -280,23 +274,23 @@ input:checked + .slider:before {
 }
 
 .TB-narrow {
-  width:30px;
+  width: 30px;
 }
 
 .TB-wide {
-  width:46px;
+  width: 46px;
 }
 
 .TB-up4 {
   position: relative;
-  top:-4px;
+  top: -4px;
 }
 
 .TB-selected {
-  background: #D0D0D0;
+  background: #d0d0d0;
   color: black;
   cursor: pointer;
-	animation: 0.2s TB-fadeIn;
+  animation: 0.2s TB-fadeIn;
   animation-fill-mode: forwards;
 }
 
@@ -309,13 +303,12 @@ input:checked + .slider:before {
 @keyframes TB-fadeIn {
   00% {
     background: white;
-  } 
+  }
   100% {
-    background: #D0D0D0;
+    background: #d0d0d0;
   }
 }
 
-
 /* Tooltip text */
 .Toolbar-button .tooltiptext {
   font-weight: normal;
@@ -328,11 +321,11 @@ input:checked + .slider:before {
   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 */
+  top: -90%; /* Must leave a small gap between tooltip and button */
   left: 50px;
 
   /* transform: translate (50%,0%); */
@@ -340,11 +333,11 @@ input:checked + .slider:before {
 
 /* Show the tooltip text when you mouse over the tooltip container */
 .Toolbar-button:hover .tooltiptext {
-	animation: 0.8s fadeIn2;
+  animation: 0.8s fadeIn2;
   animation-fill-mode: forwards;
   visibility: visible;
   /* width: 100px; */
-  /* top: -90%; */  /* Must leave a small gap between tooltip and button */
+  /* top: -90%; */ /* Must leave a small gap between tooltip and button */
   /* left: 20%; */
   /* margin-left: -50px; */
 }
@@ -352,10 +345,10 @@ input:checked + .slider:before {
 @keyframes fadeIn2 {
   00% {
     opacity: 0;
-  } 
+  }
   70% {
     opacity: 0;
-  } 
+  }
   100% {
     visibility: visible;
     opacity: 0.9;
@@ -367,16 +360,13 @@ input:checked + .slider:before {
   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 +392,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 +407,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 +438,6 @@ input:checked + .slider:before {
   border-radius: 5px;
   border: 0px;
   padding: 1px;
-  margin: 6px;
 }
 
 .AB-compact {
@@ -446,11 +446,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 +487,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 +519,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;
@@ -539,7 +537,6 @@ input:checked + .slider:before {
   animation-fill-mode: forwards;
 }
 .EquationEditor {
-  /* max-width:500px; */
   height: auto;
   text-align: center;
 }
@@ -625,7 +622,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 +707,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.6",
   "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;