2 files changed, 76 insertions(+), 4 deletions(-)

M static/boggle.css
M templates/boggle/view.html

@@ 376,3 376,65 @@ svg.ct-chart-bar, svg.ct-chart-line{
       height: 70vw;
   }
 }
+
+
+
+label.switch {
+  position: relative;
+  display: inline-block;
+  width: 30px;
+  height: 17px;
+}
+
+label.switch input { 
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+label.switch span.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+label.switch span.slider:before {
+  position: absolute;
+  content: "";
+  height: 13px;
+  width: 13px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+label.switch input:checked + span.slider {
+  background-color: #2196F3;
+}
+
+label.switch input:focus + span.slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+label.switch input:checked + span.slider:before {
+  -webkit-transform: translateX(13px);
+  -ms-transform: translateX(13px);
+  transform: translateX(13px);
+}
+
+/* Rounded sliders */
+label.switch span.slider.round {
+  border-radius: 17px;
+}
+
+label.switch span.slider.round:before {
+  border-radius: 50%;
+}

@@ 69,8 69,12 @@
                 </form>
                 <br/>
                 Display words:
-                <button onclick="app.parallelView = true;">Parallel</button>
-                <button onclick="app.parallelView = false;">Chronological</button>
+                Parallel
+                <label class="switch">
+                    <input type="checkbox" onclick="app.parallelView = this.checked;">
+                    <span class="slider round"></span>
+                </label>
+                Chronological
             <table class="grayTable" style="white-space: nowrap;" v-if="game != undefined">
                 <thead>
                     <tr>


@@ 132,8 136,14 @@
                 All [[ game.maxWords ]] possible words for this board.<br/>
                 Hover/Tap a word to see the definition.<br/>
                 Sort by:
-                <button onclick="app.sortByPoints = true;">Points</button>
-                <button onclick="app.sortByPoints = false;">Alphabetical</button>
+                Points
+                <label class="switch">
+                    <input type="checkbox" onclick="app.sortByPoints = !this.checked;">
+                    <span class="slider round"></span>
+                </label>
+                Alphabetical
+                <!-- <button onclick="app.sortByPoints = true;">Points</button>
+                <button onclick="app.sortByPoints = false;">Alphabetical</button> -->
                 <br/><br/>
                 <span v-if="sortByPoints"><span v-for="word in wordsPointsByPoints">
                     <span @mouseenter="wordHoverStart(word[0])" @mouseleave="wordHoverEnd(word[0])" :style="found.includes(word[0]) ? 'color:green; font-weight:bold' : ''">